From 512bc107a88a636e5cc13ff8ccd92d1384465cc8 Mon Sep 17 00:00:00 2001 From: Shuyuan He Date: Fri, 6 Oct 2023 16:34:40 +1100 Subject: [PATCH 1/6] feat(controlBar): update new design of start/pause and stop buttons --- src/components/ControlBar.tsx | 143 +++++++++++++++++++++------------- 1 file changed, 89 insertions(+), 54 deletions(-) diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx index 7695947..3f63387 100644 --- a/src/components/ControlBar.tsx +++ b/src/components/ControlBar.tsx @@ -1,14 +1,23 @@ import { Button, Space } from 'antd'; import styled from 'styled-components'; import { type ModelSave } from '../services/model/modelService'; -import { useEffect, useRef, type ChangeEvent } from 'react'; +import type React from 'react'; +import {useEffect, useRef, type ChangeEvent, useState} from 'react'; +import { CaretRightOutlined, PauseOutlined, } from '@ant-design/icons'; export const ControlBarContainer = styled(Space)` position: absolute; - bottom: 1rem; - right: 1rem; + bottom: 4rem; + right: 30rem; z-index: 100; display: flex; + gap: 1.8rem; + background-color: #C5C5C5; + padding-top: 0.5rem; + padding-right: 1.8rem; + padding-bottom: 0.5rem; + padding-left: 1.8rem; + border-radius: 25px; `; export const SaveBtn = styled(Button)` @@ -41,6 +50,35 @@ export const RestoreBtn = styled(Button)` } `; +export const ControlBarBtn = styled(Button)` + shape: circle; + border: none; + cursor: pointer; + outline: none; + height: 2rem; + width: 2rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background-color: #909090; + font-size: 1rem; +`; + +export const ControlBarBtnWithAttr = styled(ControlBarBtn)` + &[data-icon="square"]::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 40%; + height: 40%; + background-color: white; + transform: translate(-50%, -50%); + } +`; + + interface ControlBarProps { modelSaveSubs: Array<(save: ModelSave) => void>; worker: Worker; @@ -95,59 +133,56 @@ export default function ControlBar(props: ControlBarProps): React.ReactElement { load(e.target.files![0]); }; + const [isPlaying, setIsPlaying] = useState(true); + const handleIconClick = (): void => { + if (isPlaying) { + worker.postMessage({ func: 'pause' }); + } else { + worker.postMessage({ func: 'start' }); + } + setIsPlaying(!isPlaying); + + }; + + return ( - <> - - { - worker.postMessage({ func: 'serialize' }); - }} - > - Save Model - - { - inputFile.current?.click(); - }} - > - Restore Model - - - - - - - - + Restore Model + + + + {isPlaying ? + : + } + + { + worker.postMessage({ func: 'stop' }); + }} + /> + + ); + } From 7b648d90b7064fb197c00da1e5e8f22802308030 Mon Sep 17 00:00:00 2001 From: Shuyuan He Date: Fri, 6 Oct 2023 16:48:35 +1100 Subject: [PATCH 2/6] fix(controlBar): set ControlBarContainer horizontally in the middle of the page --- src/components/ControlBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx index 3f63387..c83c85f 100644 --- a/src/components/ControlBar.tsx +++ b/src/components/ControlBar.tsx @@ -8,7 +8,7 @@ import { CaretRightOutlined, PauseOutlined, } from '@ant-design/icons'; export const ControlBarContainer = styled(Space)` position: absolute; bottom: 4rem; - right: 30rem; + right: 40%; z-index: 100; display: flex; gap: 1.8rem; From 47a28d4a4e887c4057858806f1f6263ab05ed90f Mon Sep 17 00:00:00 2001 From: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> Date: Wed, 11 Oct 2023 10:21:27 +1100 Subject: [PATCH 3/6] style: run prettier Signed-off-by: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> --- src/components/ControlBar.tsx | 109 +++++++++++++++++----------------- 1 file changed, 56 insertions(+), 53 deletions(-) diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx index c83c85f..51701f9 100644 --- a/src/components/ControlBar.tsx +++ b/src/components/ControlBar.tsx @@ -2,8 +2,8 @@ import { Button, Space } from 'antd'; import styled from 'styled-components'; import { type ModelSave } from '../services/model/modelService'; import type React from 'react'; -import {useEffect, useRef, type ChangeEvent, useState} from 'react'; -import { CaretRightOutlined, PauseOutlined, } from '@ant-design/icons'; +import { useEffect, useRef, type ChangeEvent, useState } from 'react'; +import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons'; export const ControlBarContainer = styled(Space)` position: absolute; @@ -12,7 +12,7 @@ export const ControlBarContainer = styled(Space)` z-index: 100; display: flex; gap: 1.8rem; - background-color: #C5C5C5; + background-color: #c5c5c5; padding-top: 0.5rem; padding-right: 1.8rem; padding-bottom: 0.5rem; @@ -66,19 +66,18 @@ export const ControlBarBtn = styled(Button)` `; export const ControlBarBtnWithAttr = styled(ControlBarBtn)` - &[data-icon="square"]::after { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 40%; - height: 40%; - background-color: white; - transform: translate(-50%, -50%); - } + &[data-icon='square']::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 40%; + height: 40%; + background-color: white; + transform: translate(-50%, -50%); + } `; - interface ControlBarProps { modelSaveSubs: Array<(save: ModelSave) => void>; worker: Worker; @@ -141,48 +140,52 @@ export default function ControlBar(props: ControlBarProps): React.ReactElement { worker.postMessage({ func: 'start' }); } setIsPlaying(!isPlaying); - }; - return ( - <> - - { - worker.postMessage({func: 'serialize'}); - }} - > - Save Model - - { - inputFile.current?.click(); - }} - > - Restore Model - - - - {isPlaying ? - : - } - - { - worker.postMessage({ func: 'stop' }); - }} + <> + + { + worker.postMessage({ func: 'serialize' }); + }} + > + Save Model + + { + inputFile.current?.click(); + }} + > + Restore Model + + + + {isPlaying ? ( + + ) : ( + - - + )} + + { + worker.postMessage({ func: 'stop' }); + }} + /> + + ); - } From 205d68e649ece3502a44613848fa8525e94be9aa Mon Sep 17 00:00:00 2001 From: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> Date: Wed, 11 Oct 2023 10:55:04 +1100 Subject: [PATCH 4/6] fix(ControlBar): fix eslint error Signed-off-by: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> --- src/components/ControlBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx index f5c4173..8114407 100644 --- a/src/components/ControlBar.tsx +++ b/src/components/ControlBar.tsx @@ -2,7 +2,7 @@ import { Button, Space } from 'antd'; import styled from 'styled-components'; import { type ModelSave } from '../services/model/modelService'; import type React from 'react'; -import { useEffect, useRef, type ChangeEvent, useState } from 'react'; +import { useEffect, useState } from 'react'; import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons'; export const ControlBarContainer = styled(Space)` From 6c1f8d9c7a470b694dd332999a9073ef59282b52 Mon Sep 17 00:00:00 2001 From: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> Date: Wed, 11 Oct 2023 10:56:19 +1100 Subject: [PATCH 5/6] refactor(ControlBar): remove not used export Signed-off-by: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> --- src/components/ControlBar.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx index 8114407..edcb73f 100644 --- a/src/components/ControlBar.tsx +++ b/src/components/ControlBar.tsx @@ -5,7 +5,7 @@ import type React from 'react'; import { useEffect, useState } from 'react'; import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons'; -export const ControlBarContainer = styled(Space)` +const ControlBarContainer = styled(Space)` position: absolute; bottom: 4rem; right: 40%; @@ -20,7 +20,7 @@ export const ControlBarContainer = styled(Space)` border-radius: 25px; `; -export const SaveBtn = styled(Button)` +const SaveBtn = styled(Button)` position: absolute; bottom: 4rem; right: 11rem; @@ -35,7 +35,7 @@ export const SaveBtn = styled(Button)` } `; -export const RestoreBtn = styled(Button)` +const RestoreBtn = styled(Button)` position: absolute; bottom: 4rem; right: 2rem; @@ -50,7 +50,7 @@ export const RestoreBtn = styled(Button)` } `; -export const ControlBarBtn = styled(Button)` +const ControlBarBtn = styled(Button)` shape: circle; border: none; cursor: pointer; @@ -65,7 +65,7 @@ export const ControlBarBtn = styled(Button)` font-size: 1rem; `; -export const ControlBarBtnWithAttr = styled(ControlBarBtn)` +const ControlBarBtnWithAttr = styled(ControlBarBtn)` &[data-icon='square']::after { content: ''; position: absolute; @@ -119,7 +119,7 @@ export default function ControlBar(props: ControlBarProps): React.ReactElement { console.log('wrote a save to ' + filename, sav); } - + const [isPlaying, setIsPlaying] = useState(true); const handleIconClick = (): void => { if (isPlaying) { From cd355eaade156e650c80c511cbf36bd6b8d22f8a Mon Sep 17 00:00:00 2001 From: Shuyuan He Date: Sat, 14 Oct 2023 21:44:49 +1100 Subject: [PATCH 6/6] fix(controlBar): fix button overlapping --- src/components/ControlBar.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx index edcb73f..a5f9090 100644 --- a/src/components/ControlBar.tsx +++ b/src/components/ControlBar.tsx @@ -18,6 +18,9 @@ const ControlBarContainer = styled(Space)` padding-bottom: 0.5rem; padding-left: 1.8rem; border-radius: 25px; + @media (max-width: 760px) { + right: 65%; + } `; const SaveBtn = styled(Button)`