revite/src/components/native/Titlebar.tsx

93 lines
3.3 KiB
TypeScript
Raw Normal View History

import { X, Minus, Square } from "@styled-icons/boxicons-regular";
2021-08-01 12:17:22 -04:00
import { Wrench } from "@styled-icons/boxicons-solid";
2021-08-01 09:22:08 -04:00
import styled from "styled-components";
import Tooltip from "../common/Tooltip";
import UpdateIndicator from "../common/UpdateIndicator";
2021-08-01 09:22:08 -04:00
const TitlebarBase = styled.div`
2021-08-01 11:44:51 -04:00
height: var(--titlebar-height);
2021-08-01 09:22:08 -04:00
display: flex;
2021-08-01 12:35:10 -04:00
gap: 6px;
2021-08-01 09:22:08 -04:00
user-select: none;
align-items: center;
.title {
flex-grow: 1;
-webkit-app-region: drag;
2021-08-01 12:17:22 -04:00
height: var(--titlebar-height);
2021-08-01 09:22:08 -04:00
font-size: 16px;
font-weight: 600;
2021-08-01 12:17:22 -04:00
margin-inline-start: 10px;
margin-top: 4px;
2021-08-01 11:44:51 -04:00
gap: 8px;
display: flex;
align-items: center;
justify-content: flex-start;
2021-08-01 09:22:08 -04:00
2021-08-01 11:44:51 -04:00
svg {
2021-08-01 12:17:22 -04:00
height: calc(var(--titlebar-height) / 3);
margin-bottom: 4px;
2021-08-01 09:22:08 -04:00
}
}
.actions {
z-index: 100;
display: flex;
align-items: center;
div {
2021-08-01 11:44:51 -04:00
width: calc(
var(--titlebar-height) + var(--titlebar-action-padding)
);
height: var(--titlebar-height);
2021-08-01 09:22:08 -04:00
display: grid;
place-items: center;
transition: 0.2s ease color;
2021-08-01 09:22:08 -04:00
transition: 0.2s ease background-color;
&:hover {
background: var(--primary-background);
}
&.error:hover {
background: var(--error);
}
}
}
`;
export function Titlebar() {
return (
<TitlebarBase>
2021-08-01 12:17:22 -04:00
<div class="title">
2021-08-01 11:44:51 -04:00
<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 />}
2021-08-01 12:17:22 -04:00
</div>
<UpdateIndicator style="titlebar" />
2021-08-01 09:22:08 -04:00
<div class="actions">
<div onClick={window.native.min}>
<Minus size={20} />
</div>
<div onClick={window.native.max}>
<Square size={14} />
</div>
<div onClick={window.native.close} class="error">
2021-08-01 12:17:22 -04:00
<X size={24} />
2021-08-01 09:22:08 -04:00
</div>
</div>
</TitlebarBase>
);
}