From 471b4b08479062bfc372f7ce9125d2e55e5702fa Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 1 Jul 2021 13:42:53 +0100 Subject: [PATCH] Finish up new sidebar active. Add rounded corners to sidebar. --- src/components/common/ServerHeader.tsx | 3 +- src/components/common/user/UserHeader.tsx | 2 +- .../navigation/left/ServerListSidebar.tsx | 32 ++++++------------- .../navigation/left/ServerSidebar.tsx | 2 ++ src/components/ui/Header.tsx | 6 ++++ src/context/Theme.tsx | 3 -- src/pages/settings/panes/Appearance.tsx | 1 - src/pages/settings/server/Roles.tsx | 18 +++++++++-- src/styles/_variables.scss | 3 ++ src/styles/index.scss | 1 + 10 files changed, 40 insertions(+), 31 deletions(-) create mode 100644 src/styles/_variables.scss diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index de7a39f6..4ed11aa0 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -21,7 +21,8 @@ export default function ServerHeader({ server, ctx }: Props) { const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true); return ( -
diff --git a/src/components/common/user/UserHeader.tsx b/src/components/common/user/UserHeader.tsx index dcd7630c..e93f3fd2 100644 --- a/src/components/common/user/UserHeader.tsx +++ b/src/components/common/user/UserHeader.tsx @@ -52,7 +52,7 @@ export default function UserHeader({ user }: Props) { } return ( -
+
` border-end-start-radius: 50%; ${ props => props.active && css` - background: var(--accent); + background: var(--sidebar-active); ` } } @@ -109,13 +110,13 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>` height: 46px; ${ props => props.active && css` - background: var(--accent); + background: var(--sidebar-active); &::before, &::after { // outline: 1px solid blue; } - &::before { + &::before, &::after { content: ""; display: block; position: relative; @@ -129,25 +130,12 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>` background: var(--background); border-bottom-right-radius: 32px; - box-shadow: 0 32px 0 0 var(--accent); + box-shadow: 0 32px 0 0 var(--sidebar-active); } - /*&::after { - content: ""; - display: block; - position: relative; - - width: 31px; - height: 72px; - margin-top: 100px; - margin-left: -25px; - z-index: -2; - - background: var(--background); - border-bottom-left-radius: 32px; - - box-shadow: 0 -32px 0 0 var(--accent); - }*/ + &::after { + transform: scaleY(-1) translateY(-118px); + } ` } } @@ -213,12 +201,12 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) { - + - {/**/} + { servers.map(entry => { const active = entry!._id === server?._id; diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx index 2b8bcb77..2d10ce2a 100644 --- a/src/components/navigation/left/ServerSidebar.tsx +++ b/src/components/navigation/left/ServerSidebar.tsx @@ -26,6 +26,8 @@ const ServerBase = styled.div` flex-shrink: 0; flex-direction: column; background: var(--secondary-background); + + border-start-start-radius: 8px; `; const ServerList = styled.div` diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index cb17b8c5..2b2c0d3c 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -1,6 +1,7 @@ import styled, { css } from "styled-components"; interface Props { + borders?: boolean; background?: boolean; placement: 'primary' | 'secondary' } @@ -30,4 +31,9 @@ export default styled.div` background-color: var(--secondary-header); padding: 14px; ` } + + ${ props => props.borders && css` + border-start-start-radius: 8px; + border-end-start-radius: 8px; + ` } `; diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index 22c7a357..bb496da0 100644 --- a/src/context/Theme.tsx +++ b/src/context/Theme.tsx @@ -16,7 +16,6 @@ export type Variables = | "warning" | "error" | "hover" - | "sidebar-active" | "scrollbar-thumb" | "scrollbar-track" | "primary-background" @@ -58,7 +57,6 @@ export const PRESETS: { [key: string]: Theme } = { warning: "#FAA352", error: "#F06464", hover: "rgba(0, 0, 0, 0.2)", - "sidebar-active": "#FD6671", "scrollbar-thumb": "#CA525A", "scrollbar-track": "transparent", "primary-background": "#FFFFFF", @@ -86,7 +84,6 @@ export const PRESETS: { [key: string]: Theme } = { warning: "#FAA352", error: "#F06464", hover: "rgba(0, 0, 0, 0.1)", - "sidebar-active": "#FD6671", "scrollbar-thumb": "#CA525A", "scrollbar-track": "transparent", "primary-background": "#242424", diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index 8ee5dd40..b0ed1dae 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -49,7 +49,6 @@ export function Component(props: Props & WithDispatcher) { function setAccent(accent: string) { setOverride({ accent, - "sidebar-active": accent, "scrollbar-thumb": pSBC(-0.2, accent) }); } diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx index 308c6e66..47e82023 100644 --- a/src/pages/settings/server/Roles.tsx +++ b/src/pages/settings/server/Roles.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "preact/hooks"; import Button from "../../../components/ui/Button"; import { Servers } from "revolt.js/dist/api/objects"; import Checkbox from "../../../components/ui/Checkbox"; -import { ServerPermission } from "revolt.js/dist/api/permissions"; +import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions"; interface Props { server: Servers.Server; @@ -37,13 +37,25 @@ export function Roles({ server }: Props) { }) } -

permmissions

+

server permmissions

{ Object.keys(ServerPermission) .map(perm => { let value = ServerPermission[perm as keyof typeof ServerPermission]; return ( - 0} onChange={() => {}}> + >> 0) & value) > 0} onChange={() => {}}> + { perm } + + ) + }) + } +

channel permmissions

+ { Object.keys(ChannelPermission) + .map(perm => { + let value = ChannelPermission[perm as keyof typeof ChannelPermission]; + + return ( + >> 0) & value) > 0} onChange={() => {}}> { perm } ) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 00000000..3335848c --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,3 @@ +:root { + --sidebar-active: var(--secondary-background); +} diff --git a/src/styles/index.scss b/src/styles/index.scss index e0b7574e..4fb88f54 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,4 @@ +@import "variables"; @import "context-menu"; @import "elements"; @import "fonts";