Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-15 17:25:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Doc compose: accent prefix labels for each field + Cc btn up 2px

Browse Source 
- Each input now has a sibling .email-field-prefix span (To / Cc /
  Bcc / Subject) absolute-positioned at the left edge in the
  accent color. Inputs get padding-left:44px (64px for Subject)
  so typed text doesn't slide under the prefix.
- Placeholders shrink back to just the example so only the
  prefix gets the accent color, not the example text.
- Cc toggle moved another 2px up (calc(50% + 4px) → calc(50% + 2px)).
This commit is contained in:
pewdiepie-archdaemon
2026-06-13 09:35:21 +09:00
parent 77f00eeab1
commit 0889eb4e01
2 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/document.js
+7 -4
View File
@@ -3851,21 +3851,24 @@ import * as Modals from './modalManager.js';
</button> </button>
<div id="doc-email-fields" class="doc-email-fields"> <div id="doc-email-fields" class="doc-email-fields">
<div class="email-field" style="position:relative"> <div class="email-field" style="position:relative">
<input type="text" id="doc-email-to" placeholder="To recipient@example.com" autocomplete="off" /> <span class="email-field-prefix">To</span>
<input type="text" id="doc-email-to" placeholder="recipient@example.com" autocomplete="off" />
<div id="doc-email-to-suggestions" class="email-autocomplete" style="display:none"></div> <div id="doc-email-to-suggestions" class="email-autocomplete" style="display:none"></div>
<button type="button" id="doc-email-show-cc" class="email-cc-toggle" title="Show Cc/Bcc">Cc</button> <button type="button" id="doc-email-show-cc" class="email-cc-toggle" title="Show Cc/Bcc">Cc</button>
</div> </div>
<div class="email-field" id="doc-email-cc-row" style="display:none;position:relative"> <div class="email-field" id="doc-email-cc-row" style="display:none;position:relative">
<input type="text" id="doc-email-cc" placeholder="Cc cc@example.com, example2" autocomplete="off" /> <span class="email-field-prefix">Cc</span>
<input type="text" id="doc-email-cc" placeholder="cc@example.com, example2" autocomplete="off" />
<div id="doc-email-cc-suggestions" class="email-autocomplete" style="display:none"></div> <div id="doc-email-cc-suggestions" class="email-autocomplete" style="display:none"></div>
<button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button> <button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
</div> </div>
<div class="email-field" id="doc-email-bcc-row" style="display:none;position:relative"> <div class="email-field" id="doc-email-bcc-row" style="display:none;position:relative">
<input type="text" id="doc-email-bcc" placeholder="Bcc bcc@example.com" autocomplete="off" /> <span class="email-field-prefix">Bcc</span>
<input type="text" id="doc-email-bcc" placeholder="bcc@example.com" autocomplete="off" />
<div id="doc-email-bcc-suggestions" class="email-autocomplete" style="display:none"></div> <div id="doc-email-bcc-suggestions" class="email-autocomplete" style="display:none"></div>
<button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button> <button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
</div> </div>
<div class="email-field"><input type="text" id="doc-email-subject" placeholder="Subject" /></div> <div class="email-field" style="position:relative"><span class="email-field-prefix">Subject</span><input type="text" id="doc-email-subject" placeholder="" /></div>
<div id="doc-email-attachments" class="email-attachments" style="display:none"></div> <div id="doc-email-attachments" class="email-attachments" style="display:none"></div>
<div id="doc-email-compose-atts" class="email-compose-atts" style="display:none"></div> <div id="doc-email-compose-atts" class="email-compose-atts" style="display:none"></div>
</div> </div>
static/style.css
+16 -5
View File
@@ -30107,15 +30107,26 @@ body.doc-find-active mark.doc-find-mark.current {
from the To input. Anchored to the input's vertical center + 4px from the To input. Anchored to the input's vertical center + 4px
nudge so the label sits where the user expects it. */ nudge so the label sits where the user expects it. */
.email-field .email-cc-toggle { .email-field .email-cc-toggle {
position: absolute; right: 6px; top: calc(50% + 4px); transform: translateY(-50%); position: absolute; right: 6px; top: calc(50% + 2px); transform: translateY(-50%);
z-index: 2; z-index: 2;
} }
/* Tint the placeholder hint (To / Cc / Bcc + example) accent so /* Accent-tinted prefix label (To / Cc / Bcc / Subject) sitting at
the field names read as a label even without the <label> tag. */ the left edge of each input. Replaces both the old <label> tag
.email-field input::placeholder { and the all-placeholder accent. */
.email-field .email-field-prefix {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
font-weight: 600;
color: var(--accent-primary, var(--red)); color: var(--accent-primary, var(--red));
opacity: 0.65; pointer-events: none;
z-index: 1;
line-height: 1;
} }
.email-field input { padding-left: 44px; }
.email-field #doc-email-subject { padding-left: 64px; }
/* X close button inside Cc / Bcc fields. */ /* X close button inside Cc / Bcc fields. */
.email-field .email-cc-close { .email-field .email-cc-close {
position: absolute; right: 6px; top: calc(50% + 2px); transform: translateY(-50%); position: absolute; right: 6px; top: calc(50% + 2px); transform: translateY(-50%);