From ab54afc1e0a2a583102e2db3f8a547d57f654007 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Mon, 2 Aug 2021 12:22:39 +0200
Subject: [PATCH] Small update for desktop app
---
.../navigation/left/ServerListSidebar.tsx | 14 +++++
src/pages/settings/GenericSettings.tsx | 56 ++++++++++---------
src/pages/settings/Settings.module.scss | 25 ++++++++-
3 files changed, 66 insertions(+), 29 deletions(-)
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 3079fea..f3c8ba0 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -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>
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index c2b0dfe..d672a69 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -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 && (
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 7dc73b2..7ca5058 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -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 {
--
GitLab