From cf18323f2766718412392c04b2ee2b04e35336a8 Mon Sep 17 00:00:00 2001 From: Bauke Date: Thu, 19 Oct 2023 14:09:00 +0200 Subject: [PATCH] Add an option to hide the user label editor [+]. --- .../content-scripts/features/user-labels.tsx | 6 +- source/content-scripts/setup.tsx | 2 + source/options/components/user-labels.tsx | 129 ++++++++++++------ source/scss/_settings.scss | 1 + source/storage/enums.ts | 1 + source/storage/exports.ts | 7 + 6 files changed, 105 insertions(+), 41 deletions(-) diff --git a/source/content-scripts/features/user-labels.tsx b/source/content-scripts/features/user-labels.tsx index bf3bc81..6ace762 100644 --- a/source/content-scripts/features/user-labels.tsx +++ b/source/content-scripts/features/user-labels.tsx @@ -16,6 +16,7 @@ import { type Props = { anonymizeUsernamesEnabled: boolean; + onSiteNewLabelEnabled: boolean; userLabels: UserLabelsData; }; @@ -59,7 +60,7 @@ export class UserLabelsFeature extends Component { }; addLabelsToUsernames = (elements: HTMLElement[], onlyID?: number): number => { - const {userLabels} = this.props; + const {onSiteNewLabelEnabled, userLabels} = this.props; const inTopicListing = document.querySelector(".topic-listing") !== null; // Sort the labels by priority or alphabetically, so 2 labels with the same @@ -103,7 +104,7 @@ export class UserLabelsFeature extends Component { [+] ); - if (!inTopicListing && onlyID === undefined) { + if (onSiteNewLabelEnabled && !inTopicListing && onlyID === undefined) { const addLabelPlaceholder = document.createElement("span"); element.after(addLabelPlaceholder); render(addLabel, element.parentElement!, addLabelPlaceholder); @@ -111,6 +112,7 @@ export class UserLabelsFeature extends Component { if (userLabels.length === 0 && onlyID === undefined) { if ( + onSiteNewLabelEnabled && inTopicListing && (element.nextElementSibling === null || !element.nextElementSibling.className.includes("trx-user-label")) diff --git a/source/content-scripts/setup.tsx b/source/content-scripts/setup.tsx index 03de939..295fba4 100644 --- a/source/content-scripts/setup.tsx +++ b/source/content-scripts/setup.tsx @@ -156,9 +156,11 @@ async function initialize() { } if (enabledFeatures.value.has(Feature.UserLabels)) { + const onSiteNewLabelEnabled = await fromStorage(Data.OnSiteNewLabel); components.userLabels = ( ); diff --git a/source/options/components/user-labels.tsx b/source/options/components/user-labels.tsx index ac3022b..d92eaed 100644 --- a/source/options/components/user-labels.tsx +++ b/source/options/components/user-labels.tsx @@ -1,46 +1,97 @@ +import {Component} from "preact"; +import {Data, fromStorage, type StorageValues} from "../../storage/exports.js"; import {Setting, type SettingProps} from "./index.js"; -export function UserLabelsSetting(props: SettingProps) { - return ( - -

- Adds a way to create customizable labels to users. Wherever a link to a - person's profile is available, a [+] will be put next to - it. Clicking on that will bring up a dialog to add a new label and - clicking on existing labels will bring up the same dialog to edit them. -
- Or you can use the dedicated{" "} - User Label Editor to add, - edit, or remove user labels. -

+type State = { + onSiteNewLabelEnabled: + | Awaited + | undefined; +}; -
- View Customizable Values -
    +export class UserLabelsSetting extends Component { + constructor(props: SettingProps) { + super(props); + + this.state = { + onSiteNewLabelEnabled: undefined, + }; + } + + async componentDidMount() { + this.setState({ + onSiteNewLabelEnabled: await fromStorage(Data.OnSiteNewLabel), + }); + } + + toggleOnSiteNewLabelEnabled = async () => { + const onSiteNewLabelEnabled = this.state.onSiteNewLabelEnabled!; + onSiteNewLabelEnabled.value = !onSiteNewLabelEnabled.value; + await onSiteNewLabelEnabled.save(); + this.setState({onSiteNewLabelEnabled}); + }; + + render() { + const {onSiteNewLabelEnabled} = this.state; + if (onSiteNewLabelEnabled === undefined) { + return; + } + + return ( + +

    + Adds a way to create customizable labels to users. Wherever a link to + a person's profile is available, a [+] will be put next + to it. Clicking on that will bring up a dialog to add a new label and + clicking on existing labels will bring up the same dialog to edit + them. +
    + Or you can use the dedicated{" "} + User Label Editor to + add, edit, or remove user labels. +

    + +
    • - Username: who to apply the label to. -
      • -
    • - Priority: determines the order of labels. If multiple labels - have the same priority they will be sorted alphabetically. In the - topic listing only the highest priority label will be shown. -
      • -
    • - Color: will set the background color of the label. The - foreground color is calculated to be black or white depending on the - brightness of the background color. -
      - Valid values are hex colors or transparent. -
      - Colors based on your current Tildes theme are also available in the - dropdown menu. -
      • -
    • - Text: the text to go in the label. If left empty the label - will show as a 12 by 12 pixel square instead. +
    -
- - ); + +
+ View Customizable Values +
    +
  • + Username: who to apply the label to. +
    • +
  • + Priority: determines the order of labels. If multiple + labels have the same priority they will be sorted alphabetically. + In the topic listing only the highest priority label will be + shown. +
    • +
  • + Color: will set the background color of the label. The + foreground color is calculated to be black or white depending on + the brightness of the background color. +
    + Valid values are hex colors or transparent. +
    + Colors based on your current Tildes theme are also available in + the dropdown menu. +
    • +
  • + Text: the text to go in the label. If left empty the label + will show as a 12 by 12 pixel square instead. +
    • +
+
+ + ); + } } diff --git a/source/scss/_settings.scss b/source/scss/_settings.scss index 2ba5d76..6a63ede 100644 --- a/source/scss/_settings.scss +++ b/source/scss/_settings.scss @@ -86,6 +86,7 @@ flex-direction: column; gap: 8px; list-style: none; + margin-bottom: 8px; label { cursor: pointer; diff --git a/source/storage/enums.ts b/source/storage/enums.ts index 98e333e..4466691 100644 --- a/source/storage/enums.ts +++ b/source/storage/enums.ts @@ -36,6 +36,7 @@ export enum Data { KnownGroups = "known-groups", LatestActiveFeatureTab = "latest-active-feature-tab", MiscellaneousEnabledFeatures = "miscellaneous-enabled-features", + OnSiteNewLabel = "on-site-new-label", RandomizeUsernameColors = "randomize-username-colors", Version = "data-version", } diff --git a/source/storage/exports.ts b/source/storage/exports.ts index e54db1b..802e813 100644 --- a/source/storage/exports.ts +++ b/source/storage/exports.ts @@ -64,6 +64,13 @@ export const storageValues = { value: new Set([MiscellaneousFeature.CommentAnchorFix]), storage: browser.storage.sync, }), + [Data.OnSiteNewLabel]: createValue({ + deserialize: (input) => JSON.parse(input) as boolean, + serialize: (input) => JSON.stringify(input), + key: Data.OnSiteNewLabel, + value: true, + storage: browser.storage.sync, + }), [Data.Version]: createValue({ deserialize: (input) => JSON.parse(input) as string, serialize: (input) => JSON.stringify(input),