Bug 1825013 - Add the spam indicator to the vertical view. r=aleca
Differential Revision:
https://phabricator.services.mozilla.com/D173844
--- a/mail/base/content/about3Pane.js
+++ b/mail/base/content/about3Pane.js
@@ -2967,17 +2967,17 @@ var threadPane = {
densityChange() {
// The class ThreadRow can't be referenced because it's declared in a
// different scope. But we can get it from customElements.
let rowClass = customElements.get("thread-row");
let cardClass = customElements.get("thread-card");
switch (UIDensity.prefValue) {
case UIDensity.MODE_COMPACT:
rowClass.ROW_HEIGHT = 18;
- cardClass.ROW_HEIGHT = 38;
+ cardClass.ROW_HEIGHT = 40;
break;
case UIDensity.MODE_TOUCH:
rowClass.ROW_HEIGHT = 32;
cardClass.ROW_HEIGHT = 52;
break;
default:
rowClass.ROW_HEIGHT = 26;
cardClass.ROW_HEIGHT = 46;
--- a/mail/base/content/about3Pane.xhtml
+++ b/mail/base/content/about3Pane.xhtml
@@ -220,16 +220,19 @@
<template id="threadPaneCardTemplate">
<td>
<div class="thread-card-container">
<div class="thread-card-row">
<span class="sender"></span>
<img class="state replied" src="" data-l10n-id="threadpane-message-replied" />
<img class="state forwarded" src="" data-l10n-id="threadpane-message-forwarded" />
<img class="state redirected" src="" data-l10n-id="threadpane-message-redirected" />
+ <button class="button-spam tree-button-spam"
+ data-l10n-id="tree-list-view-row-spam" tabindex="-1">
+ </button>
<span class="date"></span>
</div>
<div class="thread-card-row">
<div class="thread-card-subject-container">
<button type="button"
class="button button-flat button-reset twisty"
tabindex="-1">
<img src="" alt="" class="twisty-icon" />
--- a/mail/themes/shared/mail/threadPane.css
+++ b/mail/themes/shared/mail/threadPane.css
@@ -420,43 +420,78 @@ tr:is([is="thread-row"], [is="thread-car
}
/* Spam column variations */
#junkStatusCol img {
content: var(--icon-spam-sm);
}
-.tree-view-row-spam button {
+:is(.tree-view-row-spam button, .button-spam) {
color: var(--tree-view-color);
opacity: 0.8;
}
.tree-view-row-spam img {
content: var(--icon-spam);
pointer-events: none;
+}
+
+.button-spam {
+ background-image: var(--icon-spam);
+ -moz-context-properties: fill, stroke;
+}
+
+#threadTree tr:is(:not([data-properties~="junk"]), [data-properties~="notjunk"]) .button-spam {
+ display: none;
+}
+
+:is(.tree-view-row-spam img, .button-spam) {
fill: color-mix(in srgb, currentColor 10%, transparent);
stroke: color-mix(in srgb, currentColor 30%, transparent);
}
@media (prefers-color-scheme: dark) {
- .tree-view-row-spam img {
+ :is(.tree-view-row-spam img, .button-spam) {
stroke: color-mix(in srgb, currentColor 40%, transparent);
}
}
-tr[data-properties~="junk"] .tree-view-row-spam > .tree-button-spam > img {
+tr[data-properties~="junk"] :is(.tree-view-row-spam > .tree-button-spam > img, .button-spam) {
fill: var(--thread-pane-spam-fill);
stroke: var(--thread-pane-spam-stroke);
}
-.tree-view-row-spam button:hover {
+:is(.tree-view-row-spam button, .button-spam):hover {
opacity: 1;
}
+/* Vertical view variations */
+#threadTree tr[data-properties~="junk"] :is(.state, .attachment-icon, .button-star) {
+ display: none;
+}
+
+#threadTree tr[data-properties~="junk"] :is(.date, .subject) {
+ color: var(--color-red-60);
+ font-weight: 600;
+}
+
+@media (prefers-color-scheme: dark) {
+ #threadTree tr[data-properties~="junk"] :is(.date, .subject) {
+ color: var(--color-red-40);
+ }
+}
+
+#threadTree [is="tree-view-table-body"]:focus >
+ .selected[data-properties~="junk"] :is(.date, .subject),
+#threadTree [is="tree-view-table-body"] >
+ .selected[data-properties~="junk"]:focus-within :is(.date, .subject) {
+ color: inherit;
+}
+
/* Delete column variations */
/* TODO: Handle delete button color variations for tagged messages */
/* Correspondent column variations */
#correspondentColButton,
.correspondentcol-column {
text-indent: 18px;