Finish up new sidebar active.

Add rounded corners to sidebar.
This commit is contained in:
Paul 2021-07-01 13:42:53 +01:00
parent c724ffae43
commit 471b4b0847
10 changed files with 40 additions and 31 deletions

View file

@ -21,7 +21,8 @@ export default function ServerHeader({ server, ctx }: Props) {
const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true); const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true);
return ( return (
<Header placement="secondary" <Header borders
placement="secondary"
background={typeof bannerURL !== 'undefined'} background={typeof bannerURL !== 'undefined'}
style={{ background: bannerURL ? `linear-gradient(to bottom, transparent 50%, #000e), url('${bannerURL}')` : undefined }}> style={{ background: bannerURL ? `linear-gradient(to bottom, transparent 50%, #000e), url('${bannerURL}')` : undefined }}>
<ServerName> <ServerName>

View file

@ -52,7 +52,7 @@ export default function UserHeader({ user }: Props) {
} }
return ( return (
<Header placement="secondary"> <Header borders placement="secondary">
<UserIcon <UserIcon
target={user} target={user}
size={32} size={32}

View file

@ -68,6 +68,7 @@ const ServerList = styled.div`
overflow-y: scroll; overflow-y: scroll;
padding-bottom: 48px; padding-bottom: 48px;
flex-direction: column; flex-direction: column;
// border-right: 2px solid var(--accent);
scrollbar-width: none; scrollbar-width: none;
@ -100,7 +101,7 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
border-end-start-radius: 50%; border-end-start-radius: 50%;
${ props => props.active && css` ${ 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; height: 46px;
${ props => props.active && css` ${ props => props.active && css`
background: var(--accent); background: var(--sidebar-active);
&::before, &::after { &::before, &::after {
// outline: 1px solid blue; // outline: 1px solid blue;
} }
&::before { &::before, &::after {
content: ""; content: "";
display: block; display: block;
position: relative; position: relative;
@ -129,25 +130,12 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
background: var(--background); background: var(--background);
border-bottom-right-radius: 32px; border-bottom-right-radius: 32px;
box-shadow: 0 32px 0 0 var(--accent); box-shadow: 0 32px 0 0 var(--sidebar-active);
} }
/*&::after { &::after {
content: ""; transform: scaleY(-1) translateY(-118px);
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);
}*/
` } ` }
} }
@ -213,12 +201,12 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
<ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}> <ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}>
<ServerEntry invert active={homeActive}> <ServerEntry invert active={homeActive}>
<Icon size={42} unread={homeUnread}> <Icon size={42} unread={homeUnread}>
<img src={logoSVG} /> <img style={{ width: 32, height: 32 }} src={logoSVG} />
</Icon> </Icon>
<span /> <span />
</ServerEntry> </ServerEntry>
</ConditionalLink> </ConditionalLink>
{/*<LineDivider />*/} <LineDivider />
{ {
servers.map(entry => { servers.map(entry => {
const active = entry!._id === server?._id; const active = entry!._id === server?._id;

View file

@ -26,6 +26,8 @@ const ServerBase = styled.div`
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
background: var(--secondary-background); background: var(--secondary-background);
border-start-start-radius: 8px;
`; `;
const ServerList = styled.div` const ServerList = styled.div`

View file

@ -1,6 +1,7 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
borders?: boolean;
background?: boolean; background?: boolean;
placement: 'primary' | 'secondary' placement: 'primary' | 'secondary'
} }
@ -30,4 +31,9 @@ export default styled.div<Props>`
background-color: var(--secondary-header); background-color: var(--secondary-header);
padding: 14px; padding: 14px;
` } ` }
${ props => props.borders && css`
border-start-start-radius: 8px;
border-end-start-radius: 8px;
` }
`; `;

View file

@ -16,7 +16,6 @@ export type Variables =
| "warning" | "warning"
| "error" | "error"
| "hover" | "hover"
| "sidebar-active"
| "scrollbar-thumb" | "scrollbar-thumb"
| "scrollbar-track" | "scrollbar-track"
| "primary-background" | "primary-background"
@ -58,7 +57,6 @@ export const PRESETS: { [key: string]: Theme } = {
warning: "#FAA352", warning: "#FAA352",
error: "#F06464", error: "#F06464",
hover: "rgba(0, 0, 0, 0.2)", hover: "rgba(0, 0, 0, 0.2)",
"sidebar-active": "#FD6671",
"scrollbar-thumb": "#CA525A", "scrollbar-thumb": "#CA525A",
"scrollbar-track": "transparent", "scrollbar-track": "transparent",
"primary-background": "#FFFFFF", "primary-background": "#FFFFFF",
@ -86,7 +84,6 @@ export const PRESETS: { [key: string]: Theme } = {
warning: "#FAA352", warning: "#FAA352",
error: "#F06464", error: "#F06464",
hover: "rgba(0, 0, 0, 0.1)", hover: "rgba(0, 0, 0, 0.1)",
"sidebar-active": "#FD6671",
"scrollbar-thumb": "#CA525A", "scrollbar-thumb": "#CA525A",
"scrollbar-track": "transparent", "scrollbar-track": "transparent",
"primary-background": "#242424", "primary-background": "#242424",

View file

@ -49,7 +49,6 @@ export function Component(props: Props & WithDispatcher) {
function setAccent(accent: string) { function setAccent(accent: string) {
setOverride({ setOverride({
accent, accent,
"sidebar-active": accent,
"scrollbar-thumb": pSBC(-0.2, accent) "scrollbar-thumb": pSBC(-0.2, accent)
}); });
} }

View file

@ -2,7 +2,7 @@ import { useEffect, useState } from "preact/hooks";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import { Servers } from "revolt.js/dist/api/objects"; import { Servers } from "revolt.js/dist/api/objects";
import Checkbox from "../../../components/ui/Checkbox"; 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 { interface Props {
server: Servers.Server; server: Servers.Server;
@ -37,13 +37,25 @@ export function Roles({ server }: Props) {
}) })
} }
<Button disabled={selected === 'default'} error onClick={() => {}}>delete role</Button> <Button disabled={selected === 'default'} error onClick={() => {}}>delete role</Button>
<h2>permmissions</h2> <h2>server permmissions</h2>
{ Object.keys(ServerPermission) { Object.keys(ServerPermission)
.map(perm => { .map(perm => {
let value = ServerPermission[perm as keyof typeof ServerPermission]; let value = ServerPermission[perm as keyof typeof ServerPermission];
return ( 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 } { perm }
</Checkbox> </Checkbox>
) )

View file

@ -0,0 +1,3 @@
:root {
--sidebar-active: var(--secondary-background);
}

View file

@ -1,3 +1,4 @@
@import "variables";
@import "context-menu"; @import "context-menu";
@import "elements"; @import "elements";
@import "fonts"; @import "fonts";