feat(@ui): migrate line divider, preloader and save status

This commit is contained in:
Paul Makles 2022-05-30 12:40:01 +01:00
parent ab77d4a812
commit b4777e9816
30 changed files with 55 additions and 206 deletions

View file

@ -5,15 +5,14 @@ import styles from "./Attachment.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Button, Preloader } from "@revoltchat/ui";
import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
import {
AppContext,
StatusContext,
} from "../../../../context/revoltjs/RevoltClient";
import Preloader from "../../../ui/Preloader";
import { Button } from "@revoltchat/ui";
interface Props {
attachment: API.File;
}

View file

@ -7,7 +7,7 @@ import styled, { css } from "styled-components/macro";
import { useContext, useEffect, useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Preloader } from "@revoltchat/ui";
import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
@ -20,7 +20,6 @@ import { takeError } from "../../../../context/revoltjs/util";
import ServerIcon from "../../../../components/common/ServerIcon";
import Overline from "../../../ui/Overline";
import Preloader from "../../../ui/Preloader";
const EmbedInviteBase = styled.div`
width: 400px;

View file

@ -5,13 +5,12 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Button, InputBox } from "@revoltchat/ui";
import { Button, InputBox, Preloader } from "@revoltchat/ui";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import Message from "../../common/messaging/Message";
import Overline from "../../ui/Overline";
import Preloader from "../../ui/Preloader";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
type SearchState =

View file

@ -1,9 +0,0 @@
import styled from "styled-components/macro";
export default styled.div`
height: 0;
opacity: 0.6;
flex-shrink: 0;
margin: 8px 15px;
border-top: 1px solid var(--tertiary-foreground);
`;

View file

@ -1,104 +0,0 @@
import styled, { keyframes } from "styled-components/macro";
const skSpinner = keyframes`
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
`;
const prRing = keyframes`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`;
const PreloaderBase = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.spinner {
width: 58px;
display: flex;
text-align: center;
margin: 100px auto 0;
justify-content: space-between;
}
.spinner > div {
width: 14px;
height: 14px;
background-color: var(--tertiary-foreground);
border-radius: 100%;
display: inline-block;
animation: ${skSpinner} 1.4s infinite ease-in-out both;
}
.spinner div:nth-child(1) {
animation-delay: -0.32s;
}
.spinner div:nth-child(2) {
animation-delay: -0.16s;
}
.ring {
display: inline-block;
position: relative;
width: 48px;
height: 52px;
}
.ring div {
width: 32px;
margin: 8px;
height: 32px;
display: block;
position: absolute;
box-sizing: border-box;
border: 2px solid #fff;
border-radius: var(--border-radius-half);
animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.ring div:nth-child(1) {
animation-delay: -0.45s;
}
.ring div:nth-child(2) {
animation-delay: -0.3s;
}
.ring div:nth-child(3) {
animation-delay: -0.15s;
}
`;
interface Props {
type: "spinner" | "ring";
}
export default function Preloader({ type }: Props) {
return (
<PreloaderBase>
<div class={type}>
<div />
<div />
<div />
</div>
</PreloaderBase>
);
}

View file

@ -1,32 +0,0 @@
import { Check, CloudUpload } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import styled from "styled-components/macro";
const StatusBase = styled.div`
gap: 4px;
padding: 4px;
display: flex;
align-items: center;
text-transform: capitalize;
`;
export type EditStatus = "saved" | "editing" | "saving";
interface Props {
status: EditStatus;
}
export default function SaveStatus({ status }: Props) {
return (
<StatusBase>
{status === "saved" ? (
<Check size={20} />
) : status === "editing" ? (
<Pencil size={20} />
) : (
<CloudUpload size={20} />
)}
{/* FIXME: add i18n */}
<span>{status}</span>
</StatusBase>
);
}

View file

@ -4,11 +4,15 @@ import { ContextMenuTrigger } from "preact-context-menu";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { LinkProvider, TextProvider, TrigProvider } from "@revoltchat/ui";
import {
LinkProvider,
Preloader,
TextProvider,
TrigProvider,
} from "@revoltchat/ui";
import { hydrateState } from "../mobx/State";
import Preloader from "../components/ui/Preloader";
import { Children } from "../types/Preact";
import Locale from "./Locale";
import Theme from "./Theme";

