Add icons for spoiler, nsfw and flair.

Fix #134
OctoNezd · Mar 26, 2024 · 1f79912 · 1f79912
1 parent b095849
commit 1f79912
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 9 deletions.
diff --git a/src/css/redditChanges.css b/src/css/redditChanges.css
@@ -222,3 +222,6 @@ body.prevent-scroll {
     pointer-events: all;
     padding: 3px;
 }
+.spoiler-stamp {
+    color: var(--md-sys-color-tertiary);
+}
diff --git a/src/features/posts/buttonHide.ts b/src/features/posts/buttonHide.ts
@@ -59,11 +59,32 @@ export default class ButtonHide extends OLFeature {
                     const buttonProxy = document.createElement("a");
                     buttonProxy.classList.add("modalMenuElement");
                     buttonProxy.href = "javascript:void(0)";
-                    buttonProxy.onclick = (e) => {
+                    buttonProxy.onclick = async (e) => {
                         document.dispatchEvent(new Event("closeOlModal"));
-                        button.querySelector("a")?.click();
+                        const clickable = button.querySelector("a");
+                        if (clickable === null) {
+                            return;
+                        }
+                        clickable.click();
+                        if (clickable.classList.contains("flairselectbtn")) {
+                            // wait for reddit to actually make the thing, hopefully 300ms would be enough.
+                            // TODO: swap this with querySelectorAsync?
+                            await new Promise((r) => setTimeout(r, 300));
+                            // need to manually activate flair selector
+                            const selector = button.querySelector(
+                                ".flairselector.drop-choices"
+                            );
+                            if (selector === null) {
+                                return;
+                            }
+                            selector.classList.add("active");
+                        }
                     };
-                    buttonProxy.innerText = button.textContent!.toString();
+                    const buttonText = button.querySelector("a")?.innerText;
+                    if (buttonText === undefined) {
+                        continue;
+                    }
+                    buttonProxy.innerText = buttonText;
                     modalContents.appendChild(buttonProxy);
                 }
             }

diff --git a/src/features/posts/css/buttonHide.scss b/src/features/posts/css/buttonHide.scss
@@ -2,16 +2,29 @@
     content: "more_vert";
 }
 .hideButtons {
-    .report-button, li:has(.hide-button), .crosspost-button {
+    .report-button,
+    li:has(.hide-button),
+    .crosspost-button,
+    li:has(
+            .marknsfw-button,
+            .unmarknsfw-button,
+            .spoiler-button,
+            .unspoiler-button,
+            .flairselectbtn
+        ) {
         display: none !important;
     }
+    li:has(.error.active),
+    li:has(.flairoptionpane) {
+        display: block !important;
+    }
 }
 .commentCount::after {
-    content: " comments "
+    content: " comments ";
 }
 .commentCount.commentCount-singular::after {
-    content: " comment "
+    content: " comment ";
 }
-.commentCount::before { 
+.commentCount::before {
     content: " • ";
-}
+}
diff --git a/src/features/posts/css/postIcons.css b/src/features/posts/css/postIcons.css
@@ -85,7 +85,12 @@ html:not(.showCommentCountOnButton) .comments {
 .sendreplies-button a.togglebutton,
 .del-button a.togglebutton,
 .riok-share,
-.modal-spawner {
+.modal-spawner,
+.unmarknsfw-button a:not(.yes, .no),
+.marknsfw-button a:not(.yes, .no),
+.spoiler-button a:not(.yes, .no),
+.unspoiler-button a:not(.yes, .no),
+.flairselectbtn {
     font-size: 0px !important;
 }
 .save-button a::before,
@@ -151,7 +156,26 @@ a[data-text="show all child comments"]::before,
 .del-button .togglebutton::before {
     content: "delete";
 }
+.unmarknsfw-button a:not(.yes, .no)::before {
+    content: "family_link";
+}
+.marknsfw-button a:not(.yes, .no)::before {
+    content: "18_up_rating";
+}
+.spoiler-button a:not(.yes, .no)::before {
+    content: "blur_on";
+}
+.spoiler-button a:not(.yes, .no)::before {
+    content: "deblur";
+}
+.flairselectbtn::before {
+    content: "label";
+}
 
+.flairselection a {
+    display: inline !important;
+    font-size: 1em !important;
+}
 div.thumbnail {
     margin: 0;
     min-width: 75px;