Add toggle modes

code-slide · Apr 17, 2024 · a51f3a3 · a51f3a3
1 parent b197115
commit a51f3a3
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codeslide.net",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.8.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -25,6 +25,7 @@ export const App = () => {
     const selectedItem = useStore(getSelectedShape);
     const selectedSet = useStore(getSelectedItems);
     const sidebarWidth = useStore(s => s.ui.sidebarSize);
+    const footerHeight = useStore(s => s.ui.footerSize);
     const applicationMode = useStore(s => s.ui.selectedMode);
 
     const margin = {
@@ -85,7 +86,9 @@ export const App = () => {
                                         <ShapeView />
                                     </Layout.Sider>
 
-                                    <EditorView spacing={vogues.common.editorMargin} />
+                                    <Layout.Content >
+                                        <EditorView spacing={vogues.common.editorMargin} />
+                                    </Layout.Content>
                                 </Layout>
 
                                 <Layout.Sider 
@@ -97,7 +100,7 @@ export const App = () => {
                             </Layout>
                         </Layout>
 
-                        <Layout.Footer style={{ padding: 0 }} >
+                        <Layout.Footer style={{ padding: 0, display: footerHeight == 0 ? 'none' : '' }} >
                             <PagesView prevWidth={vogues.common.previewWidth} prevHeight={vogues.common.previewHeight} />
                         </Layout.Footer>
                     </Layout>

diff --git a/src/const/vogues.ts b/src/const/vogues.ts
@@ -12,6 +12,7 @@ export const vogues = {
     common: {
         canvasWidth: 1280,
         canvasHeight: 720,
+        close: 0,
         dragSize: 12,
         editorMargin: 13,
         editorPad: 10,
@@ -23,7 +24,6 @@ export const vogues = {
         maxImgSize: 300,
         shapeWidth: 38,
         sidebarCode: 600,
-        sidebarClose: 0,
         sidebarShape: 38,
         selectionThickness: 1,
         previewWidth: 128,
@@ -40,6 +40,7 @@ export const vogues = {
         selectionLock: '#f00',
         selectionStroke: '#080',
         transparent: 'rgba(0, 0, 0, 0)',
+        white: '#fff',
     },
     option: {
         strokeThickness: [0, 1, 2, 3, 4, 6, 8, 10],

diff --git a/src/icons/icon.tsx b/src/icons/icon.tsx
@@ -164,6 +164,10 @@ export const TriangleIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" height={vogues.common.iconDefault} viewBox="0 -960 960 960" width={vogues.common.iconLarge}><path d="m96-192 384-576 384 576H96Zm134-72h500L480-638 230-264Zm250-187Z" /></svg>
 );
 
+export const PageIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height={vogues.common.iconSmall} viewBox="0 -960 960 960" width={vogues.common.iconSmall}><path d="M480-164.157 152.31-418.771l49.076-37.691L480-240.771l278.614-215.691 49.076 37.691L480-164.157Zm0-177.383L152.31-596.154 480-850.767l327.69 254.613L480-341.54Zm0-254.614Zm0 178 230-178-230-178-230 178 230 178Z"/></svg>
+)
+
 export const ParagraphIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" height={vogues.common.iconSmall} viewBox="0 -960 960 960" width={vogues.common.iconLarge}><path d="m171-288 144-384h69l144 384h-66l-34-98H273l-35 98h-67Zm121-154h115l-56-159h-3l-56 159Zm358 164q-47 0-73.5-24.5T550-370q0-41 30.5-66t80.5-25q21 0 42 4t32 10v-14q0-24-19-40t-48-16q-21 0-37.5 8.5T600-483l-41-32q17-25 46.5-38.5T670-567q58 0 90 28.5t32 81.5v169h-57v-31h-3q-16 21-35.5 31T650-278Zm10-50q32 0 53-21.5t21-52.5q-14-8-29.5-12t-32.5-4q-29 0-46 13t-17 34q0 20 14 31.5t37 11.5Z" /></svg>
 );

diff --git a/src/style/_common.scss b/src/style/_common.scss
@@ -342,8 +342,10 @@ header {
 
     &-segment {
         gap: 3px;
-        border-radius: 14px;
+        border-radius: 20px;
         padding: 3px 4px;
+        display: inline-flex;
+        background-color: $color-background;
     }
 }
 

diff --git a/src/wireframes/components/AnimationView.tsx b/src/wireframes/components/AnimationView.tsx
@@ -21,14 +21,19 @@ export const AnimationView = () => {
     const dispatch = useDispatch();
     const diagram = useStore(getDiagram);
     const animation = useStore(s => s.ui.selectedAnimation);
+    const isFooter = useStore(s => s.ui.footerSize) == vogues.common.previewHeight ? 1 : 0;
 
-    const viewPadd = vogues.common.editorMargin * 2 + 10 * 3 + vogues.common.headerHeight + vogues.common.shapeWidth + (vogues.common.previewHeight + vogues.common.editorMargin + vogues.common.previewPadBot) + vogues.common.selectionThickness * 4;
+    const viewPadd = vogues.common.editorMargin * 2 + 10 * 3 + vogues.common.headerHeight + vogues.common.shapeWidth + isFooter *  (vogues.common.previewHeight + vogues.common.editorMargin + vogues.common.previewPadBot) + vogues.common.selectionThickness * 4;
     const [viewHeight, setViewHeight] = useState(window.innerHeight - viewPadd);
 
     useEffect(() => {
         window.addEventListener('resize', () => setViewHeight(window.innerHeight - viewPadd));
     }, []);
 
+    useEffect(() => {
+        setViewHeight(window.innerHeight - viewPadd);
+    }, [isFooter]);
+
     if (!diagram) {
         return null;
     }

diff --git a/src/wireframes/components/headers/ModeHeader.tsx b/src/wireframes/components/headers/ModeHeader.tsx
@@ -6,37 +6,56 @@
  * Copyright (c) Do Duc Quan. All rights reserved.
 */
 
-import { Segmented } from "antd";
+import { Button, Tooltip } from "antd";
 import * as React from "react";
-import { setMode, setSidebarSize } from "@app/wireframes/model";
-import { AnimationIcon, DesignIcon, IconOutline } from "@app/icons/icon";
+import { setFooterSize, setMode, setSidebarSize, useStore } from "@app/wireframes/model";
+import { AnimationIcon, PageIcon, IconOutline } from "@app/icons/icon";
 import { useDispatch } from "react-redux";
-import { SegmentedValue } from "antd/es/segmented";
 import { vogues } from "@app/const";
 
 export const ModeHeader = React.memo(() => {
     const dispatch = useDispatch();
+    const isAnimationOn = useStore(s => s.ui.sidebarSize) !== vogues.common.close;
+    const isPageOn = useStore(s => s.ui.footerSize) !== vogues.common.close;
 
-    const modeMenu = [
-        { value: 'design', icon: <IconOutline icon={DesignIcon} /> },
-        { value: 'animation', icon: <IconOutline icon={AnimationIcon} /> },
-    ];
+    const togglePagePanel = () => {
+        if (isPageOn) {
+            dispatch(setFooterSize(vogues.common.close));
+        } else {
+            dispatch(setFooterSize(vogues.common.previewHeight));
+        }
+    }
 
-    const modeMenuEvt = (key: SegmentedValue) => {
-        if (key == 'design') {
-            dispatch(setSidebarSize(vogues.common.sidebarClose));
+    const toggleAnimationPanel = () => {
+        if (isAnimationOn) {
+            dispatch(setSidebarSize(vogues.common.close));
             dispatch(setMode('design'));
         } else {
             dispatch(setSidebarSize(vogues.common.sidebarCode));
             dispatch(setMode('animation'));
         }
-    };
+    }
 
     return (
-        <Segmented 
-            className='menu-segment'
-            options={modeMenu}
-            onChange={(value) => modeMenuEvt(value)}
-        />
+        <>
+            <div className="menu-segment">
+                <Tooltip title={`${isPageOn ? 'Hide' : 'Show'} Pages Panel`} >
+                    <Button
+                        type="text" shape="circle"
+                        icon={<IconOutline icon={PageIcon} />}
+                        style={{ backgroundColor: isPageOn ? vogues.color.white : ''}}
+                        onClick={togglePagePanel}
+                    />
+                </Tooltip>
+                <Tooltip title={`Open ${isAnimationOn ? 'Animation' : 'Design'} Mode`}>
+                    <Button
+                        type="text" shape="circle"
+                        icon={<IconOutline icon={AnimationIcon} />}
+                        style={{ backgroundColor: isAnimationOn ? vogues.color.white : ''}}
+                        onClick={toggleAnimationPanel}
+                    />
+                </Tooltip>
+            </div>
+        </>
     )
 });
diff --git a/src/wireframes/components/tools/ZoomTool.tsx b/src/wireframes/components/tools/ZoomTool.tsx
@@ -18,22 +18,23 @@ import type { MenuProps } from 'antd';
 export const ZoomTool = React.memo(() => {
     const dispatch = useDispatch();
     const editorSize = useStore(getEditor).size;
-    const sidebarSize = useStore(s => s.ui.sidebarSize);
+    const sidebarWidth = useStore(s => s.ui.sidebarSize);
+    const isFooter = useStore(s => s.ui.footerSize) == vogues.common.previewHeight ? 1 : 0;
     const [zoomValue, setZoomValue] = useState('Fit');
 
     const zoomPad = {
-        vertical: vogues.common.editorMargin * 2 + vogues.common.editorPad  * 3 + vogues.common.headerHeight + vogues.common.shapeWidth + (vogues.common.previewHeight + vogues.common.editorMargin + vogues.common.previewPadBot) + vogues.common.selectionThickness * 4,
-        horizontal: vogues.common.editorMargin * 4 + vogues.common.editorPad * 2 + vogues.common.sidebarShape + vogues.common.selectionThickness * 4,
+        vertical: vogues.common.editorMargin * 2 + vogues.common.editorPad  * 3 + vogues.common.headerHeight + vogues.common.shapeWidth + isFooter * (vogues.common.previewHeight + vogues.common.editorMargin + vogues.common.previewPadBot) + vogues.common.selectionThickness * 4,
+        horizontal: vogues.common.editorMargin * 4 + vogues.common.editorPad * 3 + vogues.common.sidebarShape + vogues.common.selectionThickness * 4,
     }
-    const [areaSize, setAreaSize] = useState(new Vec2(window.innerWidth - zoomPad.horizontal - sidebarSize, window.innerHeight - zoomPad.vertical));
+    const [areaSize, setAreaSize] = useState(new Vec2(window.innerWidth - zoomPad.horizontal - sidebarWidth, window.innerHeight - zoomPad.vertical));
 
     const isZoom = (key: string) => {
         setZoomValue(key);
         dispatch(setZoom(getZoomValue(key)));
     };
 
     const getWindowSize = () => {
-        setAreaSize(new Vec2(window.innerWidth - zoomPad.horizontal - sidebarSize, window.innerHeight - zoomPad.vertical));
+        setAreaSize(new Vec2(window.innerWidth - zoomPad.horizontal - sidebarWidth, window.innerHeight - zoomPad.vertical));
     }
 
     // Get area size value on resizing window
@@ -54,8 +55,7 @@ export const ZoomTool = React.memo(() => {
             getWindowSize();
             isZoom(zoomValue);
         }
-
-    }, [sidebarSize, editorSize]);
+    }, [isFooter, sidebarWidth, editorSize]);
 
     const getZoomValue = (value: string) => {
         switch (value) {

diff --git a/src/wireframes/model/actions/ui.ts b/src/wireframes/model/actions/ui.ts
@@ -33,6 +33,11 @@ export const setSidebarSize =
         return { payload: { size } };
     });    
 
+export const setFooterSize =
+    createAction('ui/footerSize', (size: number) => {
+        return { payload: { size } };
+    });    
+
 export const setMode =
     createAction('ui/mode', (mode: ModeType) => {
         return { payload: { mode } };
@@ -75,6 +80,9 @@ export function ui(initialState: UIState): Reducer<UIState> {
         .addCase(setSidebarSize, (state, action) => {
             state.sidebarSize = action.payload.size;
         })
+        .addCase(setFooterSize, (state, action) => {
+            state.footerSize = action.payload.size;
+        })
         .addCase(setMode, (state, action) => {
             state.selectedMode = action.payload.mode;
         })

diff --git a/src/wireframes/model/ui-state.ts b/src/wireframes/model/ui-state.ts
@@ -19,9 +19,12 @@ export interface UIState {
     // The info toast from any loading operation.
     infoToast?: string;
 
-    // The size for right sidebar
+    // The size for right sidebar.
     sidebarSize: number;
 
+    // The size for pages section.
+    footerSize: number;
+
     // The mode for the application.
     selectedMode: ModeType;
 
@@ -41,10 +44,11 @@ export interface UIStateInStore {
 
 export const createInitialUIState: () => UIState = () => {
     return {
+        footerSize: vogues.common.previewHeight,
         zoom: 1,
         selectedColor: 'palette',
         selectedMode: 'design',
         selectedAnimation: 'script',
-        sidebarSize: vogues.common.sidebarClose,
+        sidebarSize: vogues.common.close,
     };
 };