From 73f3977b62f7cedf55d340d46b16c94f18073388 Mon Sep 17 00:00:00 2001 From: Bauke Date: Thu, 13 Jul 2023 16:16:37 +0200 Subject: [PATCH] Add the Topic Info Ignore miscellaneous feature. --- source/content-scripts/features/exports.ts | 3 +- .../features/topic-info-ignore.ts | 35 +++++++++++++++++++ source/content-scripts/setup.tsx | 15 +++++--- source/options/components/miscellaneous.tsx | 9 +++++ source/scss/content-scripts.scss | 1 + source/scss/scripts/_topic-info-ignore.scss | 20 +++++++++++ source/storage/enums.ts | 1 + 7 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 source/content-scripts/features/topic-info-ignore.ts create mode 100644 source/scss/scripts/_topic-info-ignore.scss diff --git a/source/content-scripts/features/exports.ts b/source/content-scripts/features/exports.ts index 4182f3d..c956c9e 100644 --- a/source/content-scripts/features/exports.ts +++ b/source/content-scripts/features/exports.ts @@ -2,10 +2,11 @@ export * from "./anonymize-usernames.js"; export * from "./autocomplete.js"; export * from "./back-to-top.js"; export * from "./comment-anchor-fix.js"; +export * from "./hide-topics.js"; export * from "./hide-votes.js"; export * from "./jump-to-new-comment.js"; export * from "./markdown-toolbar.js"; export * from "./themed-logo.js"; +export * from "./topic-info-ignore.js"; export * from "./user-labels.js"; export * from "./username-colors.js"; -export * from "./hide-topics.js"; diff --git a/source/content-scripts/features/topic-info-ignore.ts b/source/content-scripts/features/topic-info-ignore.ts new file mode 100644 index 0000000..aa3dbcc --- /dev/null +++ b/source/content-scripts/features/topic-info-ignore.ts @@ -0,0 +1,35 @@ +import {log, pluralize, querySelectorAll} from "../../utilities/exports.js"; + +export function runTopicInfoIgnore(): void { + const count = moveIgnoreButtons(); + if (count > 0) { + const pluralized = `${count} ${pluralize(count, "ignore button")}`; + log(`Moved ${pluralized}`); + } +} + +function moveIgnoreButtons(): number { + let count = 0; + + for (const topic of querySelectorAll( + "article.topic:not(.trx-topic-info-ignore)", + )) { + const topicInfo = topic.querySelector(".topic-info") ?? undefined; + if (topicInfo === undefined) { + continue; + } + + const button = + topic.querySelector('[name="topic-actions-ignore"]') ?? + undefined; + if (button === undefined) { + continue; + } + + topic.classList.add("trx-topic-info-ignore"); + topicInfo.append(button); + count++; + } + + return count; +} diff --git a/source/content-scripts/setup.tsx b/source/content-scripts/setup.tsx index 981c4fb..1e6d886 100644 --- a/source/content-scripts/setup.tsx +++ b/source/content-scripts/setup.tsx @@ -17,6 +17,7 @@ import { runHideVotesFeature, runMarkdownToolbarFeature, runThemedLogoFeature, + runTopicInfoIgnore, runUsernameColorsFeature, } from "./features/exports.js"; @@ -112,11 +113,6 @@ async function initialize() { }); } - const miscEnabled = await fromStorage(Data.MiscellaneousEnabledFeatures); - if (miscEnabled.value.has(MiscellaneousFeature.CommentAnchorFix)) { - runCommentAnchorFixFeature(); - } - // Initialize all the observer-dependent features first. await Promise.all(observerFeatures.map(async (feature) => feature())); @@ -150,6 +146,15 @@ async function initialize() { ); } + const miscEnabled = await fromStorage(Data.MiscellaneousEnabledFeatures); + if (miscEnabled.value.has(MiscellaneousFeature.CommentAnchorFix)) { + runCommentAnchorFixFeature(); + } + + if (miscEnabled.value.has(MiscellaneousFeature.TopicInfoIgnore)) { + runTopicInfoIgnore(); + } + // Insert a placeholder at the end of the body first, then render the rest // and use that as the replacement element. Otherwise render() would put it // at the beginning of the body which causes a bunch of different issues. diff --git a/source/options/components/miscellaneous.tsx b/source/options/components/miscellaneous.tsx index f322e96..82734b5 100644 --- a/source/options/components/miscellaneous.tsx +++ b/source/options/components/miscellaneous.tsx @@ -25,6 +25,15 @@ function FeatureDescription({ ); } + if (feature === MiscellaneousFeature.TopicInfoIgnore) { + return ( +

+ Moves the topic ignore button to be in the info section next to the + posted date. +

+ ); + } + return <>; } diff --git a/source/scss/content-scripts.scss b/source/scss/content-scripts.scss index 25598c1..254aace 100644 --- a/source/scss/content-scripts.scss +++ b/source/scss/content-scripts.scss @@ -4,6 +4,7 @@ @import "scripts/hide-topics"; @import "scripts/jump-to-new-comment"; @import "scripts/markdown-toolbar"; +@import "scripts/topic-info-ignore"; @import "scripts/user-labels"; @import "scripts/username-colors"; diff --git a/source/scss/scripts/_topic-info-ignore.scss b/source/scss/scripts/_topic-info-ignore.scss new file mode 100644 index 0000000..54e6a77 --- /dev/null +++ b/source/scss/scripts/_topic-info-ignore.scss @@ -0,0 +1,20 @@ +.trx-topic-info-ignore { + .topic-info { + // The first three values are copied from Tildes, the last one we set to add + // the Ignore button into. + grid-template-columns: 1fr 1.5fr 0.7fr 1fr; + + // Override some of the styles of the button so it doesn't look out of + // place as much. + .btn-post-action { + align-self: center; + color: var(--link-color); + padding: 0; + + &:hover { + color: var(--link-hover-color); + text-decoration: underline; + } + } + } +} diff --git a/source/storage/enums.ts b/source/storage/enums.ts index 650fffc..4249a00 100644 --- a/source/storage/enums.ts +++ b/source/storage/enums.ts @@ -21,6 +21,7 @@ export enum Feature { */ export enum MiscellaneousFeature { CommentAnchorFix = "comment-anchor-fix", + TopicInfoIgnore = "topic-info-ignore", } /**