🔧 Twaek headerbar layout

kando-menu · Jan 21, 2025 · 03f0379 · 03f0379
1 parent 2ee7444
commit 03f0379
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 16 deletions.
diff --git a/src/settings-renderer/components/App.tsx b/src/settings-renderer/components/App.tsx
@@ -93,21 +93,23 @@ export default () => {
 
   const leftHeaderbar = (
     <Headerbar
-      left={<img src={logo} width={20} style={{ verticalAlign: 'middle' }} />}
-      center={i18next.t('settings.title')}
-      right={headerButtons}
+      left={!cIsMac && <img src={logo} width={20} style={{ verticalAlign: 'middle' }} />}
+      right={!cIsMac && headerButtons}
       paddingLeft={10}
       paddingRight={5}
     />
   );
-  const rightHeaderbar = <Headerbar />;
+  const centerHeaderbar = <Headerbar center={i18next.t('settings.title')} transparent />;
+  const rightHeaderbar = <Headerbar
+    right={cIsMac && headerButtons}
+  />;
 
   return (
     <>
       <div className={`${classes.container} ${transparent ? classes.transparent : ''}`}>
         <Tooltip id="main-tooltip" delayShow={200} />
         <Sidebar position="left" header={leftHeaderbar} content={<MenuList />} />
-        <Preview />
+        <Preview header={centerHeaderbar} />
         <Sidebar position="right" header={rightHeaderbar} content={<Properties />} />
         <GeneralSettingsDialog
           visible={settingsVisible}

diff --git a/src/settings-renderer/components/Headerbar.module.scss b/src/settings-renderer/components/Headerbar.module.scss
@@ -11,17 +11,18 @@
 @import '../variable.scss';
 
 .headerbar {
-  background-color: $background-header;
   color: $text-primary;
   min-height: env(titlebar-area-height, 30);
   -webkit-app-region: drag;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 5px;
-}
-
-.headerbar > :nth-child(2) {
-  flex-grow: 1;
+  white-space: nowrap;
+
+  &:not(.transparent) {
+    background-color: $background-header;
+  }
 }
 
 .noDrag {

diff --git a/src/settings-renderer/components/Headerbar.tsx b/src/settings-renderer/components/Headerbar.tsx
@@ -18,11 +18,12 @@ interface IProps {
   right?: string | ReactNode;
   paddingLeft?: number;
   paddingRight?: number;
+  transparent?: boolean;
 }
 
 export default (props: IProps) => {
   return (
-    <div className={classes.headerbar}>
+    <div className={classes.headerbar + (props.transparent ? ' ' + classes.transparent : '')}>
       <div
         className={typeof props.left === 'string' ? '' : classes.noDrag}
         style={{ paddingLeft: props.paddingLeft || 0 }}>

diff --git a/src/settings-renderer/components/Modal.module.scss b/src/settings-renderer/components/Modal.module.scss
@@ -23,7 +23,6 @@
   justify-content: center;
   align-items: center;
 
-  backdrop-filter: blur(5px);
 
   transition: opacity 300ms;
   opacity: 0;
@@ -41,6 +40,8 @@
   border-radius: 10px;
   overflow: hidden;
 
+  box-shadow: 0 0 75px rgba(0, 0, 0, 0.4);
+
   max-height: 80vh;
   width: min(90vw, min(calc(200px + 50vw), 800px));
 

diff --git a/src/settings-renderer/components/Preview.module.scss b/src/settings-renderer/components/Preview.module.scss
@@ -9,6 +9,5 @@
 // SPDX-License-Identifier: MIT
 
 .preview {
-  -webkit-app-region: drag;
   flex-grow: 1;
 }
diff --git a/src/settings-renderer/components/Preview.tsx b/src/settings-renderer/components/Preview.tsx
@@ -8,10 +8,16 @@
 // SPDX-FileCopyrightText: Simon Schneegans <[email protected]>
 // SPDX-License-Identifier: MIT
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 
 import * as classes from './Preview.module.scss';
 
-export default () => {
-  return <div className={classes.preview}></div>;
+interface IProps {
+  header: ReactNode;
+}
+
+export default (props: IProps) => {
+  return <div className={classes.preview}>
+    {props.header}
+  </div>;
 };