Merge pull request #344 from pascalbreuninger/main

feat(ui): implement simple zoom control
loft-sh · May 24, 2023 · 933dbfb · 933dbfb
2 parents 9f4b4da + 164f476
commit 933dbfb
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 171 deletions.
diff --git a/desktop/src-tauri/Cargo.lock b/desktop/src-tauri/Cargo.lock
diff --git a/desktop/src-tauri/Cargo.toml b/desktop/src-tauri/Cargo.toml
@@ -14,7 +14,7 @@ tauri-build = { version = "1.2", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 # Tauri
-tauri = { version = "1.2.4", features = ["clipboard-write-text", "dialog-open", "fs-all", "macos-private-api", "os-all", "path-all", "process-command-api", "process-exit", "shell-all", "system-tray", "updater", "window-set-focus", "window-start-dragging"] }
+tauri = { version = "1.2.4", features = ["clipboard-write-text", "dialog-open", "fs-all", "macos-private-api", "os-all", "path-all", "process-command-api", "process-exit", "shell-all", "system-tray", "window-set-focus", "window-start-dragging"] }
 tauri-plugin-deep-link = { version = "0.1.0" }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 # Logging

diff --git a/desktop/src/Theme/ThemeProvider.tsx b/desktop/src/Theme/ThemeProvider.tsx
@@ -1,9 +1,45 @@
-import { ChakraProvider, ColorModeScript, ToastProviderProps } from "@chakra-ui/react"
-import { ReactNode } from "react"
-import { theme } from "./theme"
+import {
+  ChakraProvider,
+  ColorModeScript,
+  Theme,
+  ToastProviderProps,
+  extendTheme,
+} from "@chakra-ui/react"
+import { ReactNode, useEffect, useState } from "react"
+import { TSettings, useSettings } from "../contexts"
+import { theme as initialTheme } from "./theme"
 const toastOptions: ToastProviderProps = { defaultOptions: { variant: "subtle" } }
 
+const fontSize: Record<TSettings["zoom"], string> = {
+  sm: "12px",
+  md: "14px",
+  lg: "16px",
+  xl: "18px",
+}
+
 export function ThemeProvider({ children }: Readonly<{ children?: ReactNode }>) {
+  const settings = useSettings()
+  const [theme, setTheme] = useState<Theme>(initialTheme)
+
+  useEffect(() => {
+    setTheme(
+      (current) =>
+        extendTheme(
+          {
+            styles: {
+              global: {
+                html: {
+                  fontSize: fontSize[settings.zoom],
+                },
+              },
+            },
+          },
+          current
+        ) as Theme
+    )
+    console.log(settings.zoom)
+  }, [settings])
+
   return (
     <>
       <ColorModeScript initialColorMode={theme.config.initialColorMode} />

diff --git a/desktop/src/components/Layout/StatusBar.tsx b/desktop/src/components/Layout/StatusBar.tsx
@@ -1,4 +1,4 @@
-import { StarIcon } from "@chakra-ui/icons"
+import { CheckIcon, StarIcon } from "@chakra-ui/icons"
 import {
   BoxProps,
   Checkbox,
@@ -12,23 +12,62 @@ import {
   Text,
   Tooltip,
 } from "@chakra-ui/react"
+import { useMemo } from "react"
 import { FaBug } from "react-icons/fa"
-import { HiDocumentMagnifyingGlass } from "react-icons/hi2"
+import { HiDocumentMagnifyingGlass, HiMagnifyingGlassPlus } from "react-icons/hi2"
 import { version } from "../../../package.json"
 import { client } from "../../client"
+import { useChangeSettings } from "../../contexts"
 import { Debug, useArch, useDebug, usePlatform } from "../../lib"
 
 export function StatusBar(boxProps: BoxProps) {
   const arch = useArch()
   const platform = usePlatform()
   const debug = useDebug()
+  const { settings, set } = useChangeSettings()
+
+  const zoomIcon = useMemo(() => {
+    return { icon: <CheckIcon /> }
+  }, [])
 
   return (
     <HStack justify="space-between" paddingX="6" fontSize="sm" zIndex="overlay" {...boxProps}>
       <Text>
         Version {version} | {platform ?? "unknown platform"} | {arch ?? "unknown arch"}
       </Text>
       <HStack>
+        <Menu>
+          <MenuButton
+            as={IconButton}
+            variant="ghost"
+            aria-label="zoom"
+            rounded="full"
+            icon={<Icon boxSize="5" color="gray.700" as={HiMagnifyingGlassPlus} />}
+          />
+          <MenuList>
+            <MenuItem
+              onClick={() => set("zoom", "sm")}
+              {...(settings.zoom === "sm" ? zoomIcon : {})}>
+              Small
+            </MenuItem>
+            <MenuItem
+              onClick={() => set("zoom", "md")}
+              {...(settings.zoom === "md" ? zoomIcon : {})}>
+              Regular
+            </MenuItem>
+            <MenuItem
+              onClick={() => set("zoom", "lg")}
+              {...(settings.zoom === "lg" ? zoomIcon : {})}>
+              Large
+            </MenuItem>
+            <MenuItem
+              onClick={() => set("zoom", "xl")}
+              {...(settings.zoom === "xl" ? zoomIcon : {})}>
+              Extra Large
+            </MenuItem>
+          </MenuList>
+        </Menu>
+
         <Tooltip label="Loving DevPod? Give us a star on Github">
           <IconButton
             variant="ghost"
@@ -38,6 +77,7 @@ export function StatusBar(boxProps: BoxProps) {
             onClick={() => client.openLink("https://github.com/loft-sh/devpod")}
           />
         </Tooltip>
+
         <Tooltip label="How to DevPod - Docs">
           <IconButton
             variant="ghost"
@@ -47,6 +87,7 @@ export function StatusBar(boxProps: BoxProps) {
             onClick={() => client.openLink("https://devpod.sh/docs")}
           />
         </Tooltip>
+
         <Tooltip label="Report an Issue">
           <IconButton
             variant="ghost"
@@ -56,6 +97,7 @@ export function StatusBar(boxProps: BoxProps) {
             onClick={() => client.openLink("https://github.com/loft-sh/devpod/issues/new/choose")}
           />
         </Tooltip>
+
         {debug.isEnabled && (
           <Menu>
             <MenuButton>Debug</MenuButton>