fix(desktop): don't use custom titlebar

when tauri 2.0 stable is released, we can use the custom titlebar close #279
drl990114 · Sep 8, 2023 · 77067f7 · 77067f7
1 parent 36e2f06
commit 77067f7
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 28 deletions.
diff --git a/apps/desktop/src-tauri/src/app/conf.rs b/apps/desktop/src-tauri/src/app/conf.rs
@@ -182,12 +182,12 @@ pub mod cmd {
                     .inner_size(1000.0, 600.0)
                     .min_inner_size(500.0, 500.0);
 
-            #[cfg(target_os = "macos")]
-            {
-                conf_win = conf_win
-                    .title_bar_style(TitleBarStyle::Overlay)
-                    .hidden_title(true);
-            }
+            // #[cfg(target_os = "macos")]
+            // {
+            //     conf_win = conf_win
+            //         .title_bar_style(TitleBarStyle::Overlay)
+            //         .hidden_title(true);
+            // }
 
             conf_win.build().unwrap();
         });

diff --git a/apps/desktop/src-tauri/src/setup.rs b/apps/desktop/src-tauri/src/setup.rs
@@ -17,12 +17,12 @@ pub fn init(app: &mut App) -> Result<(), Box<dyn std::error::Error>> {
             .inner_size(1200.0, 800.0)
             .min_inner_size(400.0, 400.0);
 
-        #[cfg(target_os = "macos")]
-        {
-            main_win = main_win
-                .title_bar_style(TitleBarStyle::Overlay)
-                .hidden_title(true);
-        }
+        // #[cfg(target_os = "macos")]
+        // {
+        //     main_win = main_win
+        //         .title_bar_style(TitleBarStyle::Overlay)
+        //         .hidden_title(true);
+        // }
 
         main_win.build().unwrap();
     });

diff --git a/apps/desktop/src/components/TitleBar/styled.ts b/apps/desktop/src/components/TitleBar/styled.ts
@@ -1,6 +1,7 @@
-import { TITLEBAR_HEIGHT } from '@/constants/styled'
 import styled from 'styled-components'
 
+const TITLEBAR_HEIGHT = '32px'
+
 export const TitleBarBg = styled.div`
   height: ${TITLEBAR_HEIGHT};
   background: ${(props) => props.theme.bgColor};

diff --git a/apps/desktop/src/constants/styled.ts b/apps/desktop/src/constants/styled.ts
diff --git a/apps/desktop/src/layout/PageLayout.tsx b/apps/desktop/src/layout/PageLayout.tsx
@@ -0,0 +1,9 @@
+import styled from "styled-components"
+
+export const PageLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+`
diff --git a/apps/desktop/src/router/Root/index.tsx b/apps/desktop/src/router/Root/index.tsx
@@ -3,11 +3,12 @@ import { Container } from './styles'
 import { AppInfoDialog, SideBar } from '@/components'
 import EditorArea from '@/components/EditorArea'
 import { useEditorStore } from '@/stores'
-import TitleBar, { setTitleBarText } from '@/components/TitleBar'
+import { setTitleBarText } from '@/components/TitleBar'
 import TableDialog from '@/editorToolBar/TableDialog'
 import { useCommandInit } from '@/hooks/useCommandInit'
 import { BookMarkDialog } from '@/bookmarks/BookMarkDialog'
 import useBookMarksStore from '@/bookmarks/useBookMarksStore'
+import { PageLayout } from '@/layout/PageLayout'
 
 function Root() {
   const { activeId } = useEditorStore()
@@ -24,16 +25,17 @@ function Root() {
   }, [activeId])
 
   return (
-    <>
-      <TitleBar />
+    <PageLayout>
+      {/* TODO customer titlebar, when tauri 2.0 stable. */}
+      {/* <TitleBar /> */}
       <Container>
         <SideBar />
         <EditorArea />
         <AppInfoDialog />
         <TableDialog />
         <BookMarkDialog />
       </Container>
-    </>
+    </PageLayout>
   )
 }
 

diff --git a/apps/desktop/src/router/Root/styles.ts b/apps/desktop/src/router/Root/styles.ts
@@ -1,8 +1,7 @@
-import { TITLEBAR_HEIGHT } from '@/constants/styled'
 import styled from 'styled-components'
 
 export const Container = styled.div`
-  height: calc(100vh - ${TITLEBAR_HEIGHT});
   display: flex;
-  overflow: hidden;
+  flex: 1;
+  height: 100vh;
 `
diff --git a/apps/desktop/src/router/Setting/index.tsx b/apps/desktop/src/router/Setting/index.tsx
@@ -6,9 +6,9 @@ import { Container } from './styles'
 import settingMap from '@/router/Setting/settingMap'
 import Logo from '@/assets/logo.svg'
 import { invoke } from '@tauri-apps/api'
-import TitleBar from '@/components/TitleBar'
 import { KeyboardTable } from './KeyboardTable'
 import { CopyButton } from '@/components/UI/Button'
+import { PageLayout } from '@/layout/PageLayout'
 
 export interface DialogTitleProps {
   children?: ReactNode
@@ -54,8 +54,8 @@ function Setting() {
   }
 
   return (
-    <>
-      <TitleBar transparent />
+    <PageLayout>
+      {/* <TitleBar transparent /> */}
       <Container>
         <div id="sidebar">
           <div className="title">
@@ -93,7 +93,7 @@ function Setting() {
           {renderCurrentSettingData()}
         </div>
       </Container>
-    </>
+    </PageLayout>
   )
 }
 

diff --git a/apps/desktop/src/router/Setting/styles.ts b/apps/desktop/src/router/Setting/styles.ts
@@ -1,10 +1,9 @@
-import { TITLEBAR_HEIGHT } from '@/constants/styled'
 import styled from 'styled-components'
 
 export const Container = styled.div`
   display: flex;
-  height: calc(100vh - ${TITLEBAR_HEIGHT});
-  margin-top: ${TITLEBAR_HEIGHT};
+  flex: 1;
+  height: 100vh;
 
   #sidebar {
     width: 250px;