Merge pull request #458 from charlielee/ui-top-bar

Remove sidebar tabs and add title toolbar
charlielee · May 9, 2023 · 4532b5d · 4532b5d
2 parents 07c6f5a + eb6ce69
commit 4532b5d
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 115 deletions.
diff --git a/src/renderer/components/animator/Animator/Animator.tsx b/src/renderer/components/animator/Animator/Animator.tsx
@@ -4,20 +4,16 @@ import CaptureContextProvider from "../../../context/CaptureContext/CaptureConte
 import PlaybackContextProvider from "../../../context/PlaybackContext/PlaybackContextProvider";
 import { RootState } from "../../../redux/store";
 import Content from "../../common/Content/Content";
-import IconName from "../../common/Icon/IconName";
 import Page from "../../common/Page/Page";
 import PageBody from "../../common/PageBody/PageBody";
 import Sidebar from "../../common/Sidebar/Sidebar";
-import SidebarBlock from "../../common/SidebarBlock/SidebarBlock";
-import Tab from "../../common/Tab/Tab";
-import TabGroup from "../../common/TabGroup/TabGroup";
 import AnimationToolbarWithContext from "../AnimationToolbar/AnimationToolbar";
 import CaptureButtonToolbarWithContext from "../CaptureButtonToolbar/CaptureButtonToolbar";
-import CaptureTabWithContext from "../CaptureTab/CaptureTab";
-import MediaTab from "../MediaTab/MediaTab";
+import CaptureSidebarBlock from "../CaptureSidebarBlock/CaptureSidebarBlock";
 import Preview from "../Preview/Preview";
 import StatusToolbarWithContext from "../StatusToolbar/StatusToolbar";
 import Timeline from "../Timeline/Timeline";
