fix: zoom level (#202)

UPDATE_LOG.md

@@ -6,6 +6,12 @@ Fix:
 
 - Program exception when `Awesome` data is empty (https://github.com/lencx/ChatGPT/issues/248)
 
+Feat:
+
+- New shortcut key to change zoom level (30% - 200%), `+` or `-` 10% each time, `0` will be reset to 100% (https://github.com/lencx/ChatGPT/issues/202)
+  - Windows: `Ctrl +`, `Ctrl -`, `Ctrl 0`
+  - MacOS: `Cmd +`, `Cmd -`, `Cmd 0`
+
 ## v0.10.0
 
 Fix:

src-tauri/src/app/menu.rs

@@ -175,6 +175,12 @@ pub fn init() -> Menu {
           .accelerator("CmdOrCtrl+Down"),
       )
       .add_native_item(MenuItem::Separator)
+      .add_item(
+        CustomMenuItem::new("zoom_0".to_string(), "Zoom to Actual Size").accelerator("CmdOrCtrl+0"),
+      )
+      .add_item(CustomMenuItem::new("zoom_out".to_string(), "Zoom Out").accelerator("CmdOrCtrl+-"))
+      .add_item(CustomMenuItem::new("zoom_in".to_string(), "Zoom In").accelerator("CmdOrCtrl+Plus"))
+      .add_native_item(MenuItem::Separator)
       .add_item(
         CustomMenuItem::new("reload".to_string(), "Refresh the Screen").accelerator("CmdOrCtrl+R"),
       ),
@@ -337,6 +343,9 @@ pub fn menu_handler(event: WindowMenuEvent<tauri::Wry>) {
     // Window
     "dalle2" => window::dalle2_window(&app, None, None, Some(false)),
     // View
+    "zoom_0" => win.eval("window.__zoom0 && window.__zoom0()").unwrap(),
+    "zoom_out" => win.eval("window.__zoomOut && window.__zoomOut()").unwrap(),
+    "zoom_in" => win.eval("window.__zoomIn && window.__zoomIn()").unwrap(),
     "reload" => win.eval("window.location.reload()").unwrap(),
     "go_back" => win.eval("window.history.go(-1)").unwrap(),
     "go_forward" => win.eval("window.history.go(1)").unwrap(),

src-tauri/src/scripts/core.js

@@ -45,8 +45,6 @@ async function init() {
     document.getElementsByTagName('html')[0].style['font-size'] = '70%';
   }
 
-  if (__TAURI_METADATA__.__currentWindow.label !== 'core') return;
-
   async function platform() {
     return invoke('platform', {
       __tauriModule: 'Os',
@@ -54,29 +52,31 @@ async function init() {
     });
   }
 
-  const _platform = await platform();
+  if (__TAURI_METADATA__.__currentWindow.label !== 'tray') {
-  const chatConf = await invoke('get_chat_conf') || {};
+    const _platform = await platform();
-  if (/darwin/.test(_platform) && !chatConf.titlebar) {
+    const chatConf = await invoke('get_chat_conf') || {};
-    const topStyleDom = document.createElement("style");
+    if (/darwin/.test(_platform) && !chatConf.titlebar) {
-    topStyleDom.innerHTML = `#chatgpt-app-window-top{position:fixed;top:0;z-index:999999999;width:100%;height:24px;background:transparent;cursor:grab;cursor:-webkit-grab;user-select:none;-webkit-user-select:none;}#chatgpt-app-window-top:active {cursor:grabbing;cursor:-webkit-grabbing;}`;
+      const topStyleDom = document.createElement("style");
-    document.head.appendChild(topStyleDom);
+      topStyleDom.innerHTML = `#chatgpt-app-window-top{position:fixed;top:0;z-index:999999999;width:100%;height:24px;background:transparent;cursor:grab;cursor:-webkit-grab;user-select:none;-webkit-user-select:none;}#chatgpt-app-window-top:active {cursor:grabbing;cursor:-webkit-grabbing;}`;
-    const topDom = document.createElement("div");
+      document.head.appendChild(topStyleDom);
-    topDom.id = "chatgpt-app-window-top";
+      const topDom = document.createElement("div");
-    document.body.appendChild(topDom);
+      topDom.id = "chatgpt-app-window-top";
+      document.body.appendChild(topDom);
 
-    if (window.location.host === 'chat.openai.com') {
+      if (window.location.host === 'chat.openai.com') {
-      const nav = document.body.querySelector('nav');
+        const nav = document.body.querySelector('nav');
-      if (nav) {
+        if (nav) {
-        const currentPaddingTop = parseInt(window.getComputedStyle(document.querySelector('nav'), null).getPropertyValue('padding-top').replace('px', ''), 10);
+          const currentPaddingTop = parseInt(window.getComputedStyle(document.querySelector('nav'), null).getPropertyValue('padding-top').replace('px', ''), 10);
-        const navStyleDom = document.createElement("style");
+          const navStyleDom = document.createElement("style");
-        navStyleDom.innerHTML = `nav{padding-top:${currentPaddingTop + topDom.clientHeight}px !important}`;
+          navStyleDom.innerHTML = `nav{padding-top:${currentPaddingTop + topDom.clientHeight}px !important}`;
-        document.head.appendChild(navStyleDom);
+          document.head.appendChild(navStyleDom);
+        }
       }
-    }
 
-    topDom.addEventListener("mousedown", () => invoke("drag_window"));
+      topDom.addEventListener("mousedown", () => invoke("drag_window"));
-    topDom.addEventListener("touchstart", () => invoke("drag_window"));
+      topDom.addEventListener("touchstart", () => invoke("drag_window"));
-    topDom.addEventListener("dblclick", () => invoke("fullscreen"));
+      topDom.addEventListener("dblclick", () => invoke("fullscreen"));
+    }
   }
 
   document.addEventListener("click", (e) => {
@@ -98,9 +98,76 @@ async function init() {
     }
   });
 
-  window.__sync_prompts = async function() {
+  if (window.location.host === 'chat.openai.com') {
-    await invoke('sync_prompts', { time: Date.now() });
+    window.__sync_prompts = async function() {
+      await invoke('sync_prompts', { time: Date.now() });
+    }
   }
+
+  coreZoom();
+}
+
+function coreZoom() {
+  const styleDom = document.createElement('style');
+  styleDom.innerHTML = `
+  #ZoomTopTip {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 20px;
+    background: #2a2a2a;
+    color: #fafafa;
+    padding: 20px 15px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    font-size: 16px;
+    font-weight: bold;
+    z-index: 999999;
+    box-shadow: 0 2px 2px 2px #d8d8d8;
+  }
+  .ZoomTopTipAni {
+    transition: opacity 200ms, display 200ms;
+    display: none;
+    opacity: 0;
+  }
+  `;
+  document.head.append(styleDom);
+  const zoomTipDom = document.createElement('div');
+  zoomTipDom.id = 'ZoomTopTip';
+  document.body.appendChild(zoomTipDom);
+  function zoom(callback) {
+    if (window.zoomSetTimeout) clearTimeout(window.zoomSetTimeout);
+    const htmlZoom = window.localStorage.getItem("htmlZoom") || "100%";
+    const html = document.getElementsByTagName("html")[0];
+    const zoom = callback(htmlZoom);
+    html.style.zoom = zoom;
+    window.localStorage.setItem("htmlZoom", zoom);
+    zoomTipDom.innerHTML = zoom;
+    zoomTipDom.style.display = 'block';
+    zoomTipDom.classList.remove('ZoomTopTipAni');
+    window.zoomSetTimeout = setTimeout(() => {
+      zoomTipDom.classList.add('ZoomTopTipAni');
+    }, 2500);
+  }
+  function zoomDefault() {
+    const htmlZoom = window.localStorage.getItem("htmlZoom");
+    if (htmlZoom) {
+      document.getElementsByTagName("html")[0].style.zoom = htmlZoom;
+    }
+  }
+  function zoomIn() {
+    zoom((htmlZoom) => `${Math.min(parseInt(htmlZoom) + 10, 200)}%`);
+  }
+  function zoomOut() {
+    zoom((htmlZoom) => `${Math.max(parseInt(htmlZoom) - 10, 30)}%`);
+  }
+  function zoom0() {
+    zoom(() => `100%`);
+  }
+  zoomDefault();
+  window.__zoomIn = zoomIn;
+  window.__zoomOut = zoomOut;
+  window.__zoom0 = zoom0;
 }
 
 if (