From 471b4b08479062bfc372f7ce9125d2e55e5702fa Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
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 de7a39f..4ed11aa 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 (
- <Header placement="secondary"
+ <Header borders
+ placement="secondary"
background={typeof bannerURL !== 'undefined'}
style={{ background: bannerURL ? `linear-gradient(to bottom, transparent 50%, #000e), url('${bannerURL}')` : undefined }}>
<ServerName>
diff --git a/src/components/common/user/UserHeader.tsx b/src/components/common/user/UserHeader.tsx
index dcd7630..e93f3fd 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 (
- <Header placement="secondary">
+ <Header borders placement="secondary">
<UserIcon
target={user}
size={32}
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 4408660..5d94fbc 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -68,6 +68,7 @@ const ServerList = styled.div`
overflow-y: scroll;
padding-bottom: 48px;
flex-direction: column;
+ // border-right: 2px solid var(--accent);
scrollbar-width: none;
@@ -100,7 +101,7 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
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) {
<ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}>
<ServerEntry invert active={homeActive}>
<Icon size={42} unread={homeUnread}>
- <img src={logoSVG} />
+ <img style={{ width: 32, height: 32 }} src={logoSVG} />
</Icon>
<span />
</ServerEntry>
</ConditionalLink>
- {/*<LineDivider />*/}
+ <LineDivider />
{
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 2b8bcb7..2d10ce2 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 cb17b8c..2b2c0d3 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<Props>`
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 22c7a35..bb496da 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 8ee5dd4..b0ed1da 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 308c6e6..47e8202 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) {
})
}
<Button disabled={selected === 'default'} error onClick={() => {}}>delete role</Button>
- <h2>permmissions</h2>
+ <h2>server permmissions</h2>
{ Object.keys(ServerPermission)
.map(perm => {
let value = ServerPermission[perm as keyof typeof ServerPermission];
return (
- <Checkbox checked={(selectedRole.permissions[0] & value) > 0} onChange={() => {}}>
+ <Checkbox checked={((selectedRole.permissions[0] >>> 0) & value) > 0} onChange={() => {}}>
+ { perm }
+ </Checkbox>
+ )
+ })
+ }
+ <h2>channel permmissions</h2>
+ { Object.keys(ChannelPermission)
+ .map(perm => {
+ let value = ChannelPermission[perm as keyof typeof ChannelPermission];
+
+ return (
+ <Checkbox checked={((selectedRole.permissions[1] >>> 0) & value) > 0} onChange={() => {}}>
{ perm }
</Checkbox>
)
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 0000000..3335848
--- /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 e0b7574..4fb88f5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,4 @@
+@import "variables";
@import "context-menu";
@import "elements";
@import "fonts";
--
GitLab