From f538da9a8eaea2562b0bb80bb3908d7fd8254440 Mon Sep 17 00:00:00 2001 From: pewdiepie-archdaemon Date: Sat, 13 Jun 2026 08:40:37 +0900 Subject: [PATCH] Doc compose: X close button inside Cc and Bcc fields MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a per-field X (24x24 SVG, opacity 0.4 → 1 + accent on hover) absolute-positioned at the right edge of each Cc/Bcc field. Click hides both rows, clears their inputs, and restores the Cc opener on the To row. Inputs get padding-right:32px so the close button doesn't overlap typed text. --- static/js/document.js | 34 ++++++++++++++++++++++++++++++++++ static/style.css | 25 ++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/static/js/document.js b/static/js/document.js index 86ecf2880..c6d0e98ed 100644 --- a/static/js/document.js +++ b/static/js/document.js @@ -3860,11 +3860,13 @@ import * as Modals from './modalManager.js'; +
@@ -4489,6 +4491,25 @@ import * as Modals from './modalManager.js'; _syncEmailHeaderSummary(); }); + // Cc/Bcc close — X buttons inside the Cc and Bcc fields hide both + // rows + clear their inputs + restore the Cc opener on the To row. + document.querySelectorAll('[data-cc-close]').forEach(closeBtn => { + closeBtn.addEventListener('click', (ev) => { + ev.stopPropagation(); + const ccRow = document.getElementById('doc-email-cc-row'); + const bccRow = document.getElementById('doc-email-bcc-row'); + const ccInput = document.getElementById('doc-email-cc'); + const bccInput = document.getElementById('doc-email-bcc'); + if (ccRow) ccRow.style.display = 'none'; + if (bccRow) bccRow.style.display = 'none'; + if (ccInput) ccInput.value = ''; + if (bccInput) bccInput.value = ''; + const ccToggle = document.getElementById('doc-email-show-cc'); + if (ccToggle) ccToggle.style.display = ''; + _syncEmailHeaderSummary(); + }); + }); + // Autocomplete for To / Cc / Bcc — typed fragment after the last // comma triggers contact search; Enter / Tab / click on a suggestion // appends ", " so the user can keep typing more recipients. @@ -8527,6 +8548,19 @@ import * as Modals from './modalManager.js'; // `body:has(.doc-editor-pane.doc-fullscreen) .doc-divider-collapse` slides // it into a forced-inside position). Hiding the divider here would hide // the chevron with it. + + // Hide the tab bar during the layout shift so any in-flight smooth + // scroll / reflow doesn't visibly "fly" the active tab across the + // pane as it expands. Restored after the layout settles. + const tabBar = document.getElementById('doc-tab-bar'); + if (tabBar) { + tabBar.style.visibility = 'hidden'; + clearTimeout(tabBar._fsHideTimer); + tabBar._fsHideTimer = setTimeout(() => { + tabBar.style.visibility = ''; + }, 240); + } + if (pane.classList.contains('doc-fullscreen')) { pane.classList.remove('doc-fullscreen'); if (container) container.style.display = ''; diff --git a/static/style.css b/static/style.css index 6402bbf1b..a4d3dcd12 100644 --- a/static/style.css +++ b/static/style.css @@ -30110,8 +30110,25 @@ body.doc-find-active mark.doc-find-mark.current { position: absolute; right: 6px; top: calc(50% + 8px); transform: translateY(-50%); z-index: 2; } +/* X close button inside Cc / Bcc fields. */ +.email-field .email-cc-close { + position: absolute; right: 6px; top: 50%; transform: translateY(-50%); + background: none; border: none; color: var(--fg); + opacity: 0.4; cursor: pointer; + width: 22px; height: 22px; + display: inline-flex; align-items: center; justify-content: center; + border-radius: 4px; + padding: 0; + z-index: 2; +} +.email-field .email-cc-close:hover { + opacity: 1; + color: var(--accent, var(--red)); + background: color-mix(in srgb, currentColor 10%, transparent); +} .email-field input { padding-right: 60px; } -.email-field #doc-email-cc, .email-field #doc-email-bcc, .email-field #doc-email-subject { padding-right: 8px; } +.email-field #doc-email-cc, .email-field #doc-email-bcc { padding-right: 32px; } +.email-field #doc-email-subject { padding-right: 8px; } .doc-email-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; @@ -34088,6 +34105,12 @@ body.notes-mobile-mode.notes-drag-mode .note-card-pin.active { .cal-quickadd-hint .qa-hint-accent { color: var(--accent, var(--red)); } /* ↵ enter glyph in the hint — makes it obvious the field submits on Enter. */ .cal-quickadd-hint .qa-hint-enter { vertical-align: -2px; color: var(--accent, var(--red)); opacity: 0.8; } +/* Cycling example text fades out before swap, then fades back in. */ +.cal-quickadd-hint .qa-hint-example { + display: inline-block; + transition: opacity 0.18s ease; +} +.cal-quickadd-hint .qa-hint-example.qa-hint-fade { opacity: 0; } /* Matching ↵ hint at the right of the event title while it's empty; hidden once editing (the ✓ Done button takes over then). */ /* Title placeholder overlay: the prompt text with a ↵ enter glyph right after