cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-20 01:57:12 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'ui/glass-header' of https://github.com/revoltchat/revite into ui/glass-header

Browse source
This commit is contained in:
trashtemp 2021-12-30 19:42:23 +01:00
commit b936d4462d
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
3 changed files with 40 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit 0ac705b5599bf9ddf538f3ada1bffd67b2206b57 Subproject commit 1d3e85e7f6d0ad7a590854e240d7c47291f3e2cf

37
src/components/common/ServerHeader.tsx
View file

@ -20,27 +20,31 @@ interface Props {
} }
const ServerBanner = styled.div<Omit<Props, "server">>` const ServerBanner = styled.div<Omit<Props, "server">>`
background-color: var(--secondary-header);
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: end; justify-content: end;
background-size: cover !important; background-size: cover;
background-position: center center !important; background-repeat: norepeat;
background-position: center center;
${(props) => ${(props) =>
props.background && props.background
css` ? css`
height: 120px; height: 120px;
.container {
background: linear-gradient( .container {
0deg, background: linear-gradient(
var(--secondary-background), 0deg,
transparent var(--secondary-background),
); transparent
} );
`} }
`
: css`
background-color: var(--secondary-header);
`}
.container { .container {
height: var(--header-height); height: var(--header-height);
@ -70,10 +74,7 @@ export default observer(({ server }: Props) => {
<ServerBanner <ServerBanner
background={typeof bannerURL !== "undefined"} background={typeof bannerURL !== "undefined"}
style={{ style={{
backgroundSize: "cover", backgroundImage: bannerURL ? `url('${bannerURL}')` : undefined,
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
background: bannerURL ? `url('${bannerURL}')` : undefined,
}}> }}>
<div className="container"> <div className="container">
{server.flags && server.flags & 1 ? ( {server.flags && server.flags & 1 ? (

23
src/pages/RevoltApp.tsx
View file

@ -5,6 +5,9 @@ import styled, { css } from "styled-components";
import ContextMenus from "../lib/ContextMenus"; import ContextMenus from "../lib/ContextMenus";
import { isTouchscreenDevice } from "../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
import { useApplicationState } from "../mobx/State";
import { SIDEBAR_CHANNELS } from "../mobx/stores/Layout";
import Popovers from "../context/intermediate/Popovers"; import Popovers from "../context/intermediate/Popovers";
import Notifications from "../context/revoltjs/Notifications"; import Notifications from "../context/revoltjs/Notifications";
import StateMonitor from "../context/revoltjs/StateMonitor"; 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; min-width: 0;
display: flex; display: flex;
flex-direction: column;
position: relative; position: relative;
flex-direction: column;
background: var(--primary-background); background: var(--primary-background);
/*background-color: rgba( /*background-color: rgba(
var(--primary-background-rgb), var(--primary-background-rgb),
max(var(--min-opacity), 0.75) max(var(--min-opacity), 0.75)
@ -62,10 +69,17 @@ const Routes = styled.div.attrs({ "data-component": "routes" })`
css` css`
overflow: hidden; overflow: hidden;
`} `}
${(props) =>
props.borders &&
css`
border-start-start-radius: 8px;
`}
`; `;
export default function App() { export default function App() {
const path = useLocation().pathname; const path = useLocation().pathname;
const layout = useApplicationState().layout;
const fixedBottomNav = const fixedBottomNav =
path === "/" || path === "/settings" || path.startsWith("/friends"); path === "/" || path === "/settings" || path.startsWith("/friends");
const inChannel = path.includes("/channel"); const inChannel = path.includes("/channel");
@ -107,7 +121,10 @@ export default function App() {
height: 50, height: 50,
}} }}
docked={isTouchscreenDevice ? Docked.None : Docked.Left}> docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
<Routes> <Routes
borders={
!layout.getSectionState(SIDEBAR_CHANNELS, true)
}>
<Switch> <Switch>
<Route <Route
path="/server/:server/channel/:channel/settings/:page" path="/server/:server/channel/:channel/settings/:page"