Merge pull request #406 from charlielee/issue-397

Preview area UI tweaks
charlielee · Aug 12, 2022 · 64e78de · 64e78de
2 parents d8ccb7f + 12c21c3
commit 64e78de
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 61 deletions.
diff --git a/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.css b/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.css
@@ -3,14 +3,10 @@
 }
 
 .animation-toolbar #animation-toolbar__onion-skin-range {
-  margin-left: var(--margin-100);
-  width: 12rem;
+  margin: 0 var(--margin-050);
+  width: 6rem;
 }
 
 .animation-toolbar__capture-button .button__icon-container {
   font-size: var(--height-300);
 }
-
-.animation-toolbar__play-last-button {
-  margin-right: var(--margin-100);
-}
diff --git a/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.tsx b/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.tsx
@@ -1,7 +1,4 @@
 import { useState } from "react";
-import { useDispatch } from "react-redux";
-import { takePhoto } from "../../../redux/capture/actions";
-import ButtonGroup from "../../common/ButtonGroup/ButtonGroup";
 import IconName from "../../common/Icon/IconName";
 import IconButton from "../../common/IconButton/IconButton";
 import InputRange from "../../common/Input/InputRange/InputRange";
@@ -12,42 +9,34 @@ import ToolbarItem, {
 import "./AnimationToolbar.css";
 
 const AnimationToolbar = (): JSX.Element => {
-  const dispatch = useDispatch();
   const [onionSkinAmount, setOnionSkinAmount] = useState(0);
   const [loopPlayback, setLoopPlayback] = useState(false);
-  const [shortPlay, setShortPlay] = useState(false);
 
   return (
-    <Toolbar borderTop className="animation-toolbar">
+    <Toolbar className="animation-toolbar">
       <ToolbarItem stretch align={ToolbarItemAlign.LEFT}>
-        <ButtonGroup>
-          <IconButton
-            title="Undo Last Frame"
-            icon={IconName.UNDO}
-            onClick={() => undefined}
-          />
-          <InputRange
-            id="animation-toolbar__onion-skin-range"
-            title={`Onion Skin ${onionSkinAmount}%`}
-            onChange={setOnionSkinAmount}
-            min={-100}
-            max={100}
-            step={2}
-            value={onionSkinAmount}
-          />
-        </ButtonGroup>
-      </ToolbarItem>
-
-      <ToolbarItem align={ToolbarItemAlign.CENTER}>
         <IconButton
-          title="Capture Frame"
-          icon={IconName.CAPTURE}
-          className="animation-toolbar__capture-button"
-          onClick={() => dispatch(takePhoto())}
+          title="Undo Last Frame"
+          icon={IconName.UNDO}
+          onClick={() => undefined}
+        />
+        <IconButton
+          title="Short Play"
+          icon={IconName.PLAY_SHORT}
+          onClick={() => undefined}
+        />
+        <InputRange
+          id="animation-toolbar__onion-skin-range"
+          title={`Onion Skin ${onionSkinAmount}%`}
+          onChange={setOnionSkinAmount}
+          min={-100}
+          max={100}
+          step={2}
+          value={onionSkinAmount}
         />
       </ToolbarItem>
 
-      <ToolbarItem stretch align={ToolbarItemAlign.RIGHT}>
+      <ToolbarItem align={ToolbarItemAlign.CENTER}>
         <IconButton
           title="First Frame"
           icon={IconName.PLAY_FIRST}
@@ -58,6 +47,7 @@ const AnimationToolbar = (): JSX.Element => {
           icon={IconName.PLAY_PREVIOUS}
           onClick={() => undefined}
         />
+
         <IconButton
           title="Playback Frames"
           icon={IconName.PLAY}
@@ -77,20 +67,16 @@ const AnimationToolbar = (): JSX.Element => {
           title="Last Frame"
           icon={IconName.PLAY_LAST}
           onClick={() => undefined}
-          className="animation-toolbar__play-last-button"
         />
+      </ToolbarItem>
+
+      <ToolbarItem stretch align={ToolbarItemAlign.RIGHT}>
         <IconButton
           title={`${loopPlayback ? "Disable" : "Enable"} Loop Playback`}
           icon={IconName.PLAY_LOOP}
           onClick={() => setLoopPlayback((prevState) => !prevState)}
           active={loopPlayback}
         />
-        <IconButton
-          title={`${shortPlay ? "Disable" : "Enable"} Short Play`}
-          icon={IconName.PLAY_SHORT}
-          onClick={() => setShortPlay((prevState) => !prevState)}
-          active={shortPlay}
-        />
       </ToolbarItem>
     </Toolbar>
   );

diff --git a/src/renderer/components/animator/Animator/Animator.tsx b/src/renderer/components/animator/Animator/Animator.tsx
@@ -8,6 +8,7 @@ import SidebarBlock from "../../common/SidebarBlock/SidebarBlock";
 import Tab from "../../common/Tab/Tab";
 import TabGroup from "../../common/TabGroup/TabGroup";
 import AnimationToolbar from "../AnimationToolbar/AnimationToolbar";
+import CaptureButtonToolbar from "../CaptureButtonToolbar/CaptureButtonToolbar";
 import CaptureTab from "../CaptureTab/CaptureTab";
 import MediaTab from "../MediaTab/MediaTab";
 import Preview from "../Preview/Preview";
@@ -24,11 +25,9 @@ const Animator = ({ take }: AnimatorProps): JSX.Element => {
       <PageBody>
         <Content>
           <StatusToolbar take={take} />
-
           <Preview />
-
+          <CaptureButtonToolbar />
           <AnimationToolbar />
-
           <Timeline take={take} />
         </Content>
 

diff --git a/src/renderer/components/animator/CaptureButtonToolbar/CaptureButtonToolbar.css b/src/renderer/components/animator/CaptureButtonToolbar/CaptureButtonToolbar.css
@@ -0,0 +1,5 @@
+.capture-button-toolbar {
+  justify-content: center;
+  padding-bottom: 0;
+  height: var(--height-300);
+}
diff --git a/src/renderer/components/animator/CaptureButtonToolbar/CaptureButtonToolbar.tsx b/src/renderer/components/animator/CaptureButtonToolbar/CaptureButtonToolbar.tsx
@@ -0,0 +1,28 @@
+import { useDispatch } from "react-redux";
+import { takePhoto } from "../../../redux/capture/actions";
+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 "./CaptureButtonToolbar.css";
+
+const CaptureButtonToolbar = (): JSX.Element => {
+  const dispatch = useDispatch();
+
+  return (
+    <Toolbar className="capture-button-toolbar">
+      <ToolbarItem align={ToolbarItemAlign.CENTER}>
+        <IconButton
+          title="Capture Frame"
+          icon={IconName.CAPTURE}
+          className="animation-toolbar__capture-button"
+          onClick={() => dispatch(takePhoto())}
+        />
+      </ToolbarItem>
+    </Toolbar>
+  );
+};
+
+export default CaptureButtonToolbar;
diff --git a/src/renderer/components/animator/Preview/Preview.css b/src/renderer/components/animator/Preview/Preview.css
@@ -1,13 +1,8 @@
 .preview {
   align-items: center;
-  background-color: var(--ba-black);
-  border: var(--ba-border-2) solid transparent;
   display: flex;
   flex: 1;
   justify-content: center;
   position: relative;
-}
-
-.preview--active {
-  border: var(--border-2) solid var(--ba-red);
+  margin: var(--margin-100);
 }
diff --git a/src/renderer/components/animator/Preview/Preview.tsx b/src/renderer/components/animator/Preview/Preview.tsx
@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
 import { attachStreamToVideo } from "../../../redux/capture/actions";
 import { RootState } from "../../../redux/store";
@@ -12,7 +11,7 @@ const Preview = (): JSX.Element => {
   );
 
   return (
-    <div className={classNames("preview", { "preview--active": isDeviceOpen })}>
+    <div className="preview">
       {currentDevice && hasCameraAccess && (
         <PreviewLiveView
           streaming={isDeviceOpen}

diff --git a/src/renderer/components/animator/StatusToolbar/StatusToolbar.tsx b/src/renderer/components/animator/StatusToolbar/StatusToolbar.tsx
@@ -17,7 +17,7 @@ const StatusToolbar = ({ take }: StatusToolbarProps): JSX.Element => {
     `Shot ${zeroPad(take.shotNumber, 3)} Take ${zeroPad(take.takeNumber, 2)}`;
 
   return (
-    <Toolbar borderBottom>
+    <Toolbar>
       <ToolbarItem stretch align={ToolbarItemAlign.LEFT}>
         <Button
           title={makeTakeTitle(take)}

diff --git a/src/renderer/components/common/Icon/Icon.tsx b/src/renderer/components/common/Icon/Icon.tsx
@@ -7,7 +7,6 @@ import {
   IoCaretUpCircleOutline,
   IoCheckmarkCircleOutline,
   IoCloseOutline,
-  IoCodeWorkingOutline,
   IoDocumentOutline,
   IoDownload,
   IoEllipse,
@@ -21,6 +20,7 @@ import {
   IoNewspaperOutline,
   IoPauseOutline,
   IoPlayBackOutline,
+  IoPlayCircleOutline,
   IoPlayForwardOutline,
   IoPlayOutline,
   IoPlaySkipBackOutline,
@@ -105,7 +105,7 @@ const getIconByName = (
     case IconName.PLAY_LOOP:
       return <IoSyncOutline {...props} />;
     case IconName.PLAY_SHORT:
-      return <IoCodeWorkingOutline {...props} />;
+      return <IoPlayCircleOutline {...props} />;
     case IconName.PROJECTS:
       return <IoFileTrayStackedOutline {...props} />;
     case IconName.SETTINGS:

diff --git a/src/renderer/components/common/IconButton/IconButton.css b/src/renderer/components/common/IconButton/IconButton.css
@@ -1,5 +1,5 @@
 .icon-button {
-  padding: var(--margin-050);
+  padding: var(--margin-050) var(--margin-025);
 }
 
 .icon-button__icon-container {

diff --git a/src/renderer/components/common/Input/InputRange/InputRange.css b/src/renderer/components/common/Input/InputRange/InputRange.css
@@ -32,8 +32,8 @@
 .input-range__container input[type="range"]::-webkit-slider-thumb {
   background-color: var(--ba-lightred);
   border-radius: 0.5rem;
-  height: 2rem;
-  margin-top: -0.75rem;
+  height: 1.25rem;
+  margin-top: -0.375rem;
   width: 0.5rem;
 }
 .input-range__container input[type="range"]::-webkit-slider-thumb:hover {

diff --git a/src/renderer/styles/theme.css b/src/renderer/styles/theme.css
@@ -47,7 +47,6 @@ h3 {
 }
 
 h2 {
-  color: var(--ba-white);
   font-size: 1.4rem;
 }