Add theme support

Wox-launcher · Nov 8, 2023 · 25e87fe · 25e87fe
1 parent a1e9db3
commit 25e87fe
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 71 deletions.
diff --git a/Wox.UI.Tauri/src-tauri/src/main.rs b/Wox.UI.Tauri/src-tauri/src/main.rs
@@ -87,7 +87,7 @@ fn main() {
     {
         use tauri_nspanel::cocoa::appkit::{NSMainMenuWindowLevel, NSWindowCollectionBehavior};
         use tauri_nspanel::WindowExt;
-        use window_vibrancy::{apply_blur, apply_vibrancy, NSVisualEffectMaterial};
+        use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
 
         tauri::Builder::default()
             .plugin(tauri_nspanel::init())

diff --git a/Wox.UI.Tauri/src-tauri/tauri.conf.json b/Wox.UI.Tauri/src-tauri/tauri.conf.json
@@ -50,7 +50,7 @@
         "acceptFirstMouse": true,
         "title": "Wox",
         "width": 800,
-        "height": 61,
+        "height": 60,
         "maxHeight": 560,
         "visible": false
       }

diff --git a/Wox.UI.Tauri/src/WoxQueryEntrance.tsx b/Wox.UI.Tauri/src/WoxQueryEntrance.tsx
@@ -1,24 +1,27 @@
 import ReactDOM from "react-dom/client"
 import "./assets/index.css"
-import { WoxMessageHelper } from "./utils/WoxMessageHelper.ts"
 import React from "react"
 import WoxLauncher from "./components/WoxLauncher.tsx"
 import { WoxThemeHelper } from "./utils/WoxThemeHelper.ts"
-import store from "store2"
 import { WoxTauriHelper } from "./utils/WoxTauriHelper.ts"
+import { WoxMessageHelper } from "./utils/WoxMessageHelper.ts"
+import { appWindow } from "@tauri-apps/api/window"
+import { TauriEvent } from "@tauri-apps/api/event"
 
-WoxTauriHelper.getInstance().invoke("get_server_port").then((serverPort) => {
-  store.set("serverPort", serverPort as string)
-  WoxMessageHelper.getInstance().initialize(serverPort as string)
-}).catch(_ => {
-  store.set("serverPort", "34987")
-  WoxMessageHelper.getInstance().initialize("34987")
-})
+const serverPort = await WoxTauriHelper.getInstance().getServerPort()
+WoxMessageHelper.getInstance().initialize(serverPort)
 
-WoxThemeHelper.getInstance().loadTheme()
+await WoxThemeHelper.getInstance().loadTheme()
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <WoxLauncher />
-  </React.StrictMode>
-)
+appWindow.listen(TauriEvent.WINDOW_BLUR, () => {
+  //TODO: respect config
+  WoxTauriHelper.getInstance().hideWindow()
+})
+
+WoxThemeHelper.getInstance().loadTheme().then(() => {
+  ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+      <WoxLauncher />
+    </React.StrictMode>
+  )
+})
diff --git a/Wox.UI.Tauri/src/components/WoxLauncher.tsx b/Wox.UI.Tauri/src/components/WoxLauncher.tsx
@@ -11,6 +11,7 @@ import { WoxLogHelper } from "../utils/WoxLogHelper.ts"
 import { WoxTauriHelper } from "../utils/WoxTauriHelper.ts"
 import Mousetrap from "mousetrap"
 import { WoxThemeHelper } from "../utils/WoxThemeHelper.ts"
+import { Theme } from "../entity/Theme.typings"
 
 export default () => {
   const woxQueryBoxRef = React.useRef<WoxQueryBoxRefHandler>(null)
@@ -205,7 +206,7 @@ export default () => {
     }
   }, [])
 
-  return <Style className={"wox-launcher"}>
+  return <Style theme={WoxThemeHelper.getInstance().getTheme()} className={"wox-launcher"}>
     <WoxQueryBox ref={woxQueryBoxRef} onQueryChange={onQueryChange} onFocus={() => {
       woxQueryResultRef.current?.hideActionList()
     }} />
@@ -218,17 +219,9 @@ export default () => {
   </Style>
 }
 
-const Style = styled.div`
+const Style = styled.div<{ theme: Theme }>`
+  background-color: ${props => props.theme.AppBackgroundColor};
   overflow: hidden;
   display: flex;
   flex-direction: column;
-
-  .wox-result-border {
-    border-top: 1px solid #dedede !important;
-  }
-
-  //
-  // body, html {
-    //   background-color: ${WoxThemeHelper.getInstance().getTheme().BackgroundColor};
-  // }
 `
diff --git a/Wox.UI.Tauri/src/components/WoxQueryBox.tsx b/Wox.UI.Tauri/src/components/WoxQueryBox.tsx
@@ -2,6 +2,8 @@ import React, { useImperativeHandle } from "react"
 import styled from "styled-components"
 import { WoxTauriHelper } from "../utils/WoxTauriHelper.ts"
 import { getTheme } from "../api/WoxAPI.ts"
+import { Theme } from "../entity/Theme.typings"
+import { WoxThemeHelper } from "../utils/WoxThemeHelper.ts"
 
 export type WoxQueryBoxRefHandler = {
   changeQuery: (query: string) => void
@@ -37,7 +39,7 @@ export default React.forwardRef((_props: WoxQueryBoxProps, ref: React.Ref<WoxQue
     }
   }))
 
-  return <Style className="wox-query-box">
+  return <Style theme={WoxThemeHelper.getInstance().getTheme()} className="wox-query-box">
     <input ref={queryBoxRef}
            title={"Query Wox"}
            className={"mousetrap"}
@@ -67,11 +69,10 @@ export default React.forwardRef((_props: WoxQueryBoxProps, ref: React.Ref<WoxQue
   </Style>
 })
 
-const Style = styled.div`
+const Style = styled.div<{ theme: Theme }>`
   position: relative;
   width: ${WoxTauriHelper.getInstance().getWoxWindowWidth()}px;
   overflow: hidden;
-  border: ${WoxTauriHelper.getInstance().isTauri() ? "0px" : "1px"} solid #dedede;
 
   input {
     height: 60px;
@@ -83,7 +84,7 @@ const Style = styled.div`
     border: 0;
     background-color: transparent;
     cursor: auto;
-    color: black;
+    color:  ${props => props.theme.QueryBoxFontColor};
     display: inline-block;
     box-sizing: border-box;
   }

diff --git a/Wox.UI.Tauri/src/components/WoxQueryResult.tsx b/Wox.UI.Tauri/src/components/WoxQueryResult.tsx
@@ -10,6 +10,7 @@ import Markdown from "react-markdown"
 import { Scrollbars } from "react-custom-scrollbars"
 import { pinyin } from "pinyin-pro"
 import WoxImage from "./WoxImage.tsx"
+import { Theme } from "../entity/Theme.typings"
 import { WoxThemeHelper } from "../utils/WoxThemeHelper.ts"
 
 export type WoxQueryResultRefHandler = {
@@ -223,32 +224,34 @@ export default React.forwardRef((_props: WoxQueryResultProps, ref: React.Ref<Wox
     }
   }))
 
-  return <Style className={resultList.length > 0 ? "wox-results wox-result-border" : "wox-results"}>
+  return <Style theme={WoxThemeHelper.getInstance().getTheme()}>
     <Scrollbars
       style={{ width: hasPreview ? 400 : 800 }}
       ref={currentULRef}
       autoHeight
       autoHeightMin={0}
       autoHeightMax={500}>
-      <ul id={"wox-result-list"} key={"wox-result-list"}>
-        {resultList.map((result, index) => {
-          return <li id={`wox-result-li-${index}`} key={`wox-result-li-${index}`} className={activeIndex === index ? "active" : "inactive"} onMouseOverCapture={() => {
-            currentMouseOverIndex.current += 1
-            if (result.Index !== undefined && currentActiveIndex.current !== result.Index && currentMouseOverIndex.current > 1) {
-              currentActiveIndex.current = index
-              setActiveIndex(index)
-            }
-          }} onClick={(event) => {
-            handleAction()
-            event.preventDefault()
-            event.stopPropagation()
-          }}>
-            <WoxImage img={result.Icon} height={36} width={36} />
-            <h2 className={"wox-result-title"}>{result.Title}</h2>
-            {result.SubTitle && <h3 className={"wox-result-subtitle"}>{result.SubTitle}</h3>}
-          </li>
-        })}
-      </ul>
+      <div className={"wox-result-container"}>
+        <ul id={"wox-result-list"} key={"wox-result-list"}>
+          {resultList.map((result, index) => {
+            return <li id={`wox-result-li-${index}`} key={`wox-result-li-${index}`} className={activeIndex === index ? "active" : "inactive"} onMouseOverCapture={() => {
+              currentMouseOverIndex.current += 1
+              if (result.Index !== undefined && currentActiveIndex.current !== result.Index && currentMouseOverIndex.current > 1) {
+                currentActiveIndex.current = index
+                setActiveIndex(index)
+              }
+            }} onClick={(event) => {
+              handleAction()
+              event.preventDefault()
+              event.stopPropagation()
+            }}>
+              <WoxImage img={result.Icon} height={36} width={36} />
+              <h2 className={"wox-result-title"}>{result.Title}</h2>
+              {result.SubTitle && <h3 className={"wox-result-subtitle"}>{result.SubTitle}</h3>}
+            </li>
+          })}
+        </ul>
+      </div>
     </Scrollbars>
 
 
@@ -320,19 +323,20 @@ export default React.forwardRef((_props: WoxQueryResultProps, ref: React.Ref<Wox
   </Style>
 })
 
