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 = {
|
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",
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue