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

View File

@ -33,6 +33,10 @@ type State = {
class App extends Component<Props, State> { class App extends Component<Props, State> {
state: 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) { constructor(props: Props) {
super(props); super(props);
@ -96,21 +100,25 @@ class App extends Component<Props, State> {
); );
const tildesLink = html`<${Link} text="Tildes" url="${tildesURL}" />`; const tildesLink = html`<${Link} text="Tildes" url="${tildesURL}" />`;
const asideElements = features.map( const asideElements = features.map(({availableSince, key, title}) => {
({key, title}) => const isNew =
html` Date.now() - availableSince.getTime() < this.newFeatureDuration
<li ? html`<span class="is-new">NEW</span>`
key=${key} : undefined;
class="${activeFeature === key ? 'active' : ''}
return html`
<li
key=${key}
class="${activeFeature === key ? 'active' : ''}
${enabledFeatures.has(key) ? 'enabled' : ''}" ${enabledFeatures.has(key) ? 'enabled' : ''}"
onClick="${() => { onClick="${() => {
this.setActiveFeature(key); this.setActiveFeature(key);
}}" }}"
> >
${title} ${title}${isNew}
</li> </li>
`, `;
); });
const mainElements = features.map( const mainElements = features.map(
({key, title, component}) => ({key, title, component}) =>

View File

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