View file

@ -4,9 +4,8 @@ import styles from "./Onboarding.module.scss";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Preloader } from "@revoltchat/ui";
import Preloader from "../../../components/ui/Preloader";
import wideSVG from "/assets/wide.svg";
import FormField from "../../../pages/login/FormField";

View file

@ -15,7 +15,7 @@ import styles from "./UserProfile.module.scss";
import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import { Button, IconButton } from "@revoltchat/ui";
import { Button, IconButton, Preloader } from "@revoltchat/ui";
import { noop } from "../../../lib/js";
@ -29,7 +29,6 @@ import UserStatus from "../../../components/common/user/UserStatus";
import Markdown from "../../../components/markdown/Markdown";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import Preloader from "../../../components/ui/Preloader";
import {
ClientStatus,
StatusContext,

View file

@ -7,11 +7,10 @@ import classNames from "classnames";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { IconButton } from "@revoltchat/ui";
import { IconButton, Preloader } from "@revoltchat/ui";
import { determineFileSize } from "../../lib/fileSize";
import Preloader from "../../components/ui/Preloader";
import { useIntermediate } from "../intermediate/Intermediate";
import { AppContext } from "./RevoltClient";
import { takeError } from "./util";

View file

@ -4,7 +4,7 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import Preloader from "../../components/ui/Preloader";
import { Preloader } from "@revoltchat/ui";
import { Children } from "../../types/Preact";
import { ClientStatus, StatusContext } from "./RevoltClient";

View file

@ -3,12 +3,12 @@ import { observer } from "mobx-react-lite";
import { Client } from "revolt.js";
import { createContext } from "preact";
import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { useContext, useEffect, useState } from "preact/hooks";
import { Preloader } from "@revoltchat/ui";
import { useApplicationState } from "../../mobx/State";
import Preloader from "../../components/ui/Preloader";
import { Children } from "../../types/Preact";
import { useIntermediate } from "../intermediate/Intermediate";
import { registerEvents } from "./events";

View file

@ -13,7 +13,7 @@ import {
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { IconButton } from "@revoltchat/ui";
import { IconButton, LineDivider } from "@revoltchat/ui";
import { useApplicationState } from "../mobx/State";
import { QueuedMessage } from "../mobx/stores/MessageQueue";
@ -30,7 +30,6 @@ import CMNotifications from "./contextmenu/CMNotifications";
import Tooltip from "../components/common/Tooltip";
import UserStatus from "../components/common/user/UserStatus";
import LineDivider from "../components/ui/LineDivider";
import { Children } from "../types/Preact";
import { internalEmit } from "./eventEmitter";
import { getRenderer } from "./renderer/Singleton";

View file

@ -15,11 +15,11 @@ import { Server } from "revolt.js";
import { ContextMenuWithData, MenuItem } from "preact-context-menu";
import { Text } from "preact-i18n";
import { LineDivider } from "@revoltchat/ui";
import { useApplicationState } from "../../mobx/State";
import { NotificationState } from "../../mobx/stores/NotificationOptions";
import LineDivider from "../../components/ui/LineDivider";
import { Children } from "../../types/Preact";
interface Action {

View file

@ -2,7 +2,7 @@ import { Route, Switch } from "react-router-dom";
import { lazy, Suspense } from "preact/compat";
import { Masks } from "@revoltchat/ui";
import { Masks, Preloader } from "@revoltchat/ui";
import ErrorBoundary from "../lib/ErrorBoundary";
import FakeClient from "../lib/FakeClient";
@ -10,7 +10,6 @@ import FakeClient from "../lib/FakeClient";
import Context from "../context";
import { CheckAuth } from "../context/revoltjs/CheckAuth";
import Preloader from "../components/ui/Preloader";
import Invite from "./invite/Invite";
const Login = lazy(() => import("./login/Login"));

View file

@ -16,6 +16,8 @@ import {
useState,
} from "preact/hooks";
import { Preloader } from "@revoltchat/ui";
import { defer } from "../../../lib/defer";
import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
import { getRenderer } from "../../../lib/renderer/Singleton";
@ -28,8 +30,6 @@ import {
StatusContext,
} from "../../../context/revoltjs/RevoltClient";
import Preloader from "../../../components/ui/Preloader";
import ConversationStart from "./ConversationStart";
import MessageRenderer from "./MessageRenderer";

View file

@ -1,5 +1,6 @@
/* eslint-disable react-hooks/rules-of-hooks */
import { X } from "@styled-icons/boxicons-regular";
import dayjs from "dayjs";
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { API } from "revolt.js";
@ -11,7 +12,7 @@ import { decodeTime } from "ulid";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { MessageDivider } from "@revoltchat/ui";
import { MessageDivider, Preloader } from "@revoltchat/ui";
import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter";
import { ChannelRenderer } from "../../../lib/renderer/Singleton";
@ -23,11 +24,9 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";
import Message from "../../../components/common/messaging/Message";
import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
import Preloader from "../../../components/ui/Preloader";
import { Children } from "../../../types/Preact";
import ConversationStart from "./ConversationStart";
import MessageEditor from "./MessageEditor";
import dayjs from "dayjs";
interface Props {
last_id?: string;
@ -126,7 +125,12 @@ export default observer(({ last_id, renderer, highlight }: Props) => {
}
if (unread || date) {
render.push(<MessageDivider date={dayjs(date).format("LL")} unread={unread} />);
render.push(
<MessageDivider
date={dayjs(date).format("LL")}
unread={unread}
/>,
);
head = true;
}

View file

@ -5,6 +5,8 @@ import styled, { css } from "styled-components/macro";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { Preloader } from "@revoltchat/ui";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../mobx/State";
@ -13,7 +15,6 @@ import { Overrides } from "../../context/Theme";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import Header from "../../components/ui/Header";
import Preloader from "../../components/ui/Preloader";
const Container = styled.div`
flex-grow: 1;

View file

@ -7,9 +7,8 @@ import styles from "./Invite.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Preloader } from "@revoltchat/ui";
import { defer } from "../../lib/defer";
import { TextReact } from "../../lib/i18n";
import { useApplicationState } from "../../mobx/State";
@ -25,7 +24,6 @@ import { takeError } from "../../context/revoltjs/util";
import ServerIcon from "../../components/common/ServerIcon";
import UserIcon from "../../components/common/user/UserIcon";
import Overline from "../../components/ui/Overline";
import Preloader from "../../components/ui/Preloader";
export default function Invite() {
const history = useHistory();

View file

@ -4,14 +4,13 @@ import styled from "styled-components/macro";
import { useEffect, useState } from "preact/hooks";
import { Button, ComboBox } from "@revoltchat/ui";
import { Button, ComboBox, Preloader } from "@revoltchat/ui";
import { useClient } from "../../context/revoltjs/RevoltClient";
import UserIcon from "../../components/common/user/UserIcon";
import Markdown from "../../components/markdown/Markdown";
import Overline from "../../components/ui/Overline";
import Preloader from "../../components/ui/Preloader";
import Tip from "../../components/ui/Tip";
const BotInfo = styled.div`

View file

@ -5,9 +5,9 @@ import styles from "../Login.module.scss";
import { Text } from "preact-i18n";
import { useEffect } from "preact/hooks";
import { useApplicationState } from "../../../mobx/State";
import { Preloader } from "@revoltchat/ui";
import Preloader from "../../../components/ui/Preloader";
import { useApplicationState } from "../../../mobx/State";
export interface CaptchaProps {
onSuccess: (token?: string) => void;

View file

@ -6,17 +6,16 @@ import styles from "../Login.module.scss";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Preloader } from "@revoltchat/ui";
import { Tip } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { takeError } from "../../../context/revoltjs/util";
import Overline from "../../../components/ui/Overline";
import Preloader from "../../../components/ui/Preloader";
import WaveSVG from "../../settings/assets/wave.svg";
import { Tip } from "@revoltchat/ui";
import Overline from "../../../components/ui/Overline";
import FormField from "../FormField";
import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
import { MailProvider } from "./MailProvider";

View file

@ -2,14 +2,13 @@ import { useHistory, useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "preact/hooks";
import { Preloader } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { takeError } from "../../../context/revoltjs/util";
import Overline from "../../../components/ui/Overline";
import Preloader from "../../../components/ui/Preloader";
import { Form } from "./Form";
export function FormResend() {

View file

@ -13,7 +13,7 @@ import {
useState,
} from "preact/hooks";
import { IconButton } from "@revoltchat/ui";
import { IconButton, LineDivider } from "@revoltchat/ui";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@ -22,7 +22,6 @@ import { useApplicationState } from "../../mobx/State";
import ButtonItem from "../../components/navigation/items/ButtonItem";
import Category from "../../components/ui/Category";
import Header from "../../components/ui/Header";
import LineDivider from "../../components/ui/LineDivider";
import { Children } from "../../types/Preact";
interface Props {

View file

@ -13,13 +13,12 @@ import { Route, Switch, useHistory, useParams } from "react-router-dom";
import styles from "./Settings.module.scss";
import { Text } from "preact-i18n";
import { LineDivider } from "@revoltchat/ui";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import { useClient } from "../../context/revoltjs/RevoltClient";
import Category from "../../components/ui/Category";
import LineDivider from "../../components/ui/LineDivider";
import ButtonItem from "../../components/navigation/items/ButtonItem";
import { GenericSettings } from "./GenericSettings";
import { Bans } from "./server/Bans";

View file

@ -29,6 +29,8 @@ import { openContextMenu } from "preact-context-menu";
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { LineDivider } from "@revoltchat/ui";
import { useApplicationState } from "../../mobx/State";
import { useIntermediate } from "../../context/intermediate/Intermediate";
@ -38,8 +40,6 @@ import { AppContext, LogOutContext } from "../../context/revoltjs/RevoltClient";
import UserIcon from "../../components/common/user/UserIcon";
import { Username } from "../../components/common/user/UserShort";
import UserStatus from "../../components/common/user/UserStatus";
import LineDivider from "../../components/ui/LineDivider";
import ButtonItem from "../../components/navigation/items/ButtonItem";
import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
import { APP_VERSION } from "../../version";

View file

@ -18,13 +18,12 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Preloader } from "@revoltchat/ui";
import { dayjs } from "../../../context/Locale";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import Preloader from "../../../components/ui/Preloader";
import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";

View file

@ -8,10 +8,9 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useMemo, useState } from "preact/hooks";
import { IconButton, InputBox } from "@revoltchat/ui";
import { IconButton, InputBox, Preloader } from "@revoltchat/ui";
import UserIcon from "../../../components/common/user/UserIcon";
import Preloader from "../../../components/ui/Preloader";
interface InnerProps {
ban: API.ServerBan;

View file

@ -8,6 +8,8 @@ import { ulid } from "ulid";
import { Text } from "preact-i18n";
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import { SaveStatus } from "@revoltchat/ui";
import { useAutosave } from "../../../lib/debounce";
import { Draggable, Droppable } from "../../../lib/dnd";
import { noop } from "../../../lib/js";
@ -15,7 +17,6 @@ import { noop } from "../../../lib/js";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import ChannelIcon from "../../../components/common/ChannelIcon";
import SaveStatus, { EditStatus } from "../../../components/ui/SaveStatus";
const KanbanEntry = styled.div`
padding: 2px 4px;
@ -132,7 +133,9 @@ interface Props {
}
export const Categories = observer(({ server }: Props) => {
const [status, setStatus] = useState<EditStatus>("saved");
const [status, setStatus] = useState<"saved" | "editing" | "saving">(
"saved",
);
const [categories, setCategories] = useState<API.Category[]>(
server.categories ?? [],
);

View file

@ -7,13 +7,12 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { IconButton } from "@revoltchat/ui";
import { IconButton, Preloader } from "@revoltchat/ui";
import { getChannelName } from "../../../context/revoltjs/util";
import UserIcon from "../../../components/common/user/UserIcon";
import { Username } from "../../../components/common/user/UserShort";
import Preloader from "../../../components/ui/Preloader";
interface InnerProps {
invite: API.Invite;