From 81bf3259900b969c754a1c3a08571d6abfec08b9 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 16:15:52 +0100 Subject: [PATCH] feat: add column element --- package.json | 2 +- src/pages/settings/panes/Appearance.tsx | 9 +- src/pages/settings/panes/Experiments.tsx | 24 +-- src/pages/settings/panes/Notifications.tsx | 171 +++++++++++---------- src/pages/settings/panes/Panes.module.scss | 2 + src/pages/settings/panes/Sync.tsx | 44 +++--- yarn.lock | 10 +- 7 files changed, 140 insertions(+), 122 deletions(-) diff --git a/package.json b/package.json index 76fe577d..63865c45 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "@hcaptcha/react-hcaptcha": "^0.3.6", "@insertish/vite-plugin-babel-macros": "^1.0.5", "@preact/preset-vite": "^2.0.0", - "@revoltchat/ui": "1.0.35", + "@revoltchat/ui": "1.0.36", "@rollup/plugin-replace": "^2.4.2", "@styled-icons/boxicons-logos": "^10.38.0", "@styled-icons/boxicons-regular": "^10.38.0", diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index 5a7440c3..a907688c 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -3,8 +3,9 @@ import { observer } from "mobx-react-lite"; import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; -import CollapsibleSection from "../../../components/common/CollapsibleSection"; +import { Column } from "@revoltchat/ui"; +import CollapsibleSection from "../../../components/common/CollapsibleSection"; import { ThemeBaseSelectorShim, ThemeShopShim, @@ -37,8 +38,10 @@ export const Appearance = observer(() => {

- - + + + +
diff --git a/src/pages/settings/panes/Experiments.tsx b/src/pages/settings/panes/Experiments.tsx index de353f1f..8f36f7bd 100644 --- a/src/pages/settings/panes/Experiments.tsx +++ b/src/pages/settings/panes/Experiments.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite"; import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; -import { Checkbox } from "@revoltchat/ui"; +import { Checkbox, Column } from "@revoltchat/ui"; import { useApplicationState } from "../../../mobx/State"; import { @@ -19,15 +19,19 @@ export const ExperimentsPage = observer(() => {

- {AVAILABLE_EXPERIMENTS.map((key) => ( - experiments.setEnabled(key, enabled)} - description={EXPERIMENTS[key].description} - title={EXPERIMENTS[key].title} - /> - ))} + + {AVAILABLE_EXPERIMENTS.map((key) => ( + + experiments.setEnabled(key, enabled) + } + description={EXPERIMENTS[key].description} + title={EXPERIMENTS[key].title} + /> + ))} + {AVAILABLE_EXPERIMENTS.length === 0 && (
diff --git a/src/pages/settings/panes/Notifications.tsx b/src/pages/settings/panes/Notifications.tsx index 3e987497..b8edac46 100644 --- a/src/pages/settings/panes/Notifications.tsx +++ b/src/pages/settings/panes/Notifications.tsx @@ -4,7 +4,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Checkbox } from "@revoltchat/ui"; +import { Checkbox, Column } from "@revoltchat/ui"; import { urlBase64ToUint8Array } from "../../../lib/conversion"; @@ -36,96 +36,103 @@ export const Notifications = observer(() => {

- - } - description={ - - } - onChange={async (desktopEnabled) => { - if (desktopEnabled) { - const permission = - await Notification.requestPermission(); - - if (permission !== "granted") { - return openScreen({ - id: "error", - error: "DeniedNotification", - }); - } + + } + description={ + + } + onChange={async (desktopEnabled) => { + if (desktopEnabled) { + const permission = + await Notification.requestPermission(); - settings.set("notifications:desktop", desktopEnabled); - }} - /> - - } - description={ - - } - 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, - ), + if (permission !== "granted") { + return openScreen({ + id: "error", + error: "DeniedNotification", }); - - // 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); + }} + /> + } - }} - /> + description={ + + } + 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.sounds.getState().map(({ id, enabled }) => ( - - } - onChange={(enabled) => - settings.sounds.setEnabled(id, enabled) - } - /> - ))} + + {settings.sounds.getState().map(({ id, enabled }) => ( + + } + onChange={(enabled) => + settings.sounds.setEnabled(id, enabled) + } + /> + ))} +
); }); diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index c6551d72..e5faf987 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -481,6 +481,8 @@ border-radius: var(--border-radius); margin-top: 0; + transition: 0.1s ease background-color; + &:hover { background: var(--secondary-background); } diff --git a/src/pages/settings/panes/Sync.tsx b/src/pages/settings/panes/Sync.tsx index a6d26c6a..c068634f 100644 --- a/src/pages/settings/panes/Sync.tsx +++ b/src/pages/settings/panes/Sync.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite"; import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; -import { Checkbox } from "@revoltchat/ui"; +import { Checkbox, Column } from "@revoltchat/ui"; import { useApplicationState } from "../../../mobx/State"; import { SyncKeys } from "../../../mobx/stores/Sync"; @@ -20,26 +20,28 @@ export const Sync = observer(() => {

- {( - [ - ["appearance", "appearance.title"], - ["theme", "appearance.theme"], - ["locale", "language.title"], - // notifications sync is always-on - ] as [SyncKeys, string][] - ).map(([key, title]) => ( - } - description={ - - } - onChange={() => sync.toggle(key)} - /> - ))} + + {( + [ + ["appearance", "appearance.title"], + ["theme", "appearance.theme"], + ["locale", "language.title"], + // notifications sync is always-on + ] as [SyncKeys, string][] + ).map(([key, title]) => ( + } + description={ + + } + onChange={() => sync.toggle(key)} + /> + ))} + {/*
Last sync at 12:00
*/} diff --git a/yarn.lock b/yarn.lock index 86a9f87c..88208886 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2220,9 +2220,9 @@ __metadata: languageName: node linkType: hard -"@revoltchat/ui@npm:1.0.35": - version: 1.0.35 - resolution: "@revoltchat/ui@npm:1.0.35" +"@revoltchat/ui@npm:1.0.36": + version: 1.0.36 + resolution: "@revoltchat/ui@npm:1.0.36" dependencies: "@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0 @@ -2235,7 +2235,7 @@ __metadata: react-device-detect: "*" react-virtuoso: "*" revolt.js: "*" - checksum: 39831a463f030b1361401270b8d1d10c18b28c964b878083784544902e62682ddee0634fe087af99437963d24b585ac680d8b7c2df0d298bffb3bddc140a52ac + checksum: 97eee93df28f2ca826c7cb1493e3c0efe0ab83d3ef8ea3d3ec013ff3b527f2692193ef50c8e44d144f96d49457c4d290a4dc708a38ab527f3a4290e0d05b41b5 languageName: node linkType: hard @@ -3521,7 +3521,7 @@ __metadata: "@hcaptcha/react-hcaptcha": ^0.3.6 "@insertish/vite-plugin-babel-macros": ^1.0.5 "@preact/preset-vite": ^2.0.0 - "@revoltchat/ui": 1.0.35 + "@revoltchat/ui": 1.0.36 "@rollup/plugin-replace": ^2.4.2 "@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0