Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(entries): fold the secret toggle into a per-field row menu

Browse Source 
The lock button sat next to the eye and both masked the value, so they read as the same control. The eye now carries the state - cyan ring when the field is stored as secret - and flipping the flag moved into a row menu alongside Remove field, one deliberate step away from the everyday reveal. The row drops from six columns to five.

The menu reuses the card kebab classes, so closing it on an outside click is already handled.
This commit is contained in:
r-zakarya
2026-08-01 11:47:25 +01:00
parent 6705a8b478
commit a0a069c7f6
2 changed files with 61 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+11 -14
View File
@@ -1592,11 +1592,16 @@ input[type="range"]::-webkit-slider-thumb {
margin-top: 6px;
}
.so-custom-row {
/* label | value | eye | copy | row menu */
display: grid;
grid-template-columns: 1fr 1.4fr auto auto auto auto;
grid-template-columns: 1fr 1.4fr auto auto auto;
gap: 4px;
align-items: center;
}
/* The row menu is absolutely positioned inside its wrap; without this the
slideover clips it or it lands under the next row. */
.so-custom-row .entry-kebab-wrap { position: relative; }
.so-custom-row .entry-kebab-menu { right: 0; }
.so-custom-row .so-input {
padding: 4px 8px;
font-size: 12px;
@@ -1644,21 +1649,13 @@ input[type="range"]::-webkit-slider-thumb {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.so-combo-item:hover { background: var(--accent); color: #fff; }
.so-custom-secret-toggle {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
width: 28px; height: 28px;
cursor: pointer;
color: var(--text-dim);
font-size: 13px;
line-height: 1;
padding: 0;
}
.so-custom-secret-toggle.is-on {
/* 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. */
.so-custom-row .icon-btn.is-secret {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
border: 1px solid var(--accent);
border-radius: 4px;
}
.so-custom-add {
margin-top: 8px;