This commit is contained in:
nizune 2021-08-02 10:30:05 +02:00
commit f71b8e82eb
4 changed files with 125 additions and 63 deletions

View file

@ -1,37 +1,82 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Revolt</title> <title>Revolt</title>
<meta name="apple-mobile-web-app-title" content="Revolt"> <meta name="apple-mobile-web-app-title" content="Revolt" />
<!--<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />--> <meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> name="viewport"
<meta name="apple-mobile-web-app-capable" content="yes"> content="width=device-width, initial-scale=1.0, user-scalable=no"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--App Icons--> <!--App Icons-->
<link rel="apple-touch-icon" href="public/assets/icons/apple-touch.png"> <link
rel="apple-touch-icon"
href="public/assets/icons/apple-touch.png"
/>
<link rel="icon" type="image/png" href="/src/assets/logo_round.png" /> <link rel="icon" type="image/png" href="/src/assets/logo_round.png" />
<!--Splash Screens for iOS Devices--> <!--Splash Screens for iOS Devices-->
<link href="public/assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <link
<link href="public/assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> href="public/assets/splashscreens/iphone5_splash.png"
<link href="public/assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /> media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
<link href="public/assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /> rel="apple-touch-startup-image"
<link href="public/assets/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> />
<link href="public/assets/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /> <link
<link href="public/assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> href="public/assets/splashscreens/iphone6_splash.png"
<link href="public/assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
<link href="public/assets/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> rel="apple-touch-startup-image"
<link href="public/assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> />
</head> <link
<body> href="public/assets/splashscreens/iphoneplus_splash.png"
media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image"
/>
<link
href="public/assets/splashscreens/iphonex_splash.png"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image"
/>
<link
href="public/assets/splashscreens/iphonexr_splash.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image"
/>
<link
href="public/assets/splashscreens/iphonexsmax_splash.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image"
/>
<link
href="public/assets/splashscreens/ipad_splash.png"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image"
/>
<link
href="public/assets/splashscreens/ipadpro1_splash.png"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image"
/>
<link
href="public/assets/splashscreens/ipadpro3_splash.png"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image"
/>
<link
href="public/assets/splashscreens/ipadpro2_splash.png"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image"
/>
</head>
<body ontouchstart="">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
<style> <style>
html { html {
background-color: #191919; background-color: #191919;
} }
</style> </style>
</html> </html>

View file

@ -3,8 +3,9 @@ import { Helmet } from "react-helmet";
import { Switch, useHistory, useParams } from "react-router-dom"; import { Switch, useHistory, useParams } from "react-router-dom";
import styles from "./Settings.module.scss"; import styles from "./Settings.module.scss";
import classNames from "classnames";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@ -25,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;
@ -48,9 +50,14 @@ export function GenericSettings({
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
const { page } = useParams<{ page: string }>(); const { page } = useParams<{ page: string }>();
const [closing, setClosing] = useState(false);
function exitSettings() { function exitSettings() {
if (history.length > 0) { if (history.length > 1) {
setClosing(true);
setTimeout(() => {
history.goBack(); history.goBack();
}, 100);
} else { } else {
history.push("/"); history.push("/");
} }
@ -68,7 +75,12 @@ export function GenericSettings({
}, []); }, []);
return ( return (
<div className={styles.settings} data-mobile={isTouchscreenDevice}> <div
className={classNames(styles.settings, {
[styles.closing]: closing,
[styles.native]: window.isNative,
})}
data-mobile={isTouchscreenDevice}>
<Helmet> <Helmet>
<meta <meta
name="theme-color" name="theme-color"
@ -111,7 +123,8 @@ 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 && ( {entry.category && (
<Category <Category
@ -132,7 +145,8 @@ export function GenericSettings({
</ButtonItem> </ButtonItem>
{entry.divider && <LineDivider />} {entry.divider && <LineDivider />}
</> </>
))} ),
)}
{custom} {custom}
</div> </div>
</div> </div>

View file

@ -69,6 +69,10 @@
height: 100%; height: 100%;
position: fixed; position: fixed;
animation: open 0.18s ease-out, opacity 0.18s; animation: open 0.18s ease-out, opacity 0.18s;
&.closing {
animation: close 0.18s ease-in;
}
} }
.settings { .settings {

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>,