1
Fork 0
tildes-reextended/source/options/components/user-labels.tsx

98 lines
3.1 KiB
TypeScript

import {Component} from "preact";
import {Data, fromStorage, type StorageValues} from "../../storage/exports.js";
import {Setting, type SettingProps} from "./index.js";
type State = {
onSiteNewLabelEnabled:
| Awaited<StorageValues[Data.OnSiteNewLabel]>
| undefined;
};
export class UserLabelsSetting extends Component<SettingProps, State> {
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 (
<Setting {...this.props}>
<p class="info">
Adds a way to create customizable labels to users. Wherever a link to
a person's profile is available, a <code>[+]</code> 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.
<br />
Or you can use the dedicated{" "}
<a href="/options/user-label-editor.html">User Label Editor</a> to
add, edit, or remove user labels.
</p>
<ul class="checkbox-list">
<li>
<label class="styled-checkbox">
<input
type="checkbox"
checked={onSiteNewLabelEnabled.value}
onClick={this.toggleOnSiteNewLabelEnabled}
/>
Show new label editor next to usernames
</label>
</li>
</ul>
<details>
<summary>View Customizable Values</summary>
<ul class="user-label-values">
<li>
<b>Username</b>: who to apply the label to.
</li>
<li>
<b>Priority</b>: 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.
</li>
<li>
<b>Color</b>: 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.
<br />
Valid values are hex colors or <code>transparent</code>.
<br />
Colors based on your current Tildes theme are also available in
the dropdown menu.
</li>
<li>
<b>Text</b>: the text to go in the label. If left empty the label
will show as a 12 by 12 pixel square instead.
</li>
</ul>
</details>
</Setting>
);
}
}