From 7374591458b3a3b5f01d67e55a5172dde46eeb7c Mon Sep 17 00:00:00 2001 From: Paul Date: Wed, 14 Jul 2021 13:25:40 +0100 Subject: [PATCH] Add editing role name / colour. Animate avatars on message hover. Switch to 24-hour time format by default. --- external/lang | 2 +- package.json | 2 +- src/components/common/messaging/Message.tsx | 10 ++- src/context/Locale.tsx | 5 +- .../intermediate/popovers/UserProfile.tsx | 2 +- src/pages/settings/Settings.module.scss | 49 ++++++++---- src/pages/settings/server/Panes.module.scss | 14 ++-- src/pages/settings/server/Roles.tsx | 74 ++++++++++++++++--- yarn.lock | 8 +- 9 files changed, 122 insertions(+), 44 deletions(-) diff --git a/external/lang b/external/lang index 3931bf87..9f72b064 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 3931bf87e94264d92556a2f3ee96c6051be75b02 +Subproject commit 9f72b064aad85293f332c3f7ce3f4fe5965def37 diff --git a/package.json b/package.json index 767f3009..d531110f 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.14", + "revolt.js": "4.3.3-alpha.15", "rimraf": "^3.0.2", "sass": "^1.35.1", "shade-blend-color": "^1.0.0", diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index 8e87ae28..c55d251e 100644 --- a/src/components/common/messaging/Message.tsx +++ b/src/components/common/messaging/Message.tsx @@ -1,6 +1,6 @@ import { attachContextMenu } from "preact-context-menu"; import { memo } from "preact/compat"; -import { useContext } from "preact/hooks"; +import { useContext, useState } from "preact/hooks"; import { QueuedMessage } from "../../../redux/reducers/queue"; @@ -64,6 +64,9 @@ function Message({ const openProfile = () => openScreen({ id: "profile", user_id: message.author }); + // ! FIXME: animate on hover + const [animate, setAnimate] = useState(false); + return (
{message.replies?.map((message_id, index) => ( @@ -88,7 +91,9 @@ function Message({ queued, }) : undefined - }> + } + onMouseEnter={() => setAnimate(true)} + onMouseLeave={() => setAnimate(false)}> {head ? ( ) : ( diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx index a0d1836f..5366027a 100644 --- a/src/context/Locale.tsx +++ b/src/context/Locale.tsx @@ -150,7 +150,10 @@ function Locale({ children, locale }: Props) { const dayjs = obj.dayjs; const defaults = dayjs.defaults; - const twelvehour = defaults?.twelvehour === "yes" || true; + const twelvehour = defaults?.twelvehour + ? defaults.twelvehour === "yes" + : false; + const separator: string = defaults?.date_separator ?? "/"; const date: "traditional" | "simplified" | "ISO8601" = defaults?.date_format ?? "traditional"; diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx index bc07e4d2..ff77647c 100644 --- a/src/context/intermediate/popovers/UserProfile.tsx +++ b/src/context/intermediate/popovers/UserProfile.tsx @@ -141,7 +141,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) { `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`, }}>
- +
- I32ToU32( + function getPermissions(id: string) { + return I32ToU32( id === "default" ? server.default_permissions : roles[id].permissions, ); - const [perm, setPerm] = useState(v(role)); - useEffect(() => setPerm(v(role)), [role, roles[role]?.permissions]); + } + + const { name: roleName, colour: roleColour } = roles[role] ?? {}; + + const [perm, setPerm] = useState(getPermissions(role)); + const [name, setName] = useState(roleName); + const [colour, setColour] = useState(roleColour); + + useEffect( + () => setPerm(getPermissions(role)), + [role, roles[role]?.permissions], + ); + + useEffect(() => setName(roleName), [role, roleName]); + useEffect(() => setColour(roleColour), [role, roleColour]); + + const modified = + !isEqual(perm, getPermissions(role)) || + !isEqual(name, roleName) || + !isEqual(colour, roleColour); + + const save = () => { + if (!isEqual(perm, getPermissions(role))) { + client.servers.setPermissions(server._id, role, { + server: perm[0], + channel: perm[1], + }); + } + + if (!isEqual(name, roleName) || !isEqual(colour, roleColour)) { + client.servers.editRole(server._id, role, { name, colour }); + } + }; - const modified = !isEqual(perm, v(role)); - const save = () => - client.servers.setPermissions(server._id, role, { - server: perm[0], - channel: perm[1], - }); const deleteRole = () => { setRole("default"); client.servers.deleteRole(server._id, role); @@ -92,7 +118,8 @@ export function Roles({ server }: Props) { return ( setRole(id)}> + onClick={() => setRole(id)} + style={{ color: roles[id].colour }}> {roles[id].name} ); @@ -111,6 +138,31 @@ export function Roles({ server }: Props) { Save
+ {role !== "default" && ( + <> +
+ Role Name +

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

+
+
+ Role Colour +

+ setColour(value)} + /> +

+
+ + )}
diff --git a/yarn.lock b/yarn.lock index 29260891..05ad5dbf 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.14: - version "4.3.3-alpha.14" - resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.14.tgz#f4912ee25725de6e43ba1d4fd8ab84c711678271" - integrity sha512-4p3DhEu+GUKZxczCPXR2JM04fzGlFfZdwHYjgkgU48NgPXgzxQrSv4x0FjpyIIv3xNpuO59z35mYRMLxAnBXsQ== +revolt.js@4.3.3-alpha.15: + version "4.3.3-alpha.15" + resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.15.tgz#e511ad500a20f658b15b7bad0fdb9e2a5465d1b1" + integrity sha512-24hIQEO+FIRIAQXITBH2qVvWH6LA1MeJW2/3lj6cqBgJz7lnb3ZNIXZBu5sHbUEJpIDtJiHcOEeaeh3sE2RwxA== dependencies: "@insertish/mutable" "1.1.0" axios "^0.19.2"