cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 07:02: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 { Compass } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
@ -94,6 +95,10 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
display: flex;
align-items: center;
:focus {
outline: 3px solid blue;
}
> div {
height: 42px;
padding-inline-start: 6px;
@ -299,6 +304,15 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
}>
<Plus size={36} />
</IconButton>
{/*<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Compass size={36} />
</IconButton>*/}
<PaintCounter small />
</ServerList>
</ServersBase>

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

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

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

@ -83,6 +83,24 @@
justify-content: center;
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 {
flex: 1 0 218px;
display: flex;
@ -93,11 +111,12 @@
.container {
width: 218px;
padding: 60px 8px;
padding: 80px 8px;
height: fit-content;
display: flex;
gap: 2px;
flex-direction: column;
visibility: visible;
}
.divider {
@ -139,7 +158,7 @@
.content {
flex: 3;
max-width: 740px;
padding: 60px 2em;
padding: 80px 2em;
overflow-y: scroll;
overflow-x: hidden;
@ -186,7 +205,7 @@
.action {
flex: 1;
flex-shrink: 0;
padding: 60px 8px;
padding: 80px 8px;
color: var(--tertiary-background);
&:after {