From 83f38d71ce58599c367a4261aba0b7230a01b5cc Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Sun, 26 Dec 2021 22:26:27 +0100 Subject: [PATCH 01/61] feat(header): new glass header on channel view --- src/components/common/messaging/bars/JumpToBottom.tsx | 1 + src/components/navigation/SidebarBase.tsx | 6 ++++++ src/components/ui/Header.tsx | 8 +++++++- src/pages/RevoltApp.tsx | 1 + src/pages/channels/Channel.tsx | 6 ++++++ src/pages/channels/messaging/MessageArea.tsx | 7 +++++++ 6 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx index e6373a86..8e6a26af 100644 --- a/src/components/common/messaging/bars/JumpToBottom.tsx +++ b/src/components/common/messaging/bars/JumpToBottom.tsx @@ -37,6 +37,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` user-select: none; justify-content: space-between; transition: color ease-in-out 0.08s; + top: 48px; ${(props) => props.accent diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx index dece8af5..d724a356 100644 --- a/src/components/navigation/SidebarBase.tsx +++ b/src/components/navigation/SidebarBase.tsx @@ -8,6 +8,12 @@ export default styled.div` user-select: none; flex-direction: row; align-items: stretch; + + > * > ::-webkit-scrollbar-thumb { + width: 4px; + background-clip: content-box; + border-top: 48px solid transparent; + } `; export const GenericSidebarBase = styled.div<{ diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 6f21f66b..61c88ce1 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -31,7 +31,13 @@ const Header = styled.div` align-items: center; background-size: cover !important; background-position: center !important; - background-color: var(--primary-header); + //background-color: var(--primary-header); + background-color: rgba(54, 54, 54, 0.75); + backdrop-filter: blur(10px); + z-index: 20; + + position: absolute; + width: 100%; /*> div { text-overflow: ellipsis; diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index bd82df73..f1c8a1f0 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -30,6 +30,7 @@ const Routes = styled.div` display: flex; overflow: hidden; flex-direction: column; + position: relative; background: var(--primary-background); `; diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx index 1e0b4f99..df0dfe10 100644 --- a/src/pages/channels/Channel.tsx +++ b/src/pages/channels/Channel.tsx @@ -35,6 +35,12 @@ const ChannelMain = styled.div` min-height: 0; overflow: hidden; flex-direction: row; + + > * > ::-webkit-scrollbar-thumb { + width: 4px; + background-clip: content-box; + border-top: 48px solid transparent; + } `; const ChannelContent = styled.div` diff --git a/src/pages/channels/messaging/MessageArea.tsx b/src/pages/channels/messaging/MessageArea.tsx index 1b2c0278..7dafdd6f 100644 --- a/src/pages/channels/messaging/MessageArea.tsx +++ b/src/pages/channels/messaging/MessageArea.tsx @@ -39,8 +39,15 @@ const Area = styled.div` min-height: 0; overflow-x: hidden; overflow-y: scroll; + padding-top: 48px; word-break: break-word; + > * > ::-webkit-scrollbar-thumb { + width: 4px; + background-clip: content-box; + border-top: 80px solid transparent; + } + > div { display: flex; min-height: 100%; From 2a4d0c33114a7464e005b5a3044aae4f57a6646d Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Sun, 26 Dec 2021 23:35:05 +0100 Subject: [PATCH 02/61] fix(header): commented out server banner until fix --- src/components/common/ServerHeader.tsx | 45 ++++++++++++++++++- src/components/navigation/SidebarBase.tsx | 11 +++-- .../navigation/left/ServerListSidebar.tsx | 1 + 3 files changed, 52 insertions(+), 5 deletions(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 804f139d..a6a8ff1b 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -25,7 +25,48 @@ export default observer(({ server }: Props) => { const bannerURL = server.generateBannerURL({ width: 480 }); return ( -
+ {server.flags && server.flags & 1 ? ( + } + placement={"bottom-start"}> + + + + + + ) : undefined} + {server.flags && server.flags & 2 ? ( + } + placement={"bottom-start"}> + + + + + + + + ) : undefined} + + /*
{ )} -
+ */ ); }); diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx index d724a356..39b37213 100644 --- a/src/components/navigation/SidebarBase.tsx +++ b/src/components/navigation/SidebarBase.tsx @@ -9,11 +9,11 @@ export default styled.div` flex-direction: row; align-items: stretch; - > * > ::-webkit-scrollbar-thumb { + /*> * > ::-webkit-scrollbar-thumb { width: 4px; background-clip: content-box; border-top: 48px solid transparent; - } + }*/ `; export const GenericSidebarBase = styled.div<{ @@ -28,7 +28,12 @@ export const GenericSidebarBase = styled.div<{ background: var(--secondary-background); > :nth-child(1) { - border-end-start-radius: 8px; + //border-end-start-radius: 8px; + margin-top: 48px; + } + + > :nth-child(2) { + background: red; } ${(props) => diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index 6b531ef9..84487cd2 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -168,6 +168,7 @@ const ServerCircle = styled.div` display: flex; align-items: center; justify-content: center; + flex-shrink: 0; .circle { display: flex; From 4d59bb96b25227328d2dcc3993467295b7c446c7 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Sun, 26 Dec 2021 23:38:01 +0100 Subject: [PATCH 03/61] fix(header): fixed voice dialog --- src/pages/channels/voice/VoiceHeader.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx index 84ad85e6..312073ee 100644 --- a/src/pages/channels/voice/VoiceHeader.tsx +++ b/src/pages/channels/voice/VoiceHeader.tsx @@ -30,6 +30,7 @@ interface Props { } const VoiceBase = styled.div` + margin-top: 48px; padding: 20px; background: var(--secondary-background); From 64df7edf9b85276d27a4481a3270e4323b2ff988 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Sun, 26 Dec 2021 23:43:07 +0100 Subject: [PATCH 04/61] fix(header): new unread bar fixed on mobile --- src/components/common/messaging/bars/JumpToBottom.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx index 8e6a26af..e85f1fac 100644 --- a/src/components/common/messaging/bars/JumpToBottom.tsx +++ b/src/components/common/messaging/bars/JumpToBottom.tsx @@ -61,6 +61,12 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` 0; `} + ${() => + isTouchscreenDevice && + css` + top: 56px; + `} + > div { display: flex; align-items: center; From 63e52fe69c6297f01015cab6566af3b55681e1a4 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Sun, 26 Dec 2021 23:57:09 +0100 Subject: [PATCH 05/61] fix(friends): respect header padding --- src/pages/friends/Friend.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss index b2b3d3b4..612fc953 100644 --- a/src/pages/friends/Friend.module.scss +++ b/src/pages/friends/Friend.module.scss @@ -12,6 +12,7 @@ .list { padding: 0 10px 10px 10px; + padding-top: 48px; user-select: none; overflow-y: scroll; From 2ce4136a521900df8659cb0c19c8e6e3a154ee86 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 14:20:17 +0100 Subject: [PATCH 06/61] fix(sidebars): fixed sidebar margins --- src/components/navigation/SidebarBase.tsx | 6 +++--- src/components/navigation/right/MemberSidebar.tsx | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx index 39b37213..218e3b91 100644 --- a/src/components/navigation/SidebarBase.tsx +++ b/src/components/navigation/SidebarBase.tsx @@ -27,14 +27,14 @@ export const GenericSidebarBase = styled.div<{ /*border-end-start-radius: 8px;*/ background: var(--secondary-background); - > :nth-child(1) { + /*> :nth-child(1) { //border-end-start-radius: 8px; - margin-top: 48px; } > :nth-child(2) { + margin-top: 48px; background: red; - } + }*/ ${(props) => props.mobilePadding && diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx index 4e2ebbdd..d4f69472 100644 --- a/src/components/navigation/right/MemberSidebar.tsx +++ b/src/components/navigation/right/MemberSidebar.tsx @@ -6,9 +6,12 @@ import { Presence } from "revolt-api/types/Users"; import { Channel } from "revolt.js/dist/maps/Channels"; import { Server } from "revolt.js/dist/maps/Servers"; import { User } from "revolt.js/dist/maps/Users"; +import styled, { css } from "styled-components"; import { useContext, useEffect, useMemo } from "preact/hooks"; +import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; + import { ClientStatus, StatusContext, @@ -18,6 +21,15 @@ import { import { GenericSidebarBase } from "../SidebarBase"; import MemberList, { MemberListGroup } from "./MemberList"; +export const Container = styled.div` + margin-top: 48px; + + ${isTouchscreenDevice && + css` + margin-top: 0; + `} +`; + export default function MemberSidebar() { const channel = useClient().channels.get( useParams<{ channel: string }>().channel, @@ -180,6 +192,9 @@ export const ServerMemberSidebar = observer( return ( + + {isTouchscreenDevice &&
Server settings go here
} + ); From 7241498f87cd5444d57bd8d29c5cffd9e40480ba Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 14:44:02 +0100 Subject: [PATCH 07/61] fix(header): added text overflow --- .../navigation/left/ServerSidebar.tsx | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx index e42b39b6..9c1dac79 100644 --- a/src/components/navigation/left/ServerSidebar.tsx +++ b/src/components/navigation/left/ServerSidebar.tsx @@ -1,5 +1,6 @@ import { observer } from "mobx-react-lite"; import { Redirect, useParams } from "react-router"; +import { Server } from "revolt.js/dist/maps/Servers"; import styled, { css } from "styled-components"; import { attachContextMenu } from "preact-context-menu"; @@ -48,6 +49,32 @@ const ServerList = styled.div` } `; +const ServerBanner = styled.div` + background-color: var(--primary-background); + + .title { + height: 48px; + display: flex; + align-items: center; + padding: 10px; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + gap: 8px; + + .test { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } +`; + +interface Props { + server: Server; +} + export default observer(() => { const client = useClient(); const state = useApplicationState(); @@ -137,7 +164,13 @@ export default observer(() => { return ( - + +
+ +
{server.name}
+
+ + Date: Mon, 27 Dec 2021 15:10:02 +0100 Subject: [PATCH 08/61] fix(header): rewrite of server header --- src/components/common/ServerHeader.tsx | 124 ++++++++++++------ .../navigation/left/ServerSidebar.tsx | 30 +---- 2 files changed, 84 insertions(+), 70 deletions(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index a6a8ff1b..461a86cc 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -17,8 +17,31 @@ interface Props { server: Server; } -const ServerName = styled.div` - flex-grow: 1; +const ServerBanner = styled.div` + background-color: var(--primary-background); + //height: 120px; //USE IF SERVER BANNER IS APPLIED + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: end; + + .title { + height: 48px; + display: flex; + align-items: center; + padding: 10px; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + gap: 8px; + + .test { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } `; export default observer(({ server }: Props) => { @@ -26,45 +49,64 @@ export default observer(({ server }: Props) => { return (
- {server.flags && server.flags & 1 ? ( - } - placement={"bottom-start"}> - - - - - - ) : undefined} - {server.flags && server.flags & 2 ? ( - } - placement={"bottom-start"}> - - - - - - - - ) : undefined} + +
+
+ {server.flags && server.flags & 1 ? ( + + } + placement={"bottom-start"}> + + + + + + ) : undefined} + {server.flags && server.flags & 2 ? ( + + } + placement={"bottom-start"}> + + + + + + + + ) : undefined} + +
{server.name}
+ + /*
{ return ( - -
- -
{server.name}
-
- - + Date: Mon, 27 Dec 2021 15:11:37 +0100 Subject: [PATCH 09/61] fix(header): fixed default header color --- src/components/common/ServerHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 461a86cc..eeb17e27 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -18,7 +18,7 @@ interface Props { } const ServerBanner = styled.div` - background-color: var(--primary-background); + background-color: var(--secondary-header); //height: 120px; //USE IF SERVER BANNER IS APPLIED flex-shrink: 0; display: flex; From c655a59979d5aefc035608a03a0c00353a0f7ebb Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 15:13:36 +0100 Subject: [PATCH 10/61] fix(header): server header rewrite --- src/components/common/ServerHeader.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index eeb17e27..c17e46a3 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -40,6 +40,7 @@ const ServerBanner = styled.div` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + flex-grow: 1; } } `; @@ -105,6 +106,16 @@ export default observer(({ server }: Props) => { ) : undefined}
{server.name}
+ {(server.permission & ServerPermission.ManageServer) > + 0 && ( +
+ + + + + +
+ )} From a396e511ec4cf74cbc4d178a708501fee8fe6fe4 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 15:15:37 +0100 Subject: [PATCH 11/61] fix(header): changed class names --- src/components/common/ServerHeader.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index c17e46a3..e1d816f6 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -25,7 +25,7 @@ const ServerBanner = styled.div` flex-direction: column; justify-content: end; - .title { + .container { height: 48px; display: flex; align-items: center; @@ -36,7 +36,7 @@ const ServerBanner = styled.div` text-overflow: ellipsis; gap: 8px; - .test { + .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -51,7 +51,7 @@ export default observer(({ server }: Props) => { return (
-
+
{server.flags && server.flags & 1 ? ( { ) : undefined}
-
{server.name}
+
{server.name}
{(server.permission & ServerPermission.ManageServer) > 0 && (
From 93925834ccb1289ee410510697b56d648fb46365 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 15:38:49 +0100 Subject: [PATCH 12/61] fix(header): header rewrite complete --- src/components/common/ServerHeader.tsx | 162 ++++++++++++++----------- 1 file changed, 91 insertions(+), 71 deletions(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index e1d816f6..6c384290 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite"; import { Link } from "react-router-dom"; import { ServerPermission } from "revolt.js/dist/api/permissions"; import { Server } from "revolt.js/dist/maps/Servers"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { Text } from "preact-i18n"; @@ -17,14 +17,30 @@ interface Props { server: Server; } -const ServerBanner = styled.div` +interface Props { + background?: boolean; +} + +const ServerBanner = styled.div` background-color: var(--secondary-header); - //height: 120px; //USE IF SERVER BANNER IS APPLIED flex-shrink: 0; display: flex; flex-direction: column; justify-content: end; + ${(props) => + props.background && + css` + height: 120px; + .container { + background: linear-gradient( + 0deg, + var(--secondary-background), + transparent + ); + } + `} + .container { height: 48px; display: flex; @@ -49,76 +65,80 @@ export default observer(({ server }: Props) => { const bannerURL = server.generateBannerURL({ width: 480 }); return ( -
- -
-
- {server.flags && server.flags & 1 ? ( - - } - placement={"bottom-start"}> - - +
+
+ {server.flags && server.flags & 1 ? ( + + } + placement={"bottom-start"}> + + + + + + ) : undefined} + {server.flags && server.flags & 2 ? ( + + } + placement={"bottom-start"}> + + + + - - - - ) : undefined} - {server.flags && server.flags & 2 ? ( - - } - placement={"bottom-start"}> - - - - - - - - ) : undefined} - -
{server.name}
- {(server.permission & ServerPermission.ManageServer) > - 0 && ( -
- - - - - -
- )} + + + + ) : undefined} - - +
{server.name}
+ {(server.permission & ServerPermission.ManageServer) > 0 && ( +
+ + + + + +
+ )} + + /*
Date: Mon, 27 Dec 2021 15:47:06 +0100 Subject: [PATCH 13/61] fix(header): header fixes --- src/components/common/ServerHeader.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 6c384290..0e274879 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -15,9 +15,6 @@ import Tooltip from "./Tooltip"; interface Props { server: Server; -} - -interface Props { background?: boolean; } @@ -27,6 +24,9 @@ const ServerBanner = styled.div` display: flex; flex-direction: column; justify-content: end; + background-position: center; + background-repeat: no-repeat; + background-size: cover; ${(props) => props.background && From 356291cc4f3369c21c38719243dcdff08ced74c2 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 15:48:31 +0100 Subject: [PATCH 14/61] fix(header): added mobile support --- src/components/common/ServerHeader.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 0e274879..036311ca 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -8,6 +8,8 @@ import styled, { css } from "styled-components"; import { Text } from "preact-i18n"; +import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; + import Header from "../ui/Header"; import IconButton from "../ui/IconButton"; @@ -52,6 +54,12 @@ const ServerBanner = styled.div` text-overflow: ellipsis; gap: 8px; + ${() => + isTouchscreenDevice && + css` + height: 56px; + `} + .title { white-space: nowrap; overflow: hidden; From 32182b18039361220be81efa741c27bf7d9890a8 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 15:58:30 +0100 Subject: [PATCH 15/61] fix(settings): fixing header in mobile settings --- src/components/ui/Header.tsx | 7 ------- src/pages/settings/Settings.module.scss | 4 ++-- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 61c88ce1..3492985a 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -35,16 +35,9 @@ const Header = styled.div` background-color: rgba(54, 54, 54, 0.75); backdrop-filter: blur(10px); z-index: 20; - position: absolute; width: 100%; - /*> div { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - }*/ - svg { flex-shrink: 0; } diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index 1e2863f3..9de7c139 100644 --- a/src/pages/settings/Settings.module.scss +++ b/src/pages/settings/Settings.module.scss @@ -54,7 +54,7 @@ overflow-y: auto; .container { - padding: 20px 8px calc(var(--bottom-navigation-height) + 30px); + padding: 76px 8px calc(var(--bottom-navigation-height) + 30px); min-width: 218px; } @@ -76,7 +76,7 @@ .contentcontainer { max-width: unset !important; - padding: 16px 12px var(--bottom-navigation-height) !important; + padding: 72px 12px var(--bottom-navigation-height) !important; } } } From bbe1e0d178a9e5a9fd7586e42e50cb44eba34770 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 16:05:33 +0100 Subject: [PATCH 16/61] fix(header): fixed header in settings --- src/pages/settings/Settings.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index 9de7c139..ec70e7cf 100644 --- a/src/pages/settings/Settings.module.scss +++ b/src/pages/settings/Settings.module.scss @@ -45,7 +45,7 @@ .scrollbox { &::-webkit-scrollbar-thumb { - border-top: none; + border-top: 56px solid transparent; } } From 855b3739e6d32c6605a8963043ce52bd9732471b Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Mon, 27 Dec 2021 16:07:13 +0100 Subject: [PATCH 17/61] fix(homescreen): fixed height --- src/pages/home/Home.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/Home.module.scss b/src/pages/home/Home.module.scss index 501cc92a..f9ebb4e7 100644 --- a/src/pages/home/Home.module.scss +++ b/src/pages/home/Home.module.scss @@ -8,7 +8,7 @@ flex-direction: column; justify-content: center; align-items: center; - height: 95%; + height: 100%; padding: 12px; h3 { From 614ec6862230d89b9e3c869f76779932456382d2 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 16:08:05 +0100 Subject: [PATCH 18/61] fix(settings): added design for account header --- src/components/settings/AppearanceShims.tsx | 9 ++- src/pages/settings/Settings.tsx | 75 ++++++++++++++++++--- src/pages/settings/panes/Appearance.tsx | 4 +- 3 files changed, 76 insertions(+), 12 deletions(-) diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index b9da94ab..aacfbc38 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -214,7 +214,7 @@ export const DisplayLigaturesShim = observer(() => { /** * Component providing a way to toggle seasonal themes. */ -export const DisplaySeasonalShim = observer(() => { +export const ThemeOptionsShim = observer(() => { const settings = useApplicationState().settings; return ( @@ -231,6 +231,13 @@ export const DisplaySeasonalShim = observer(() => { }> */} + {/* THIS CHECKBOX ENABLES GLASS EFFECT IN UI - ENABLED BY DEFAULT*/} + {/* settings.set("appearance:seasonal", v)} + description={"Enables glass effects throughout the app"}> + Enable glass effects + */} settings.set("appearance:seasonal", v)} diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 8e914055..21fd3659 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -17,6 +17,7 @@ import { Speaker, Store, Bot, + Trash, } from "@styled-icons/boxicons-solid"; import { observer } from "mobx-react-lite"; import { Route, Switch, useHistory } from "react-router-dom"; @@ -54,13 +55,60 @@ import { Sessions } from "./panes/Sessions"; import { Sync } from "./panes/Sync"; import { ThemeShop } from "./panes/ThemeShop"; -const IndexHeader = styled.div` +const AccountHeader = styled.div` display: flex; - background: var(--secondary-background); + flex-direction: column; border-radius: var(--border-radius); - padding: 20px; - align-items: center; - gap: 10px; + overflow: hidden; + margin-bottom: 10px; + + .account { + padding: 20px; + gap: 10px; + align-items: center; + display: flex; + background: var(--secondary-background); + + .details { + display: flex; + flex-direction: column; + font-size: 12px; + gap: 2px; + + > span { + font-size: 20px; + font-weight: 600; + } + } + } + + .statusChanger { + display: flex; + align-items: center; + background: var(--tertiary-background); + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + .status { + padding-inline-start: 12px; + height: 48px; + display: flex; + align-items: center; + color: var(--secondary-foreground); + flex-grow: 1; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + svg { + width: 48px; + flex-shrink: 0; + } + } `; export default observer(() => { @@ -270,10 +318,19 @@ export default observer(() => { } indexHeader={ - - - - + +
+ +
+ + Status goes here +
+
+
+
Change your status...
+ +
+ } /> ); diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index c68c410f..66dd34bf 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -14,7 +14,7 @@ import { DisplayLigaturesShim, DisplayEmojiShim, ThemeCustomCSSShim, - DisplaySeasonalShim, + ThemeOptionsShim, } from "../../../components/settings/AppearanceShims"; import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides"; import ThemeTools from "../../../components/settings/appearance/ThemeTools"; @@ -27,7 +27,7 @@ export const Appearance = observer(() => {
- +
From ef0644074c5eab92ef58c8feb571d32240c971d5 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 16:30:25 +0100 Subject: [PATCH 19/61] fix(group): fixed height in members list --- src/components/navigation/right/MemberSidebar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx index d4f69472..64c09219 100644 --- a/src/components/navigation/right/MemberSidebar.tsx +++ b/src/components/navigation/right/MemberSidebar.tsx @@ -169,6 +169,9 @@ export const GroupMemberSidebar = observer( return ( + + {isTouchscreenDevice &&
Group settings go here
} + ); @@ -192,7 +195,7 @@ export const ServerMemberSidebar = observer( return ( - + {isTouchscreenDevice &&
Server settings go here
} From e8140640016e6fa01c5f48bffea831628b03bbda Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 17:06:04 +0100 Subject: [PATCH 20/61] fix(developer): fixed height issue in dev tab --- src/components/navigation/items/ButtonItem.tsx | 3 ++- src/components/navigation/right/MemberSidebar.tsx | 5 +++-- src/pages/developer/Developer.tsx | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx index 58fe2745..d0bef93d 100644 --- a/src/components/navigation/items/ButtonItem.tsx +++ b/src/components/navigation/items/ButtonItem.tsx @@ -1,4 +1,5 @@ -import { X, Crown } from "@styled-icons/boxicons-regular"; +import { X } from "@styled-icons/boxicons-regular"; +import { Crown } from "@styled-icons/boxicons-solid"; import { observer } from "mobx-react-lite"; import { Presence } from "revolt-api/types/Users"; import { Channel } from "revolt.js/dist/maps/Channels"; diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx index 64c09219..167d228c 100644 --- a/src/components/navigation/right/MemberSidebar.tsx +++ b/src/components/navigation/right/MemberSidebar.tsx @@ -22,11 +22,11 @@ import { GenericSidebarBase } from "../SidebarBase"; import MemberList, { MemberListGroup } from "./MemberList"; export const Container = styled.div` - margin-top: 48px; + padding-top: 48px; ${isTouchscreenDevice && css` - margin-top: 0; + padding-top: 0; `} `; @@ -172,6 +172,7 @@ export const GroupMemberSidebar = observer( {isTouchscreenDevice &&
Group settings go here
} + ); diff --git a/src/pages/developer/Developer.tsx b/src/pages/developer/Developer.tsx index d64cf5f6..f45cab52 100644 --- a/src/pages/developer/Developer.tsx +++ b/src/pages/developer/Developer.tsx @@ -29,7 +29,7 @@ export default function Developer() { return (
}>Developer Tab -
+
From 37c15eaa3eac6f1ba779251001783db280ebf18f Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 20:38:57 +0100 Subject: [PATCH 21/61] fix(header): fixed header background --- src/components/common/ServerHeader.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 036311ca..9484baa9 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -26,9 +26,12 @@ const ServerBanner = styled.div` display: flex; flex-direction: column; justify-content: end; - background-position: center; + /*background-position: center; background-repeat: no-repeat; - background-size: cover; + background-size: cover;*/ + + background-size: cover !important; + background-position: center center !important; ${(props) => props.background && From e8784946ae255b2b89e01eaf0e257b8e30af9004 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 20:43:42 +0100 Subject: [PATCH 22/61] chore(header): deprecated old header code --- src/components/common/ServerHeader.tsx | 156 ++++++++----------------- 1 file changed, 46 insertions(+), 110 deletions(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 9484baa9..9b5381a6 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -85,59 +85,53 @@ export default observer(({ server }: Props) => { background: bannerURL ? `url('${bannerURL}')` : undefined, }}>
-
- {server.flags && server.flags & 1 ? ( - - } - placement={"bottom-start"}> - - + } + placement={"bottom-start"}> + + + + + + ) : undefined} + {server.flags && server.flags & 2 ? ( + + } + placement={"bottom-start"}> + + + + - - - - ) : undefined} - {server.flags && server.flags & 2 ? ( - - } - placement={"bottom-start"}> - - - - - - - - ) : undefined} - + + + + ) : undefined}
{server.name}
{(server.permission & ServerPermission.ManageServer) > 0 && (
@@ -150,63 +144,5 @@ export default observer(({ server }: Props) => { )}
- /*
- {server.flags && server.flags & 1 ? ( - } - placement={"bottom-start"}> - - - - - - ) : undefined} - {server.flags && server.flags & 2 ? ( - } - placement={"bottom-start"}> - - - - - - - - ) : undefined} - - {server.name} - {(server.permission & ServerPermission.ManageServer) > 0 && ( -
- - - - - -
- )} - */ ); }); From 03ec5275eea319203db94217b18f22fd24ae5b61 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 21:04:18 +0100 Subject: [PATCH 23/61] fix(header): padding --- external/lang | 2 +- src/components/common/ServerHeader.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/external/lang b/external/lang index 35894f6b..b955e406 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 35894f6b1ecadc9df4ab77a5de9c9d5256a36582 +Subproject commit b955e40611bc317851fe80fafdc3a26b9665d77e diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 9b5381a6..9b09fae5 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -50,7 +50,7 @@ const ServerBanner = styled.div` height: 48px; display: flex; align-items: center; - padding: 10px; + padding: 0 14px; font-weight: 600; white-space: nowrap; overflow: hidden; @@ -134,13 +134,11 @@ export default observer(({ server }: Props) => { ) : undefined}
{server.name}
{(server.permission & ServerPermission.ManageServer) > 0 && ( -
- - - - - -
+ + + + + )} From d3b78ebc48c4667f51df052e17baebb5ff6eb3d1 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 21:42:09 +0100 Subject: [PATCH 24/61] fix(messagebox): fixed padding on action button --- src/components/common/messaging/MessageBox.tsx | 14 +++++++++----- src/styles/_variables.scss | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index e03e3b45..736c237b 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -80,7 +80,7 @@ const Blocked = styled.div` color: var(--tertiary-foreground); .text { - padding: 14px 14px 14px 0; + padding: 14px; } svg { @@ -89,13 +89,17 @@ const Blocked = styled.div` `; const Action = styled.div` - display: flex; - place-items: center; + /*display: flex; + align-items: center; + justify-content: center;*/ > div { height: 48px; - width: 48px; - padding: 12px; + width: 34px; + display: flex; + align-items: center; + justify-content: end; + /*padding: 14px 0 14px 14px;*/ } ${() => diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 62b7a03a..7bf369bf 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -30,7 +30,7 @@ --input-border-width: 2px; --textarea-padding: 16px; --textarea-line-height: 20px; - --message-box-padding: 14px 14px 14px 0; + --message-box-padding: 14px; --attachment-max-width: 480px; --attachment-max-height: 640px; From 17a2ca773b743f8d549998b2120d4da287b0d08a Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Tue, 28 Dec 2021 21:59:09 +0000 Subject: [PATCH 25/61] feat: dynamically calculate header translucency and clamp minimum opacity --- package.json | 2 ++ src/components/ui/Header.tsx | 6 ++-- src/context/Theme.tsx | 11 +++++++- src/mobx/stores/helpers/STheme.ts | 21 +++++++------- yarn.lock | 47 ++++++++++++++++++++++++++++++- 5 files changed, 72 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 5d6cb787..705b2696 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ } }, "dependencies": { + "color-rgba": "^2.3.0", "fs-extra": "^10.0.0", "klaw": "^3.0.0", "react-beautiful-dnd": "^13.1.0", @@ -95,6 +96,7 @@ "@traptitech/markdown-it-katex": "^3.4.3", "@traptitech/markdown-it-spoiler": "^1.1.6", "@trivago/prettier-plugin-sort-imports": "^2.0.2", + "@types/color-rgba": "^2.1.0", "@types/lodash.defaultsdeep": "^4.6.6", "@types/lodash.isequal": "^4.5.5", "@types/markdown-it": "^12.0.2", diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 3492985a..f3b69134 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -31,8 +31,10 @@ const Header = styled.div` align-items: center; background-size: cover !important; background-position: center !important; - //background-color: var(--primary-header); - background-color: rgba(54, 54, 54, 0.75); + background-color: rgba( + var(--primary-header-rgb), + max(var(--min-opacity), 0.75) + ); backdrop-filter: blur(10px); z-index: 20; position: absolute; diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index e5697881..c30fbbd0 100644 --- a/src/context/Theme.tsx +++ b/src/context/Theme.tsx @@ -1,3 +1,4 @@ +import rgba from "color-rgba"; import { observer } from "mobx-react-lite"; import { Helmet } from "react-helmet"; import { createGlobalStyle } from "styled-components"; @@ -71,6 +72,8 @@ export type Theme = Overrides & { font?: Fonts; css?: string; monospaceFont?: MonospaceFonts; + + "min-opacity"?: number; }; export interface ThemeOptions { @@ -287,7 +290,13 @@ const GlobalTheme = createGlobalStyle<{ theme: Theme }>` export const generateVariables = (theme: Theme) => { return (Object.keys(theme) as Variables[]).map((key) => { - return `--${key}: ${theme[key]};`; + const colour = rgba(theme[key]); + if (colour) { + const [r, g, b] = colour; + return `--${key}: ${theme[key]}; --${key}-rgb: ${r}, ${g}, ${b};`; + } else { + return `--${key}: ${theme[key]};`; + } }); }; diff --git a/src/mobx/stores/helpers/STheme.ts b/src/mobx/stores/helpers/STheme.ts index b2b20c4c..4a110e56 100644 --- a/src/mobx/stores/helpers/STheme.ts +++ b/src/mobx/stores/helpers/STheme.ts @@ -1,3 +1,4 @@ +import rgba from "color-rgba"; import { makeAutoObservable, computed, action } from "mobx"; import { @@ -93,13 +94,15 @@ export default class STheme { ...PRESETS[this.getBase()], ...this.settings.get("appearance:theme:overrides"), light: this.isLight(), + + "min-opacity": 1, }; } @computed computeVariables(): Theme { const variables = this.getVariables() as Record< string, - string | boolean + string | boolean | number >; for (const key of Object.keys(variables)) { @@ -204,15 +207,11 @@ export default class STheme { function getContrastingColour(hex: string, fallback?: string): string { if (typeof hex !== "string") return "black"; - // TODO: Switch to color-parse - // Try parse hex value. - hex = hex.replace(/#/g, ""); - const r = parseInt(hex.substr(0, 2), 16) / 255; - const g = parseInt(hex.substr(2, 2), 16) / 255; - const b = parseInt(hex.substr(4, 2), 16) / 255; + const colour = rgba(hex); + if (!colour) return fallback ? getContrastingColour(fallback) : "black"; - if (isNaN(r) || isNaN(g) || isNaN(b)) - return fallback ? getContrastingColour(fallback) : "black"; - - return r * 0.299 + g * 0.587 + b * 0.114 >= 0.186 ? "black" : "white"; + const [r, g, b] = colour; + return (r / 255) * 0.299 + (g / 255) * 0.587 + (b / 255) * 0.114 >= 0.186 + ? "black" + : "white"; } diff --git a/yarn.lock b/yarn.lock index 688dfdfb..d07ef105 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1303,6 +1303,11 @@ javascript-natural-sort "0.7.1" lodash "4.17.21" +"@types/color-rgba@^2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@types/color-rgba/-/color-rgba-2.1.0.tgz#0182795370deae5c2c62f71ea6e91c6bab87394d" + integrity sha512-tWcJLEiKdZ3ihJdThfLCe6Kw5vo0lgGcuucGkbtzcp1zifDA1E2Z96wxeSS/r+ytpHD15NCAWabX8GV911ywCA== + "@types/debug@^4.1.6": version "4.1.7" resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82" @@ -1642,6 +1647,11 @@ ajv@^8.0.1, ajv@^8.6.0: require-from-string "^2.0.2" uri-js "^4.2.2" +almost-equal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/almost-equal/-/almost-equal-1.1.0.tgz#f851c631138757994276aa2efbe8dfa3066cccdd" + integrity sha1-+FHGMROHV5lCdqou++jfowZszN0= + ansi-colors@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348" @@ -1934,11 +1944,34 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@~1.1.4: +color-name@^1.0.0, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color-parse@^1.4.1: + version "1.4.2" + resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-1.4.2.tgz#78651f5d34df1a57f997643d86f7f87268ad4eb5" + integrity sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA== + dependencies: + color-name "^1.0.0" + +color-rgba@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/color-rgba/-/color-rgba-2.3.0.tgz#d5eb481d7933d2542d1f222ea10ad40d159e9d35" + integrity sha512-z/5fMOY8/IzrBHPBk+n3ATNSM/1atXcHCRPTGPLlzYJ4fn7CRD46zzt3lkLtQ44cL8UIUU4JBXDVrhWj1khiwg== + dependencies: + color-parse "^1.4.1" + color-space "^1.14.6" + +color-space@^1.14.6: + version "1.16.0" + resolved "https://registry.yarnpkg.com/color-space/-/color-space-1.16.0.tgz#611781bca41cd8582a1466fd9e28a7d3d89772a2" + integrity sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg== + dependencies: + hsluv "^0.0.3" + mumath "^3.3.4" + colorette@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af" @@ -2742,6 +2775,11 @@ hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react- dependencies: react-is "^16.7.0" +hsluv@^0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.0.3.tgz#829107dafb4a9f8b52a1809ed02e091eade6754c" + integrity sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw= + idb@^6.0.0: version "6.1.2" resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.2.tgz#82ef5c951b8e1f47875d36ccafa4bedafc62f2f1" @@ -3276,6 +3314,13 @@ ms@2.1.2: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== +mumath@^3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/mumath/-/mumath-3.3.4.tgz#48d4a0f0fd8cad4e7b32096ee89b161a63d30bbf" + integrity sha1-SNSg8P2MrU57Mglu6JsWGmPTC78= + dependencies: + almost-equal "^1.1.0" + nanoid@^3.1.30: version "3.1.30" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362" From e4159e1c6d740be2a95c13937dfc8fac74c50e5e Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 23:40:07 +0100 Subject: [PATCH 26/61] hotfix(jumpbar): jump bar fixed on mobile --- .../common/messaging/bars/JumpToBottom.tsx | 25 ++++++++++++++++--- src/components/ui/ComboBox.tsx | 4 +++ 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx index e85f1fac..0a3c941c 100644 --- a/src/components/common/messaging/bars/JumpToBottom.tsx +++ b/src/components/common/messaging/bars/JumpToBottom.tsx @@ -13,16 +13,32 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` z-index: 10; position: relative; + ${(props) => + props.position === "top" && + css` + top: 0; + `} + + ${(props) => + props.position === "bottom" && + css` + top: 65px; + + ${() => + isTouchscreenDevice && + css` + top: -90px; + `} + `} + > div { ${(props) => props.position === "bottom" && css` - top: -26px; - ${() => isTouchscreenDevice && css` - top: -32px; + top: -90px; `} `} @@ -37,7 +53,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` user-select: none; justify-content: space-between; transition: color ease-in-out 0.08s; - top: 48px; + top: -90px; ${(props) => props.accent @@ -53,6 +69,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` ${(props) => props.position === "top" ? css` + top: 48px; border-radius: 0 0 var(--border-radius) var(--border-radius); ` diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx index d64db866..417f337f 100644 --- a/src/components/ui/ComboBox.tsx +++ b/src/components/ui/ComboBox.tsx @@ -19,4 +19,8 @@ export default styled.select` &:focus { box-shadow: 0 0 0 1.5pt var(--accent); } + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; `; From d20fa9e3ea06157bfee8c484596d5e0c24f2d3d8 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 23:42:50 +0100 Subject: [PATCH 27/61] fix(jumpbar): started css rewrite --- src/components/common/messaging/bars/JumpToBottom.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx index 0a3c941c..726ae61f 100644 --- a/src/components/common/messaging/bars/JumpToBottom.tsx +++ b/src/components/common/messaging/bars/JumpToBottom.tsx @@ -32,16 +32,6 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` `} > div { - ${(props) => - props.position === "bottom" && - css` - ${() => - isTouchscreenDevice && - css` - top: -90px; - `} - `} - height: 28px; width: 100%; position: absolute; @@ -53,7 +43,6 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` user-select: none; justify-content: space-between; transition: color ease-in-out 0.08s; - top: -90px; ${(props) => props.accent From a4155a1153c1e3f6526005de786968f2f627a55a Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Tue, 28 Dec 2021 22:58:19 +0000 Subject: [PATCH 28/61] fix: apparently fix app jumping around --- src/mobx/stores/helpers/STheme.ts | 2 +- src/pages/RevoltApp.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/mobx/stores/helpers/STheme.ts b/src/mobx/stores/helpers/STheme.ts index 4a110e56..1d85ad36 100644 --- a/src/mobx/stores/helpers/STheme.ts +++ b/src/mobx/stores/helpers/STheme.ts @@ -95,7 +95,7 @@ export default class STheme { ...this.settings.get("appearance:theme:overrides"), light: this.isLight(), - "min-opacity": 1, + "min-opacity": 0, }; } diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index f1c8a1f0..345b930b 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -8,7 +8,6 @@ import { isTouchscreenDevice } from "../lib/isTouchscreenDevice"; import Popovers from "../context/intermediate/Popovers"; import Notifications from "../context/revoltjs/Notifications"; import StateMonitor from "../context/revoltjs/StateMonitor"; -import SyncManager from "../context/revoltjs/SyncManager"; import { Titlebar } from "../components/native/Titlebar"; import BottomNavigation from "../components/navigation/BottomNavigation"; @@ -28,7 +27,6 @@ import Settings from "./settings/Settings"; const Routes = styled.div` min-width: 0; display: flex; - overflow: hidden; flex-direction: column; position: relative; background: var(--primary-background); From 45762e4bf6f1dc18342dee27b63cb0a4fc133a08 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Wed, 29 Dec 2021 00:10:17 +0100 Subject: [PATCH 29/61] feat(contextmenu): glass effect on context menu --- src/styles/_context-menu.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/styles/_context-menu.scss b/src/styles/_context-menu.scss index 2b6005d8..2c298545 100644 --- a/src/styles/_context-menu.scss +++ b/src/styles/_context-menu.scss @@ -6,7 +6,12 @@ font-size: 0.875rem; color: var(--secondary-foreground); border-radius: var(--border-radius); - background: var(--primary-background) !important; + //background: var(--primary-background) !important; + background-color: rgba( + var(--primary-background-rgb), + max(var(--min-opacity), 0.8) + ); + backdrop-filter: blur(10px); box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05); > span, @@ -23,7 +28,11 @@ cursor: pointer; &:hover { - background: var(--secondary-background); + background-color: rgba( + var(--secondary-background-rgb), + max(var(--min-opacity), 0.75) + ); + backdrop-filter: blur(10px); } } From 94520bf0642ff9a1c420e27342688603bea32587 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Wed, 29 Dec 2021 00:34:02 +0100 Subject: [PATCH 30/61] feat(typindicator): added glass effect --- src/components/common/messaging/bars/TypingIndicator.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/common/messaging/bars/TypingIndicator.tsx b/src/components/common/messaging/bars/TypingIndicator.tsx index 31e9a10c..7063a31f 100644 --- a/src/components/common/messaging/bars/TypingIndicator.tsx +++ b/src/components/common/messaging/bars/TypingIndicator.tsx @@ -25,7 +25,11 @@ const Base = styled.div` flex-direction: row; width: calc(100% - var(--scrollbar-thickness)); color: var(--secondary-foreground); - background: var(--secondary-background); + background-color: rgba( + var(--primary-header-rgb), + max(var(--min-opacity), 0.75) + ); + backdrop-filter: blur(10px); } .avatars { From 5974a2b83bf6d10876b873611a395aac0dc1ac5d Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Wed, 29 Dec 2021 00:35:26 +0100 Subject: [PATCH 31/61] fix(typindicator): fixed var color --- src/components/common/messaging/bars/TypingIndicator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/messaging/bars/TypingIndicator.tsx b/src/components/common/messaging/bars/TypingIndicator.tsx index 7063a31f..4ccb40ab 100644 --- a/src/components/common/messaging/bars/TypingIndicator.tsx +++ b/src/components/common/messaging/bars/TypingIndicator.tsx @@ -26,7 +26,7 @@ const Base = styled.div` width: calc(100% - var(--scrollbar-thickness)); color: var(--secondary-foreground); background-color: rgba( - var(--primary-header-rgb), + var(--secondary-background-rgb), max(var(--min-opacity), 0.75) ); backdrop-filter: blur(10px); From cc531705b4abb4fa97e52fad43dcc52a9fe0ffb7 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Wed, 29 Dec 2021 00:18:00 +0000 Subject: [PATCH 32/61] feat(theme): add transparency effects toggle --- external/lang | 2 +- src/components/settings/AppearanceShims.tsx | 36 +++++++++++++++++++-- src/mobx/State.ts | 2 +- src/mobx/stores/Settings.ts | 3 ++ src/mobx/stores/helpers/STheme.ts | 4 ++- src/pages/settings/panes/Appearance.tsx | 9 ++++-- 6 files changed, 48 insertions(+), 8 deletions(-) diff --git a/external/lang b/external/lang index b955e406..1bf1a75b 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit b955e40611bc317851fe80fafdc3a26b9665d77e +Subproject commit 1bf1a75b4dcc3b8543651c792ee0901b9db57e39 diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index aacfbc38..b35bcb11 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -214,14 +214,44 @@ export const DisplayLigaturesShim = observer(() => { /** * Component providing a way to toggle seasonal themes. */ +export const DisplaySeasonalShim = observer(() => { + const settings = useApplicationState().settings; + + return ( + settings.set("appearance:seasonal", v)} + description={ + + }> + + + ); +}); + +/** + * Component providing a way to toggle transparency effects. + */ +export const DisplayTransparencyShim = observer(() => { + const settings = useApplicationState().settings; + + return ( + settings.set("appearance:transparency", v)} + description={ + + }> + + + ); +}); + export const ThemeOptionsShim = observer(() => { const settings = useApplicationState().settings; return ( <> -

- -

{/* TOFIX: WIP feature - follows system theme */} {/*; @@ -140,6 +141,7 @@ export default class Settings if (key === "appearance") { this.remove("appearance:emoji"); this.remove("appearance:seasonal"); + this.remove("appearance:transparency"); } else { this.remove("appearance:ligatures"); this.remove("appearance:theme:base"); @@ -169,6 +171,7 @@ export default class Settings appearance: this.pullKeys([ "appearance:emoji", "appearance:seasonal", + "appearance:transparency", ]), theme: this.pullKeys([ "appearance:ligatures", diff --git a/src/mobx/stores/helpers/STheme.ts b/src/mobx/stores/helpers/STheme.ts index 1d85ad36..394a8ee0 100644 --- a/src/mobx/stores/helpers/STheme.ts +++ b/src/mobx/stores/helpers/STheme.ts @@ -95,7 +95,9 @@ export default class STheme { ...this.settings.get("appearance:theme:overrides"), light: this.isLight(), - "min-opacity": 0, + "min-opacity": this.settings.get("appearance:transparency", true) + ? 0 + : 1, }; } diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index 66dd34bf..748daa4d 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -14,7 +14,8 @@ import { DisplayLigaturesShim, DisplayEmojiShim, ThemeCustomCSSShim, - ThemeOptionsShim, + DisplaySeasonalShim, + DisplayTransparencyShim, } from "../../../components/settings/AppearanceShims"; import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides"; import ThemeTools from "../../../components/settings/appearance/ThemeTools"; @@ -27,7 +28,11 @@ export const Appearance = observer(() => {
- +

+ +

+ +
From 086ab7b3bc9e21e9cfca7e8faf25a3f2183c172d Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Wed, 29 Dec 2021 16:39:35 +0100 Subject: [PATCH 33/61] fix(channel): last update before master merge --- external/lang | 2 +- src/components/common/ServerHeader.tsx | 3 - .../common/messaging/bars/NewMessages.tsx | 2 +- .../common/messaging/embed/EmbedInvite.tsx | 11 +- src/components/navigation/SidebarBase.tsx | 7 + src/pages/RevoltApp.tsx | 200 +++++++++++------- src/pages/settings/panes/Appearance.tsx | 2 +- 7 files changed, 139 insertions(+), 88 deletions(-) diff --git a/external/lang b/external/lang index 1bf1a75b..33af4890 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 1bf1a75b4dcc3b8543651c792ee0901b9db57e39 +Subproject commit 33af4890e56757c27a5bbd23e81d05f03c4a0cde diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 9b09fae5..5eb3fc71 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -26,9 +26,6 @@ const ServerBanner = styled.div` display: flex; flex-direction: column; justify-content: end; - /*background-position: center; - background-repeat: no-repeat; - background-size: cover;*/ background-size: cover !important; background-position: center center !important; diff --git a/src/components/common/messaging/bars/NewMessages.tsx b/src/components/common/messaging/bars/NewMessages.tsx index 0ea6dfa7..21829849 100644 --- a/src/components/common/messaging/bars/NewMessages.tsx +++ b/src/components/common/messaging/bars/NewMessages.tsx @@ -49,7 +49,7 @@ export default observer( } }}>
- New messages since{" "} + {" "} {dayjs(decodeTime(last_id)).fromNow()}
diff --git a/src/components/common/messaging/embed/EmbedInvite.tsx b/src/components/common/messaging/embed/EmbedInvite.tsx index 165a6f7b..1873f14f 100644 --- a/src/components/common/messaging/embed/EmbedInvite.tsx +++ b/src/components/common/messaging/embed/EmbedInvite.tsx @@ -1,3 +1,4 @@ +import { Group } from "@styled-icons/boxicons-solid"; import { autorun } from "mobx"; import { observer } from "mobx-react-lite"; import { useHistory } from "react-router-dom"; @@ -47,7 +48,7 @@ const EmbedInviteBase = styled.div` const EmbedInviteDetails = styled.div` flex-grow: 1; - padding-left: 12px; + padding-inline-start: 12px; ${() => isTouchscreenDevice && css` @@ -63,7 +64,14 @@ const EmbedInviteName = styled.div` `; const EmbedInviteMemberCount = styled.div` + display: flex; + align-items: center; + gap: 2px; font-size: 0.8em; + + > svg { + color: var(--secondary-foreground); + } `; type Props = { @@ -119,6 +127,7 @@ export function EmbedInvite({ code }: Props) { {invite.server_name} + {invite.member_count.toLocaleString()}{" "} {invite.member_count === 1 ? "member" : "members"} diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx index 218e3b91..214b848e 100644 --- a/src/components/navigation/SidebarBase.tsx +++ b/src/components/navigation/SidebarBase.tsx @@ -8,6 +8,13 @@ export default styled.div` user-select: none; flex-direction: row; align-items: stretch; + /*background: var(--background);*/ + + background-color: rgba( + var(--background-rgb), + max(var(--min-opacity), 0.75) + ); + backdrop-filter: blur(20px); /*> * > ::-webkit-scrollbar-thumb { width: 4px; diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 345b930b..a6d748d2 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -24,12 +24,38 @@ import ChannelSettings from "./settings/ChannelSettings"; import ServerSettings from "./settings/ServerSettings"; import Settings from "./settings/Settings"; +const AppContainer = styled.div` + background-size: cover !important; + background-position: center center !important; +`; + +const StatusBar = styled.div` + height: 40px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + gap: 14px; + + .button { + border: 1px solid white; + padding: 5px; + border-radius: var(--border-radius); + } +`; + const Routes = styled.div` min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--primary-background); + /*background-color: rgba( + var(--primary-background-rgb), + max(var(--min-opacity), 0.75) + );*/ + //backdrop-filter: blur(10px); `; export default function App() { @@ -44,91 +70,103 @@ export default function App() { return ( <> - {window.isNative && !window.native.getConfig().frame && ( - - )} - } - } - rightPanel={ - !inSpecial && inChannel - ? { width: 236, component: } - : undefined - } - bottomNav={{ - component: , - showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left, - height: 50, - }} - docked={isTouchscreenDevice ? Docked.None : Docked.Left}> - - - - - - - - + {/* +
Planned outage: CDN (~2 hours)
+
View status
+ */} + + {window.isNative && !window.native.getConfig().frame && ( + + )} + } + } + rightPanel={ + !inSpecial && inChannel + ? { width: 236, component: } + : undefined + } + bottomNav={{ + component: , + showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left, + height: 50, + }} + docked={isTouchscreenDevice ? Docked.None : Docked.Left}> + + + + + + + + - - + + - - - + + + - - + + - - - - - - - - - - - - - + + + + + + + + + + + + + + ); } diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index 748daa4d..a38c9cb8 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -31,8 +31,8 @@ export const Appearance = observer(() => {

- +
From 9c78e0912dd917d3fca526ef6b147d9c65bdfebf Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Wed, 29 Dec 2021 16:46:57 +0100 Subject: [PATCH 34/61] fix(friends): fix for friends menu --- src/pages/friends/Friend.module.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss index 612fc953..7d23d2ac 100644 --- a/src/pages/friends/Friend.module.scss +++ b/src/pages/friends/Friend.module.scss @@ -10,6 +10,12 @@ gap: 20px; } +::-webkit-scrollbar-thumb { + width: 4px; + background-clip: content-box; + border-top: 48px solid transparent; +} + .list { padding: 0 10px 10px 10px; padding-top: 48px; From dec43158922b8568ceb59a9ba90cb4a85ec08119 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Wed, 29 Dec 2021 23:04:42 +0100 Subject: [PATCH 35/61] feat(emoji): added funny short codes --- src/assets/emojis.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/assets/emojis.ts b/src/assets/emojis.ts index b31033ec..2a24e064 100644 --- a/src/assets/emojis.ts +++ b/src/assets/emojis.ts @@ -673,6 +673,7 @@ export const emojiDictionary = { mandarin: "🍊", lemon: "🍋", banana: "🍌", + nanner: "🍌", pineapple: "🍍", mango: "🥭", apple: "🍎", @@ -876,6 +877,7 @@ export const emojiDictionary = { train: "🚋", bus: "🚌", oncoming_bus: "🚍", + trolley: "🚎", trolleybus: "🚎", minibus: "🚐", ambulance: "🚑", From 9052ada1c783f68e8b30176fb8c1e35c4a8905f8 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Wed, 29 Dec 2021 23:57:41 +0100 Subject: [PATCH 36/61] chore: removed mention --- .../navigation/left/ServerListSidebar.tsx | 7 ++-- src/pages/home/Home.module.scss | 6 +--- src/pages/home/Home.tsx | 32 +++++++++---------- 3 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index 84487cd2..c979bdbb 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -385,7 +385,7 @@ export default observer(() => {
- + {/* { gap: "4px", }}>
Discover Public Servers
- } placement="right"> - + */} {!isTouchscreenDevice && ( diff --git a/src/pages/home/Home.module.scss b/src/pages/home/Home.module.scss index f9ebb4e7..e1aef42a 100644 --- a/src/pages/home/Home.module.scss +++ b/src/pages/home/Home.module.scss @@ -30,15 +30,11 @@ grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 650px; - margin-bottom: 20px; + margin-bottom: 30px; a { width: 100%; - &:nth-child(4) { - margin-bottom: 20px; - } - div { margin: 0; } diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 86872b44..f4eab6e6 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -103,8 +103,8 @@ export default observer(() => { Create a group - { }> Join a community - + */} {client.servers.get( "01F7ZSBSFHQ8TA81725KQCSDDP", @@ -159,24 +159,24 @@ export default observer(() => { rel="noreferrer"> }> - - - }> - - }> - - - - + }> + + }> + + + + {isDecember && ( Turn {seasonalTheme ? "off" : "on"} homescreen From b34ed4c24caaf32b3ef353f9a4a7b41f5871cac0 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Wed, 29 Dec 2021 23:58:36 +0100 Subject: [PATCH 37/61] fix(friends): small fixes --- src/pages/friends/Friend.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss index 7d23d2ac..26d663f0 100644 --- a/src/pages/friends/Friend.module.scss +++ b/src/pages/friends/Friend.module.scss @@ -10,11 +10,11 @@ gap: 20px; } -::-webkit-scrollbar-thumb { +/*::-webkit-scrollbar-thumb { width: 4px; background-clip: content-box; border-top: 48px solid transparent; -} +}*/ .list { padding: 0 10px 10px 10px; From fc0224562f279695065f4d1e886958110f456b5b Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:02:00 +0100 Subject: [PATCH 38/61] fix(friends): fixed friends tab * you can deny requests on mobile now * fixed menu to work with glass header --- src/pages/friends/Friend.module.scss | 16 +- src/pages/friends/Friends.tsx | 210 +++++++++++++++------------ 2 files changed, 123 insertions(+), 103 deletions(-) diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss index 26d663f0..402b4db2 100644 --- a/src/pages/friends/Friend.module.scss +++ b/src/pages/friends/Friend.module.scss @@ -10,17 +10,11 @@ gap: 20px; } -/*::-webkit-scrollbar-thumb { - width: 4px; - background-clip: content-box; - border-top: 48px solid transparent; -}*/ - .list { padding: 0 10px 10px 10px; padding-top: 48px; user-select: none; - overflow-y: scroll; + /*overflow-y: scroll;*/ &[data-empty="true"] { img { @@ -194,10 +188,10 @@ @media only screen and (max-width: 768px) { .list { - padding: 0 8px 8px 8px; - } + padding: 56px 8px 8px 8px; - .remove { - display: none; + .remove { + display: none; + } } } diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx index 1a0bea04..e8104864 100644 --- a/src/pages/friends/Friends.tsx +++ b/src/pages/friends/Friends.tsx @@ -3,6 +3,7 @@ import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid"; import { observer } from "mobx-react-lite"; import { RelationshipStatus, Presence } from "revolt-api/types/Users"; import { User } from "revolt.js/dist/maps/Users"; +import styled, { css } from "styled-components"; import styles from "./Friend.module.scss"; import { Text } from "preact-i18n"; @@ -22,6 +23,26 @@ import IconButton from "../../components/ui/IconButton"; import { Children } from "../../types/Preact"; import { Friend } from "./Friend"; +const Container = styled.div` + overflow-y: scroll; + + ::-webkit-scrollbar-thumb { + min-height: 100px; + width: 4px; + background-clip: content-box; + border-top: 48px solid transparent; + } + ${() => + isTouchscreenDevice && + css` + ::-webkit-scrollbar-thumb { + min-height: 150px; + border-top: 56px solid transparent; + border-bottom: var(--bottom-navigation-height) solid transparent; + } + `} +`; + export default observer(() => { const { openScreen } = useIntermediate(); @@ -115,100 +136,105 @@ export default observer(() => { */} -
- {isEmpty && ( - <> - - - - )} + +
+ {isEmpty && ( + <> + + + + )} - {incoming.length > 0 && ( -
- openScreen({ - id: "pending_requests", - users: incoming, - }) - }> -
- {incoming.map( - (x, i) => - i < 3 && ( - - ), - )} -
-
-
- {" "} - {incoming.length} -
- - {incoming.length > 3 ? ( - - ) : incoming.length > 1 ? ( - - ) : ( - - )} - -
- -
- )} - - {lists.map(([i18n, list, section_id], index) => { - if (index === 0) return; - if (list.length === 0) return; - - return ( - - — {list.length} -
+ {incoming.length > 0 && ( +
+ openScreen({ + id: "pending_requests", + users: incoming, + }) }> - {list.map((x) => ( - - ))} - - ); - })} -
+
+ {incoming.map( + (x, i) => + i < 3 && ( + + ), + )} +
+
+
+ {" "} + {incoming.length} +
+ + {incoming.length > 3 ? ( + + ) : incoming.length > 1 ? ( + + ) : ( + + )} + +
+ +
+ )} + + {lists.map(([i18n, list, section_id], index) => { + if (index === 0) return; + if (list.length === 0) return; + + return ( + + — {list.length} + + }> + {list.map((x) => ( + + ))} + + ); + })} + + ); }); From 675992bbc146e30858f2eec2bfd324beff51f49b Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:07:41 +0100 Subject: [PATCH 39/61] fix(scrollbar): fixed scrollbar --- src/pages/channels/Channel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx index df0dfe10..c25646f5 100644 --- a/src/pages/channels/Channel.tsx +++ b/src/pages/channels/Channel.tsx @@ -37,6 +37,7 @@ const ChannelMain = styled.div` flex-direction: row; > * > ::-webkit-scrollbar-thumb { + min-height: 100px; //TOFIX: add this to all scrollbars so they do not disappear width: 4px; background-clip: content-box; border-top: 48px solid transparent; From 672b657f58cbe074b63688c28af8cbcb87111626 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:13:25 +0100 Subject: [PATCH 40/61] fix(details): fixed for glass header --- src/components/ui/Details.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/ui/Details.tsx b/src/components/ui/Details.tsx index 05f2d71a..98f7f140 100644 --- a/src/components/ui/Details.tsx +++ b/src/components/ui/Details.tsx @@ -1,13 +1,20 @@ import styled, { css } from "styled-components"; +import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; + export default styled.details<{ sticky?: boolean; large?: boolean }>` summary { ${(props) => props.sticky && css` - top: -1px; + top: 48px; z-index: 10; position: sticky; + ${() => + isTouchscreenDevice && + css` + top: 56px; + `} `} ${(props) => From ee3f6bede710f1def1754c5abe11ed1d193d3a1f Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:16:31 +0100 Subject: [PATCH 41/61] fix(settings): fixed scrollbar for mobile --- src/pages/settings/Settings.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index ec70e7cf..b36917e0 100644 --- a/src/pages/settings/Settings.module.scss +++ b/src/pages/settings/Settings.module.scss @@ -45,7 +45,9 @@ .scrollbox { &::-webkit-scrollbar-thumb { + min-height: 150px; border-top: 56px solid transparent; + border-bottom: var(--bottom-navigation-height) solid transparent; } } @@ -117,6 +119,7 @@ // All children receive custom scrollbar. > * > ::-webkit-scrollbar-thumb { + min-height: 100px; width: 4px; background-clip: content-box; border-top: 80px solid transparent; From c0bf3fbc0b337bd017fa8ae7ed9ceba8e4079e05 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:35:44 +0100 Subject: [PATCH 42/61] feat(home): added temporary text --- external/lang | 2 +- .../navigation/left/HomeSidebar.tsx | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/external/lang b/external/lang index 33af4890..5a7d7b93 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 33af4890e56757c27a5bbd23e81d05f03c4a0cde +Subproject commit 5a7d7b93129195abd644db87097bd87958ea2170 diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx index 3bccf881..9b6bde0a 100644 --- a/src/components/navigation/left/HomeSidebar.tsx +++ b/src/components/navigation/left/HomeSidebar.tsx @@ -7,6 +7,7 @@ import { import { observer } from "mobx-react-lite"; import { Link, useLocation, useParams } from "react-router-dom"; import { RelationshipStatus } from "revolt-api/types/Users"; +import styled, { css } from "styled-components"; import { Text } from "preact-i18n"; import { useContext, useEffect } from "preact/hooks"; @@ -27,6 +28,21 @@ import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; import ButtonItem, { ChannelButton } from "../items/ButtonItem"; import ConnectionStatus from "../items/ConnectionStatus"; +const Navbar = styled.div` + display: flex; + align-items: center; + padding: 0 14px; + font-weight: 600; + flex-shrink: 0; + height: 48px; + + ${() => + isTouchscreenDevice && + css` + height: 56px; + `} +`; + export default observer(() => { const { pathname } = useLocation(); const client = useContext(AppContext); @@ -55,6 +71,9 @@ export default observer(() => { return ( + + + From fdbd931ea70d520926efc8d8cf0c157b57dfcb56 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:37:56 +0100 Subject: [PATCH 43/61] fix(app): fixed broken scrollbar on mobile --- src/components/navigation/SidebarBase.tsx | 6 ------ src/pages/RevoltApp.tsx | 8 +++++++- src/pages/channels/messaging/MessageArea.tsx | 6 ------ 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx index 214b848e..b16f1a6c 100644 --- a/src/components/navigation/SidebarBase.tsx +++ b/src/components/navigation/SidebarBase.tsx @@ -15,12 +15,6 @@ export default styled.div` max(var(--min-opacity), 0.75) ); backdrop-filter: blur(20px); - - /*> * > ::-webkit-scrollbar-thumb { - width: 4px; - background-clip: content-box; - border-top: 48px solid transparent; - }*/ `; export const GenericSidebarBase = styled.div<{ diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index a6d748d2..c46c7fe5 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -1,6 +1,6 @@ import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels"; import { Switch, Route, useLocation } from "react-router-dom"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import ContextMenus from "../lib/ContextMenus"; import { isTouchscreenDevice } from "../lib/isTouchscreenDevice"; @@ -56,6 +56,12 @@ const Routes = styled.div` max(var(--min-opacity), 0.75) );*/ //backdrop-filter: blur(10px); + + ${() => + isTouchscreenDevice && + css` + overflow: hidden; + `} `; export default function App() { diff --git a/src/pages/channels/messaging/MessageArea.tsx b/src/pages/channels/messaging/MessageArea.tsx index 7dafdd6f..16836f60 100644 --- a/src/pages/channels/messaging/MessageArea.tsx +++ b/src/pages/channels/messaging/MessageArea.tsx @@ -42,12 +42,6 @@ const Area = styled.div` padding-top: 48px; word-break: break-word; - > * > ::-webkit-scrollbar-thumb { - width: 4px; - background-clip: content-box; - border-top: 80px solid transparent; - } - > div { display: flex; min-height: 100%; From b7ec4a8b7884995d6b07b38326e71e73d927b172 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:44:33 +0100 Subject: [PATCH 44/61] fix(settings): scrollbar --- src/components/navigation/right/MemberSidebar.tsx | 4 ++-- src/pages/settings/Settings.module.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx index 167d228c..72dc9f3d 100644 --- a/src/components/navigation/right/MemberSidebar.tsx +++ b/src/components/navigation/right/MemberSidebar.tsx @@ -170,7 +170,7 @@ export const GroupMemberSidebar = observer( return ( - {isTouchscreenDevice &&
Group settings go here
} + {/*{isTouchscreenDevice &&
Group settings go here
}*/} @@ -197,7 +197,7 @@ export const ServerMemberSidebar = observer( return ( - {isTouchscreenDevice &&
Server settings go here
} + {/*{isTouchscreenDevice &&
Server settings go here
}*/} diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index b36917e0..e5956ed7 100644 --- a/src/pages/settings/Settings.module.scss +++ b/src/pages/settings/Settings.module.scss @@ -47,7 +47,7 @@ &::-webkit-scrollbar-thumb { min-height: 150px; border-top: 56px solid transparent; - border-bottom: var(--bottom-navigation-height) solid transparent; + //border-bottom: var(--bottom-navigation-height) solid transparent; } } From bf6b996c0912d5751ea7a54494fe959f00411d25 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:47:32 +0100 Subject: [PATCH 45/61] fix(mobile): send button fixed --- src/components/common/messaging/MessageBox.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 736c237b..72568687 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -102,6 +102,10 @@ const Action = styled.div` /*padding: 14px 0 14px 14px;*/ } + .mobile { + justify-content: start; + } + ${() => !isTouchscreenDevice && css` From 4034e17e0d621a1752edce4d057bcd219757eb79 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:48:13 +0100 Subject: [PATCH 46/61] fix(mobile): cleanup --- src/components/common/messaging/MessageBox.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 72568687..9cfa9f53 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -89,10 +89,6 @@ const Blocked = styled.div` `; const Action = styled.div` - /*display: flex; - align-items: center; - justify-content: center;*/ - > div { height: 48px; width: 34px; From 5417632f871048b0c65a118be8f90da504f8f853 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 14:53:51 +0100 Subject: [PATCH 47/61] fix(mobile): hide indexheader --- src/pages/settings/Settings.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 21fd3659..be0f59c9 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -319,7 +319,7 @@ export default observer(() => { } indexHeader={ -
+ {/*
@@ -329,7 +329,7 @@ export default observer(() => {
Change your status...
-
+
*/} } /> From 7496f484e192624de3ec43d5849b916831772b63 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 15:12:38 +0000 Subject: [PATCH 48/61] fix: add template to new msg bar translation --- external/lang | 2 +- .../common/messaging/bars/NewMessages.tsx | 8 +++-- src/components/settings/AppearanceShims.tsx | 33 ------------------- 3 files changed, 7 insertions(+), 36 deletions(-) diff --git a/external/lang b/external/lang index 5a7d7b93..0ac705b5 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 5a7d7b93129195abd644db87097bd87958ea2170 +Subproject commit 0ac705b5599bf9ddf538f3ada1bffd67b2206b57 diff --git a/src/components/common/messaging/bars/NewMessages.tsx b/src/components/common/messaging/bars/NewMessages.tsx index 21829849..030afb93 100644 --- a/src/components/common/messaging/bars/NewMessages.tsx +++ b/src/components/common/messaging/bars/NewMessages.tsx @@ -49,8 +49,12 @@ export default observer( } }}>
- {" "} - {dayjs(decodeTime(last_id)).fromNow()} +
diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index b35bcb11..41f2d876 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -247,39 +247,6 @@ export const DisplayTransparencyShim = observer(() => { ); }); -export const ThemeOptionsShim = observer(() => { - const settings = useApplicationState().settings; - - return ( - <> - {/* TOFIX: WIP feature - follows system theme */} - {/* settings.set("appearance:seasonal", v)} - description={ - - }> - - */} - {/* THIS CHECKBOX ENABLES GLASS EFFECT IN UI - ENABLED BY DEFAULT*/} - {/* settings.set("appearance:seasonal", v)} - description={"Enables glass effects throughout the app"}> - Enable glass effects - */} - settings.set("appearance:seasonal", v)} - description={ - - }> - - - - ); -}); - /** * Component providing a way to change emoji pack. */ From 6693f826fd4bdb0a9d9da930597b3ab5c83848a3 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 15:33:13 +0000 Subject: [PATCH 49/61] fix: apply reasonable defaults to all scrollbar thumbs --- src/pages/RevoltApp.tsx | 2 +- src/pages/channels/Channel.tsx | 2 -- src/styles/_elements.scss | 4 ++++ 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index c46c7fe5..a4947036 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -39,8 +39,8 @@ const StatusBar = styled.div` gap: 14px; .button { - border: 1px solid white; padding: 5px; + border: 1px solid white; border-radius: var(--border-radius); } `; diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx index c25646f5..e1322386 100644 --- a/src/pages/channels/Channel.tsx +++ b/src/pages/channels/Channel.tsx @@ -37,8 +37,6 @@ const ChannelMain = styled.div` flex-direction: row; > * > ::-webkit-scrollbar-thumb { - min-height: 100px; //TOFIX: add this to all scrollbars so they do not disappear - width: 4px; background-clip: content-box; border-top: 48px solid transparent; } diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss index 3a18014c..f7843a9e 100644 --- a/src/styles/_elements.scss +++ b/src/styles/_elements.scss @@ -13,6 +13,10 @@ } ::-webkit-scrollbar-thumb { + min-height: 15px; + min-width: 15px; + + background-clip: content-box; background: var(--scrollbar-thumb); } From 66d3e7c616538e2cbcd41cbfc6985ecf57e9cc4d Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 17:23:24 +0000 Subject: [PATCH 50/61] fix(context menu): position above all elements --- src/styles/_context-menu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_context-menu.scss b/src/styles/_context-menu.scss index 2c298545..ecc7b013 100644 --- a/src/styles/_context-menu.scss +++ b/src/styles/_context-menu.scss @@ -1,5 +1,5 @@ .preact-context-menu .context-menu { - z-index: 5000; + z-index: 10000; min-width: 190px; padding: 6px 8px; user-select: none; From e758b23ac3445077b8dcf5e71143e1e711545e2d Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 18:04:08 +0000 Subject: [PATCH 51/61] feat: implement logic for status changer in mobile settings --- src/pages/settings/Settings.tsx | 37 +++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index be0f59c9..977870c4 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -25,16 +25,19 @@ import { LIBRARY_VERSION } from "revolt.js"; import styled from "styled-components"; import styles from "./Settings.module.scss"; +import { openContextMenu } from "preact-context-menu"; import { Text } from "preact-i18n"; import { useContext } from "preact/hooks"; import { useApplicationState } from "../../mobx/State"; +import { useIntermediate } from "../../context/intermediate/Intermediate"; import RequiresOnline from "../../context/revoltjs/RequiresOnline"; import { AppContext, LogOutContext } from "../../context/revoltjs/RevoltClient"; import UserIcon from "../../components/common/user/UserIcon"; import { Username } from "../../components/common/user/UserShort"; +import UserStatus from "../../components/common/user/UserStatus"; import LineDivider from "../../components/ui/LineDivider"; import ButtonItem from "../../components/navigation/items/ButtonItem"; @@ -115,6 +118,7 @@ export default observer(() => { const history = useHistory(); const client = useContext(AppContext); const logout = useContext(LogOutContext); + const { openScreen } = useIntermediate(); const experiments = useApplicationState().experiments; function switchPage(to?: string) { @@ -319,17 +323,38 @@ export default observer(() => { } indexHeader={ - {/* } /> From 93875753728acae04771043456bfce7260d306dd Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 18:04:47 +0000 Subject: [PATCH 52/61] fix(bottom navigation): change logic to avoid getting trapped in heck (friends list) --- src/components/navigation/BottomNavigation.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx index 48d684a3..90de4515 100644 --- a/src/components/navigation/BottomNavigation.tsx +++ b/src/components/navigation/BottomNavigation.tsx @@ -17,10 +17,10 @@ const Base = styled.div` `; const Navbar = styled.div` - z-index: 100; - max-width: 500px; - margin: 0 auto; + z-index: 500; display: flex; + margin: 0 auto; + max-width: 500px; height: var(--bottom-navigation-height); `; @@ -71,7 +71,12 @@ export default observer(() => { } } - history.push(layout.getLastHomePath()); + const path = layout.getLastHomePath(); + if (path === "/friends") { + history.push("/"); + } else { + history.push(path); + } }}> From bad745856007c729ebe7ec77b2495dcf534d456c Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 18:15:31 +0000 Subject: [PATCH 53/61] feat: provide and consume scroll offsets --- src/components/common/ServerHeader.tsx | 12 ++---- src/components/ui/Header.tsx | 43 +++++++++++--------- src/context/Theme.tsx | 6 ++- src/mobx/stores/Layout.ts | 10 +++++ src/mobx/stores/helpers/STheme.ts | 20 ++++++--- src/pages/RevoltApp.tsx | 2 +- src/pages/channels/Channel.tsx | 11 ++--- src/pages/channels/ChannelHeader.tsx | 3 +- src/pages/channels/actions/HeaderActions.tsx | 8 +++- src/pages/channels/messaging/MessageArea.tsx | 10 +++-- src/pages/developer/Developer.tsx | 2 +- src/pages/friends/Friend.module.scss | 11 ++--- src/pages/friends/Friends.tsx | 31 +++----------- src/pages/home/Home.tsx | 2 +- src/pages/settings/GenericSettings.tsx | 5 ++- src/pages/settings/Settings.module.scss | 11 +---- src/styles/_elements.scss | 23 ++++++++++- 17 files changed, 113 insertions(+), 97 deletions(-) diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 5eb3fc71..7bbf0b66 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -10,7 +10,6 @@ import { Text } from "preact-i18n"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; -import Header from "../ui/Header"; import IconButton from "../ui/IconButton"; import Tooltip from "./Tooltip"; @@ -20,7 +19,7 @@ interface Props { background?: boolean; } -const ServerBanner = styled.div` +const ServerBanner = styled.div>` background-color: var(--secondary-header); flex-shrink: 0; display: flex; @@ -44,7 +43,8 @@ const ServerBanner = styled.div` `} .container { - height: 48px; + height: var(--header-height); + display: flex; align-items: center; padding: 0 14px; @@ -54,12 +54,6 @@ const ServerBanner = styled.div` text-overflow: ellipsis; gap: 8px; - ${() => - isTouchscreenDevice && - css` - height: 56px; - `} - .title { white-space: nowrap; overflow: hidden; diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index f3b69134..3750704c 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -16,12 +16,12 @@ import { Children } from "../../types/Preact"; interface Props { borders?: boolean; background?: boolean; + transparent?: boolean; placement: "primary" | "secondary"; } const Header = styled.div` gap: 10px; - height: 48px; flex: 0 auto; display: flex; flex-shrink: 0; @@ -29,16 +29,11 @@ const Header = styled.div` font-weight: 600; user-select: none; align-items: center; + + height: var(--header-height); + background-size: cover !important; background-position: center !important; - background-color: rgba( - var(--primary-header-rgb), - max(var(--min-opacity), 0.75) - ); - backdrop-filter: blur(10px); - z-index: 20; - position: absolute; - width: 100%; svg { flex-shrink: 0; @@ -49,11 +44,21 @@ const Header = styled.div` color: var(--secondary-foreground); } - ${() => - isTouchscreenDevice && - css` - height: 56px; - `} + ${(props) => + props.transparent + ? css` + background-color: rgba( + var(--primary-header-rgb), + max(var(--min-opacity), 0.75) + ); + backdrop-filter: blur(10px); + z-index: 20; + position: absolute; + width: 100%; + ` + : css` + background-color: var(--primary-header); + `} ${(props) => props.background && @@ -99,19 +104,19 @@ const IconContainer = styled.div` `} `; -interface PageHeaderProps { +type PageHeaderProps = Omit & { noBurger?: boolean; children: Children; icon: Children; -} +}; export const PageHeader = observer( - ({ children, icon, noBurger }: PageHeaderProps) => { + ({ children, icon, noBurger, ...props }: PageHeaderProps) => { const layout = useApplicationState().layout; const visible = layout.getSectionState(SIDEBAR_CHANNELS, true); return ( -
+
{!noBurger && } @@ -136,7 +141,7 @@ export function HamburgerAction() { function openSidebar() { document - .querySelector("#app > div > div") + .querySelector("#app > div > div > div") ?.scrollTo({ behavior: "smooth", left: 0 }); } diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index c30fbbd0..ceb2a401 100644 --- a/src/context/Theme.tsx +++ b/src/context/Theme.tsx @@ -72,10 +72,14 @@ export type Theme = Overrides & { font?: Fonts; css?: string; monospaceFont?: MonospaceFonts; - "min-opacity"?: number; }; +export type ComputedVariables = Theme & { + "header-height"?: string; + "effective-bottom-offset"?: string; +}; + export interface ThemeOptions { base?: string; ligatures?: boolean; diff --git a/src/mobx/stores/Layout.ts b/src/mobx/stores/Layout.ts index 324626ad..1c572333 100644 --- a/src/mobx/stores/Layout.ts +++ b/src/mobx/stores/Layout.ts @@ -138,6 +138,16 @@ export default class Layout implements Store, Persistent { return this.lastHomePath; } + /** + * Get the last path the user had open. + * @returns Last path + */ + @computed getLastPath() { + return this.lastSection === "home" + ? this.lastHomePath + : this.getLastOpened(this.lastSection); + } + /** * Set the current path open in the home tab. * @param path Pathname diff --git a/src/mobx/stores/helpers/STheme.ts b/src/mobx/stores/helpers/STheme.ts index 394a8ee0..c4ebb173 100644 --- a/src/mobx/stores/helpers/STheme.ts +++ b/src/mobx/stores/helpers/STheme.ts @@ -1,6 +1,8 @@ import rgba from "color-rgba"; import { makeAutoObservable, computed, action } from "mobx"; +import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; + import { Theme, PRESETS, @@ -9,6 +11,7 @@ import { DEFAULT_MONO_FONT, Fonts, MonospaceFonts, + ComputedVariables, } from "../../../context/Theme"; import Settings from "../Settings"; @@ -94,14 +97,10 @@ export default class STheme { ...PRESETS[this.getBase()], ...this.settings.get("appearance:theme:overrides"), light: this.isLight(), - - "min-opacity": this.settings.get("appearance:transparency", true) - ? 0 - : 1, }; } - @computed computeVariables(): Theme { + @computed computeVariables(): ComputedVariables { const variables = this.getVariables() as Record< string, string | boolean | number @@ -114,7 +113,16 @@ export default class STheme { } } - return variables as unknown as Theme; + return { + ...(variables as unknown as Theme), + "min-opacity": this.settings.get("appearance:transparency", true) + ? 0 + : 1, + "header-height": isTouchscreenDevice ? "56px" : "48px", + "effective-bottom-offset": isTouchscreenDevice + ? "var(--bottom-navigation-height)" + : "0px", + }; } @action setVariable(key: Variables, value: string) { diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index a4947036..9fa31811 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -45,7 +45,7 @@ const StatusBar = styled.div` } `; -const Routes = styled.div` +const Routes = styled.div.attrs({ "data-component": "routes" })` min-width: 0; display: flex; flex-direction: column; diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx index e1322386..9ff0a59a 100644 --- a/src/pages/channels/Channel.tsx +++ b/src/pages/channels/Channel.tsx @@ -29,20 +29,17 @@ import ChannelHeader from "./ChannelHeader"; import { MessageArea } from "./messaging/MessageArea"; import VoiceHeader from "./voice/VoiceHeader"; -const ChannelMain = styled.div` +const ChannelMain = styled.div.attrs({ "data-component": "channel" })` flex-grow: 1; display: flex; min-height: 0; overflow: hidden; flex-direction: row; - - > * > ::-webkit-scrollbar-thumb { - background-clip: content-box; - border-top: 48px solid transparent; - } `; -const ChannelContent = styled.div` +const ChannelContent = styled.div.attrs({ + "data-component": "content", +})` flex-grow: 1; display: flex; overflow: hidden; diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx index 70b8f34d..8c8244fc 100644 --- a/src/pages/channels/ChannelHeader.tsx +++ b/src/pages/channels/ChannelHeader.tsx @@ -78,7 +78,6 @@ const Info = styled.div` export default observer(({ channel }: ChannelHeaderProps) => { const { openScreen } = useIntermediate(); - const layout = useApplicationState().layout; const name = getChannelName(channel); let icon, recipient: User | undefined; @@ -99,7 +98,7 @@ export default observer(({ channel }: ChannelHeaderProps) => { } return ( - + {name} {isTouchscreenDevice && diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index 0466e0ca..c8cc235d 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/src/pages/channels/actions/HeaderActions.tsx @@ -30,7 +30,7 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) { const history = useHistory(); function openRightSidebar() { - const panels = document.querySelector("#app > div > div"); + const panels = document.querySelector("#app > div > div > div"); panels?.scrollTo({ behavior: "smooth", left: panels.clientWidth * 3, @@ -84,7 +84,11 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) { )} {(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && ( - + { + internalEmit("RightSidebar", "open", undefined); + openRightSidebar(); + }}> )} diff --git a/src/pages/channels/messaging/MessageArea.tsx b/src/pages/channels/messaging/MessageArea.tsx index 16836f60..ee356c38 100644 --- a/src/pages/channels/messaging/MessageArea.tsx +++ b/src/pages/channels/messaging/MessageArea.tsx @@ -33,14 +33,18 @@ import Preloader from "../../../components/ui/Preloader"; import ConversationStart from "./ConversationStart"; import MessageRenderer from "./MessageRenderer"; -const Area = styled.div` +const Area = styled.div.attrs({ "data-scroll-offset": "with-padding" })` height: 100%; flex-grow: 1; min-height: 0; + word-break: break-word; + overflow-x: hidden; overflow-y: scroll; - padding-top: 48px; - word-break: break-word; + + &::-webkit-scrollbar-thumb { + min-height: 150px; + } > div { display: flex; diff --git a/src/pages/developer/Developer.tsx b/src/pages/developer/Developer.tsx index f45cab52..d64cf5f6 100644 --- a/src/pages/developer/Developer.tsx +++ b/src/pages/developer/Developer.tsx @@ -29,7 +29,7 @@ export default function Developer() { return (
}>Developer Tab -
+
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss index 402b4db2..0316dab6 100644 --- a/src/pages/friends/Friend.module.scss +++ b/src/pages/friends/Friend.module.scss @@ -12,9 +12,7 @@ .list { padding: 0 10px 10px 10px; - padding-top: 48px; user-select: none; - /*overflow-y: scroll;*/ &[data-empty="true"] { img { @@ -186,12 +184,9 @@ } } +// Hide the remove friend button on smaller screens. @media only screen and (max-width: 768px) { - .list { - padding: 56px 8px 8px 8px; - - .remove { - display: none; - } + .list .remove { + display: none; } } diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx index e8104864..24fdfafa 100644 --- a/src/pages/friends/Friends.tsx +++ b/src/pages/friends/Friends.tsx @@ -6,6 +6,7 @@ import { User } from "revolt.js/dist/maps/Users"; import styled, { css } from "styled-components"; import styles from "./Friend.module.scss"; +import classNames from "classnames"; import { Text } from "preact-i18n"; import { TextReact } from "../../lib/i18n"; @@ -17,32 +18,12 @@ import { useClient } from "../../context/revoltjs/RevoltClient"; import CollapsibleSection from "../../components/common/CollapsibleSection"; import Tooltip from "../../components/common/Tooltip"; import UserIcon from "../../components/common/user/UserIcon"; -import Header, { PageHeader } from "../../components/ui/Header"; +import { PageHeader } from "../../components/ui/Header"; import IconButton from "../../components/ui/IconButton"; import { Children } from "../../types/Preact"; import { Friend } from "./Friend"; -const Container = styled.div` - overflow-y: scroll; - - ::-webkit-scrollbar-thumb { - min-height: 100px; - width: 4px; - background-clip: content-box; - border-top: 48px solid transparent; - } - ${() => - isTouchscreenDevice && - css` - ::-webkit-scrollbar-thumb { - min-height: 150px; - border-top: 56px solid transparent; - border-bottom: var(--bottom-navigation-height) solid transparent; - } - `} -`; - export default observer(() => { const { openScreen } = useIntermediate(); @@ -93,7 +74,7 @@ export default observer(() => { const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0; return ( <> - } noBurger> + } transparent noBurger>
@@ -136,9 +117,9 @@ export default observer(() => { */}
- +
{isEmpty && ( @@ -234,7 +215,7 @@ export default observer(() => { ); })}
- +
); }); diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index f4eab6e6..22e70269 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -83,7 +83,7 @@ export default observer(() => {
)}
- }> + } transparent>
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx index a3480b49..12a4665c 100644 --- a/src/pages/settings/GenericSettings.tsx +++ b/src/pages/settings/GenericSettings.tsx @@ -102,7 +102,7 @@ export function GenericSettings({ /> {isTouchscreenDevice && ( -
+
{typeof page === "undefined" ? ( <> {showExitButton && ( @@ -168,6 +168,9 @@ export function GenericSettings({
{ // Force scroll to top if page changes. if (ref) { diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index e5956ed7..f18c0ee8 100644 --- a/src/pages/settings/Settings.module.scss +++ b/src/pages/settings/Settings.module.scss @@ -43,20 +43,13 @@ background: var(--primary-background); } - .scrollbox { - &::-webkit-scrollbar-thumb { - min-height: 150px; - border-top: 56px solid transparent; - //border-bottom: var(--bottom-navigation-height) solid transparent; - } - } - /* Sidebar */ .sidebar { overflow-y: auto; .container { - padding: 76px 8px calc(var(--bottom-navigation-height) + 30px); + padding: calc(var(--header-height) + 4px) 8px + calc(var(--bottom-navigation-height) + 30px); min-width: 218px; } diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss index f7843a9e..35d28c9b 100644 --- a/src/styles/_elements.scss +++ b/src/styles/_elements.scss @@ -13,13 +13,32 @@ } ::-webkit-scrollbar-thumb { - min-height: 15px; - min-width: 15px; + min-height: 30px; + min-width: 30px; background-clip: content-box; background: var(--scrollbar-thumb); } +[data-scroll-offset] { + overflow-y: scroll; +} + +[data-scroll-offset="with-padding"], +[data-scroll-offset] .with-padding { + padding-top: var(--header-height); +} + +[data-scroll-offset]::-webkit-scrollbar-thumb { + background-clip: content-box; + border-top: var(--header-height) solid transparent; +} + +[data-avoids-navigation]::-webkit-scrollbar-thumb { + background-clip: content-box; + border-bottom: var(--effective-bottom-offset) solid transparent; +} + ::-webkit-scrollbar-corner { background: transparent; } From b5789126f8031f151837e3bd084327fc349521d0 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 18:27:22 +0000 Subject: [PATCH 54/61] chore: clean up server banner code --- external/lang | 2 +- src/components/common/ServerHeader.tsx | 37 +++++++++++++------------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/external/lang b/external/lang index 0ac705b5..1d3e85e7 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 0ac705b5599bf9ddf538f3ada1bffd67b2206b57 +Subproject commit 1d3e85e7f6d0ad7a590854e240d7c47291f3e2cf diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 7bbf0b66..68579ba1 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -20,27 +20,31 @@ interface Props { } const ServerBanner = styled.div>` - background-color: var(--secondary-header); flex-shrink: 0; display: flex; flex-direction: column; justify-content: end; - background-size: cover !important; - background-position: center center !important; + background-size: cover; + background-repeat: norepeat; + background-position: center center; ${(props) => - props.background && - css` - height: 120px; - .container { - background: linear-gradient( - 0deg, - var(--secondary-background), - transparent - ); - } - `} + props.background + ? css` + height: 120px; + + .container { + background: linear-gradient( + 0deg, + var(--secondary-background), + transparent + ); + } + ` + : css` + background-color: var(--secondary-header); + `} .container { height: var(--header-height); @@ -70,10 +74,7 @@ export default observer(({ server }: Props) => {
{server.flags && server.flags & 1 ? ( From a921e8ed0d861068bf64363b24b2eab43cb24667 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 18:35:13 +0000 Subject: [PATCH 55/61] fix: apply border when sidebar collapsed --- src/pages/RevoltApp.tsx | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 9fa31811..7f5d560a 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -5,6 +5,9 @@ import styled, { css } from "styled-components"; import ContextMenus from "../lib/ContextMenus"; import { isTouchscreenDevice } from "../lib/isTouchscreenDevice"; +import { useApplicationState } from "../mobx/State"; +import { SIDEBAR_CHANNELS } from "../mobx/stores/Layout"; + import Popovers from "../context/intermediate/Popovers"; import Notifications from "../context/revoltjs/Notifications"; import StateMonitor from "../context/revoltjs/StateMonitor"; @@ -45,12 +48,16 @@ const StatusBar = styled.div` } `; -const Routes = styled.div.attrs({ "data-component": "routes" })` +const Routes = styled.div.attrs({ "data-component": "routes" })<{ + borders: boolean; +}>` min-width: 0; display: flex; - flex-direction: column; position: relative; + flex-direction: column; + background: var(--primary-background); + /*background-color: rgba( var(--primary-background-rgb), max(var(--min-opacity), 0.75) @@ -62,10 +69,17 @@ const Routes = styled.div.attrs({ "data-component": "routes" })` css` overflow: hidden; `} + + ${(props) => + props.borders && + css` + border-start-start-radius: 8px; + `} `; export default function App() { const path = useLocation().pathname; + const layout = useApplicationState().layout; const fixedBottomNav = path === "/" || path === "/settings" || path.startsWith("/friends"); const inChannel = path.includes("/channel"); @@ -107,7 +121,10 @@ export default function App() { height: 50, }} docked={isTouchscreenDevice ? Docked.None : Docked.Left}> - + Date: Thu, 30 Dec 2021 19:42:12 +0100 Subject: [PATCH 56/61] fix(serverlist): adjusted design --- src/components/navigation/left/ServerListSidebar.tsx | 1 + src/components/ui/LineDivider.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index c979bdbb..9ba4eb60 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -95,6 +95,7 @@ const ServerList = styled.div` overflow-y: scroll; padding-bottom: 20px; flex-direction: column; + margin-top: -2px; scrollbar-width: none; diff --git a/src/components/ui/LineDivider.tsx b/src/components/ui/LineDivider.tsx index 58a9c7a4..fab42452 100644 --- a/src/components/ui/LineDivider.tsx +++ b/src/components/ui/LineDivider.tsx @@ -1,9 +1,9 @@ import styled from "styled-components"; export default styled.div` - height: 0px; + height: 0; opacity: 0.6; flex-shrink: 0; - margin: 8px 10px; + margin: 8px 15px; border-top: 1px solid var(--tertiary-foreground); `; From 504d882df8cd2bd37181b16f3a356e366a8ec724 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Thu, 30 Dec 2021 19:53:52 +0100 Subject: [PATCH 57/61] fix(settings): removed obscure string --- src/pages/settings/server/Overview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx index 28141891..9086e5fb 100644 --- a/src/pages/settings/server/Overview.tsx +++ b/src/pages/settings/server/Overview.tsx @@ -126,7 +126,6 @@ export const Overview = observer(({ server }: Props) => { alignItems: "center", }}> {i18n} - Sends a message when someone joins your server Date: Thu, 30 Dec 2021 19:00:41 +0000 Subject: [PATCH 58/61] fix: allow home button to be flush with background by removing border when not in server --- src/pages/RevoltApp.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 7f5d560a..34a16a4c 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -83,6 +83,7 @@ export default function App() { const fixedBottomNav = path === "/" || path === "/settings" || path.startsWith("/friends"); const inChannel = path.includes("/channel"); + const inServer = path.includes("/server"); const inSpecial = (path.startsWith("/friends") && isTouchscreenDevice) || path.startsWith("/invite") || @@ -123,7 +124,8 @@ export default function App() { docked={isTouchscreenDevice ? Docked.None : Docked.Left}> Date: Thu, 30 Dec 2021 19:14:21 +0000 Subject: [PATCH 59/61] fix: change conditions for corners on header --- src/components/ui/Header.tsx | 1 + src/pages/RevoltApp.tsx | 7 +------ 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 3750704c..9f3f5d8c 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -80,6 +80,7 @@ const Header = styled.div` props.borders && css` border-start-start-radius: 8px; + border-end-start-radius: 8px; `} `; diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 34a16a4c..be3128c1 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -79,7 +79,6 @@ const Routes = styled.div.attrs({ "data-component": "routes" })<{ export default function App() { const path = useLocation().pathname; - const layout = useApplicationState().layout; const fixedBottomNav = path === "/" || path === "/settings" || path.startsWith("/friends"); const inChannel = path.includes("/channel"); @@ -122,11 +121,7 @@ export default function App() { height: 50, }} docked={isTouchscreenDevice ? Docked.None : Docked.Left}> - + Date: Thu, 30 Dec 2021 19:44:15 +0000 Subject: [PATCH 60/61] fix(channel header): fix action callbacks --- src/lib/defer.ts | 10 ++++++ src/pages/channels/actions/HeaderActions.tsx | 37 ++++++++++++-------- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/src/lib/defer.ts b/src/lib/defer.ts index 79de63ae..73663ac6 100644 --- a/src/lib/defer.ts +++ b/src/lib/defer.ts @@ -1 +1,11 @@ +/** + * Schedule a task at the end of the Event Loop + * @param cb Callback + */ export const defer = (cb: () => void) => setTimeout(cb, 0); + +/** + * Schedule a task at the end of the second Event Loop + * @param cb Callback + */ +export const chainedDefer = (cb: () => void) => defer(() => defer(cb)); diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index c8cc235d..2127b4bb 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/src/pages/channels/actions/HeaderActions.tsx @@ -10,6 +10,7 @@ import { import { observer } from "mobx-react-lite"; import { useHistory } from "react-router-dom"; +import { chainedDefer, defer } from "../../../lib/defer"; import { internalEmit } from "../../../lib/eventEmitter"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState"; @@ -29,7 +30,8 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) { const { openScreen } = useIntermediate(); const history = useHistory(); - function openRightSidebar() { + function slideOpen() { + if (!isTouchscreenDevice) return; const panels = document.querySelector("#app > div > div > div"); panels?.scrollTo({ behavior: "smooth", @@ -37,12 +39,25 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) { }); } - function openSidebar() { - if (isTouchscreenDevice) { - openRightSidebar(); - } else { + function openSearch() { + if ( + !isTouchscreenDevice && + !layout.getSectionState(SIDEBAR_MEMBERS, true) + ) { layout.toggleSectionState(SIDEBAR_MEMBERS, true); } + + slideOpen(); + chainedDefer(() => internalEmit("RightSidebar", "open", "search")); + } + + function openMembers() { + if (!isTouchscreenDevice) { + layout.toggleSectionState(SIDEBAR_MEMBERS, true); + } + + slideOpen(); + chainedDefer(() => internalEmit("RightSidebar", "open", undefined)); } return ( @@ -74,21 +89,13 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) { )} {channel.channel_type !== "VoiceChannel" && ( - { - internalEmit("RightSidebar", "open", "search"); - openRightSidebar(); - }}> + )} {(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && ( - { - internalEmit("RightSidebar", "open", undefined); - openRightSidebar(); - }}> + )} From 7c120685d4277ca8e9b703305f0c5f66c9074bdd Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Thu, 30 Dec 2021 19:56:41 +0000 Subject: [PATCH 61/61] fix: change header borders depending on whether in server --- src/components/ui/Header.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 9f3f5d8c..511e17ac 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -4,6 +4,7 @@ import { Menu, } from "@styled-icons/boxicons-regular"; import { observer } from "mobx-react-lite"; +import { useLocation } from "react-router-dom"; import styled, { css } from "styled-components"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; @@ -14,7 +15,9 @@ import { SIDEBAR_CHANNELS } from "../../mobx/stores/Layout"; import { Children } from "../../types/Preact"; interface Props { - borders?: boolean; + topBorder?: boolean; + bottomBorder?: boolean; + background?: boolean; transparent?: boolean; placement: "primary" | "secondary"; @@ -77,9 +80,14 @@ const Header = styled.div` `} ${(props) => - props.borders && + props.topBorder && css` border-start-start-radius: 8px; + `} + + ${(props) => + props.bottomBorder && + css` border-end-start-radius: 8px; `} `; @@ -115,9 +123,14 @@ export const PageHeader = observer( ({ children, icon, noBurger, ...props }: PageHeaderProps) => { const layout = useApplicationState().layout; const visible = layout.getSectionState(SIDEBAR_CHANNELS, true); + const { pathname } = useLocation(); return ( -
+
{!noBurger && }