47 lines
1.8 KiB
XML
47 lines
1.8 KiB
XML
import {Setting, type SettingProps} from "./index.js";
|
|
|
|
export function UserLabelsSetting(props: SettingProps) {
|
|
return (
|
|
<Setting {...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>
|
|
|
|
<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>
|
|
);
|
|
}
|