Merge pull request #540 from charlielee/frame-toolbar

Use mantine styles for toolbars
charlielee · Nov 30, 2024 · 9e13d0b · 9e13d0b
2 parents 071a0e1 + ae9fa21
commit 9e13d0b
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 107 deletions.
diff --git a/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.css b/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.css
diff --git a/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.tsx b/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.tsx
diff --git a/src/renderer/components/animator/Animator/Animator.tsx b/src/renderer/components/animator/Animator/Animator.tsx
@@ -1,12 +1,12 @@
 import Content from "../../common/Content/Content";
 import Page from "../../common/Page/Page";
 import PageBody from "../../common/PageBody/PageBody";
-import { AnimationToolbar } from "../AnimationToolbar/AnimationToolbar";
 import { PreviewToolbar } from "../PreviewToolbar/PreviewToolbar";
 import { CapturePane } from "../CapturePane/CapturePane";
 import { Preview } from "../Preview/Preview";
 import { Timeline } from "../Timeline/Timeline";
 import TitleToolbar from "../TitleToolbar/TitleToolbar";
+import { FrameToolbar } from "../FrameToolbar/FrameToolbar";
 
 export const Animator = (): JSX.Element => {
   return (
@@ -16,7 +16,7 @@ export const Animator = (): JSX.Element => {
         <Content>
           <Preview />
           <PreviewToolbar />
-          <AnimationToolbar />
+          <FrameToolbar />
           <Timeline />
         </Content>
 

diff --git a/src/renderer/components/animator/FrameToolbar/FrameToolbar.tsx b/src/renderer/components/animator/FrameToolbar/FrameToolbar.tsx
@@ -0,0 +1,46 @@
+import { Group, useMantineTheme } from "@mantine/core";
+import { useContext } from "react";
+import { useSelector } from "react-redux";
+import { PageRoute } from "../../../../common/PageRoute";
+import PlaybackContext from "../../../context/PlaybackContext/PlaybackContext";
+import { RootState } from "../../../redux/store";
+import { getTrackLength } from "../../../services/project/projectCalculator";
+import IconName from "../../common/Icon/IconName";
+import IconButton from "../../common/IconButton/IconButton";
+import { ThemeWithOther } from "../../ui/Theme/Theme";
+import { TitleToolbarTimestamp } from "./TitleToolbarTimestamp/TitleToolbarTimestamp";
+import useProjectAndTake from "../../../hooks/useProjectAndTake";
+import { UiActionIcon } from "../../ui/UiActionIcon/UiActionIcon";
+
+export const FrameToolbar = (): JSX.Element => {
+  const theme: ThemeWithOther = useMantineTheme();
+
+  const { take } = useProjectAndTake();
+
+  const { liveViewVisible, timelineIndex } = useContext(PlaybackContext);
+  const frameTrack = useSelector((state: RootState) => state.project.take?.frameTrack);
+  if (frameTrack === undefined) {
+    throw "No frame track found in FrameToolbar";
+  }
+
+  return (
+    <Group
+      py="sm"
+      px="md"
+      style={{
+        borderTop: theme.other.border,
+        backgroundColor: "var(--mantine-color-default)",
+      }}
+    >
+      <TitleToolbarTimestamp take={take} />
+      <UiActionIcon
+        icon={liveViewVisible ? IconName.UNDO : IconName.DELETE}
+        onClick={
+          getTrackLength(frameTrack) === 0 ? () => undefined : PageRoute.ANIMATOR_DELETE_FRAME
+        }
+      >
+        {timelineIndex === undefined ? "Undo Last Frame" : `Delete Frame ${timelineIndex + 1}`}
+      </UiActionIcon>
+    </Group>
+  );
+};
diff --git a/...oolbarTimestamp/TitleToolbarTimestamp.tsx → ...oolbarTimestamp/TitleToolbarTimestamp.tsx b/...oolbarTimestamp/TitleToolbarTimestamp.tsx → ...oolbarTimestamp/TitleToolbarTimestamp.tsx
diff --git a/src/renderer/components/animator/PreviewToolbar/PreviewToolbar.tsx b/src/renderer/components/animator/PreviewToolbar/PreviewToolbar.tsx
@@ -3,7 +3,7 @@ import { useContext } from "react";
 import CaptureContext from "../../../context/CaptureContext/CaptureContext";
 import PlaybackContext from "../../../context/PlaybackContext/PlaybackContext";
 import IconName from "../../common/Icon/IconName";
-import { UiActionIcon } from "../../ui/UiActionIcon/UiActionIcon";
+import { UiActionIcon, UiActionIconRole } from "../../ui/UiActionIcon/UiActionIcon";
 import { PreviewToolbarPlayback } from "./PreviewToolbarPlayback/PreviewToolbarPlayback";
 
 export const PreviewToolbar = (): JSX.Element => {
@@ -18,11 +18,15 @@ export const PreviewToolbar = (): JSX.Element => {
   };
 
   return (
-    <Group px="md">
+    <Group py="sm" px="md" align="flex-end">
       <Flex flex={1}>
         <PreviewToolbarPlayback />
       </Flex>
-      <UiActionIcon icon={IconName.CAPTURE} onClick={handleClickCaptureButton} captureButton>
+      <UiActionIcon
+        icon={IconName.CAPTURE}
+        onClick={handleClickCaptureButton}
+        role={UiActionIconRole.CAPTURE}
+      >
         Capture Frame
       </UiActionIcon>
       <Flex flex={1}></Flex>

diff --git a/src/renderer/components/animator/Timeline/Timeline.css b/src/renderer/components/animator/Timeline/Timeline.css
@@ -1,14 +1,14 @@
 .timeline {
   display: flex;
+  background-color: var(--ba-theme-timeline-background);
+  border-top: var(--ba-theme-border);
 }
 
 .timeline__track-labels {
-  background-color: var(--ba-dark-mid-hover);
-  border-right: var(--border-1) solid var(--ba-border);
+  border-right: var(--ba-theme-border);
 }
 
 .timeline__track-labels-inner {
-  background-color: var(--ba-dark);
   margin-top: var(--height-200);
 }
 

diff --git a/src/renderer/components/animator/Timeline/TimelinePosition/TimelinePosition.css b/src/renderer/components/animator/Timeline/TimelinePosition/TimelinePosition.css
@@ -5,8 +5,6 @@
 
 .timeline-position__inner {
   position: absolute;
-  background-color: var(--ba-dark-mid-hover);
-  color: var(--ba-light-mid);
   display: flex;
   font-size: 0.75rem;
   height: 100%;
@@ -17,7 +15,6 @@
 }
 
 .timeline-position__marker {
-  background-color: var(--ba-dark-mid-hover);
   min-width: calc(var(--width-16) * 8);
   width: calc(var(--width-16) * 8);
 }
diff --git a/src/renderer/components/animator/Timeline/TimelineTrackLabel/TimelineTrackLabel.css b/src/renderer/components/animator/Timeline/TimelineTrackLabel/TimelineTrackLabel.css
@@ -1,9 +1,8 @@
 .timeline-track-label {
   align-items: center;
-  color: var(--ba-light-mid);
   display: flex;
   height: var(--height-800);
-  padding: var(--width-16);
-  min-width: calc(var(--width-16) * 4);
-  width: calc(var(--width-16) * 4);
+  padding: var(--mantine-spacing-md);
+  min-width: calc(var(--mantine-spacing-md) * 4);
+  width: calc(var(--mantine-spacing-md) * 4);
 }
diff --git a/src/renderer/components/animator/Timeline/TimelineTrackLabel/TimelineTrackLabel.tsx b/src/renderer/components/animator/Timeline/TimelineTrackLabel/TimelineTrackLabel.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from "@mantine/core";
 import { FileInfoType } from "../../../../services/fileManager/FileInfo";
 import Icon from "../../../common/Icon/Icon";
 import IconName from "../../../common/Icon/IconName";
@@ -9,11 +10,12 @@ interface TimelineTrackLabelProps {
 
 const TimelineTrackLabel = ({ fileType }: TimelineTrackLabelProps): JSX.Element => {
   return (
-    <div
-      className="timeline-track-label"
-      title={fileType === FileInfoType.FRAME ? "Frame Track" : "Audio Track"}
-    >
-      {fileType === FileInfoType.FRAME && <Icon name={IconName.FRAMES} size="1.5rem" />}
+    <div className="timeline-track-label">
+      {fileType === FileInfoType.FRAME && (
+        <Tooltip label={fileType === FileInfoType.FRAME ? "Frame Track" : "Audio Track"}>
+          <Icon name={IconName.FRAMES} size="1.5rem" />
+        </Tooltip>
+      )}
     </div>
   );
 };

diff --git a/src/renderer/components/animator/TitleToolbar/TitleToolbar.css b/src/renderer/components/animator/TitleToolbar/TitleToolbar.css
diff --git a/src/renderer/components/animator/TitleToolbar/TitleToolbar.tsx b/src/renderer/components/animator/TitleToolbar/TitleToolbar.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from "@mantine/core";
+import { Flex, Group, Title, Tooltip } from "@mantine/core";
 import { useContext } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { PageRoute } from "../../../../common/PageRoute";
@@ -9,16 +9,13 @@ import useProjectAndTake from "../../../hooks/useProjectAndTake";
 import { toggleCapturePane } from "../../../redux/slices/projectSlice";
 import { RootState } from "../../../redux/store";
 import IconName from "../../common/Icon/IconName";
-import Toolbar from "../../common/Toolbar/Toolbar";
-import ToolbarItem, { ToolbarItemAlign } from "../../common/ToolbarItem/ToolbarItem";
 import { SemanticColor } from "../../ui/Theme/SemanticColor";
-import { UiActionIcon } from "../../ui/UiActionIcon/UiActionIcon";
+import { UiActionIcon, UiActionIconRole } from "../../ui/UiActionIcon/UiActionIcon";
 import { UiButton } from "../../ui/UiButton/UiButton";
-import "./TitleToolbar.css";
-import { TitleToolbarTimestamp } from "./TitleToolbarTimestamp/TitleToolbarTimestamp";
+import { displayProjectTitle } from "../../../services/project/projectBuilder";
 
 const TitleToolbar = (): JSX.Element => {
-  const { take } = useProjectAndTake();
+  const { take, project } = useProjectAndTake();
   const dispatch = useDispatch();
   const showCapturePane = useSelector((state: RootState) => state.project.showCapturePane);
   const { deviceIdentifier } = useContext(ImagingDeviceContext);
@@ -27,8 +24,8 @@ const TitleToolbar = (): JSX.Element => {
     `Shot ${zeroPad(take.shotNumber, 3)} Take ${zeroPad(take.takeNumber, 2)}`;
 
   return (
-    <Toolbar className="title-toolbar">
-      <ToolbarItem stretch align={ToolbarItemAlign.LEFT}>
+    <Group pl="md" style={{ backgroundColor: "black" }}>
+      <Flex flex={1} py="sm">
         <Tooltip label="Manage Project">
           <UiButton
             icon={IconName.FOLDER}
@@ -38,27 +35,32 @@ const TitleToolbar = (): JSX.Element => {
             {makeTakeTitle(take)}
           </UiButton>
         </Tooltip>
-      </ToolbarItem>
+      </Flex>
 
-      <ToolbarItem align={ToolbarItemAlign.CENTER}>
-        <TitleToolbarTimestamp take={take} />
-      </ToolbarItem>
+      <Title order={1} size="h4">
+        {displayProjectTitle(project)}
+      </Title>
 
-      <ToolbarItem stretch align={ToolbarItemAlign.RIGHT}>
+      <Flex flex={1} justify="flex-end">
         <UiActionIcon
           icon={IconName.CAPTURE_SETTINGS}
           onClick={() => dispatch(toggleCapturePane())}
           open={showCapturePane}
           active={deviceIdentifier !== undefined}
+          role={UiActionIconRole.TOOLBAR_TAB}
         >
           {showCapturePane ? "Close Capture Settings" : "Open Capture Settings"}
         </UiActionIcon>
 
-        <UiActionIcon icon={IconName.VIDEO} onClick={PageRoute.ANIMATOR_EXPORT_VIDEO_MODAL}>
+        <UiActionIcon
+          icon={IconName.VIDEO}
+          onClick={PageRoute.ANIMATOR_EXPORT_VIDEO_MODAL}
+          role={UiActionIconRole.TOOLBAR_TAB}
+        >
           Export Video
         </UiActionIcon>
-      </ToolbarItem>
-    </Toolbar>
+      </Flex>
+    </Group>
   );
 };
 

diff --git a/src/renderer/components/common/Icon/Icon.tsx b/src/renderer/components/common/Icon/Icon.tsx
@@ -40,8 +40,10 @@ import {
 } from "react-icons/io5";
 import "./Icon.css";
 import IconName from "./IconName";
+import { Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
-interface IconProps {
+export interface IconProps {
   name: IconName;
   active?: boolean;
   className?: string;
@@ -141,11 +143,17 @@ const getIconByName = (name: IconName, active: boolean, props: IconBaseProps) =>
   }
 };
 
-const Icon = ({ name, active = false, className, size = "1em" }: IconProps) => {
-  return getIconByName(name, active, {
-    className: classNames("icon", className, { "icon--active": active }),
-    size,
-  });
-};
+const Icon = forwardRef<HTMLDivElement, IconProps>(
+  ({ name, active = false, className, size = "1em" }, ref) => {
+    return (
+      <div ref={ref}>
+        {getIconByName(name, active, {
+          className: classNames("icon", className, { "icon--active": active }),
+          size,
+        })}
+      </div>
+    );
+  }
+);
 
 export default Icon;
diff --git a/src/renderer/components/ui/Theme/Theme.css b/src/renderer/components/ui/Theme/Theme.css
@@ -9,6 +9,12 @@
   src: url("./OpenSans.ttf") format("truetype");
 }
 
+:root {
+  --ba-theme-timeline-background: var(--mantine-color-default);
+  --ba-theme-border: calc(0.0625rem * var(--mantine-scale)) solid
+    var(--mantine-color-default-border);
+}
+
 body {
   user-select: none;
   height: 100vh;
@@ -17,3 +23,24 @@ body {
 #root {
   height: 100%;
 }
+
+::-webkit-scrollbar {
+  background-color: var(--mantine-color-default);
+  width: var(--mantine-spacing-md);
+  height: var(--mantine-spacing-md);
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--mantine-color-gray-6);
+  border-radius: var(--mantine-radius-md);
+  border: calc(0.25rem * var(--mantine-scale)) solid var(--mantine-color-default);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mantine-color-gray-7);
+}