+import TitleToolbar from "../TitleToolbar/TitleToolbar";
 
 interface AnimatorWithProviderProps {
   take: Take;
@@ -26,6 +22,7 @@ interface AnimatorWithProviderProps {
 const Animator = ({ take }: AnimatorWithProviderProps): JSX.Element => {
   return (
     <Page>
+      <TitleToolbar take={take} />
       <PageBody>
         <Content>
           <StatusToolbarWithContext take={take} />
@@ -36,26 +33,7 @@ const Animator = ({ take }: AnimatorWithProviderProps): JSX.Element => {
         </Content>
 
         <Sidebar>
-          <TabGroup
-            titles={["Capture", "Guides", "X-Sheet", "Media"]}
-            tabs={[
-              <CaptureTabWithContext key="capture" />,
-
-              <Tab key="guides">
-                <SidebarBlock title="Guides" titleIcon={IconName.GUIDES}>
-                  Guides
-                </SidebarBlock>
-              </Tab>,
-
-              <Tab key="x-sheet">
-                <SidebarBlock title="X-Sheet" titleIcon={IconName.GUIDES}>
-                  X-Sheet
-                </SidebarBlock>
-              </Tab>,
-
-              <MediaTab key="media" take={take} />,
-            ]}
-          />
+          <CaptureSidebarBlock key="capture" />
         </Sidebar>
       </PageBody>
     </Page>

diff --git a/...onents/animator/CaptureTab/CaptureTab.tsx → ...ptureSidebarBlock/CaptureSidebarBlock.tsx b/...onents/animator/CaptureTab/CaptureTab.tsx → ...ptureSidebarBlock/CaptureSidebarBlock.tsx
@@ -1,15 +1,13 @@
-import { ThunkDispatch, Action } from "@reduxjs/toolkit";
+import { Action, ThunkDispatch } from "@reduxjs/toolkit";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../redux/store";
 import { setCurrentDeviceFromId } from "../../../redux/thunks";
-import IconName from "../../common/Icon/IconName";
 import InputGroup from "../../common/Input/InputGroup/InputGroup";
 import InputLabel from "../../common/Input/InputLabel/InputLabel";
 import InputSelect from "../../common/Input/InputSelect/InputSelect";
 import SidebarBlock from "../../common/SidebarBlock/SidebarBlock";
-import Tab from "../../common/Tab/Tab";
 
-const CaptureTab = (): JSX.Element => {
+const CaptureSidebarBlock = (): JSX.Element => {
   const dispatch: ThunkDispatch<RootState, void, Action> = useDispatch();
   const { deviceStatus, deviceList } = useSelector((state: RootState) => ({
     deviceStatus: state.capture.deviceStatus,
@@ -22,22 +20,20 @@ const CaptureTab = (): JSX.Element => {
   });
 
   return (
-    <Tab>
-      <SidebarBlock title="Capture" titleIcon={IconName.CAPTURE}>
-        <InputGroup>
-          <InputLabel inputId="camera-source-select">Camera Source</InputLabel>
-          <InputSelect
-            id="camera-source-select"
-            options={buildCameraSourceOptions()}
-            value={deviceStatus?.identifier?.deviceId ?? "#"}
-            onChange={(deviceId) =>
-              dispatch(setCurrentDeviceFromId(deviceId === "#" ? undefined : deviceId))
-            }
-          />
-        </InputGroup>
-      </SidebarBlock>
-    </Tab>
+    <SidebarBlock title="Capture">
+      <InputGroup>
+        <InputLabel inputId="camera-source-select">Camera Source</InputLabel>
+        <InputSelect
+          id="camera-source-select"
+          options={buildCameraSourceOptions()}
+          value={deviceStatus?.identifier?.deviceId ?? "#"}
+          onChange={(deviceId) =>
+            dispatch(setCurrentDeviceFromId(deviceId === "#" ? undefined : deviceId))
+          }
+        />
+      </InputGroup>
+    </SidebarBlock>
   );
 };
 
-export default CaptureTab;
+export default CaptureSidebarBlock;
diff --git a/src/renderer/components/animator/MediaTab/MediaTab.tsx b/src/renderer/components/animator/MediaTab/MediaTab.tsx
diff --git a/src/renderer/components/animator/StatusToolbar/StatusToolbar.css b/src/renderer/components/animator/StatusToolbar/StatusToolbar.css
@@ -0,0 +1,3 @@
+.status-toolbar {
+  justify-content: center;
+}
diff --git a/src/renderer/components/animator/StatusToolbar/StatusToolbar.tsx b/src/renderer/components/animator/StatusToolbar/StatusToolbar.tsx
@@ -1,13 +1,10 @@
 import { TimelineIndex } from "../../../../common/Flavors";
-import { PageRoute } from "../../../../common/PageRoute";
 import { Take } from "../../../../common/project/Take";
-import { zeroPad } from "../../../../common/utils";
 import PlaybackContext from "../../../context/PlaybackContext/PlaybackContext";
 import { getTrackLength } from "../../../services/project/projectCalculator";
-import Button from "../../common/Button/Button";
-import { ButtonColor } from "../../common/Button/ButtonColor";
 import Toolbar from "../../common/Toolbar/Toolbar";
 import ToolbarItem, { ToolbarItemAlign } from "../../common/ToolbarItem/ToolbarItem";
+import "./StatusToolbar.css";
 
 interface StatusToolbarWithContextProps {
   take: Take;
@@ -17,34 +14,21 @@ interface StatusToolbarProps extends StatusToolbarWithContextProps {
   timelineIndex: TimelineIndex | undefined;
 }
 
-const StatusToolbar = ({ take, timelineIndex }: StatusToolbarProps): JSX.Element => {
-  const makeTakeTitle = (take: Take) =>
-    `Shot ${zeroPad(take.shotNumber, 3)} Take ${zeroPad(take.takeNumber, 2)}`;
-
-  return (
-    <Toolbar>
-      <ToolbarItem stretch align={ToolbarItemAlign.LEFT}>
-        <Button
-          title={makeTakeTitle(take)}
-          onClick={PageRoute.STARTUP_MODAL}
-          color={ButtonColor.TRANSPARENT}
-        />
-      </ToolbarItem>
-      <ToolbarItem align={ToolbarItemAlign.CENTER}>
+const StatusToolbar = ({ take, timelineIndex }: StatusToolbarProps): JSX.Element => (
+  <Toolbar className="status-toolbar">
+    <ToolbarItem align={ToolbarItemAlign.CENTER}>
+      <div>
         Frame{" "}
         {timelineIndex === undefined ? getTrackLength(take.frameTrack) + 1 : timelineIndex + 1} of{" "}
         {getTrackLength(take.frameTrack)}
-      </ToolbarItem>
-      <ToolbarItem stretch align={ToolbarItemAlign.RIGHT}>
-        {take.frameRate} FPS
-      </ToolbarItem>
-    </Toolbar>
-  );
-};
+      </div>
+    </ToolbarItem>
+  </Toolbar>
+);
 
 const StatusToolbarWithContext = (props: StatusToolbarWithContextProps) => (
   <PlaybackContext.Consumer>
-    {(value) => <StatusToolbar {...value} {...props} />}
+    {(value) => <StatusToolbar timelineIndex={value.timelineIndex} {...props} />}
   </PlaybackContext.Consumer>
 );
 

diff --git a/src/renderer/components/animator/TitleToolbar/TitleToolbar.css b/src/renderer/components/animator/TitleToolbar/TitleToolbar.css
@@ -0,0 +1,3 @@
+.title-toolbar {
+  background-color: var(--ba-black);
+}
diff --git a/src/renderer/components/animator/TitleToolbar/TitleToolbar.tsx b/src/renderer/components/animator/TitleToolbar/TitleToolbar.tsx
@@ -0,0 +1,51 @@
+import { PageRoute } from "../../../../common/PageRoute";
+import { Take } from "../../../../common/project/Take";
+import { zeroPad } from "../../../../common/utils";
+import { getTrackLength } from "../../../services/project/projectCalculator";
+import Button from "../../common/Button/Button";
+import { ButtonColor } from "../../common/Button/ButtonColor";
+import IconName from "../../common/Icon/IconName";
+import IconButton from "../../common/IconButton/IconButton";
+import Toolbar from "../../common/Toolbar/Toolbar";
+import ToolbarItem, { ToolbarItemAlign } from "../../common/ToolbarItem/ToolbarItem";
+import "./TitleToolbar.css";
+
+interface TitleToolbarProps {
+  take: Take;
+}
+
+const TitleToolbar = ({ take }: TitleToolbarProps): JSX.Element => {
+  const makeTakeTitle = (take: Take) =>
+    `Shot ${zeroPad(take.shotNumber, 3)} Take ${zeroPad(take.takeNumber, 2)}`;
+
+  return (
+    <Toolbar className="title-toolbar">
+      <ToolbarItem stretch align={ToolbarItemAlign.LEFT}>
+        <Button
+          label={makeTakeTitle(take)}
+          title="Manage project"
+          onClick={PageRoute.STARTUP_MODAL}
+          color={ButtonColor.TRANSPARENT}
+        />
+      </ToolbarItem>
+      <ToolbarItem align={ToolbarItemAlign.CENTER}>Untitled Project </ToolbarItem>
+      <ToolbarItem stretch align={ToolbarItemAlign.RIGHT}>
+        <IconButton
+          title="Render current take as a video file"
+          onClick={PageRoute.EXPORT_VIDEO_MODAL}
+          icon={IconName.VIDEO}
+          disabled={getTrackLength(take.frameTrack) === 0}
+          color={ButtonColor.TRANSPARENT}
+        />
+        <IconButton
+          title="Preferences"
+          onClick={PageRoute.PREFERENCES_MODAL}
+          icon={IconName.SETTINGS}
+          color={ButtonColor.TRANSPARENT}
+        />
+      </ToolbarItem>
+    </Toolbar>
+  );
+};
+
+export default TitleToolbar;
diff --git a/src/renderer/components/common/Button/Button.css b/src/renderer/components/common/Button/Button.css
@@ -73,3 +73,10 @@
 .button--disabled:active {
   background-color: var(--ba-border-active);
 }
+
+.button--color-transparent.button--disabled,
+.button--disabled:hover.button--disabled,
+.button--disabled:active.button--disabled {
+  background-color: transparent;
+  color: var(--ba-dark-active);
+}
diff --git a/src/renderer/components/common/SidebarBlock/SidebarBlock.tsx b/src/renderer/components/common/SidebarBlock/SidebarBlock.tsx
@@ -6,7 +6,7 @@ import "./SidebarBlock.css";
 
 interface SidebarBlockProps {
   title: string;
-  titleIcon: IconName;
+  titleIcon?: IconName;
   flex?: boolean;
   children: ReactNode;
 }
@@ -15,7 +15,7 @@ const SidebarBlock = ({ title, titleIcon, flex, children }: SidebarBlockProps):
   return (
     <div className={classNames("sidebar-block", { "sidebar-block--flex": flex })}>
       <h2 className="sidebar-block__title">
-        <Icon name={titleIcon} className="sidebar-block__title-icon" />
+        {titleIcon !== undefined && <Icon name={titleIcon} className="sidebar-block__title-icon" />}
         {title}
       </h2>
       {children}

diff --git a/src/renderer/components/common/ToolbarItem/ToolbarItem.css b/src/renderer/components/common/ToolbarItem/ToolbarItem.css
@@ -1,5 +1,6 @@
 .toolbar-item {
   display: flex;
+  column-gap: var(--margin-050);
 }
 
 .toolbar-item--stretch {

diff --git a/src/renderer/components/modals/StartupModal/StartupModal.tsx b/src/renderer/components/modals/StartupModal/StartupModal.tsx
@@ -52,13 +52,11 @@ const StartupModal = (): JSX.Element => {
         <Page>
           <PageBody>
             <Content>
-              <ContentBlock title="Projects" titleIcon={IconName.PROJECTS}>
-                Hi
-              </ContentBlock>
+              <ContentBlock title="Projects">Hi</ContentBlock>
             </Content>
 
             <Sidebar>
-              <SidebarBlock title="Connect" titleIcon={IconName.CONNECT}>
+              <SidebarBlock title="Connect">
                 <NewsFeed />
               </SidebarBlock>
             </Sidebar>