From 164f4762eb82a4b26ff6d6b0527ac96661da824e Mon Sep 17 00:00:00 2001 From: Pascal Breuninger Date: Wed, 24 May 2023 16:23:56 +0200 Subject: [PATCH] feat(ui): implement simple zoom control --- desktop/src-tauri/Cargo.lock | 150 -------------------- desktop/src-tauri/Cargo.toml | 2 +- desktop/src/Theme/ThemeProvider.tsx | 42 +++++- desktop/src/components/Layout/StatusBar.tsx | 46 +++++- desktop/src/contexts/SettingsContext.tsx | 2 + desktop/src/main.tsx | 22 +-- desktop/src/views/Settings/Settings.tsx | 25 +++- 7 files changed, 118 insertions(+), 171 deletions(-) diff --git a/desktop/src-tauri/Cargo.lock b/desktop/src-tauri/Cargo.lock index 6ca701e3a..7f7eaf3aa 100644 --- a/desktop/src-tauri/Cargo.lock +++ b/desktop/src-tauri/Cargo.lock @@ -77,22 +77,6 @@ dependencies = [ "system-deps 6.0.4", ] -[[package]] -name = "attohttpc" -version = "0.22.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1fcf00bc6d5abb29b5f97e3c61a90b6d3caa12f3faf897d4a3e3607c050a35a7" -dependencies = [ - "flate2", - "http", - "log", - "native-tls", - "serde", - "serde_json", - "serde_urlencoded", - "url", -] - [[package]] name = "autocfg" version = "1.1.0" @@ -1623,12 +1607,6 @@ dependencies = [ "autocfg", ] -[[package]] -name = "minisign-verify" -version = "0.2.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "933dca44d65cdd53b355d0b73d380a2ff5da71f87f036053188bf1eab6a19881" - [[package]] name = "miniz_oxide" version = "0.6.2" @@ -1648,24 +1626,6 @@ dependencies = [ "simd-adler32", ] -[[package]] -name = "native-tls" -version = "0.2.11" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "07226173c32f2926027b63cce4bcd8076c3552846cbe7925f3aaffeac0a3b92e" -dependencies = [ - "lazy_static", - "libc", - "log", - "openssl", - "openssl-probe", - "openssl-sys", - "schannel", - "security-framework", - "security-framework-sys", - "tempfile", -] - [[package]] name = "ndk" version = "0.6.0" @@ -1863,50 +1823,6 @@ dependencies = [ "windows-sys 0.42.0", ] -[[package]] -name = "openssl" -version = "0.10.52" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "01b8574602df80f7b85fdfc5392fa884a4e3b3f4f35402c070ab34c3d3f78d56" -dependencies = [ - "bitflags", - "cfg-if", - "foreign-types", - "libc", - "once_cell", - "openssl-macros", - "openssl-sys", -] - -[[package]] -name = "openssl-macros" -version = "0.1.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c" -dependencies = [ - "proc-macro2", - "quote", - "syn 2.0.15", -] - -[[package]] -name = "openssl-probe" -version = "0.1.5" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf" - -[[package]] -name = "openssl-sys" -version = "0.9.87" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8e17f59264b2809d77ae94f0e1ebabc434773f370d6ca667bd223ea10e06cc7e" -dependencies = [ - "cc", - "libc", - "pkg-config", - "vcpkg", -] - [[package]] name = "option-ext" version = "0.2.0" @@ -2444,15 +2360,6 @@ dependencies = [ "winapi-util", ] -[[package]] -name = "schannel" -version = "0.1.21" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "713cfb06c7059f3588fb8044c0fad1d09e3c01d225e25b9220dbfdcf16dbb1b3" -dependencies = [ - "windows-sys 0.42.0", -] - [[package]] name = "scoped-tls" version = "1.0.1" @@ -2471,29 +2378,6 @@ version = "1.0.5" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "1792db035ce95be60c3f8853017b3999209281c24e2ba5bc8e59bf97a0c590c1" -[[package]] -name = "security-framework" -version = "2.8.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a332be01508d814fed64bf28f798a146d73792121129962fdf335bb3c49a4254" -dependencies = [ - "bitflags", - "core-foundation", - "core-foundation-sys", - "libc", - "security-framework-sys", -] - -[[package]] -name = "security-framework-sys" -version = "2.8.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "31c9bb296072e961fcbd8853511dd39c2d8be2deb1e17c6860b1d30732b323b4" -dependencies = [ - "core-foundation-sys", - "libc", -] - [[package]] name = "selectors" version = "0.22.0" @@ -2585,18 +2469,6 @@ dependencies = [ "serde", ] -[[package]] -name = "serde_urlencoded" -version = "0.7.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd" -dependencies = [ - "form_urlencoded", - "itoa 1.0.6", - "ryu", - "serde", -] - [[package]] name = "serde_with" version = "1.14.0" @@ -2906,8 +2778,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "fe7e0f1d535e7cbbbab43c82be4fc992b84f9156c16c160955617e0260ebc449" dependencies = [ "anyhow", - "attohttpc", - "base64 0.13.1", "cocoa", "dirs-next", "embed_plist", @@ -2920,7 +2790,6 @@ dependencies = [ "heck 0.4.1", "http", "ignore", - "minisign-verify", "objc", "once_cell", "open", @@ -2945,14 +2814,12 @@ dependencies = [ "tauri-utils", "tempfile", "thiserror", - "time 0.3.20", "tokio", "url", "uuid 1.3.1", "webkit2gtk", "webview2-com", "windows 0.39.0", - "zip", ] [[package]] @@ -3480,12 +3347,6 @@ dependencies = [ "version_check", ] -[[package]] -name = "vcpkg" -version = "0.2.15" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426" - [[package]] name = "version-compare" version = "0.0.11" @@ -4136,14 +3997,3 @@ checksum = "6d1526bbe5aaeb5eb06885f4d987bcdfa5e23187055de9b83fe00156a821fabc" dependencies = [ "libc", ] - -[[package]] -name = "zip" -version = "0.6.4" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "0445d0fbc924bb93539b4316c11afb121ea39296f99a3c4c9edad09e3658cdef" -dependencies = [ - "byteorder", - "crc32fast", - "crossbeam-utils", -] diff --git a/desktop/src-tauri/Cargo.toml b/desktop/src-tauri/Cargo.toml index 2651caeaf..f3b3ea246 100644 --- 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 index 88d346968..ec57b7663 100644 --- 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 = { + sm: "12px", + md: "14px", + lg: "16px", + xl: "18px", +} + export function ThemeProvider({ children }: Readonly<{ children?: ReactNode }>) { + const settings = useSettings() + const [theme, setTheme] = useState(initialTheme) + + useEffect(() => { + setTheme( + (current) => + extendTheme( + { + styles: { + global: { + html: { + fontSize: fontSize[settings.zoom], + }, + }, + }, + }, + current + ) as Theme + ) + console.log(settings.zoom) + }, [settings]) + return ( <> diff --git a/desktop/src/components/Layout/StatusBar.tsx b/desktop/src/components/Layout/StatusBar.tsx index 6d9599ed4..9a44c79f2 100644 --- 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,16 +12,23 @@ 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: } + }, []) return ( @@ -29,6 +36,38 @@ export function StatusBar(boxProps: BoxProps) { Version {version} | {platform ?? "unknown platform"} | {arch ?? "unknown arch"} + + } + /> + + set("zoom", "sm")} + {...(settings.zoom === "sm" ? zoomIcon : {})}> + Small + + set("zoom", "md")} + {...(settings.zoom === "md" ? zoomIcon : {})}> + Regular + + set("zoom", "lg")} + {...(settings.zoom === "lg" ? zoomIcon : {})}> + Large + + set("zoom", "xl")} + {...(settings.zoom === "xl" ? zoomIcon : {})}> + Extra Large + + + + client.openLink("https://github.com/loft-sh/devpod")} /> + client.openLink("https://devpod.sh/docs")} /> + client.openLink("https://github.com/loft-sh/devpod/issues/new/choose")} /> + {debug.isEnabled && ( Debug diff --git a/desktop/src/contexts/SettingsContext.tsx b/desktop/src/contexts/SettingsContext.tsx index 5240e93ac..9d502950c 100644 --- a/desktop/src/contexts/SettingsContext.tsx +++ b/desktop/src/contexts/SettingsContext.tsx @@ -17,6 +17,7 @@ export type TSettings = { debugFlag: boolean partyParrot: boolean fixedIDE: boolean + zoom: "sm" | "md" | "lg" | "xl" } type TSetting = keyof TSettings @@ -32,6 +33,7 @@ const initialSettings: TSettings = { debugFlag: false, partyParrot: false, fixedIDE: false, + zoom: "md", } function getSettingKeys(): readonly TSetting[] { return getKeys(initialSettings) diff --git a/desktop/src/main.tsx b/desktop/src/main.tsx index 4a96c047a..b08edd6ce 100644 --- a/desktop/src/main.tsx +++ b/desktop/src/main.tsx @@ -38,20 +38,20 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - + + + - - {/* Will be disabled in production automatically */} - - - + {/* Will be disabled in production automatically */} + + + + ) } diff --git a/desktop/src/views/Settings/Settings.tsx b/desktop/src/views/Settings/Settings.tsx index 3bedc73ba..1347e5d4f 100644 --- a/desktop/src/views/Settings/Settings.tsx +++ b/desktop/src/views/Settings/Settings.tsx @@ -6,6 +6,7 @@ import { Heading, HeadingProps, HStack, + Icon, Radio, RadioGroup, Select, @@ -13,13 +14,14 @@ import { useColorModeValue, VStack, } from "@chakra-ui/react" +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" import { ReactNode } from "react" +import { HiMagnifyingGlassPlus } from "react-icons/hi2" import { client } from "../../client" import { ToolbarTitle, useInstallCLI } from "../../components" import { TSettings, useChangeSettings } from "../../contexts" -import { QueryKeys } from "../../queryKeys" -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" import { getIDEDisplayName } from "../../lib" +import { QueryKeys } from "../../queryKeys" import { TIDE } from "../../types" import { useWelcomeModal } from "../../useWelcomeModal" @@ -75,6 +77,21 @@ export function Settings() { Show the introduction to DevPod again + + + + + + + Adjust the zoom level + @@ -106,8 +123,8 @@ export function Settings() { ))} - Select the default IDE you're using for workspaces. This will be overridden whenever - you create a workspace with a different IDE + Select the default IDE you're using for workspaces. This will be overridden + whenever you create a workspace with a different IDE