Add an Updated marker for features that got updated recently.
This commit is contained in:
parent
d967bd2bbd
commit
8a7132c276
|
@ -16,6 +16,7 @@ import {
|
|||
|
||||
type FeatureData = {
|
||||
availableSince: Date;
|
||||
lastUpdated?: Date;
|
||||
index: number;
|
||||
key: Feature;
|
||||
title: string;
|
||||
|
@ -74,6 +75,7 @@ export const features: FeatureData[] = [
|
|||
},
|
||||
{
|
||||
availableSince: new Date("2023-07-16"),
|
||||
lastUpdated: new Date("2023-07-16"),
|
||||
index: 0,
|
||||
key: Feature.Miscellaneous,
|
||||
title: "Miscellaneous",
|
||||
|
@ -95,6 +97,7 @@ export const features: FeatureData[] = [
|
|||
},
|
||||
{
|
||||
availableSince: new Date("2022-02-25"),
|
||||
lastUpdated: new Date("2023-07-16"),
|
||||
index: 0,
|
||||
key: Feature.UsernameColors,
|
||||
title: "Username Colors",
|
||||
|
|
|
@ -102,26 +102,36 @@ class App extends Component<Props, State> {
|
|||
);
|
||||
const tildesLink = <Link text="Tildes" url={tildesUrl} />;
|
||||
|
||||
const asideElements = features.map(({availableSince, key, title}) => {
|
||||
const isNew =
|
||||
Date.now() - availableSince.getTime() < this.newFeatureDuration ? (
|
||||
const asideElements = features.map(
|
||||
({availableSince, lastUpdated, key, title}) => {
|
||||
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>
|
||||
) : isUpdated ? (
|
||||
<span class="is-updated">UPDATED</span>
|
||||
) : undefined;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={key}
|
||||
class={`${activeFeature.value === key ? "active" : ""}
|
||||
return (
|
||||
<li
|
||||
key={key}
|
||||
class={`${activeFeature.value === key ? "active" : ""}
|
||||
${enabledFeatures.value.has(key) ? "enabled" : ""}`}
|
||||
onClick={() => {
|
||||
this.setActiveFeature(key);
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
{isNew}
|
||||
</li>
|
||||
);
|
||||
});
|
||||
onClick={() => {
|
||||
this.setActiveFeature(key);
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
{isNewOrUpdated}
|
||||
</li>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const mainElements = features.map(({key, title, component: Setting}) => {
|
||||
return (
|
||||
|
|
|
@ -146,12 +146,20 @@ details {
|
|||
}
|
||||
}
|
||||
|
||||
.is-new {
|
||||
color: var(--light-blue);
|
||||
.is-new,
|
||||
.is-updated {
|
||||
font-weight: bold;
|
||||
font-size: 60%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.is-new {
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
.is-updated {
|
||||
color: var(--light-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue