refactor UI

2024-12-07 13:44:24 +08:00
parent cdc4083d24
commit d2d6859919
8 changed files with 43 additions and 22 deletions
--- a/enjoy/src/renderer/components/layouts/layout.tsx
+++ b/enjoy/src/renderer/components/layouts/layout.tsx
@@ -27,7 +27,10 @@ export const Layout = () => {
          <ResizablePanel id="main-panel" order={1} minSize={50}>
            <div className="flex flex-start">
              <Sidebar />
-              <div className="flex-1 border-l overflow-x-hidden overflow-y-auto h-content">
+              <div
+                id="main-panel-content"
+                className="flex-1 border-l overflow-x-hidden overflow-y-auto h-content relative"
+              >
                <Outlet />
              </div>
            </div>
--- a/enjoy/src/renderer/components/medias/media-loading-modal.tsx
+++ b/enjoy/src/renderer/components/medias/media-loading-modal.tsx
@@ -7,7 +7,6 @@ import {
  AlertDialogTitle,
  AlertDialogContent,
  AlertDialogFooter,
-  AlertDialogOverlay,
  Button,
  Tabs,
  TabsContent,
@@ -16,7 +15,6 @@ import {
 } from "@renderer/components/ui";
 import { CircleAlertIcon, LoaderIcon } from "lucide-react";
 import { t } from "i18next";
-import { useNavigate } from "react-router-dom";
 import { TranscriptionCreateForm, TranscriptionsList } from "../transcriptions";
 import { SttEngineOptionEnum } from "@/types/enums";

@@ -25,7 +23,6 @@ export const MediaLoadingModal = () => {

  return (
    <AlertDialog open={!decoded || !Boolean(transcription?.result?.timeline)}>
-      <AlertDialogOverlay />
      <AlertDialogContent className="max-h-[70%] overflow-y-auto">
        <AlertDialogHeader>
          <AlertDialogTitle>{t("preparingAudio")}</AlertDialogTitle>
--- a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx
+++ b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx
@@ -3,14 +3,16 @@ import { useState, useEffect } from "react";
 import { PronunciationAssessmentWordResult } from "@renderer/components";
 import { Switch, ScrollArea } from "@renderer/components/ui";
 import { InfoIcon } from "lucide-react";
+import { cn } from "@renderer/lib/utils";

 export const PronunciationAssessmentFulltextResult = (props: {
  words: PronunciationAssessmentWordResultType[];
  currentTime?: number;
  src?: string;
  onPlayOrigin?: (word: string, index: number) => void;
+  className?: string;
 }) => {
-  const { words, currentTime, src, onPlayOrigin } = props;
+  const { words, currentTime, src, onPlayOrigin, className } = props;
  const [errorStats, setErrorStats] = useState({
    mispronunciation: 0,
    omission: 0,
@@ -56,7 +58,7 @@ export const PronunciationAssessmentFulltextResult = (props: {
  }, []);

  return (
-    <ScrollArea className="min-h-72 py-4 px-8">
+    <ScrollArea className={cn("min-h-72", className)}>
      <div className="flex items-start justify-between space-x-6">
        <div className="flex-1 py-4 flex items-center flex-wrap">
          {words.map((result, index: number) => (
--- a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx
+++ b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx
@@ -140,7 +140,7 @@ export const PronunciationAssessmentWordResult = (props: {
        </div>
      </PopoverTrigger>

-      <PopoverContent className="bg-muted">
+      <PopoverContent align="start" className="bg-muted">
        <div className="text-sm flex items-center space-x-2 mb-2">
          <span className="font-serif">{t("score")}:</span>
          <span className="font-serif">
--- a/enjoy/src/renderer/components/recordings/recording-detail.tsx
+++ b/enjoy/src/renderer/components/recordings/recording-detail.tsx
@@ -62,7 +62,7 @@ export const RecordingDetail = (props: {

  return (
    <div className="">
-      <div className="flex justify-center mb-6 px-4">
+      <div className="flex justify-center mb-6">
        <WavesurferPlayer
          id={recording.id}
          src={recording.src}
@@ -74,6 +74,7 @@ export const RecordingDetail = (props: {

      {result ? (
        <PronunciationAssessmentFulltextResult
+          className="py-4"
          words={result.words}
          currentTime={currentTime}
          src={recording.src}
--- a/enjoy/src/renderer/components/ui/alert-dialog.tsx
+++ b/enjoy/src/renderer/components/ui/alert-dialog.tsx
@@ -29,14 +29,18 @@ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;

 const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    container?: HTMLElement;
+  }
+>(({ className, container, ...props }, ref) => (
+  <AlertDialogPortal
+    container={container || document.getElementById("main-panel-content")}
+  >
+    <AlertDialogOverlay className="absolute inset-0" />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "absolute left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
--- a/enjoy/src/renderer/components/ui/dialog.tsx
+++ b/enjoy/src/renderer/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "absolute inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
@@ -31,14 +31,18 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    container?: HTMLElement;
+  }
+>(({ className, children, container, ...props }, ref) => (
+  <DialogPortal
+    container={container || document.getElementById("main-panel-content")}
+  >
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "absolute left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
--- a/enjoy/src/renderer/components/ui/sheet.tsx
+++ b/enjoy/src/renderer/components/ui/sheet.tsx
@@ -53,6 +53,7 @@ interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {
  displayClose?: boolean;
+  container?: HTMLElement;
 }

 const SheetContent = React.forwardRef<
@@ -60,14 +61,23 @@ const SheetContent = React.forwardRef<
  SheetContentProps
 >(
  (
-    { side = "right", displayClose = true, className, children, ...props },
+    {
+      side = "right",
+      displayClose = true,
+      className,
+      children,
+      container,
+      ...props
+    },
    ref
  ) => (
-    <SheetPortal>
-      <SheetOverlay />
+    <SheetPortal
+      container={container || document.getElementById("main-panel-content")}
+    >
+      <SheetOverlay className="absolute" />
      <SheetPrimitive.Content
        ref={ref}
-        className={cn(sheetVariants({ side }), className)}
+        className={cn(sheetVariants({ side }), className, "absolute")}
        {...props}
      >
        {children}