Grade comments: dropdown matches input width, compact tone select, responsive wrap
This commit is contained in:
@@ -304,11 +304,14 @@ code.code { padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-family: monos
|
||||
.chip-neu { background: #5d6570; color: #fff; }
|
||||
.chip-neg { background: #b3283b; color: #fff; }
|
||||
/* Слоты комментариев в диалоге */
|
||||
.cs-row { display: flex; gap: 6px; align-items: center; position: relative; }
|
||||
.cs-row .cs-text { flex: 1 1 auto; min-width: 0; }
|
||||
.cs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||||
.cs-text-wrap { position: relative; flex: 1 1 12rem; min-width: 0; }
|
||||
.cs-text-wrap .cs-text { width: 100%; }
|
||||
.cs-row .cs-tone, .cs-row .btn { flex: 0 0 auto; }
|
||||
.cs-tone { max-width: 9rem; }
|
||||
.ac-list {
|
||||
position: absolute; left: 0; top: 100%; margin-top: 2px; z-index: 20;
|
||||
min-width: 100%; max-height: 14rem; overflow-y: auto;
|
||||
position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; z-index: 20;
|
||||
max-height: 14rem; overflow-y: auto;
|
||||
background: var(--c-surface); border: 1px solid var(--c-border);
|
||||
border-radius: 0.4rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@@ -35,14 +35,19 @@ function csRow(text, tone) {
|
||||
var row = document.createElement('div');
|
||||
row.className = 'cs-row';
|
||||
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'cs-text-wrap';
|
||||
|
||||
var inp = document.createElement('input');
|
||||
inp.className = 'input cs-text';
|
||||
inp.placeholder = 'Комментарий';
|
||||
inp.value = text || '';
|
||||
wrap.appendChild(inp);
|
||||
|
||||
var sel = document.createElement('select');
|
||||
sel.className = 'input cs-tone';
|
||||
[['positive', '+ позитивный'], ['negative', '— негативный'], ['neutral', '○ нейтральный']].forEach(function (o) {
|
||||
sel.title = 'Тональность комментария';
|
||||
[['positive', '+ позитив'], ['negative', '— негатив'], ['neutral', '○ нейтрал']].forEach(function (o) {
|
||||
var op = document.createElement('option');
|
||||
op.value = o[0];
|
||||
op.textContent = o[1];
|
||||
@@ -56,7 +61,7 @@ function csRow(text, tone) {
|
||||
rm.textContent = 'удалить';
|
||||
rm.onclick = function () { row.remove(); };
|
||||
|
||||
row.appendChild(inp);
|
||||
row.appendChild(wrap);
|
||||
row.appendChild(sel);
|
||||
row.appendChild(rm);
|
||||
box.appendChild(row);
|
||||
@@ -138,7 +143,8 @@ function attachCommentAutocomplete(input) {
|
||||
if (event.target.closest('.ac-del')) return;
|
||||
event.preventDefault();
|
||||
input.value = item.text;
|
||||
var tone = input.parentNode.querySelector('.cs-tone');
|
||||
var rowEl = input.closest('.cs-row');
|
||||
var tone = rowEl ? rowEl.querySelector('.cs-tone') : null;
|
||||
if (tone && item.tone) tone.value = item.tone;
|
||||
hide();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user