Fix style (#1232)

* fix style * fix document page * fix menu * fix title bar
2024-12-09 11:32:04 +08:00
parent 81e0d96654
commit 6f1d84370f
9 changed files with 61 additions and 62 deletions
--- a/enjoy/src/i18n/en.json
+++ b/enjoy/src/i18n/en.json
@@ -1,19 +1,4 @@
 {
-  "menu": {
-    "about": "About",
-    "toggleFullScreen": "Toggle Full Screen",
-    "hide": "Hide",
-    "unhide": "Unhide",
-    "quit": "Quit",
-    "undo": "Undo",
-    "redo": "Redo",
-    "cut": "Cut",
-    "copy": "Copy",
-    "paste": "Paste",
-    "selectAll": "Select All",
-    "checkForUpdates": "Check for Updates",
-    "reportIssue": "Report Issue"
-  },
  "models": {
    "user": {
      "id": "ID",
--- a/enjoy/src/i18n/zh-CN.json
+++ b/enjoy/src/i18n/zh-CN.json
@@ -1,19 +1,4 @@
 {
-  "menu": {
-    "about": "关于",
-    "toggleFullScreen": "全屏",
-    "hide": "隐藏",
-    "unhide": "显示",
-    "quit": "退出",
-    "undo": "撤销",
-    "redo": "重做",
-    "cut": "剪切",
-    "copy": "复制",
-    "paste": "粘贴",
-    "selectAll": "全选",
-    "checkForUpdates": "检查更新",
-    "reportIssue": "报告问题"
-  },
  "models": {
    "user": {
      "id": "ID",
@@ -375,9 +360,9 @@
  "currentVersion": "当前版本",
  "checkUpdate": "检查更新",
  "checkingLatestVersion": "正在检查最新版本",
-  "updateDownloaded": "新版本已下载，点击重新启动以更新",
-  "restart": "Restart",
-  "later": "Later",
+  "updateDownloaded": "新版本已下载，请重新启动应用以应用更新",
+  "restart": "重新启动",
+  "later": "稍后",
  "userGuide": "用户指南",
  "feedback": "反馈",
  "alreadyLatestVersion": "已经是最新版本",
--- a/enjoy/src/index.css
+++ b/enjoy/src/index.css
@@ -88,6 +88,11 @@
    font-weight: normal;
    font-style: normal;
  }
+
+  :root {
+    --sidebar-collapsed-width: 48px;
+    --sidebar-expanded-width: 192px;
+  }
 }

@layer components {
--- a/enjoy/src/main/window.ts
+++ b/enjoy/src/main/window.ts
@@ -706,38 +706,38 @@ ${log}
    {
      label: app.name,
      submenu: [
-        { role: "about", label: t("menu.about") },
+        { role: "about" },
        { type: "separator" },
-        { role: "togglefullscreen", label: t("menu.toggleFullScreen") },
-        { role: "hide", label: t("menu.hide") },
-        { role: "unhide", label: t("menu.unhide") },
+        { role: "togglefullscreen" },
+        { role: "hide" },
+        { role: "unhide" },
        { type: "separator" },
-        { role: "quit", label: t("menu.quit") },
+        { role: "quit" },
      ],
    },
    {
      label: "Edit",
      submenu: [
-        { role: "undo", label: t("menu.undo") },
-        { role: "redo", label: t("menu.redo") },
+        { role: "undo" },
+        { role: "redo" },
        { type: "separator" },
-        { role: "cut", label: t("menu.cut") },
-        { role: "copy", label: t("menu.copy") },
-        { role: "paste", label: t("menu.paste") },
-        { role: "selectAll", label: t("menu.selectAll") },
+        { role: "cut" },
+        { role: "copy" },
+        { role: "paste" },
+        { role: "selectAll" },
      ],
    },
    {
      label: "Help",
      submenu: [
        {
-          label: t("menu.checkForUpdates"),
+          label: "Check for Updates",
          click: () => {
            shell.openExternal("https://1000h.org/enjoy-app/install.html");
          },
        },
        {
-          label: t("menu.reportIssue"),
+          label: "Report an Issue",
          click: () => {
            shell.openExternal(`${REPO_URL}/issues/new`);
          },
--- a/enjoy/src/renderer/components/layouts/layout.tsx
+++ b/enjoy/src/renderer/components/layouts/layout.tsx
@@ -3,7 +3,7 @@ import {
  AppSettingsProviderContext,
  CopilotProviderContext,
 } from "@renderer/context";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { CopilotSession, TitleBar, Sidebar } from "@renderer/components";
 import {
  ResizableHandle,
@@ -14,6 +14,7 @@ import {
 export const Layout = () => {
  const { initialized } = useContext(AppSettingsProviderContext);
  const { active, setActive } = useContext(CopilotProviderContext);
+  const [isCollapsed, setIsCollapsed] = useState(false);

  if (initialized) {
    return (
@@ -25,13 +26,18 @@ export const Layout = () => {
          data-testid="layout-home"
        >
          <ResizablePanel id="main-panel" order={1} minSize={50}>
-            <div className="flex flex-start">
-              <Sidebar />
+            <div className="flex flex-start w-full">
+              <Sidebar
+                isCollapsed={isCollapsed}
+                setIsCollapsed={setIsCollapsed}
+              />
              <div
                id="main-panel-content"
-                className="flex-1 border-l overflow-x-hidden overflow-y-auto h-content relative"
+                className="flex-1 h-content overflow-hidden relative"
              >
-                <Outlet />
+                <div className="overflow-x-hidden overflow-y-auto w-full h-content">
+                  <Outlet />
+                </div>
              </div>
            </div>
          </ResizablePanel>
--- a/enjoy/src/renderer/components/layouts/sidebar.tsx
+++ b/enjoy/src/renderer/components/layouts/sidebar.tsx
@@ -42,12 +42,15 @@ import { useContext, useEffect } from "react";
 import { NoticiationsChannel } from "@renderer/cables";
 import { useState } from "react";

-export const Sidebar = () => {
+export const Sidebar = (props: {
+  isCollapsed: boolean;
+  setIsCollapsed: (isCollapsed: boolean) => void;
+}) => {
+  const { isCollapsed, setIsCollapsed } = props;
  const location = useLocation();
  const activeTab = location.pathname;
  const { EnjoyApp, cable, displayPreferences, setDisplayPreferences } =
    useContext(AppSettingsProviderContext);
-  const [isCollapsed, setIsCollapsed] = useState(false);

  useEffect(() => {
    if (!cable) return;
@@ -77,13 +80,17 @@ export const Sidebar = () => {
  return (
    <div
      className={`h-content pt-8 transition-all relative draggable-region ${
-        isCollapsed ? "w-12" : "w-48"
+        isCollapsed
+          ? "w-[--sidebar-collapsed-width]"
+          : "w-[--sidebar-expanded-width]"
      }`}
      data-testid="sidebar"
    >
      <div
-        className={`fixed top-0 left-0 h-full bg-muted ${
-          isCollapsed ? "w-12" : "w-48"
+        className={`fixed top-0 left-0 h-full bg-muted border-r ${
+          isCollapsed
+            ? "w-[--sidebar-collapsed-width]"
+            : "w-[--sidebar-expanded-width]"
        }`}
      >
        <ScrollArea className="w-full h-full pb-12 pt-8">
@@ -213,6 +220,7 @@ export const Sidebar = () => {
            >
              <DialogContent
                aria-describedby={undefined}
+                container={document.body}
                className="max-w-screen-md xl:max-w-screen-lg h-5/6 p-0"
              >
                <DialogTitle className="hidden">
--- a/enjoy/src/renderer/components/layouts/title-bar.tsx
+++ b/enjoy/src/renderer/components/layouts/title-bar.tsx
@@ -23,6 +23,7 @@ import {
  DropdownMenuPortal,
  DropdownMenuSubContent,
  DropdownMenuSeparator,
+  toast,
 } from "@renderer/components/ui";
 import { IpcRendererEvent } from "electron/renderer";
 import { t } from "i18next";
@@ -49,7 +50,7 @@ export const TitleBar = () => {
    "checking-for-update" | "update-available" | "update-downloaded" | "error"
  >();

-  const { EnjoyApp, setDisplayPreferences, initialized } = useContext(
+  const { EnjoyApp, version, setDisplayPreferences, initialized } = useContext(
    AppSettingsProviderContext
  );
  const { active, setActive } = useContext(CopilotProviderContext);
@@ -61,6 +62,7 @@ export const TitleBar = () => {
      EnjoyApp.app.quitAndInstall();
    } else {
      EnjoyApp.app.checkForUpdates();
+      toast.info(t("checkingForUpdate"));
    }
  };

@@ -89,6 +91,11 @@ export const TitleBar = () => {
    args: any[]
  ) => {
    setUpdaterState(eventType);
+    if (eventType === "update-available") {
+      toast.info(t("updateAvailable"));
+    } else if (eventType === "update-downloaded") {
+      toast.success(t("updateDownloaded"));
+    }
  };

  useEffect(() => {
@@ -155,7 +162,7 @@ export const TitleBar = () => {
            >
              <HelpCircleIcon className="size-4" />
              {updaterState && (
-                <span className="absolute -top-1 -right-1 bg-red-500 rounded-full size-2"></span>
+                <span className="absolute top-1 right-1 bg-red-500 rounded-full size-1.5"></span>
              )}
            </Button>
          </DropdownMenuTrigger>
@@ -211,14 +218,17 @@ export const TitleBar = () => {
              </DropdownMenuSub>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled>
+              <span className="text-xs text-muted-foreground">v{version}</span>
+            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={checkUpdate}
              className="cursor-pointer relative"
            >
              {updaterState && (
-                <span className="absolute -top-1 -right-1 bg-red-500 rounded-full size-2"></span>
+                <span className="absolute top-1 right-1 bg-red-500 rounded-full size-1.5"></span>
              )}
-              <span className="capitalize">
+              <span className="capitalize flex items-center gap-2">
                {updaterState === "checking-for-update" &&
                  t("checkingForUpdate")}
                {updaterState === "update-available" && t("updateAvailable")}
--- a/enjoy/src/renderer/pages/audio.tsx
+++ b/enjoy/src/renderer/pages/audio.tsx
@@ -25,7 +25,7 @@ export default () => {
  const navigate = useNavigate();

  return (
-    <div className="h-content flex flex-col relative">
+    <div className="h-content flex flex-col relative max-w-full">
      <Breadcrumb className="px-4 pt-3 pb-2">
        <BreadcrumbList>
          <BreadcrumbItem>
--- a/enjoy/src/renderer/pages/document.tsx
+++ b/enjoy/src/renderer/pages/document.tsx
@@ -77,7 +77,7 @@ const DocumentComponent = () => {
        </ResizablePanel>
        <ResizableHandle
          className={`${document.layout === "horizontal" ? "mx-2" : "my-2"} ${
-            playingSegment ? "invisible" : ""
+            playingSegment ? "" : "invisible"
          }`}
        />
        <ResizablePanel