mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 22:50:59 -05:00
feat(@ui): port category button
This commit is contained in:
Paul Makles
parent
f3bdbe52d9
commit
74f8c552ed
9 changed files with 30 additions and 194 deletions
|
|
@ -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={
|
||||
<Text id="app.settings.pages.appearance.discover.description" />
|
||||
}
|
||||
hover>
|
||||
}>
|
||||
<Text id="app.settings.pages.appearance.discover.title" />
|
||||
</CategoryButton>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -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<BaseProps>`
|
||||
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 (
|
||||
<CategoryBase
|
||||
hover={hover || typeof onClick !== "undefined"}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
account={account}>
|
||||
{icon}
|
||||
<div class="content">
|
||||
<div className="title">{children}</div>
|
||||
|
||||
<div className="description">{description}</div>
|
||||
</div>
|
||||
<div class="action">
|
||||
{typeof action === "string" ? (
|
||||
action === "chevron" ? (
|
||||
<ChevronRight size={24} />
|
||||
) : (
|
||||
<LinkExternal size={20} />
|
||||
)
|
||||
) : (
|
||||
action
|
||||
)}
|
||||
</div>
|
||||
</CategoryBase>
|
||||
);
|
||||
}
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<CategoryButton
|
||||
hover
|
||||
action="external"
|
||||
icon={<Github size={24} />}
|
||||
description={
|
||||
|
|
@ -29,7 +28,6 @@ export function Feedback() {
|
|||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<CategoryButton
|
||||
hover
|
||||
action="external"
|
||||
icon={<ListOl size={24} />}
|
||||
description={
|
||||
|
|
@ -43,7 +41,6 @@ export function Feedback() {
|
|||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<CategoryButton
|
||||
hover
|
||||
action="external"
|
||||
icon={<BugAlt size={24} />}
|
||||
description={
|
||||
|
|
@ -55,7 +52,6 @@ export function Feedback() {
|
|||
<Link to="/invite/Testers">
|
||||
<a>
|
||||
<CategoryButton
|
||||
hover
|
||||
action="chevron"
|
||||
icon={<Group size={24} />}
|
||||
description="You can report issues and discuss improvements with us directly here.">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue