Add an indicator for new features.
This commit is contained in:
parent
f4b547b99f
commit
5cf6aa997a
|
@ -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',
|
||||
|
|
|
@ -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}) =>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue