cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improve titlebar design.

Browse source
This commit is contained in:
Paul 2021-08-01 16:44:51 +01:00
parent 31636d569c
commit 4ae0dc6935
3 changed files with 46 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/native/Titlebar.tsx
View file

@ -1,13 +1,10 @@
import { X, Minus, Square } from "@styled-icons/boxicons-regular";
import { X, Minus, Square, Wrench } from "@styled-icons/boxicons-regular";
import styled from "styled-components";
import wideSVG from "../../assets/wide.svg";
export const TITLEBAR_HEIGHT = "24px";
export const USE_TITLEBAR = window.isNative && !window.native.getConfig().frame;
const TitlebarBase = styled.div`
height: ${TITLEBAR_HEIGHT};
height: var(--titlebar-height);
display: flex;
user-select: none;
@ -19,10 +16,15 @@ const TitlebarBase = styled.div`
font-size: 16px;
font-weight: 600;
margin-left: 4px;
margin-left: 8px;
img {
width: 60px;
gap: 8px;
display: flex;
align-items: center;
justify-content: flex-start;
svg {
height: calc(var(--titlebar-height) / 2);
}
}
@ -32,8 +34,10 @@ const TitlebarBase = styled.div`
align-items: center;
div {
width: 24px;
height: 24px;
width: calc(
var(--titlebar-height) + var(--titlebar-action-padding)
);
height: var(--titlebar-height);
display: grid;
place-items: center;
@ -54,7 +58,18 @@ export function Titlebar() {
return (
<TitlebarBase>
<span class="title">
<img src={wideSVG} />
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 193.733 37.438">
<path
d="M23.393,1.382c0,2.787-1.52,4.46-4.764,4.46H13.258V-2.977H18.63C21.873-2.977,23.393-1.254,23.393,1.382Zm-24-11.555,5.2,7.213V25.4h8.666V11.973h2.078l7.4,13.43h9.781l-8.21-14.089A10.355,10.355,0,0,0,32.212,1.027c0-6.183-4.358-11.2-13.075-11.2Zm60.035,0H37.634V25.4H59.426V18.46H46.3v-7.8H57.906V3.966H46.3V-2.969H59.426Zm20.981,26.86-8.818-26.86H62.365L74.984,25.4H85.83L98.449-10.173H89.276Zm56.659-9.173c0-10.693-8.058-18.194-18.194-18.194-10.085,0-18.3,7.5-18.3,18.194a17.9,17.9,0,0,0,18.3,18.244A17.815,17.815,0,0,0,137.066,7.514Zm-27.62,0c0-6.335,3.649-10.338,9.426-10.338,5.676,0,9.376,4,9.376,10.338,0,6.233-3.7,10.338-9.376,10.338C113.095,17.852,109.446,13.747,109.446,7.514ZM141.88-10.173V25.4H161.9v-6.95H150.545V-10.173Zm22.248,7.2h9.426V25.4h8.666V-2.975h9.426v-7.2H164.128Z"
transform="translate(1.586 11.18)"
fill="var(--titlebar-logo-color)"
stroke="var(--titlebar-logo-color)"
stroke-width="1"
/>
</svg>
{window.native.getConfig().build === "dev" && <Wrench />}
</span>
<div class="actions">
<div onClick={window.native.min}>

4
src/pages/RevoltApp.tsx
View file

@ -10,7 +10,7 @@ import Notifications from "../context/revoltjs/Notifications";
import StateMonitor from "../context/revoltjs/StateMonitor";
import SyncManager from "../context/revoltjs/SyncManager";
import { TITLEBAR_HEIGHT, USE_TITLEBAR } from "../components/native/Titlebar";
import { USE_TITLEBAR } from "../components/native/Titlebar";
import BottomNavigation from "../components/navigation/BottomNavigation";
import LeftSidebar from "../components/navigation/LeftSidebar";
import RightSidebar from "../components/navigation/RightSidebar";
@ -48,7 +48,7 @@ export default function App() {
width="100vw"
height={
USE_TITLEBAR
? `calc(var(--app-height) - ${TITLEBAR_HEIGHT})`
? "calc(var(--app-height) - var(--titlebar-height))"
: "var(--app-height)"
}
leftPanel={

22
src/styles/_variables.scss
View file

@ -7,13 +7,20 @@
--font: "Open Sans";
--codeblock-font: "Fira Code";
--sidebar-active: var(--secondary-background);
/**
* Native
*/
--titlebar-height: 29px;
--titlebar-action-padding: 8px;
--titlebar-logo-color: var(--secondary-foreground);
/**
* Layout
*/
--app-height: 100vh;
--border-radius: 6px;
--input-border-width: 2px;
--textarea-padding: 16px;
--textarea-line-height: 20px;
@ -29,6 +36,13 @@
/**
* Experimental
*/
--background-rgb: (25,25,25); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
--background-rgba: rgba(var(--background-rgb), .8); //make the opacity also customizable
--background-rgb: (
25,
25,
25
); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
--background-rgba: rgba(
var(--background-rgb),
0.8
); //make the opacity also customizable
}