1
Fork 0

Add an indicator for new features.

This commit is contained in:
Bauke 2022-02-25 14:47:20 +01:00
parent f4b547b99f
commit 5cf6aa997a
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
3 changed files with 43 additions and 14 deletions

View File

@ -12,6 +12,7 @@ import {
} from './components/exports.js';
type Feature = {
availableSince: Date;
index: number;
key: keyof RemoveIndexSignature<Settings['features']>;
title: string;
@ -20,54 +21,63 @@ type Feature = {
export const features: Feature[] = [
{
availableSince: new Date('2022-02-23'),
index: 0,
key: 'anonymizeUsernames',
title: 'Anonymize Usernames',
component: () => AnonymizeUsernamesSetting,
},
{
availableSince: new Date('2020-10-03'),
index: 0,
key: 'autocomplete',
title: 'Autocomplete',
component: () => AutocompleteSetting,
},
{
availableSince: new Date('2019-11-10'),
index: 0,
key: 'backToTop',
title: 'Back To Top',
component: () => BackToTopSetting,
},
{
availableSince: new Date('2019-11-12'),
index: 0,
key: 'hideVotes',
title: 'Hide Votes',
component: () => HideVotesSetting,
},
{
availableSince: new Date('2019-11-10'),
index: 0,
key: 'jumpToNewComment',
title: 'Jump To New Comment',
component: () => JumpToNewCommentSetting,
},
{
availableSince: new Date('2019-11-12'),
index: 0,
key: 'markdownToolbar',
title: 'Markdown Toolbar',
component: () => MarkdownToolbarSetting,
},
{
availableSince: new Date('2019-11-10'),
index: 0,
key: 'userLabels',
title: 'User Labels',
component: () => UserLabelsSetting,
},
{
availableSince: new Date('2022-02-25'),
index: 0,
key: 'usernameColors',
title: 'Username Colors',
component: () => UsernameColorsSetting,
},
{
availableSince: new Date('2019-11-10'),
index: 1,
key: 'debug',
title: 'About & Info',

View File

@ -33,6 +33,10 @@ type State = {
class App extends Component<Props, State> {
state: State;
// Duration for how long the "NEW" indicator should appear next to a feature,
// currently 14 days.
readonly newFeatureDuration = 14 * 24 * 60 * 60 * 1000;
constructor(props: Props) {
super(props);
@ -96,21 +100,25 @@ class App extends Component<Props, State> {
);
const tildesLink = html`<${Link} text="Tildes" url="${tildesURL}" />`;
const asideElements = features.map(
({key, title}) =>
html`
<li
key=${key}
class="${activeFeature === key ? 'active' : ''}
const asideElements = features.map(({availableSince, key, title}) => {
const isNew =
Date.now() - availableSince.getTime() < this.newFeatureDuration
? html`<span class="is-new">NEW</span>`
: undefined;
return html`
<li
key=${key}
class="${activeFeature === key ? 'active' : ''}
${enabledFeatures.has(key) ? 'enabled' : ''}"
onClick="${() => {
this.setActiveFeature(key);
}}"
>
${title}
</li>
`,
);
onClick="${() => {
this.setActiveFeature(key);
}}"
>
${title}${isNew}
</li>
`;
});
const mainElements = features.map(
({key, title, component}) =>

View File

@ -115,6 +115,10 @@ details {
background-color: var(--light-blue);
border-color: var(--light-blue);
cursor: pointer;
.is-new {
color: var(--dark-blue);
}
}
&:not(:last-child) {
@ -134,6 +138,13 @@ details {
margin-left: auto;
}
}
.is-new {
color: var(--light-blue);
font-weight: bold;
font-size: 60%;
vertical-align: top;
}
}
}