From 8c6947f7d455018d60bb26b8d17314e0acaf6811 Mon Sep 17 00:00:00 2001 From: Paul Date: Sat, 24 Jul 2021 19:39:41 +0100 Subject: [PATCH] Add category editor to servers. --- external/lang | 2 +- package.json | 2 +- .../common/messaging/MessageBase.tsx | 2 +- src/components/ui/Tip.tsx | 8 +- src/pages/settings/ServerSettings.tsx | 13 +- src/pages/settings/channel/Permissions.tsx | 4 +- src/pages/settings/server/Categories.tsx | 153 ++++++++++++++++++ src/revision.ts | 7 +- ui/ui.tsx | 97 ++++++----- yarn.lock | 8 +- 10 files changed, 242 insertions(+), 54 deletions(-) create mode 100644 src/pages/settings/server/Categories.tsx diff --git a/external/lang b/external/lang index b40f8ce5..ab87bdcf 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit b40f8ce53831a590c0ffdd02f8da9fd35b7a3701 +Subproject commit ab87bdcf15d60cfb6f3bd52af445456e5fd23e5f diff --git a/package.json b/package.json index c2d8fb9d..4a44f8be 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "react-router-dom": "^5.2.0", "react-scroll": "^1.8.2", "redux": "^4.1.0", - "revolt.js": "4.3.3-alpha.17", + "revolt.js": "^4.3.3-alpha.18", "rimraf": "^3.0.2", "sass": "^1.35.1", "shade-blend-color": "^1.0.0", diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx index 04c3d1d9..a42f62fb 100644 --- a/src/components/common/messaging/MessageBase.tsx +++ b/src/components/common/messaging/MessageBase.tsx @@ -172,9 +172,9 @@ export const MessageContent = styled.div` flex-grow: 1; display: flex; // overflow: hidden; - font-size: var(--text-size); flex-direction: column; justify-content: center; + font-size: var(--text-size); `; export const DetailBase = styled.div` diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx index 23621168..2748cb49 100644 --- a/src/components/ui/Tip.tsx +++ b/src/components/ui/Tip.tsx @@ -55,11 +55,13 @@ export const TipBase = styled.div` `} `; -export default function Tip(props: Props & { children: Children }) { - const { children, ...tipProps } = props; +export default function Tip( + props: Props & { children: Children; hideSeparator?: boolean }, +) { + const { children, hideSeparator, ...tipProps } = props; return ( <> - + {!hideSeparator && } {props.children} diff --git a/src/pages/settings/ServerSettings.tsx b/src/pages/settings/ServerSettings.tsx index 66c6881d..dca44220 100644 --- a/src/pages/settings/ServerSettings.tsx +++ b/src/pages/settings/ServerSettings.tsx @@ -1,4 +1,4 @@ -import { ListUl, ListCheck } from "@styled-icons/boxicons-regular"; +import { ListUl, ListCheck, ListMinus } from "@styled-icons/boxicons-regular"; import { XSquare, Share, Group } from "@styled-icons/boxicons-solid"; import { Route, useHistory, useParams } from "react-router-dom"; @@ -11,6 +11,7 @@ import Category from "../../components/ui/Category"; import { GenericSettings } from "./GenericSettings"; import { Bans } from "./server/Bans"; +import { Categories } from "./server/Categories"; import { Invites } from "./server/Invites"; import { Members } from "./server/Members"; import { Overview } from "./server/Overview"; @@ -41,6 +42,13 @@ export default function ServerSettings() { ), }, + { + id: "categories", + icon: , + title: ( + + ), + }, { id: "members", icon: , @@ -68,6 +76,9 @@ export default function ServerSettings() { }, ]} children={[ + + + , diff --git a/src/pages/settings/channel/Permissions.tsx b/src/pages/settings/channel/Permissions.tsx index 5a933c32..963694ae 100644 --- a/src/pages/settings/channel/Permissions.tsx +++ b/src/pages/settings/channel/Permissions.tsx @@ -83,8 +83,10 @@ export default function Permissions({ channel }: Props) { ); })} -

channel per??issions

+

channel permissions

