cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-26 07:22:10 -05:00
Code Issues Projects Releases Packages Wiki Activity

Small update for desktop app

Browse source
This commit is contained in:
nizune 2021-08-02 12:22:39 +02:00
parent 12047ba944
commit ab54afc1e0
3 changed files with 66 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -1,4 +1,5 @@
import { Plus } from "@styled-icons/boxicons-regular"; import { Plus } from "@styled-icons/boxicons-regular";
import { Compass } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useLocation, useParams } from "react-router-dom"; import { useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users"; import { RelationshipStatus } from "revolt-api/types/Users";
@ -94,6 +95,10 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
display: flex; display: flex;
align-items: center; align-items: center;
:focus {
outline: 3px solid blue;
}
> div { > div {
height: 42px; height: 42px;
padding-inline-start: 6px; padding-inline-start: 6px;
@ -299,6 +304,15 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
}> }>
<Plus size={36} /> <Plus size={36} />
</IconButton> </IconButton>
{/*<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Compass size={36} />
</IconButton>*/}
<PaintCounter small /> <PaintCounter small />
</ServerList> </ServerList>
</ServersBase> </ServersBase>

56
src/pages/settings/GenericSettings.tsx
View file

@ -122,37 +122,40 @@ export function GenericSettings({
)} )}
{(!isTouchscreenDevice || typeof page === "undefined") && ( {(!isTouchscreenDevice || typeof page === "undefined") && (
<div className={styles.sidebar}> <div className={styles.sidebar}>
<div className={styles.container}> <div className={styles.scrollbox}>
{pages.map((entry, i) => <div className={styles.container}>
entry.hidden ? undefined : ( {pages.map((entry, i) =>
<> entry.hidden ? undefined : (
{entry.category && ( <>
<Category {entry.category && (
variant="uniform" <Category
text={entry.category} variant="uniform"
/> text={entry.category}
)} />
<ButtonItem )}
active={ <ButtonItem
page === entry.id || active={
(i === 0 && page === entry.id ||
!isTouchscreenDevice && (i === 0 &&
typeof page === "undefined") !isTouchscreenDevice &&
} typeof page === "undefined")
onClick={() => switchPage(entry.id)} }
compact> onClick={() => switchPage(entry.id)}
{entry.icon} {entry.title} compact>
</ButtonItem> {entry.icon} {entry.title}
{entry.divider && <LineDivider />} </ButtonItem>
</> {entry.divider && <LineDivider />}
), </>
)} ),
{custom} )}
{custom}
</div>
</div> </div>
</div> </div>
)} )}
{(!isTouchscreenDevice || typeof page === "string") && ( {(!isTouchscreenDevice || typeof page === "string") && (
<div className={styles.content}> <div className={styles.content}>
{/*<div className={styles.scrollbox}>*/}
{!isTouchscreenDevice && {!isTouchscreenDevice &&
!pages.find((x) => x.id === page && x.hideTitle) && ( !pages.find((x) => x.id === page && x.hideTitle) && (
<h1> <h1>
@ -164,6 +167,7 @@ export function GenericSettings({
</h1> </h1>
)} )}
<Switch>{children}</Switch> <Switch>{children}</Switch>
{/*</div>*/}
</div> </div>
)} )}
{!isTouchscreenDevice && ( {!isTouchscreenDevice && (

25
src/pages/settings/Settings.module.scss
View file

@ -83,6 +83,24 @@
justify-content: center; justify-content: center;
background: var(--primary-background); background: var(--primary-background);
.scrollbox {
overflow: auto;
visibility: hidden;
transition: visibility 0.2s;
}
.container,
.scrollbox:hover,
.scrollbox:focus {
visibility: visible;
}
::-webkit-scrollbar-thumb {
background-clip: content-box;
border-top: 80px solid transparent;
}
.sidebar { .sidebar {
flex: 1 0 218px; flex: 1 0 218px;
display: flex; display: flex;
@ -93,11 +111,12 @@
.container { .container {
width: 218px; width: 218px;
padding: 60px 8px; padding: 80px 8px;
height: fit-content; height: fit-content;
display: flex; display: flex;
gap: 2px; gap: 2px;
flex-direction: column; flex-direction: column;
visibility: visible;
} }
.divider { .divider {
@ -139,7 +158,7 @@
.content { .content {
flex: 3; flex: 3;
max-width: 740px; max-width: 740px;
padding: 60px 2em; padding: 80px 2em;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
@ -186,7 +205,7 @@
.action { .action {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
padding: 60px 8px; padding: 80px 8px;
color: var(--tertiary-background); color: var(--tertiary-background);
&:after { &:after {