-const Style = styled.div`
+const Style = styled.div<{ theme: Theme }>`
   display: flex;
   flex-direction: row;
   width: 800px;
-  border-bottom: ${WoxTauriHelper.getInstance().isTauri() ? "0px" : "1px"} solid #dedede;
 
+  .wox-result-container {
+    padding: ${props => props.theme.ResultContainerPadding};
+  }
 
   ul {
     padding: 0;
     margin: 0;
     overflow: hidden;
     width: 50%;
-    border-right: ${WoxTauriHelper.getInstance().isTauri() ? "0px" : "1px"} solid #dedede;;
   }
 
   ul:last-child {
@@ -347,10 +351,10 @@ const Style = styled.div`
     display: block;
     height: 50px;
     line-height: 50px;
-    border-bottom: 1px solid #dedede;
     cursor: pointer;
     width: 100%;
     box-sizing: border-box;
+    border-radius: ${props => props.theme.ResultItemBorderRadius};
   }
 
   ul li:last-child {
@@ -369,13 +373,17 @@ const Style = styled.div`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-weight: 400;
-    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    line-height: 30px;
   }
 
   ul li h2 {
-    font-size: 20px;
-    line-height: 30px;
+    font-size: 18px;
+    font-weight: 550;
+  }
+  
+  ul li h3 {
+    font-size: 16px;
+    font-weight: normal;
   }
 
   ul li h2:last-child {
@@ -388,9 +396,9 @@ const Style = styled.div`
     line-height: 15px;
   }
 
-  // ul li.active {
-    //   background-color: ${WoxThemeHelper.getInstance().getTheme().ResultActiveBackgroundColor};
-  // }
+  ul li.active {
+      background-color: ${props => props.theme.ResultItemActiveBackgroundColor};
+  }
 
   .wox-query-result-preview {
     position: relative;
@@ -465,7 +473,6 @@ const Style = styled.div`
     bottom: 10px;
     right: 10px;
     background-color: #e8e8e6;
-    border: 1px solid #dedede;
     min-width: 300px;
     padding: 5px 10px;
     z-index: 9999;

diff --git a/Wox.UI.Tauri/src/entity/Theme.typings.d.ts b/Wox.UI.Tauri/src/entity/Theme.typings.d.ts
@@ -1,4 +1,7 @@
 export interface Theme {
-  BackgroundColor: string
-  ResultActiveBackgroundColor: string
+  AppBackgroundColor: string
+  ResultContainerPadding: string
+  ResultItemBorderRadius: string
+  ResultItemActiveBackgroundColor: string
+  QueryBoxFontColor: string
 }
diff --git a/Wox.UI.Tauri/src/utils/WoxTauriHelper.ts b/Wox.UI.Tauri/src/utils/WoxTauriHelper.ts
@@ -26,6 +26,15 @@ export class WoxTauriHelper {
     return WoxTauriHelper.WINDOW_WIDTH
   }
 
+  public async getServerPort(): Promise<string> {
+    try {
+      const port = await WoxTauriHelper.getInstance().invoke("get_server_port")
+      return port as string
+    } catch {
+      return "34987"
+    }
+  }
+
   public isTauri() {
     return window.__TAURI__ !== undefined
   }

diff --git a/Wox.UI.Tauri/src/utils/WoxThemeHelper.ts b/Wox.UI.Tauri/src/utils/WoxThemeHelper.ts
@@ -1,4 +1,6 @@
 import { Theme } from "../entity/Theme.typings"
+import { getTheme } from "../api/WoxAPI.ts"
+import { WoxLogHelper } from "./WoxLogHelper.ts"
 
 export class WoxThemeHelper {
   private static instance: WoxThemeHelper
@@ -14,11 +16,13 @@ export class WoxThemeHelper {
   private constructor() {
   }
 
-  public loadTheme() {
-
+  public async loadTheme() {
+    const theme = await getTheme()
+    WoxLogHelper.getInstance().log(`Theme: ${JSON.stringify(theme)}`)
+    WoxThemeHelper.currentTheme = theme.data
   }
 
   public getTheme() {
-    return WoxThemeHelper.currentTheme
+    return WoxThemeHelper.currentTheme || {} as Theme
   }
 }
diff --git a/Wox/resource/ui/themes/default.json b/Wox/resource/ui/themes/default.json
@@ -1,4 +1,7 @@
 {
-  "BackgroundColor": "rgba(56, 69, 71, 0.7)",
-  "ResultActiveBackgroundColor": "rgba(57, 83, 88, 0.7)"
+  "AppBackgroundColor": "rgba(66, 70, 73, 0.8)",
+  "ResultContainerPadding": "0",
+  "ResultItemBorderRadius": "0",
+  "ResultItemActiveBackgroundColor": "rgba(50, 53, 54, 0.6)",
+  "QueryBoxFontColor": "#e4e7e7"
 }