From 74f8c552edf5f71b08fee889dd9a5ac4d35ab391 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:56:47 +0100 Subject: [PATCH] feat(@ui): port category button --- src/components/settings/AppearanceShims.tsx | 12 +- src/components/ui/fluent/CategoryButton.tsx | 172 -------------------- src/pages/home/Home.tsx | 6 +- src/pages/settings/panes/Account.tsx | 3 +- src/pages/settings/panes/Feedback.tsx | 6 +- src/pages/settings/panes/MyBots.tsx | 9 +- src/pages/settings/panes/Native.tsx | 4 +- src/pages/settings/panes/Sessions.tsx | 10 +- src/sw.ts | 2 +- 9 files changed, 30 insertions(+), 194 deletions(-) delete mode 100644 src/components/ui/fluent/CategoryButton.tsx diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index 737dba5f..4e7ea7e8 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -6,7 +6,13 @@ import pSBC from "shade-blend-color"; import { Text } from "preact-i18n"; -import { Checkbox, ColourSwatches, ComboBox, Radio } from "@revoltchat/ui"; +import { + CategoryButton, + Checkbox, + ColourSwatches, + ComboBox, + Radio, +} from "@revoltchat/ui"; import TextAreaAutoSize from "../../lib/TextAreaAutoSize"; @@ -21,7 +27,6 @@ import { MONOSPACE_FONT_KEYS, } from "../../context/Theme"; -import CategoryButton from "../ui/fluent/CategoryButton"; import { EmojiSelector } from "./appearance/EmojiSelector"; import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector"; @@ -54,8 +59,7 @@ export const ThemeShopShim = () => { action="chevron" description={ - } - hover> + }> diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx deleted file mode 100644 index 923d1f40..00000000 --- a/src/components/ui/fluent/CategoryButton.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import { - ChevronRight, - LinkExternal, - Pencil, -} from "@styled-icons/boxicons-regular"; -import styled, { css } from "styled-components/macro"; - -import { Children } from "../../../types/Preact"; - -interface BaseProps { - readonly hover?: boolean; - readonly account?: boolean; - readonly disabled?: boolean; - readonly largeDescription?: boolean; -} - -const CategoryBase = styled.div` - padding: 9.8px 12px; - border-radius: var(--border-radius); - margin-bottom: 10px; - color: var(--foreground); - background: var(--secondary-header); - gap: 12px; - display: flex; - align-items: center; - flex-direction: row; - overflow: hidden; - - > svg { - flex-shrink: 0; - } - - .action { - display: flex; - align-items: center; - } - - .content { - display: flex; - flex-grow: 1; - flex-direction: column; - font-weight: 600; - font-size: 14px; - - .title { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - } - - .description { - ${(props) => - props.largeDescription - ? css` - font-size: 14px; - ` - : css` - font-size: 11px; - `} - - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - overflow: hidden; - font-weight: 500; - color: var(--secondary-foreground); - - a:hover { - text-decoration: underline; - } - } - } - - ${(props) => - props.hover && - css` - cursor: pointer; - opacity: 1; - transition: 0.1s ease background-color; - - &:hover { - background: var(--secondary-background); - } - `} - - ${(props) => - props.disabled && - css` - opacity: 0.4; - /*.content, - .action { - color: var(--tertiary-foreground); - }*/ - - .action { - font-size: 14px; - } - `} - - ${(props) => - props.account && - css` - height: 54px; - - .content { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - .title { - text-transform: uppercase; - font-size: 12px; - color: var(--secondary-foreground); - } - - .description { - font-size: 15px; - font-weight: 500 !important; - color: var(--foreground); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - } - `} -`; - -interface Props extends BaseProps { - icon?: Children; - children?: Children; - description?: Children; - - onClick?: () => void; - action?: "chevron" | "external" | Children; -} - -export default function CategoryButton({ - icon, - children, - description, - account, - disabled, - onClick, - hover, - action, -}: Props) { - return ( - - {icon} -
-
{children}
- -
{description}
-
-
- {typeof action === "string" ? ( - action === "chevron" ? ( - - ) : ( - - ) - ) : ( - action - )} -
- - ); -} diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index ef66bca9..56c5cfa1 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -17,6 +17,8 @@ import "./snow.scss"; import { Text } from "preact-i18n"; import { useContext, useMemo } from "preact/hooks"; +import { CategoryButton } from "@revoltchat/ui"; + import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { useApplicationState } from "../../mobx/State"; @@ -24,10 +26,10 @@ import { useApplicationState } from "../../mobx/State"; import { useIntermediate } from "../../context/intermediate/Intermediate"; import { AppContext } from "../../context/revoltjs/RevoltClient"; -import { PageHeader } from "../../components/ui/Header"; -import CategoryButton from "../../components/ui/fluent/CategoryButton"; import wideSVG from "/assets/wide.svg"; +import { PageHeader } from "../../components/ui/Header"; + const Overlay = styled.div` display: grid; height: 100%; diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index d1687f1e..90fa2773 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -14,7 +14,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button, LineDivider, Tip } from "@revoltchat/ui"; +import { Button, CategoryButton, LineDivider, Tip } from "@revoltchat/ui"; import { stopPropagation } from "../../../lib/stopPropagation"; @@ -27,7 +27,6 @@ import { import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; export const Account = observer(() => { const { openScreen, writeClipboard } = useIntermediate(); diff --git a/src/pages/settings/panes/Feedback.tsx b/src/pages/settings/panes/Feedback.tsx index 106159db..66125beb 100644 --- a/src/pages/settings/panes/Feedback.tsx +++ b/src/pages/settings/panes/Feedback.tsx @@ -5,7 +5,7 @@ import { Link } from "react-router-dom"; import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; +import { CategoryButton } from "@revoltchat/ui"; export function Feedback() { return ( @@ -15,7 +15,6 @@ export function Feedback() { target="_blank" rel="noreferrer"> } description={ @@ -29,7 +28,6 @@ export function Feedback() { target="_blank" rel="noreferrer"> } description={ @@ -43,7 +41,6 @@ export function Feedback() { target="_blank" rel="noreferrer"> } description={ @@ -55,7 +52,6 @@ export function Feedback() { } description="You can report issues and discuss improvements with us directly here."> diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx index c68f238b..c3a49d70 100644 --- a/src/pages/settings/panes/MyBots.tsx +++ b/src/pages/settings/panes/MyBots.tsx @@ -11,7 +11,13 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useEffect, useState } from "preact/hooks"; -import { Button, Checkbox, InputBox, Tip } from "@revoltchat/ui"; +import { + Button, + CategoryButton, + Checkbox, + InputBox, + Tip, +} from "@revoltchat/ui"; import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import { internalEmit } from "../../../lib/eventEmitter"; @@ -28,7 +34,6 @@ import AutoComplete, { import CollapsibleSection from "../../../components/common/CollapsibleSection"; import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; interface Data { _id: string; diff --git a/src/pages/settings/panes/Native.tsx b/src/pages/settings/panes/Native.tsx index f1e75837..da02d777 100644 --- a/src/pages/settings/panes/Native.tsx +++ b/src/pages/settings/panes/Native.tsx @@ -2,12 +2,10 @@ import { Refresh } from "@styled-icons/boxicons-regular"; import { useEffect, useState } from "preact/hooks"; -import { Button, Checkbox, Tip } from "@revoltchat/ui"; +import { Button, CategoryButton, Checkbox, Tip } from "@revoltchat/ui"; import RLogo from "../assets/revolt_r.svg"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; - export function Native() { if (typeof window.native === "undefined") return null; /* eslint-disable react-hooks/rules-of-hooks */ diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx index 4652c069..0e951f4c 100644 --- a/src/pages/settings/panes/Sessions.tsx +++ b/src/pages/settings/panes/Sessions.tsx @@ -18,14 +18,18 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button, LineDivider, Preloader, Tip } from "@revoltchat/ui"; +import { + Button, + CategoryButton, + LineDivider, + Preloader, + Tip, +} from "@revoltchat/ui"; import { dayjs } from "../../../context/Locale"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { AppContext } from "../../../context/revoltjs/RevoltClient"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; - dayjs.extend(relativeTime); export function Sessions() { diff --git a/src/sw.ts b/src/sw.ts index 5daf6258..af71b0e2 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -11,7 +11,7 @@ cleanupOutdatedCaches(); // Generate list using scripts/locale.js // prettier-ignore -var locale_keys = ["af","am","ar-dz","ar-kw","ar-ly","ar-ma","ar-sa","ar-tn","ar","az","be","bg","bi","bm","bn","bo","br","bs","ca","cs","cv","cy","da","de-at","de-ch","de","dv","el","en-au","en-ca","en-gb","en-ie","en-il","en-in","en-nz","en-sg","en-tt","en","eo","es-do","es-pr","es-us","es","et","eu","fa","fi","fo","fr-ca","fr-ch","fr","fy","ga","gd","gl","gom-latn","gu","he","hi","hr","ht","hu","hy-am","id","is","it-ch","it","ja","jv","ka","kk","km","kn","ko","ku","ky","lb","lo","lt","lv","me","mi","mk","ml","mn","mr","ms-my","ms","mt","my","nb","ne","nl-be","nl","nn","oc-lnc","pa-in","pl","pt-br","pt","ro","ru","rw","sd","se","si","sk","sl","sq","sr-cyrl","sr","ss","sv-fi","sv","sw","ta","te","tet","tg","th","tk","tl-ph","tlh","tr","tzl","tzm-latn","tzm","ug-cn","uk","ur","uz-latn","uz","vi","x-pseudo","yo","zh-cn","zh-hk","zh-tw","zh","ang","ar","az","be","bg","bn","bottom","br","ca","ca@valencia","cs","cy","da","de","de_CH","el","en","en_US","enchantment","enm","eo","es","et","eu","fa","fi","fil","fr","frm","ga","got","he","hi","hr","hu","id","it","ja","ko","la","lb","leet","li","lt","lv","mk","ml","ms","mt","nb_NO","nl","owo","peo","piglatin","pl","pr","pt_BR","pt_PT","ro","ro_MD","ru","si","sk","sl","sq","sr","sv","ta","te","th","tlh-qaak","tokipona","tr","uk","vi","zh_Hans","zh_Hant"]; +var locale_keys = ["af","am","ar-dz","ar-kw","ar-ly","ar-ma","ar-sa","ar-tn","ar","az","be","bg","bi","bm","bn","bo","br","bs","ca","cs","cv","cy","da","de-at","de-ch","de","dv","el","en-au","en-ca","en-gb","en-ie","en-il","en-in","en-nz","en-sg","en-tt","en","eo","es-do","es-pr","es-us","es","et","eu","fa","fi","fo","fr-ca","fr-ch","fr","fy","ga","gd","gl","gom-latn","gu","he","hi","hr","ht","hu","hy-am","id","is","it-ch","it","ja","jv","ka","kk","km","kn","ko","ku","ky","lb","lo","lt","lv","me","mi","mk","ml","mn","mr","ms-my","ms","mt","my","nb","ne","nl-be","nl","nn","oc-lnc","pa-in","pl","pt-br","pt","ro","ru","rw","sd","se","si","sk","sl","sq","sr-cyrl","sr","ss","sv-fi","sv","sw","ta","te","tet","tg","th","tk","tl-ph","tlh","tr","tzl","tzm-latn","tzm","ug-cn","uk","ur","uz-latn","uz","vi","x-pseudo","yo","zh-cn","zh-hk","zh-tw","zh","ang","ar","az","be","bg","bn","bottom","br","ca","ca@valencia","ckb","contributors","cs","cy","da","de","de_CH","el","en","en_US","enchantment","enm","eo","es","et","eu","fa","fi","fil","fr","frm","ga","got","he","hi","hr","hu","id","it","ja","kmr","ko","la","lb","leet","li","lt","lv","mk","ml","ms","mt","nb_NO","nl","owo","peo","piglatin","pl","pr","pt_BR","pt_PT","ro","ro_MD","ru","si","sk","sl","sq","sr","sv","ta","te","th","tlh-qaak","tokipona","tr","uk","vec","vi","zh_Hans","zh_Hant"]; precacheAndRoute( self.__WB_MANIFEST.filter((entry) => {