feat(entries): move the reveal eye inside the custom-field value
Same placement as the TOTP field, which buys back a column on a dense row: label | value (eye inside) | copy | menu. Pinned top-right on a multiline field so it stays clear of the resize grip.
This commit is contained in:
+20
-3
@@ -1592,12 +1592,28 @@ input[type="range"]::-webkit-slider-thumb {
|
|||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
.so-custom-row {
|
.so-custom-row {
|
||||||
/* label | value | eye | copy | row menu */
|
/* label | value (eye inside) | copy | row menu */
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1.4fr auto auto auto;
|
grid-template-columns: 1fr 1.4fr auto auto;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
/* The reveal eye sits inside the field, like the TOTP one. */
|
||||||
|
.so-custom-value-wrap { position: relative; display: flex; min-width: 0; }
|
||||||
|
.so-custom-value-wrap > .so-input,
|
||||||
|
.so-custom-value-wrap > .so-combo { width: 100%; }
|
||||||
|
.so-custom-value-wrap > .so-input { padding-right: 28px; }
|
||||||
|
.so-custom-value-eye {
|
||||||
|
position: absolute;
|
||||||
|
right: 3px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
/* Multiline: pin it to the top corner, clear of the resize grip. */
|
||||||
|
.so-custom-value-wrap.is-multiline .so-custom-value-eye {
|
||||||
|
top: 3px;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
/* The row menu is absolutely positioned inside its wrap; without this the
|
/* The row menu is absolutely positioned inside its wrap; without this the
|
||||||
slideover clips it or it lands under the next row. */
|
slideover clips it or it lands under the next row. */
|
||||||
.so-custom-row .entry-kebab-wrap { position: relative; }
|
.so-custom-row .entry-kebab-wrap { position: relative; }
|
||||||
@@ -1651,9 +1667,10 @@ input[type="range"]::-webkit-slider-thumb {
|
|||||||
.so-combo-item:hover { background: var(--accent); color: #fff; }
|
.so-combo-item:hover { background: var(--accent); color: #fff; }
|
||||||
/* The eye carries the secret state itself — a second toggle beside it read as
|
/* The eye carries the secret state itself — a second toggle beside it read as
|
||||||
a duplicate of the reveal. Flipping the flag lives in the row menu. */
|
a duplicate of the reveal. Flipping the flag lives in the row menu. */
|
||||||
|
/* Cyan marker = the field is STORED as a secret, not merely hidden right now. */
|
||||||
.so-custom-row .icon-btn.is-secret {
|
.so-custom-row .icon-btn.is-secret {
|
||||||
background: var(--accent-soft);
|
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
|
background: var(--accent-soft);
|
||||||
border: 1px solid var(--accent);
|
border: 1px solid var(--accent);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4355,9 +4355,18 @@ function buildCustomFieldRow(field, idx, rerender) {
|
|||||||
kebabWrap.appendChild(kebabBtn);
|
kebabWrap.appendChild(kebabBtn);
|
||||||
kebabWrap.appendChild(kebabMenu);
|
kebabWrap.appendChild(kebabMenu);
|
||||||
|
|
||||||
|
// Eye inside the field rather than beside it (same as the TOTP field): it
|
||||||
|
// buys back a whole column on an already dense row. Top-right, so it never
|
||||||
|
// sits on the textarea's resize grip.
|
||||||
|
const valueWrap = el('div', {
|
||||||
|
class: 'so-custom-value-wrap' + (field.multiline ? ' is-multiline' : ''),
|
||||||
|
});
|
||||||
|
valueWrap.appendChild(valueSlot);
|
||||||
|
eye.classList.add('so-custom-value-eye');
|
||||||
|
valueWrap.appendChild(eye);
|
||||||
|
|
||||||
row.appendChild(labelInput);
|
row.appendChild(labelInput);
|
||||||
row.appendChild(valueSlot);
|
row.appendChild(valueWrap);
|
||||||
row.appendChild(eye);
|
|
||||||
row.appendChild(copyBtn);
|
row.appendChild(copyBtn);
|
||||||
row.appendChild(kebabWrap);
|
row.appendChild(kebabWrap);
|
||||||
applySecretState();
|
applySecretState();
|
||||||
|
|||||||
Reference in New Issue
Block a user