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

Email reader: actions inline on the From row

Browse Source 
With the meta collapsed to a single visible From row + chevron,
there is room to put the action cluster on that same row as a
right-aligned sibling. Dropped the absolute positioning and
gradient-fade overlap — actions now flex-end via margin-left:auto
so From sits on the left and Reply / Reply-all / Forward / AI /
Summary / More all sit on the right of the same row.

Also moved the chevron inside the recipient-chips span so it sits
adjacent to the sender chip instead of wrapping onto a second line.
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 19:23:34 +09:00
parent 90acad0d4b
commit 4bf389ed09
2 changed files with 8 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/emailLibrary.js
+3 -3
View File
@@ -2901,7 +2901,7 @@ async function _toggleCardPreview(card, em) {
reader.innerHTML = ` reader.innerHTML = `
<div class="email-reader-header"> <div class="email-reader-header">
<div class="email-reader-meta"> <div class="email-reader-meta">
<div class="email-reader-meta-row email-reader-meta-from"><strong>From:</strong><span class="recipient-chips">${fromChip}</span>${(data.to || data.cc) ? `<button class="email-reader-meta-toggle" type="button" aria-expanded="false" title="Show recipients"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>` : ''}</div> <div class="email-reader-meta-row email-reader-meta-from"><strong>From:</strong><span class="recipient-chips">${fromChip}${(data.to || data.cc) ? `<button class="email-reader-meta-toggle" type="button" aria-expanded="false" title="Show recipients"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>` : ''}</span></div>
${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden> ${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden>
${data.to ? `<div class="email-reader-meta-row"><strong>To:</strong><span class="recipient-chips">${buildRecipients(data.to)}</span></div>` : ''} ${data.to ? `<div class="email-reader-meta-row"><strong>To:</strong><span class="recipient-chips">${buildRecipients(data.to)}</span></div>` : ''}
${data.cc ? `<div class="email-reader-meta-row"><strong>Cc:</strong><span class="recipient-chips">${buildRecipients(data.cc)}</span></div>` : ''} ${data.cc ? `<div class="email-reader-meta-row"><strong>Cc:</strong><span class="recipient-chips">${buildRecipients(data.cc)}</span></div>` : ''}
@@ -4599,7 +4599,7 @@ async function _openEmailAsTab(em, folder) {
reader.innerHTML = ` reader.innerHTML = `
<div class="email-reader-header"> <div class="email-reader-header">
<div class="email-reader-meta"> <div class="email-reader-meta">
<div class="email-reader-meta-row email-reader-meta-from"><strong>From:</strong><span class="recipient-chips">${fromChip}</span>${(data.to || data.cc) ? `<button class="email-reader-meta-toggle" type="button" aria-expanded="false" title="Show recipients"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>` : ''}</div> <div class="email-reader-meta-row email-reader-meta-from"><strong>From:</strong><span class="recipient-chips">${fromChip}${(data.to || data.cc) ? `<button class="email-reader-meta-toggle" type="button" aria-expanded="false" title="Show recipients"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>` : ''}</span></div>
${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden> ${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden>
${data.to ? `<div class="email-reader-meta-row"><strong>To:</strong><span class="recipient-chips">${buildChips(data.to)}</span></div>` : ''} ${data.to ? `<div class="email-reader-meta-row"><strong>To:</strong><span class="recipient-chips">${buildChips(data.to)}</span></div>` : ''}
${data.cc ? `<div class="email-reader-meta-row"><strong>Cc:</strong><span class="recipient-chips">${buildChips(data.cc)}</span></div>` : ''} ${data.cc ? `<div class="email-reader-meta-row"><strong>Cc:</strong><span class="recipient-chips">${buildChips(data.cc)}</span></div>` : ''}
@@ -4756,7 +4756,7 @@ async function _openEmailWindow(em, folder) {
bodyEl.innerHTML = ` bodyEl.innerHTML = `
<div class="email-reader-header"> <div class="email-reader-header">
<div class="email-reader-meta"> <div class="email-reader-meta">
<div class="email-reader-meta-row email-reader-meta-from"><strong>From:</strong><span class="recipient-chips">${fromChip}</span>${(data.to || data.cc) ? `<button class="email-reader-meta-toggle" type="button" aria-expanded="false" title="Show recipients"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>` : ''}</div> <div class="email-reader-meta-row email-reader-meta-from"><strong>From:</strong><span class="recipient-chips">${fromChip}${(data.to || data.cc) ? `<button class="email-reader-meta-toggle" type="button" aria-expanded="false" title="Show recipients"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>` : ''}</span></div>
${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden> ${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden>
${data.to ? `<div class="email-reader-meta-row"><strong>To:</strong><span class="recipient-chips">${_chipsFor(data.to)}</span></div>` : ''} ${data.to ? `<div class="email-reader-meta-row"><strong>To:</strong><span class="recipient-chips">${_chipsFor(data.to)}</span></div>` : ''}
${data.cc ? `<div class="email-reader-meta-row"><strong>Cc:</strong><span class="recipient-chips">${_chipsFor(data.cc)}</span></div>` : ''} ${data.cc ? `<div class="email-reader-meta-row"><strong>Cc:</strong><span class="recipient-chips">${_chipsFor(data.cc)}</span></div>` : ''}
static/style.css
+5 -29
View File
@@ -4651,12 +4651,8 @@ body.bg-pattern-sparkles {
.email-window-modal .email-reader-header { .email-window-modal .email-reader-header {
padding: 8px 8px !important; padding: 8px 8px !important;
gap: 6px !important; gap: 6px !important;
/* From/To/Cc on the LEFT, actions cluster floats top-RIGHT.
Recipient chip rows scroll horizontally and slide under
the action cluster when they overflow. */
flex-direction: row !important; flex-direction: row !important;
align-items: flex-start !important; align-items: center !important;
position: relative !important;
} }
#email-lib-modal .email-reader-actions, #email-lib-modal .email-reader-actions,
.email-reader-tab-modal .email-reader-actions, .email-reader-tab-modal .email-reader-actions,
@@ -4667,14 +4663,8 @@ body.bg-pattern-sparkles {
align-items: center !important; align-items: center !important;
gap: 4px !important; gap: 4px !important;
flex-shrink: 0 !important; flex-shrink: 0 !important;
position: absolute !important; margin-left: auto !important;
top: 6px !important;
right: 6px !important;
z-index: 2 !important;
margin-left: 0 !important;
order: 0 !important; order: 0 !important;
background: linear-gradient(to right, transparent 0, var(--bg) 16px) !important;
padding-left: 18px !important;
} }
#email-lib-modal .email-reader-actions-row, #email-lib-modal .email-reader-actions-row,
.email-reader-tab-modal .email-reader-actions-row, .email-reader-tab-modal .email-reader-actions-row,
@@ -4701,7 +4691,7 @@ body.bg-pattern-sparkles {
grid-template-columns: none !important; grid-template-columns: none !important;
align-items: center !important; align-items: center !important;
gap: 6px !important; gap: 6px !important;
padding-right: 110px !important; padding-right: 0 !important;
min-width: 0 !important; min-width: 0 !important;
} }
#email-lib-modal .email-reader-meta-row .recipient-chips, #email-lib-modal .email-reader-meta-row .recipient-chips,
@@ -28008,26 +27998,15 @@ button .spinner-whirlpool {
.email-reader-header { .email-reader-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: center;
gap: 12px; gap: 12px;
padding: 10px 14px; padding: 10px 14px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: var(--bg); background: var(--bg);
flex-shrink: 0; flex-shrink: 0;
/* Actions cluster absolute-positions inside the header so it can
layer ABOVE long recipient lists — chips that don't fit slide
underneath and the user can drag-scroll the row to reveal them. */
position: relative;
} }
.email-reader-header > .email-reader-actions { .email-reader-header > .email-reader-actions {
position: absolute; margin-left: auto;
top: 8px;
right: 8px;
z-index: 2;
/* Subtle gradient fade so chips poking out from underneath aren't
visually clipped — they fade into the actions area. */
background: linear-gradient(to right, transparent 0, var(--bg) 18px);
padding-left: 22px;
} }
/* Meta block stacks the From / To / Cc rows; each row keeps label /* Meta block stacks the From / To / Cc rows; each row keeps label
tight to its chip(s) on the same line. The recipient-chips inside tight to its chip(s) on the same line. The recipient-chips inside
@@ -28055,9 +28034,6 @@ button .spinner-whirlpool {
align-items: center; align-items: center;
gap: 6px; gap: 6px;
min-width: 0; min-width: 0;
/* Reserve space on the right so chips don't sit fully under the
floating action cluster on first paint. */
padding-right: 180px;
} }
/* Gmail-style chevron — collapsed view shows only From; the chevron /* Gmail-style chevron — collapsed view shows only From; the chevron
reveals the To/Cc details inline below. */ reveals the To/Cc details inline below. */