diff --git a/web/src/components/AppSidebar.vue b/web/src/components/AppSidebar.vue index 546e9f8..c9a7fc1 100644 --- a/web/src/components/AppSidebar.vue +++ b/web/src/components/AppSidebar.vue @@ -169,7 +169,13 @@ async function onInboxChange(change: ColumnChange) { placeholder="New card" aria-label="New card" /> - + diff --git a/web/src/components/StatusManager.vue b/web/src/components/StatusManager.vue index 4a89192..b557645 100644 --- a/web/src/components/StatusManager.vue +++ b/web/src/components/StatusManager.vue @@ -175,7 +175,13 @@ useDialog(computed(() => pendingDelete.value !== null), cancelReassign, reassign placeholder="Status name" aria-label="Status name" /> - +
{{ addStatusError.message }}
diff --git a/web/src/style.css b/web/src/style.css index 96f55b0..961a25b 100644 --- a/web/src/style.css +++ b/web/src/style.css @@ -824,7 +824,10 @@ h1 { margin-top: 0.75rem; } -.field-row button[type='submit'] { +/* :not(.btn-icon) -- an icon button (see below) sets its own compact size; + without the exclusion this would win the tie against it (same specificity, + later in the file) the same way ".form input" once beat "input:focus". */ +.field-row button[type='submit']:not(.btn-icon) { flex: none; padding: 0.4rem 0.7rem; font-size: 0.9rem; @@ -927,13 +930,6 @@ h1 { margin-top: 0.6rem; } -.kanban__new button[type="submit"] { - flex: none; - padding: 0.4rem 0.7rem; - font-size: 0.9rem; - border-radius: var(--radius-sm); -} - /* --- confirmation modal --------------------------------------------------- */ .modal { @@ -1020,7 +1016,7 @@ h1 { font-size: 0.9rem; } -button[type="submit"], +button[type="submit"]:not(.btn-icon), .btn-primary { padding: 0.6rem 1rem; border: none; @@ -1037,12 +1033,40 @@ button[type="submit"], text-align: center; } -button[type="submit"]:disabled, +button[type="submit"]:disabled:not(.btn-icon), .btn-primary:disabled { opacity: var(--opacity-disabled); cursor: progress; } +/* A small square icon button -- the compact "add to X" forms (a kanban + column, the inbox, the status list) all used a full "Add" label until + there were enough of them on screen at once to feel cluttered. Excluded + (":not(.btn-icon)" above and on the .field-row/.kanban__new overrides) + rather than out-specificity'd, so it isn't at the mercy of source order -- + the same reasoning as .field's low specificity against input:focus. */ +.btn-icon { + flex: none; + width: 2rem; + height: 2rem; + padding: 0; + border: none; + border-radius: var(--radius-sm); + background: var(--accent); + color: var(--accent-text); + font-size: 1.1rem; + line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.btn-icon:disabled { + opacity: var(--opacity-disabled); + cursor: progress; +} + .link { border: none; background: none; diff --git a/web/src/views/ProjectView.vue b/web/src/views/ProjectView.vue index 956e427..5bec6b5 100644 --- a/web/src/views/ProjectView.vue +++ b/web/src/views/ProjectView.vue @@ -252,9 +252,13 @@ async function onCreateInColumn(column: Column) { placeholder="New card" :aria-label="`New card in ${column.title}`" /> - +