{Object.keys(ChannelPermission).map((perm) => { + if (perm === "View") return null; + const value = ChannelPermission[perm as keyof typeof ChannelPermission]; if (value & DEFAULT_PERMISSION_DM) { diff --git a/src/pages/settings/server/Categories.tsx b/src/pages/settings/server/Categories.tsx new file mode 100644 index 00000000..8f35bcf1 --- /dev/null +++ b/src/pages/settings/server/Categories.tsx @@ -0,0 +1,153 @@ +import { XCircle } from "@styled-icons/boxicons-regular"; +import isEqual from "lodash.isequal"; +import { Channels, Servers, Users } from "revolt.js/dist/api/objects"; +import { Route } from "revolt.js/dist/api/routes"; +import { ulid } from "ulid"; + +import styles from "./Panes.module.scss"; +import { Text } from "preact-i18n"; +import { useContext, useEffect, useState } from "preact/hooks"; + +import { AppContext } from "../../../context/revoltjs/RevoltClient"; +import { useChannels } from "../../../context/revoltjs/hooks"; + +import ChannelIcon from "../../../components/common/ChannelIcon"; +import UserIcon from "../../../components/common/user/UserIcon"; +import Button from "../../../components/ui/Button"; +import ComboBox from "../../../components/ui/ComboBox"; +import IconButton from "../../../components/ui/IconButton"; +import InputBox from "../../../components/ui/InputBox"; +import Preloader from "../../../components/ui/Preloader"; +import Tip from "../../../components/ui/Tip"; + +interface Props { + server: Servers.Server; +} + +// ! FIXME: really bad code +export function Categories({ server }: Props) { + const client = useContext(AppContext); + const channels = useChannels(server.channels) as ( + | Channels.TextChannel + | Channels.VoiceChannel + )[]; + + const [cats, setCats] = useState( + server.categories ?? [], + ); + + const [name, setName] = useState(""); + + return ( +
+ This section is under construction. +

+ +

+

categories

+ {cats.map((category) => ( +
+ + setCats( + cats.map((y) => + y.id === category.id + ? { + ...y, + title: e.currentTarget.value, + } + : y, + ), + ) + } + contrast + /> + +
+ ))} +

create new

+

+ setName(e.currentTarget.value)} + contrast + /> + +

+

channels

+ {channels.map((channel) => { + return ( +
+
+ {" "} + {channel.name} +
+ + x.channels.includes(channel._id), + )?.id ?? "none" + } + onChange={(e) => + setCats( + cats.map((x) => { + return { + ...x, + channels: [ + ...x.channels.filter( + (y) => y !== channel._id, + ), + ...(e.currentTarget.value === + x.id + ? [channel._id] + : []), + ], + }; + }), + ) + }> + + {cats.map((x) => ( + + ))} + +
+ ); + })} +
+ ); +} diff --git a/src/revision.ts b/src/revision.ts index b9bf0d03..11f71287 100644 --- a/src/revision.ts +++ b/src/revision.ts @@ -1,3 +1,4 @@ -export const REPO_URL = "https://gitlab.insrt.uk/revolt/revite/-/commit"; -export const GIT_REVISION = "__GIT_REVISION__"; -export const GIT_BRANCH = "__GIT_BRANCH__"; +export const REPO_URL: string = + "https://gitlab.insrt.uk/revolt/revite/-/commit"; +export const GIT_REVISION: string = "__GIT_REVISION__"; +export const GIT_BRANCH: string = "__GIT_BRANCH__"; diff --git a/ui/ui.tsx b/ui/ui.tsx index cf8f0a79..46123b3a 100644 --- a/ui/ui.tsx +++ b/ui/ui.tsx @@ -1,41 +1,49 @@ -import { useState } from 'preact/hooks'; -import styled from 'styled-components'; -import '../src/styles/index.scss' -import { render } from 'preact' +import styled from "styled-components"; -import Theme from '../src/context/Theme'; +import "../src/styles/index.scss"; +import { render } from "preact"; +import { useState } from "preact/hooks"; + +import Theme from "../src/context/Theme"; + +import Banner from "../src/components/ui/Banner"; +import Button from "../src/components/ui/Button"; +import Checkbox from "../src/components/ui/Checkbox"; +import ColourSwatches from "../src/components/ui/ColourSwatches"; +import ComboBox from "../src/components/ui/ComboBox"; +import InputBox from "../src/components/ui/InputBox"; +import Overline from "../src/components/ui/Overline"; +import Radio from "../src/components/ui/Radio"; +import Tip from "../src/components/ui/Tip"; export const UIDemo = styled.div` - gap: 12px; - padding: 12px; - display: flex; - flex-direction: column; - align-items: flex-start; + gap: 12px; + padding: 12px; + display: flex; + flex-direction: column; + align-items: flex-start; `; -import Button from '../src/components/ui/Button'; -import Banner from '../src/components/ui/Banner'; -import Checkbox from '../src/components/ui/Checkbox'; -import ComboBox from '../src/components/ui/ComboBox'; -import InputBox from '../src/components/ui/InputBox'; -import ColourSwatches from '../src/components/ui/ColourSwatches'; -import Tip from '../src/components/ui/Tip'; -import Radio from '../src/components/ui/Radio'; -import Overline from '../src/components/ui/Overline'; - export function UI() { - let [checked, setChecked] = useState(false); - let [colour, setColour] = useState('#FD6671'); - let [selected, setSelected] = useState<'a' | 'b' | 'c'>('a'); + let [checked, setChecked] = useState(false); + let [colour, setColour] = useState("#FD6671"); + let [selected, setSelected] = useState<"a" | "b" | "c">("a"); return ( <> - + I am a banner! - Do you want thing?? + + Do you want thing?? + @@ -46,24 +54,35 @@ export function UI() { - setColour(v)} /> - I am a tip! I provide valuable information. - setSelected('a')}>First option - setSelected('b')}>Second option - setSelected('c')}>Last option + setColour(v)} /> + I am a tip! I provide valuable information. + setSelected("a")}> + First option + + setSelected("b")}> + Second option + + setSelected("c")}> + Last option + Normal overline Subtle overline Error overline Normal overline - Subtle overline + + Subtle overline + - ) + ); } -render(<> - - - - - -, document.getElementById('app')!) +render( + <> + + + + + + , + document.getElementById("app")!, +); diff --git a/yarn.lock b/yarn.lock index db7d5ac6..a9966247 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3563,10 +3563,10 @@ reusify@^1.0.4: resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== -revolt.js@4.3.3-alpha.17: - version "4.3.3-alpha.17" - resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.17.tgz#0745d251c695840b87e98098bcc4d67c7cc15de5" - integrity sha512-MjxVnkkeX5md5NxZNRS9fl06jsjcDciAxKnbZ2rkBYJofQ94tvr1CYBWvFhS/u/tAR80HAPIEjJVC9HKJDK9Fg== +revolt.js@^4.3.3-alpha.18: + version "4.3.3-alpha.18" + resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.18.tgz#a46cef600099ea22d2f6dc8d09def7e9135839af" + integrity sha512-3QTgX1407bLZEkxkhUsetalUGxcogpFLiTm+mPE3T9bAKgHlTC7y6F5JgHGtmMGWxsjKCDLHgHoAllwGwXJaig== dependencies: "@insertish/mutable" "1.1.0" axios "^0.19.2"