feat(native): overlay titlebar on login srceen

This commit is contained in:
Paul 2021-12-25 23:38:21 +00:00
parent 84c5c3abe9
commit d73772929d
2 changed files with 19 additions and 8 deletions

View file

@ -1,14 +1,25 @@
import { Wrench } from "@styled-icons/boxicons-solid"; import { Wrench } from "@styled-icons/boxicons-solid";
import styled from "styled-components"; import styled, { css } from "styled-components";
import UpdateIndicator from "../common/UpdateIndicator"; import UpdateIndicator from "../common/UpdateIndicator";
const TitlebarBase = styled.div` interface Props {
overlay?: boolean;
}
const TitlebarBase = styled.div<Props>`
height: var(--titlebar-height); height: var(--titlebar-height);
display: flex; display: flex;
user-select: none; user-select: none;
align-items: center; align-items: center;
${(props) =>
props.overlay &&
css`
position: fixed;
width: 100%;
`}
.drag { .drag {
flex-grow: 1; flex-grow: 1;
-webkit-app-region: drag; -webkit-app-region: drag;
@ -84,9 +95,9 @@ const TitlebarBase = styled.div`
} }
`; `;
export function Titlebar() { export function Titlebar(props: Props) {
return ( return (
<TitlebarBase> <TitlebarBase {...props}>
<div class="title"> <div class="title">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

View file

@ -20,12 +20,11 @@ import { FormResend, FormVerify } from "./forms/FormVerify";
export default observer(() => { export default observer(() => {
const state = useApplicationState(); const state = useApplicationState();
const theme = state.settings.theme; const theme = state.settings.theme;
const configuration = state.config.get();
return ( return (
<> <>
{window.isNative && !window.native.getConfig().frame && ( {window.isNative && !window.native.getConfig().frame && (
<Titlebar /> <Titlebar overlay />
)} )}
<div className={styles.login}> <div className={styles.login}>
<Helmet> <Helmet>
@ -37,8 +36,9 @@ export default observer(() => {
<div className={styles.content}> <div className={styles.content}>
<div className={styles.nav}> <div className={styles.nav}>
<a className={styles.logo}> <a className={styles.logo}>
{/*TOFIX: Hide logo if on Desktop Native*/} {!("native" in window) && (
<img src={wideSVG} draggable={false} /> <img src={wideSVG} draggable={false} />
)}
</a> </a>
<LocaleSelector /> <LocaleSelector />
</div> </div>