cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-21 14:40:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat: add column element

Browse source
This commit is contained in:
Paul Makles 2022-05-30 16:15:52 +01:00
parent 906f15f103
commit 81bf325990
7 changed files with 140 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -90,7 +90,7 @@
"@hcaptcha/react-hcaptcha": "^0.3.6", "@hcaptcha/react-hcaptcha": "^0.3.6",
"@insertish/vite-plugin-babel-macros": "^1.0.5", "@insertish/vite-plugin-babel-macros": "^1.0.5",
"@preact/preset-vite": "^2.0.0", "@preact/preset-vite": "^2.0.0",
"@revoltchat/ui": "1.0.35", "@revoltchat/ui": "1.0.36",
"@rollup/plugin-replace": "^2.4.2", "@rollup/plugin-replace": "^2.4.2",
"@styled-icons/boxicons-logos": "^10.38.0", "@styled-icons/boxicons-logos": "^10.38.0",
"@styled-icons/boxicons-regular": "^10.38.0", "@styled-icons/boxicons-regular": "^10.38.0",

9
src/pages/settings/panes/Appearance.tsx
View file

@ -3,8 +3,9 @@ import { observer } from "mobx-react-lite";
import styles from "./Panes.module.scss"; import styles from "./Panes.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import CollapsibleSection from "../../../components/common/CollapsibleSection"; import { Column } from "@revoltchat/ui";
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import { import {
ThemeBaseSelectorShim, ThemeBaseSelectorShim,
ThemeShopShim, ThemeShopShim,
@ -37,8 +38,10 @@ export const Appearance = observer(() => {
<h3> <h3>
<Text id="app.settings.pages.appearance.theme_options.title" /> <Text id="app.settings.pages.appearance.theme_options.title" />
</h3> </h3>
<DisplayTransparencyShim /> <Column>
<DisplaySeasonalShim /> <DisplayTransparencyShim />
<DisplaySeasonalShim />
</Column>
<hr /> <hr />
<DisplayFontShim /> <DisplayFontShim />
<DisplayLigaturesShim /> <DisplayLigaturesShim />

24
src/pages/settings/panes/Experiments.tsx
View file

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import styles from "./Panes.module.scss"; import styles from "./Panes.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { Checkbox } from "@revoltchat/ui"; import { Checkbox, Column } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State"; import { useApplicationState } from "../../../mobx/State";
import { import {
@ -19,15 +19,19 @@ export const ExperimentsPage = observer(() => {
<h3> <h3>
<Text id="app.settings.pages.experiments.features" /> <Text id="app.settings.pages.experiments.features" />
</h3> </h3>
{AVAILABLE_EXPERIMENTS.map((key) => ( <Column>
<Checkbox {AVAILABLE_EXPERIMENTS.map((key) => (
key={key} <Checkbox
value={experiments.isEnabled(key)} key={key}
onChange={(enabled) => experiments.setEnabled(key, enabled)} value={experiments.isEnabled(key)}
description={EXPERIMENTS[key].description} onChange={(enabled) =>
title={EXPERIMENTS[key].title} experiments.setEnabled(key, enabled)
/> }
))} description={EXPERIMENTS[key].description}
title={EXPERIMENTS[key].title}
/>
))}
</Column>
{AVAILABLE_EXPERIMENTS.length === 0 && ( {AVAILABLE_EXPERIMENTS.length === 0 && (
<div className={styles.empty}> <div className={styles.empty}>
<Text id="app.settings.pages.experiments.not_available" /> <Text id="app.settings.pages.experiments.not_available" />

171
src/pages/settings/panes/Notifications.tsx
View file

@ -4,7 +4,7 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { Checkbox } from "@revoltchat/ui"; import { Checkbox, Column } from "@revoltchat/ui";
import { urlBase64ToUint8Array } from "../../../lib/conversion"; import { urlBase64ToUint8Array } from "../../../lib/conversion";
@ -36,96 +36,103 @@ export const Notifications = observer(() => {
<h3> <h3>
<Text id="app.settings.pages.notifications.push_notifications" /> <Text id="app.settings.pages.notifications.push_notifications" />
</h3> </h3>
<Checkbox <Column>
disabled={!("Notification" in window)} <Checkbox
value={settings.get("notifications:desktop", false)!} disabled={!("Notification" in window)}
title={ value={settings.get("notifications:desktop", false)!}
<Text id="app.settings.pages.notifications.enable_desktop" /> title={
} <Text id="app.settings.pages.notifications.enable_desktop" />
description={
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
}
onChange={async (desktopEnabled) => {
if (desktopEnabled) {
const permission =
await Notification.requestPermission();
if (permission !== "granted") {
return openScreen({
id: "error",
error: "DeniedNotification",
});
}
} }
description={
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
}
onChange={async (desktopEnabled) => {
if (desktopEnabled) {
const permission =
await Notification.requestPermission();
settings.set("notifications:desktop", desktopEnabled); if (permission !== "granted") {
}} return openScreen({
/> id: "error",
<Checkbox error: "DeniedNotification",
disabled={typeof pushEnabled === "undefined"}
value={pushEnabled ?? false}
title={
<Text id="app.settings.pages.notifications.enable_push" />
}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
}
onChange={async (pushEnabled) => {
try {
const reg =
await navigator.serviceWorker?.getRegistration();
if (reg) {
if (pushEnabled) {
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
client.configuration!.vapid,
),
}); });
// tell the server we just subscribed
const json = sub.toJSON();
if (json.keys) {
client.api.post("/push/subscribe", {
endpoint: sub.endpoint,
...(json.keys as {
p256dh: string;
auth: string;
}),
});
setPushEnabled(true);
}
} else {
const sub =
await reg.pushManager.getSubscription();
sub?.unsubscribe();
setPushEnabled(false);
client.api.post("/push/unsubscribe");
} }
} }
} catch (err) {
console.error("Failed to enable push!", err); settings.set("notifications:desktop", desktopEnabled);
}}
/>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
value={pushEnabled ?? false}
title={
<Text id="app.settings.pages.notifications.enable_push" />
} }
}} description={
/> <Text id="app.settings.pages.notifications.descriptions.enable_push" />
}
onChange={async (pushEnabled) => {
try {
const reg =
await navigator.serviceWorker?.getRegistration();
if (reg) {
if (pushEnabled) {
const sub = await reg.pushManager.subscribe(
{
userVisibleOnly: true,
applicationServerKey:
urlBase64ToUint8Array(
client.configuration!.vapid,
),
},
);
// tell the server we just subscribed
const json = sub.toJSON();
if (json.keys) {
client.api.post("/push/subscribe", {
endpoint: sub.endpoint,
...(json.keys as {
p256dh: string;
auth: string;
}),
});
setPushEnabled(true);
}
} else {
const sub =
await reg.pushManager.getSubscription();
sub?.unsubscribe();
setPushEnabled(false);
client.api.post("/push/unsubscribe");
}
}
} catch (err) {
console.error("Failed to enable push!", err);
}
}}
/>
</Column>
<h3> <h3>
<Text id="app.settings.pages.notifications.sounds" /> <Text id="app.settings.pages.notifications.sounds" />
</h3> </h3>
{settings.sounds.getState().map(({ id, enabled }) => ( <Column>
<Checkbox {settings.sounds.getState().map(({ id, enabled }) => (
key={id} <Checkbox
value={enabled} key={id}
title={ value={enabled}
<Text title={
id={`app.settings.pages.notifications.sound.${id}`} <Text
/> id={`app.settings.pages.notifications.sound.${id}`}
} />
onChange={(enabled) => }
settings.sounds.setEnabled(id, enabled) onChange={(enabled) =>
} settings.sounds.setEnabled(id, enabled)
/> }
))} />
))}
</Column>
</div> </div>
); );
}); });

2
src/pages/settings/panes/Panes.module.scss
View file

@ -481,6 +481,8 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin-top: 0; margin-top: 0;
transition: 0.1s ease background-color;
&:hover { &:hover {
background: var(--secondary-background); background: var(--secondary-background);
} }

44
src/pages/settings/panes/Sync.tsx
View file

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import styles from "./Panes.module.scss"; import styles from "./Panes.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { Checkbox } from "@revoltchat/ui"; import { Checkbox, Column } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State"; import { useApplicationState } from "../../../mobx/State";
import { SyncKeys } from "../../../mobx/stores/Sync"; import { SyncKeys } from "../../../mobx/stores/Sync";
@ -20,26 +20,28 @@ export const Sync = observer(() => {
<h3> <h3>
<Text id="app.settings.pages.sync.categories" /> <Text id="app.settings.pages.sync.categories" />
</h3> </h3>
{( <Column>
[ {(
["appearance", "appearance.title"], [
["theme", "appearance.theme"], ["appearance", "appearance.title"],
["locale", "language.title"], ["theme", "appearance.theme"],
// notifications sync is always-on ["locale", "language.title"],
] as [SyncKeys, string][] // notifications sync is always-on
).map(([key, title]) => ( ] as [SyncKeys, string][]
<Checkbox ).map(([key, title]) => (
key={key} <Checkbox
value={sync.isEnabled(key)} key={key}
title={<Text id={`app.settings.pages.${title}`} />} value={sync.isEnabled(key)}
description={ title={<Text id={`app.settings.pages.${title}`} />}
<Text description={
id={`app.settings.pages.sync.descriptions.${key}`} <Text
/> id={`app.settings.pages.sync.descriptions.${key}`}
} />
onChange={() => sync.toggle(key)} }
/> onChange={() => sync.toggle(key)}
))} />
))}
</Column>
{/*<h5 style={{ marginTop: "20px", color: "grey" }}> {/*<h5 style={{ marginTop: "20px", color: "grey" }}>
Last sync at 12:00 Last sync at 12:00
</h5>*/} </h5>*/}

10
yarn.lock
View file

@ -2220,9 +2220,9 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@revoltchat/ui@npm:1.0.35": "@revoltchat/ui@npm:1.0.36":
version: 1.0.35 version: 1.0.36
resolution: "@revoltchat/ui@npm:1.0.35" resolution: "@revoltchat/ui@npm:1.0.36"
dependencies: dependencies:
"@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-logos": ^10.38.0
"@styled-icons/boxicons-regular": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0
@ -2235,7 +2235,7 @@ __metadata:
react-device-detect: "*" react-device-detect: "*"
react-virtuoso: "*" react-virtuoso: "*"
revolt.js: "*" revolt.js: "*"
checksum: 39831a463f030b1361401270b8d1d10c18b28c964b878083784544902e62682ddee0634fe087af99437963d24b585ac680d8b7c2df0d298bffb3bddc140a52ac checksum: 97eee93df28f2ca826c7cb1493e3c0efe0ab83d3ef8ea3d3ec013ff3b527f2692193ef50c8e44d144f96d49457c4d290a4dc708a38ab527f3a4290e0d05b41b5
languageName: node languageName: node
linkType: hard linkType: hard
@ -3521,7 +3521,7 @@ __metadata:
"@hcaptcha/react-hcaptcha": ^0.3.6 "@hcaptcha/react-hcaptcha": ^0.3.6
"@insertish/vite-plugin-babel-macros": ^1.0.5 "@insertish/vite-plugin-babel-macros": ^1.0.5
"@preact/preset-vite": ^2.0.0 "@preact/preset-vite": ^2.0.0
"@revoltchat/ui": 1.0.35 "@revoltchat/ui": 1.0.36
"@rollup/plugin-replace": ^2.4.2 "@rollup/plugin-replace": ^2.4.2
"@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-logos": ^10.38.0
"@styled-icons/boxicons-regular": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0