Improve layout (#510)

* fix assessment layout * improve player layout * refactor sidebar * default system theme * may toggle theme * fix calendar in dark theme * fix style in dark mode * improve player layout
ZuodaoTech · Apr 11, 2024 · ac39cca · ac39cca
1 parent a3ceba9
commit ac39cca
Show file tree

Hide file tree

Showing 32 changed files with 534 additions and 363 deletions.
diff --git a/enjoy/assets/sound-waves.png b/enjoy/assets/sound-waves.png
diff --git a/enjoy/components.json b/enjoy/components.json
@@ -7,7 +7,7 @@
     "config": "tailwind.config.js",
     "css": "src/index.css",
     "baseColor": "zinc",
-    "cssVariables": false
+    "cssVariables": true
   },
   "aliases": {
     "components": "src/renderer/components",

diff --git a/enjoy/src/i18n/en.json b/enjoy/src/i18n/en.json
@@ -247,13 +247,17 @@
   "logoutAndRemoveAllPersonalData": "Logout and remove all personal data",
   "logoutAndRemoveAllPersonalSettings": "Logout and remove all personal settings",
   "hotkeys": "Hotkeys",
-  "system": "System",
   "player": "Player",
   "quitApp": "Quit APP",
   "openPreferences": "Open preferences",
   "playOrPause": "Play or pause",
   "playOrPauseRecording": "Play or pause recording",
   "startOrStopRecording": "start or stop recording",
+  "appearance": "Appearance",
+  "theme": "Theme",
+  "light": "Light",
+  "dark": "Dark",
+  "system": "System",
   "about": "About",
   "currentVersion": "Current version",
   "checkUpdate": "Check update",

diff --git a/enjoy/src/i18n/zh-CN.json b/enjoy/src/i18n/zh-CN.json
@@ -254,6 +254,10 @@
   "playOrPause": "播放/暂停",
   "playOrPauseRecording": "播放/暂停录音",
   "startOrStopRecording": "开始/结束录音",
+  "appearance": "外观",
+  "theme": "主题",
+  "light": "浅色",
+  "dark": "深色",
   "about": "关于",
   "currentVersion": "当前版本",
   "checkUpdate": "检查更新",

diff --git a/enjoy/src/main/window.ts b/enjoy/src/main/window.ts
@@ -444,10 +444,10 @@ ${log}
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     icon: "./assets/icon.png",
-    width: 1440,
-    height: 900,
-    minWidth: 1024,
-    minHeight: 768,
+    width: 1280,
+    height: 720,
+    minWidth: 720 ,
+    minHeight: 576,
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
       spellcheck: false,

diff --git a/enjoy/src/renderer/app.tsx b/enjoy/src/renderer/app.tsx
@@ -32,7 +32,7 @@ function App() {
   });
 
   return (
-    <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
+    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
       <AppSettingsProvider>
         <HotKeysSettingsProvider>
           <AISettingsProvider>

diff --git a/enjoy/src/renderer/components/audios/audio-card.tsx b/enjoy/src/renderer/components/audios/audio-card.tsx
@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import { cn } from "@renderer/lib/utils";
+import { AudioLinesIcon } from "lucide-react";
 
 export const AudioCard = (props: {
   audio: Partial<AudioType>;
@@ -11,17 +12,21 @@ export const AudioCard = (props: {
     <div className={cn("w-full", className)}>
       <Link to={`/audios/${audio.id}`}>
         <div
-          className="aspect-square border rounded-lg overflow-hidden"
+          className="aspect-square border rounded-lg overflow-hidden flex"
           style={{
             borderBottomColor: `#${audio.md5.substr(0, 6)}`,
             borderBottomWidth: 3,
           }}
         >
-          <img
-            src={audio.coverUrl ? audio.coverUrl : "./assets/sound-waves.png"}
-            crossOrigin="anonymous"
-            className="hover:scale-105 object-cover w-full h-full"
-          />
+          {audio.coverUrl ? (
+            <img
+              src={audio.coverUrl}
+              crossOrigin="anonymous"
+              className="hover:scale-105 object-cover w-full h-full"
+            />
+          ) : (
+              <AudioLinesIcon className="hover:scale-105 object-cover w-1/2 h-1/2 m-auto" />
+          )}
         </div>
       </Link>
       <div className="text-sm font-semibold mt-2 max-w-full line-clamp-2 h-10">

diff --git a/enjoy/src/renderer/components/audios/audio-player.tsx b/enjoy/src/renderer/components/audios/audio-player.tsx
@@ -24,10 +24,12 @@ export const AudioPlayer = (props: { id?: string; md5?: string }) => {
   if (!layout) return <LoaderSpin />;
 
   return (
-    <div data-testid="audio-player">
+    <div data-testid="audio-player" className={layout.wrapper}>
       <div className={`${layout.upperWrapper} mb-4`}>
         <div className="grid grid-cols-5 xl:grid-cols-3 gap-6 px-6 h-full">
-          <div className={`col-span-2 xl:col-span-1 rounded-lg border shadow-lg ${layout.upperWrapper}`}>
+          <div
+            className={`col-span-2 xl:col-span-1 rounded-lg border shadow-lg ${layout.upperWrapper}`}
+          >
             <MediaTabs />
           </div>
           <div className={`col-span-3 xl:col-span-2 ${layout.upperWrapper}`}>
@@ -36,7 +38,7 @@ export const AudioPlayer = (props: { id?: string; md5?: string }) => {
         </div>
       </div>
 
-      <div className={`${layout.lowerWrapper} flex flex-col`}>
+      <div className={`flex flex-col`}>
         <div className={`${layout.playerWrapper} py-2 px-6`}>
           <MediaCurrentRecording />
         </div>
@@ -45,7 +47,7 @@ export const AudioPlayer = (props: { id?: string; md5?: string }) => {
           <MediaPlayer />
         </div>
 
-        <div className={`${layout.panelWrapper} w-full bg-background z-10 shadow-xl`}>
+        <div className={`${layout.panelWrapper} bg-background shadow-xl`}>
           <MediaPlayerControls />
         </div>
       </div>

diff --git a/enjoy/src/renderer/components/medias/media-caption-tabs.tsx b/enjoy/src/renderer/components/medias/media-caption-tabs.tsx
@@ -11,6 +11,7 @@ import {
   TabsTrigger,
   TabsContent,
   Separator,
+  ScrollArea,
 } from "@renderer/components/ui";
 import { ConversationShortcuts } from "@renderer/components";
 import { t } from "i18next";
@@ -30,42 +31,53 @@ export const MediaCaptionTabs = (props: {
   caption: TimelineEntry;
   selectedIndices: number[];
   toggleRegion: (index: number) => void;
+  children?: React.ReactNode;
 }) => {
-  const { caption, selectedIndices, toggleRegion } = props;
+  const { caption, selectedIndices, toggleRegion, children } = props;
 
   const [tab, setTab] = useState<string>("selected");
 
   if (!caption) return null;
 
   return (
-    <Tabs value={tab} onValueChange={(value) => setTab(value)} className="">
-      <TabsList className="grid grid-cols-4 gap-4 rounded-none sticky top-0 px-4 mb-4">
-        <TabsTrigger value="selected">{t("captionTabs.selected")}</TabsTrigger>
-        <TabsTrigger value="translation">
-          {t("captionTabs.translation")}
-        </TabsTrigger>
-        <TabsTrigger value="analysis">{t("captionTabs.analysis")}</TabsTrigger>
-        <TabsTrigger value="note">{t("captionTabs.note")}</TabsTrigger>
-      </TabsList>
-
-      <div className="px-4 pb-4 min-h-32">
-        <SelectedTabContent
-          caption={caption}
-          selectedIndices={selectedIndices}
-          toggleRegion={toggleRegion}
-        />
-
-        <TranslationTabContent text={caption.text} />
-
-        <AnalysisTabContent text={caption.text} />
-
-        <TabsContent value="note">
-          <div className="text-muted-foreground text-center py-4">
-            Comming soon
-          </div>
-        </TabsContent>
-      </div>
-    </Tabs>
+    <ScrollArea className="h-full relative">
+      <Tabs value={tab} onValueChange={(value) => setTab(value)} className="">
+        {children}
+
+        <div className="px-4 pb-10 min-h-32">
+          <SelectedTabContent
+            caption={caption}
+            selectedIndices={selectedIndices}
+            toggleRegion={toggleRegion}
+          />
+
+          <TranslationTabContent text={caption.text} />
+
+          <AnalysisTabContent text={caption.text} />
+
+          <TabsContent value="note">
+            <div className="text-muted-foreground text-center py-4">
+              Comming soon
+            </div>
+          </TabsContent>
+        </div>
+
+        <TabsList className="grid grid-cols-4 gap-4 rounded-none absolute w-full bottom-0 px-4">
+          <TabsTrigger value="selected" className="block truncate px-1">
+            {t("captionTabs.selected")}
+          </TabsTrigger>
+          <TabsTrigger value="translation" className="block truncate px-1">
+            {t("captionTabs.translation")}
+          </TabsTrigger>
+          <TabsTrigger value="analysis" className="block truncate px-1">
+            {t("captionTabs.analysis")}
+          </TabsTrigger>
+          <TabsTrigger value="note" className="block truncate px-1">
+            {t("captionTabs.note")}
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </ScrollArea>
   );
 };
 
@@ -193,26 +205,28 @@ const SelectedTabContent = (props: {
               <div className="font-serif text-lg font-semibold tracking-tight">
                 {word.text}
               </div>
-              {
-                word.timeline.length > 0 && (
-                  <div className="text-sm text-serif text-muted-foreground">
-                    <span
-                      className={`mr-2 font-code ${i === 0 ? "before:content-['/']" : ""
-                        }
-                        ${i === selectedIndices.length - 1
-                          ? "after:content-['/']"
-                          : ""
+              {word.timeline.length > 0 && (
+                <div className="text-sm text-serif text-muted-foreground">
+                  <span
+                    className={`mr-2 font-code ${
+                      i === 0 ? "before:content-['/']" : ""
+                    }
+                        ${
+                          i === selectedIndices.length - 1
+                            ? "after:content-['/']"
+                            : ""
                         }`}
-                    >
-                      {word.timeline
-                        .map((t) =>
-                          t.timeline.map((s) => convertIpaToNormal(s.text)).join("")
-                        )
-                        .join("")}
-                    </span>
-                  </div>
-                )
-              }
+                  >
+                    {word.timeline
+                      .map((t) =>
+                        t.timeline
+                          .map((s) => convertIpaToNormal(s.text))
+                          .join("")
+                      )
+                      .join("")}
+                  </span>
+                </div>
+              )}
             </div>
           );
         })}
@@ -452,7 +466,7 @@ const AnalysisTabContent = (props: { text: string }) => {
                   new URL(props.href ?? "");
                   props.target = "_blank";
                   props.rel = "noopener noreferrer";
-                } catch (e) { }
+                } catch (e) {}
 
                 return <a {...props}>{children}</a>;
               },