Skip to content
Snippets Groups Projects
Commit 471b4b08 authored by insert's avatar insert
Browse files

Finish up new sidebar active.

Add rounded corners to sidebar.
parent c724ffae
Branches
No related merge requests found
......@@ -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>
......
......@@ -52,7 +52,7 @@ export default function UserHeader({ user }: Props) {
}
return (
<Header placement="secondary">
<Header borders placement="secondary">
<UserIcon
target={user}
size={32}
......
......@@ -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;
......
......@@ -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`
......
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;
` }
`;
......@@ -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",
......
......@@ -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)
});
}
......
......@@ -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>
)
......
:root {
--sidebar-active: var(--secondary-background);
}
@import "variables";
@import "context-menu";
@import "elements";
@import "fonts";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment