cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 15:12:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add settings closing animation.

Browse source
This commit is contained in:
Paul 2021-08-01 21:55:13 +01:00
parent fd010ed75e
commit ed826cf1bb
2 changed files with 37 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/pages/settings/GenericSettings.tsx
View file

@ -26,6 +26,7 @@ interface Props {
id: string; id: string;
icon: Children; icon: Children;
title: Children; title: Children;
hidden?: boolean;
hideTitle?: boolean; hideTitle?: boolean;
}[]; }[];
custom?: Children; custom?: Children;
@ -51,15 +52,15 @@ export function GenericSettings({
const [closing, setClosing] = useState(false); const [closing, setClosing] = useState(false);
function exitSettings() { function exitSettings() {
setClosing(true); if (history.length > 1) {
setClosing(true);
setTimeout(() => { setTimeout(() => {
if (history.length > 0) {
history.goBack(); history.goBack();
} else { }, 100);
history.push("/"); } else {
} history.push("/");
}, 100); }
} }
useEffect(() => { useEffect(() => {
@ -77,6 +78,7 @@ export function GenericSettings({
<div <div
className={classNames(styles.settings, { className={classNames(styles.settings, {
[styles.closing]: closing, [styles.closing]: closing,
[styles.native]: window.isNative,
})} })}
data-mobile={isTouchscreenDevice}> data-mobile={isTouchscreenDevice}>
<Helmet> <Helmet>
@ -121,28 +123,30 @@ export function GenericSettings({
{(!isTouchscreenDevice || typeof page === "undefined") && ( {(!isTouchscreenDevice || typeof page === "undefined") && (
<div className={styles.sidebar}> <div className={styles.sidebar}>
<div className={styles.container}> <div className={styles.container}>
{pages.map((entry, i) => ( {pages.map((entry, i) =>
<> entry.hidden ? undefined : (
{entry.category && ( <>
<Category {entry.category && (
variant="uniform" <Category
text={entry.category} variant="uniform"
/> text={entry.category}
)} />
<ButtonItem )}
active={ <ButtonItem
page === entry.id || active={
(i === 0 && page === entry.id ||
!isTouchscreenDevice && (i === 0 &&
typeof page === "undefined") !isTouchscreenDevice &&
} typeof page === "undefined")
onClick={() => switchPage(entry.id)} }
compact> onClick={() => switchPage(entry.id)}
{entry.icon} {entry.title} compact>
</ButtonItem> {entry.icon} {entry.title}
{entry.divider && <LineDivider />} </ButtonItem>
</> {entry.divider && <LineDivider />}
))} </>
),
)}
{custom} {custom}
</div> </div>
</div> </div>

9
src/pages/settings/Settings.tsx
View file

@ -104,6 +104,7 @@ export default function Settings() {
}, },
{ {
id: "native", id: "native",
hidden: !window.isNative,
icon: <Desktop size={20} />, icon: <Desktop size={20} />,
title: <Text id="app.settings.pages.native.title" />, title: <Text id="app.settings.pages.native.title" />,
}, },
@ -140,11 +141,9 @@ export default function Settings() {
<Route path="/settings/sync"> <Route path="/settings/sync">
<Sync /> <Sync />
</Route>, </Route>,
window.isNative && ( <Route path="/settings/native">
<Route path="/settings/native"> <Native />
<Native /> </Route>,
</Route>
),
<Route path="/settings/experiments"> <Route path="/settings/experiments">
<ExperimentsPage /> <ExperimentsPage />
</Route>, </Route>,