From ed826cf1bb28a02d9101391a3ebdeb456a107038 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 1 Aug 2021 21:55:13 +0100
Subject: [PATCH] Add settings closing animation.
---
src/pages/settings/GenericSettings.tsx | 62 ++++++++++++++------------
src/pages/settings/Settings.tsx | 9 ++--
2 files changed, 37 insertions(+), 34 deletions(-)
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index 42dd9f9..c2b0dfe 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -26,6 +26,7 @@ interface Props {
id: string;
icon: Children;
title: Children;
+ hidden?: boolean;
hideTitle?: boolean;
}[];
custom?: Children;
@@ -51,15 +52,15 @@ export function GenericSettings({
const [closing, setClosing] = useState(false);
function exitSettings() {
- setClosing(true);
+ if (history.length > 1) {
+ setClosing(true);
- setTimeout(() => {
- if (history.length > 0) {
+ setTimeout(() => {
history.goBack();
- } else {
- history.push("/");
- }
- }, 100);
+ }, 100);
+ } else {
+ history.push("/");
+ }
}
useEffect(() => {
@@ -77,6 +78,7 @@ export function GenericSettings({
<div
className={classNames(styles.settings, {
[styles.closing]: closing,
+ [styles.native]: window.isNative,
})}
data-mobile={isTouchscreenDevice}>
<Helmet>
@@ -121,28 +123,30 @@ export function GenericSettings({
{(!isTouchscreenDevice || typeof page === "undefined") && (
<div className={styles.sidebar}>
<div className={styles.container}>
- {pages.map((entry, i) => (
- <>
- {entry.category && (
- <Category
- variant="uniform"
- text={entry.category}
- />
- )}
- <ButtonItem
- active={
- page === entry.id ||
- (i === 0 &&
- !isTouchscreenDevice &&
- typeof page === "undefined")
- }
- onClick={() => switchPage(entry.id)}
- compact>
- {entry.icon} {entry.title}
- </ButtonItem>
- {entry.divider && <LineDivider />}
- </>
- ))}
+ {pages.map((entry, i) =>
+ entry.hidden ? undefined : (
+ <>
+ {entry.category && (
+ <Category
+ variant="uniform"
+ text={entry.category}
+ />
+ )}
+ <ButtonItem
+ active={
+ page === entry.id ||
+ (i === 0 &&
+ !isTouchscreenDevice &&
+ typeof page === "undefined")
+ }
+ onClick={() => switchPage(entry.id)}
+ compact>
+ {entry.icon} {entry.title}
+ </ButtonItem>
+ {entry.divider && <LineDivider />}
+ </>
+ ),
+ )}
{custom}
</div>
</div>
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index c5911dd..01c6e50 100644
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -104,6 +104,7 @@ export default function Settings() {
},
{
id: "native",
+ hidden: !window.isNative,
icon: <Desktop size={20} />,
title: <Text id="app.settings.pages.native.title" />,
},
@@ -140,11 +141,9 @@ export default function Settings() {
<Route path="/settings/sync">
<Sync />
</Route>,
- window.isNative && (
- <Route path="/settings/native">
- <Native />
- </Route>
- ),
+ <Route path="/settings/native">
+ <Native />
+ </Route>,
<Route path="/settings/experiments">
<ExperimentsPage />
</Route>,
--
GitLab