47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import {html} from 'htm/preact';
|
|
|
|
import {Setting, SettingProps} from './index.js';
|
|
|
|
export function UserLabelsSetting(props: SettingProps): TRXComponent {
|
|
return html`
|
|
<${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="./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>
|
|
<//>
|
|
`;
|
|
}
|