1
Fork 0

Add an Updated marker for features that got updated recently.

This commit is contained in:
Bauke 2023-07-15 11:13:04 +02:00
parent d967bd2bbd
commit 8a7132c276
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
3 changed files with 39 additions and 18 deletions

View File

@ -16,6 +16,7 @@ import {
type FeatureData = { type FeatureData = {
availableSince: Date; availableSince: Date;
lastUpdated?: Date;
index: number; index: number;
key: Feature; key: Feature;
title: string; title: string;
@ -74,6 +75,7 @@ export const features: FeatureData[] = [
}, },
{ {
availableSince: new Date("2023-07-16"), availableSince: new Date("2023-07-16"),
lastUpdated: new Date("2023-07-16"),
index: 0, index: 0,
key: Feature.Miscellaneous, key: Feature.Miscellaneous,
title: "Miscellaneous", title: "Miscellaneous",
@ -95,6 +97,7 @@ export const features: FeatureData[] = [
}, },
{ {
availableSince: new Date("2022-02-25"), availableSince: new Date("2022-02-25"),
lastUpdated: new Date("2023-07-16"),
index: 0, index: 0,
key: Feature.UsernameColors, key: Feature.UsernameColors,
title: "Username Colors", title: "Username Colors",

View File

@ -102,26 +102,36 @@ class App extends Component<Props, State> {
); );
const tildesLink = <Link text="Tildes" url={tildesUrl} />; const tildesLink = <Link text="Tildes" url={tildesUrl} />;
const asideElements = features.map(({availableSince, key, title}) => { const asideElements = features.map(
const isNew = ({availableSince, lastUpdated, key, title}) => {
Date.now() - availableSince.getTime() < this.newFeatureDuration ? ( const lastUpdatedTime =
lastUpdated?.getTime() ?? this.newFeatureDuration * 2;
const isNew =
Date.now() - availableSince.getTime() < this.newFeatureDuration;
const isUpdated =
Date.now() - lastUpdatedTime < this.newFeatureDuration;
const isNewOrUpdated = isNew ? (
<span class="is-new">NEW</span> <span class="is-new">NEW</span>
) : isUpdated ? (
<span class="is-updated">UPDATED</span>
) : undefined; ) : undefined;
return ( return (
<li <li
key={key} key={key}
class={`${activeFeature.value === key ? "active" : ""} class={`${activeFeature.value === key ? "active" : ""}
${enabledFeatures.value.has(key) ? "enabled" : ""}`} ${enabledFeatures.value.has(key) ? "enabled" : ""}`}
onClick={() => { onClick={() => {
this.setActiveFeature(key); this.setActiveFeature(key);
}} }}
> >
{title} {title}
{isNew} {isNewOrUpdated}
</li> </li>
); );
}); },
);
const mainElements = features.map(({key, title, component: Setting}) => { const mainElements = features.map(({key, title, component: Setting}) => {
return ( return (

View File

@ -146,12 +146,20 @@ details {
} }
} }
.is-new { .is-new,
color: var(--light-blue); .is-updated {
font-weight: bold; font-weight: bold;
font-size: 60%; font-size: 60%;
vertical-align: top; vertical-align: top;
} }
.is-new {
color: var(--light-blue);
}
.is-updated {
color: var(--light-green);
}
} }
} }