From 7b4d1c81772d947bdb006ca88a3b7aaec0727051 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 9 Oct 2021 22:16:35 +0900 Subject: [PATCH 01/20] setup structure --- packages/ui-mock-browser/README.md | 1 + packages/ui-mock-browser/browser-bar/index.tsx | 0 packages/ui-mock-browser/components/address-bar.tsx | 0 .../components/browser-navigation-bf-button.tsx | 0 .../ui-mock-browser/components/browser-tabs-indications.tsx | 0 packages/ui-mock-browser/components/refresh-button.tsx | 0 packages/ui-mock-browser/index.ts | 0 packages/ui-mock-browser/package.json | 5 +++++ 8 files changed, 6 insertions(+) create mode 100644 packages/ui-mock-browser/README.md create mode 100644 packages/ui-mock-browser/browser-bar/index.tsx create mode 100644 packages/ui-mock-browser/components/address-bar.tsx create mode 100644 packages/ui-mock-browser/components/browser-navigation-bf-button.tsx create mode 100644 packages/ui-mock-browser/components/browser-tabs-indications.tsx create mode 100644 packages/ui-mock-browser/components/refresh-button.tsx create mode 100644 packages/ui-mock-browser/index.ts create mode 100644 packages/ui-mock-browser/package.json diff --git a/packages/ui-mock-browser/README.md b/packages/ui-mock-browser/README.md new file mode 100644 index 00000000..fad3f997 --- /dev/null +++ b/packages/ui-mock-browser/README.md @@ -0,0 +1 @@ +# `@ui/mock-browser` diff --git a/packages/ui-mock-browser/browser-bar/index.tsx b/packages/ui-mock-browser/browser-bar/index.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-mock-browser/components/address-bar.tsx b/packages/ui-mock-browser/components/address-bar.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-mock-browser/components/browser-navigation-bf-button.tsx b/packages/ui-mock-browser/components/browser-navigation-bf-button.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-mock-browser/components/browser-tabs-indications.tsx b/packages/ui-mock-browser/components/browser-tabs-indications.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-mock-browser/components/refresh-button.tsx b/packages/ui-mock-browser/components/refresh-button.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-mock-browser/index.ts b/packages/ui-mock-browser/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-mock-browser/package.json b/packages/ui-mock-browser/package.json new file mode 100644 index 00000000..b84e9ac6 --- /dev/null +++ b/packages/ui-mock-browser/package.json @@ -0,0 +1,5 @@ +{ + "name": "@ui/mock-browser", + "version": "0.0.0", + "private": false +} From 6cc4ca3375afa13b6d77f9b2ec074625b8d40790 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 9 Oct 2021 22:39:59 +0900 Subject: [PATCH 02/20] update readme --- .../ui-mock-browser/.design/design-example.png | Bin 0 -> 65039 bytes packages/ui-mock-browser/README.md | 2 ++ 2 files changed, 2 insertions(+) create mode 100644 packages/ui-mock-browser/.design/design-example.png diff --git a/packages/ui-mock-browser/.design/design-example.png b/packages/ui-mock-browser/.design/design-example.png new file mode 100644 index 0000000000000000000000000000000000000000..d075e8634c2eec9ba21958de3e8f6fe9229e15cc GIT binary patch literal 65039 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 AQvd(} literal 0 HcmV?d00001 diff --git a/packages/ui-mock-browser/README.md b/packages/ui-mock-browser/README.md index fad3f997..21b3b3d0 100644 --- a/packages/ui-mock-browser/README.md +++ b/packages/ui-mock-browser/README.md @@ -1 +1,3 @@ # `@ui/mock-browser` + +![](./.design/design-example.png) From f40aa14ee776f09cfa4d78b01f971858a9f594f5 Mon Sep 17 00:00:00 2001 From: You-j Date: Sat, 9 Oct 2021 23:48:14 +0900 Subject: [PATCH 03/20] set storybook for component --- packages/ui-mock-browser/.storybook/main.js | 7 +++++++ packages/ui-mock-browser/.storybook/preview.js | 10 ++++++++++ packages/ui-mock-browser/package.json | 12 +++++++++++- 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 packages/ui-mock-browser/.storybook/main.js create mode 100644 packages/ui-mock-browser/.storybook/preview.js diff --git a/packages/ui-mock-browser/.storybook/main.js b/packages/ui-mock-browser/.storybook/main.js new file mode 100644 index 00000000..fd48b937 --- /dev/null +++ b/packages/ui-mock-browser/.storybook/main.js @@ -0,0 +1,7 @@ +module.exports = { + stories: [ + "../components/**/*.stories.mdx", + "../components/**/*.stories.@(js|jsx|ts|tsx)", + ], + addons: ["@storybook/addon-links", "@storybook/addon-essentials"], +}; diff --git a/packages/ui-mock-browser/.storybook/preview.js b/packages/ui-mock-browser/.storybook/preview.js new file mode 100644 index 00000000..645f52de --- /dev/null +++ b/packages/ui-mock-browser/.storybook/preview.js @@ -0,0 +1,10 @@ + +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +} \ No newline at end of file diff --git a/packages/ui-mock-browser/package.json b/packages/ui-mock-browser/package.json index b84e9ac6..c89cd2aa 100644 --- a/packages/ui-mock-browser/package.json +++ b/packages/ui-mock-browser/package.json @@ -1,5 +1,15 @@ { "name": "@ui/mock-browser", "version": "0.0.0", - "private": false + "private": false, + "devDependencies": { + "@storybook/addon-actions": "^6.3.8", + "@storybook/addon-essentials": "^6.3.8", + "@storybook/addon-links": "^6.3.8", + "@storybook/react": "^6.3.8" + }, + "scripts": { + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" + } } From 0868cedf2b32b24b65a65963a8c0a35d13728d9f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 10 Oct 2021 00:10:32 +0900 Subject: [PATCH 04/20] update directory names --- .../{animation => animated}/animated-check-icon.tsx | 0 .../{animation => animated}/animated-progress-bar.tsx | 0 app/lib/components/navigation/primary-workmode-select.tsx | 2 +- app/lib/components/navigation/secondary-menu-dropdown.tsx | 2 +- app/lib/components/upload-steps.tsx | 4 ++-- app/lib/main/index.tsx | 2 +- app/lib/{navigation => routing}/README.md | 0 app/lib/{navigation => routing}/index.ts | 0 app/lib/{navigation => routing}/layout-preference.ts | 0 app/lib/{navigation => routing}/navigation-store/README.md | 0 app/lib/{navigation => routing}/navigation-store/index.ts | 0 .../navigation-store/save-workmode-work.ts | 0 app/lib/{navigation => routing}/pages.ts | 0 app/lib/{navigation => routing}/primary-workmode-selector.ts | 0 .../{navigation => routing}/release-visibility-preference.ts | 0 app/lib/{navigation => routing}/router.ts | 0 app/lib/{navigation => routing}/work-mode.ts | 0 app/lib/{navigation => routing}/work-screen.ts | 0 18 files changed, 5 insertions(+), 5 deletions(-) rename app/lib/components/{animation => animated}/animated-check-icon.tsx (100%) rename app/lib/components/{animation => animated}/animated-progress-bar.tsx (100%) rename app/lib/{navigation => routing}/README.md (100%) rename app/lib/{navigation => routing}/index.ts (100%) rename app/lib/{navigation => routing}/layout-preference.ts (100%) rename app/lib/{navigation => routing}/navigation-store/README.md (100%) rename app/lib/{navigation => routing}/navigation-store/index.ts (100%) rename app/lib/{navigation => routing}/navigation-store/save-workmode-work.ts (100%) rename app/lib/{navigation => routing}/pages.ts (100%) rename app/lib/{navigation => routing}/primary-workmode-selector.ts (100%) rename app/lib/{navigation => routing}/release-visibility-preference.ts (100%) rename app/lib/{navigation => routing}/router.ts (100%) rename app/lib/{navigation => routing}/work-mode.ts (100%) rename app/lib/{navigation => routing}/work-screen.ts (100%) diff --git a/app/lib/components/animation/animated-check-icon.tsx b/app/lib/components/animated/animated-check-icon.tsx similarity index 100% rename from app/lib/components/animation/animated-check-icon.tsx rename to app/lib/components/animated/animated-check-icon.tsx diff --git a/app/lib/components/animation/animated-progress-bar.tsx b/app/lib/components/animated/animated-progress-bar.tsx similarity index 100% rename from app/lib/components/animation/animated-progress-bar.tsx rename to app/lib/components/animated/animated-progress-bar.tsx diff --git a/app/lib/components/navigation/primary-workmode-select.tsx b/app/lib/components/navigation/primary-workmode-select.tsx index 9a96f9d3..03969147 100644 --- a/app/lib/components/navigation/primary-workmode-select.tsx +++ b/app/lib/components/navigation/primary-workmode-select.tsx @@ -1,7 +1,7 @@ import { css } from "@emotion/react"; import styled from "@emotion/styled"; import React from "react"; -import { PrimaryWorkmodeSet, WorkMode } from "../../navigation"; +import { PrimaryWorkmodeSet, WorkMode } from "../../routing"; export function PrimaryWorkmodeSelect(props: { set: PrimaryWorkmodeSet; diff --git a/app/lib/components/navigation/secondary-menu-dropdown.tsx b/app/lib/components/navigation/secondary-menu-dropdown.tsx index 2547c270..7ea5abd9 100644 --- a/app/lib/components/navigation/secondary-menu-dropdown.tsx +++ b/app/lib/components/navigation/secondary-menu-dropdown.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useHistory } from "react-router-dom"; -import { WorkMode, WorkScreen } from "../../navigation"; +import { WorkMode, WorkScreen } from "../../routing"; import { SecondaryWorkmodeMenu } from "./secondary-workmode-menu"; type Stage = "production" | "development" | string; diff --git a/app/lib/components/upload-steps.tsx b/app/lib/components/upload-steps.tsx index 185aaf15..adc6ec10 100644 --- a/app/lib/components/upload-steps.tsx +++ b/app/lib/components/upload-steps.tsx @@ -5,8 +5,8 @@ import { TransparentButtonStyle, } from "@ui/core/button-style"; import { Button } from "@material-ui/core"; -import { AnimatedProgressBar } from "./animation/animated-progress-bar"; -import { AnimatedCheckIcon } from "./animation/animated-check-icon"; +import { AnimatedProgressBar } from "./animated/animated-progress-bar"; +import { AnimatedCheckIcon } from "./animated/animated-check-icon"; import { motion } from "framer-motion"; import { Preview } from "@ui/previewer"; import CheckIcon from "@assistant/icons/check"; diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index cc82e246..1dc15b74 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -41,7 +41,7 @@ import { saveLayout, updateLayout, get_page_config_by_path, -} from "../navigation"; +} from "../routing"; import { WorkmodeScreenTabs, diff --git a/app/lib/navigation/README.md b/app/lib/routing/README.md similarity index 100% rename from app/lib/navigation/README.md rename to app/lib/routing/README.md diff --git a/app/lib/navigation/index.ts b/app/lib/routing/index.ts similarity index 100% rename from app/lib/navigation/index.ts rename to app/lib/routing/index.ts diff --git a/app/lib/navigation/layout-preference.ts b/app/lib/routing/layout-preference.ts similarity index 100% rename from app/lib/navigation/layout-preference.ts rename to app/lib/routing/layout-preference.ts diff --git a/app/lib/navigation/navigation-store/README.md b/app/lib/routing/navigation-store/README.md similarity index 100% rename from app/lib/navigation/navigation-store/README.md rename to app/lib/routing/navigation-store/README.md diff --git a/app/lib/navigation/navigation-store/index.ts b/app/lib/routing/navigation-store/index.ts similarity index 100% rename from app/lib/navigation/navigation-store/index.ts rename to app/lib/routing/navigation-store/index.ts diff --git a/app/lib/navigation/navigation-store/save-workmode-work.ts b/app/lib/routing/navigation-store/save-workmode-work.ts similarity index 100% rename from app/lib/navigation/navigation-store/save-workmode-work.ts rename to app/lib/routing/navigation-store/save-workmode-work.ts diff --git a/app/lib/navigation/pages.ts b/app/lib/routing/pages.ts similarity index 100% rename from app/lib/navigation/pages.ts rename to app/lib/routing/pages.ts diff --git a/app/lib/navigation/primary-workmode-selector.ts b/app/lib/routing/primary-workmode-selector.ts similarity index 100% rename from app/lib/navigation/primary-workmode-selector.ts rename to app/lib/routing/primary-workmode-selector.ts diff --git a/app/lib/navigation/release-visibility-preference.ts b/app/lib/routing/release-visibility-preference.ts similarity index 100% rename from app/lib/navigation/release-visibility-preference.ts rename to app/lib/routing/release-visibility-preference.ts diff --git a/app/lib/navigation/router.ts b/app/lib/routing/router.ts similarity index 100% rename from app/lib/navigation/router.ts rename to app/lib/routing/router.ts diff --git a/app/lib/navigation/work-mode.ts b/app/lib/routing/work-mode.ts similarity index 100% rename from app/lib/navigation/work-mode.ts rename to app/lib/routing/work-mode.ts diff --git a/app/lib/navigation/work-screen.ts b/app/lib/routing/work-screen.ts similarity index 100% rename from app/lib/navigation/work-screen.ts rename to app/lib/routing/work-screen.ts From c1fbac2e78aefad78efcb1258936d9da9673a316 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 10 Oct 2021 01:04:13 +0900 Subject: [PATCH 05/20] add global show / hide navigation animation by preview scroll --- app/lib/components/motions/README.md | 3 + app/lib/components/motions/index.ts | 2 + .../motions/smooth-dampings/index.ts | 4 + .../index.ts | 53 ++++++++ .../navigation/navigation-motions.tsx | 50 ++++++++ .../navigation/primary-workmode-select.tsx | 57 +-------- .../navigation/work-mode-button.tsx | 57 +++++++++ app/lib/main/global-state-atoms.ts | 6 + app/lib/main/index.tsx | 104 ++++++++------- figma-core/code-thread/selection.ts | 4 +- .../ui-previewer/preview-responsive/index.tsx | 5 +- packages/ui-previewer/preview/index.tsx | 120 +++++++++++------- 12 files changed, 315 insertions(+), 150 deletions(-) create mode 100644 app/lib/components/motions/README.md create mode 100644 app/lib/components/motions/index.ts create mode 100644 app/lib/components/motions/smooth-dampings/index.ts create mode 100644 app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts create mode 100644 app/lib/components/navigation/navigation-motions.tsx create mode 100644 app/lib/components/navigation/work-mode-button.tsx create mode 100644 app/lib/main/global-state-atoms.ts diff --git a/app/lib/components/motions/README.md b/app/lib/components/motions/README.md new file mode 100644 index 00000000..cbd275b7 --- /dev/null +++ b/app/lib/components/motions/README.md @@ -0,0 +1,3 @@ +# General motions + +Motions only ! - no symantic ui components allowed here. diff --git a/app/lib/components/motions/index.ts b/app/lib/components/motions/index.ts new file mode 100644 index 00000000..caad0e09 --- /dev/null +++ b/app/lib/components/motions/index.ts @@ -0,0 +1,2 @@ +export * from "./update-hide-by-scroll-position-and-velocity"; +export * from "./smooth-dampings"; diff --git a/app/lib/components/motions/smooth-dampings/index.ts b/app/lib/components/motions/smooth-dampings/index.ts new file mode 100644 index 00000000..8fc88471 --- /dev/null +++ b/app/lib/components/motions/smooth-dampings/index.ts @@ -0,0 +1,4 @@ +export const smooth_damping_hide_motion_transition = { + ease: [0.1, 0.25, 0.3, 1], + duration: 0.6, +}; diff --git a/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts new file mode 100644 index 00000000..0156aeb5 --- /dev/null +++ b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts @@ -0,0 +1,53 @@ +import { ScrollMotionValues } from "framer-motion"; + +export function update_hide_by_scroll_position_and_velocity({ + scrollYProgress, + is_animating_by_intense_scrolling, + on_animating_by_intense_scrolling, + on_change, +}: { + scrollYProgress: ScrollMotionValues["scrollYProgress"]; + is_animating_by_intense_scrolling: boolean; + on_animating_by_intense_scrolling: (v?: true) => void; + on_change: (hide: boolean) => void; +}) { + const velocity = scrollYProgress.getVelocity(); + const is_intense_scrolling = Math.abs(velocity * 10) > 2; + const direction = velocity > 0 ? "down" : "up"; // this is ok. velocity can't be 0. + const scroll_progress_percentage = scrollYProgress.get(); + + if (is_intense_scrolling) { + switch (direction) { + // scroll intense + down = hide + case "down": + on_change(true); + break; + // scroll intense + up = show + case "up": + on_animating_by_intense_scrolling(true); + on_change(false); + break; + } + } else { + if (scroll_progress_percentage <= 0.05) { + switch (direction) { + // top + down = hide + case "down": + on_change(true); + break; + case "up": + // top + up = show + on_change(false); + break; + } + } else if (scroll_progress_percentage >= 0.95) { + // bottom = show + on_change(false); + } else { + if (!is_animating_by_intense_scrolling) { + // middle = hide + on_change(true); + } + } + } +} diff --git a/app/lib/components/navigation/navigation-motions.tsx b/app/lib/components/navigation/navigation-motions.tsx new file mode 100644 index 00000000..103a2624 --- /dev/null +++ b/app/lib/components/navigation/navigation-motions.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { smooth_damping_hide_motion_transition } from "../motions"; + +export function AppbarContainerMotion({ + hidden, + children, +}: { + hidden: boolean; + children: JSX.Element; +}) { + /** add this const **/ + const variants_for_container = { + visible: { opacity: 1 }, + hidden: { opacity: 0, height: 0 }, + }; + + return ( + + {children} + + ); +} + +export function AppbarContentMotion({ + hidden, + children, +}: { + hidden: boolean; + children: JSX.Element | JSX.Element[]; +}) { + const variants_for_child = { + visible: { y: 0 }, + hidden: { y: -40 }, + }; + + return ( + + {children} + + ); +} diff --git a/app/lib/components/navigation/primary-workmode-select.tsx b/app/lib/components/navigation/primary-workmode-select.tsx index 03969147..2e889958 100644 --- a/app/lib/components/navigation/primary-workmode-select.tsx +++ b/app/lib/components/navigation/primary-workmode-select.tsx @@ -1,7 +1,6 @@ -import { css } from "@emotion/react"; -import styled from "@emotion/styled"; import React from "react"; import { PrimaryWorkmodeSet, WorkMode } from "../../routing"; +import { WorkmodeButton } from "./work-mode-button"; export function PrimaryWorkmodeSelect(props: { set: PrimaryWorkmodeSet; @@ -31,57 +30,3 @@ export function PrimaryWorkmodeSelect(props: { ); } - -function WorkmodeButton(props: { - name: string; - active: boolean; - onClick: () => void; -}) { - return ( - <> - - {props.name} - - - ); -} -interface Props { - active: boolean; -} - -const WorkmodeLabel = styled.h3` - display: flex; - text-transform: capitalize; - font-size: 21px; - letter-spacing: 0em; - cursor: pointer; - user-select: none; - - // reset for h3 init style - margin: 0; - - &:first-child { - margin-right: 12px; - } - - ${(props) => - props.active - ? css` - font-weight: 700; - line-height: 26px; - color: #000; - ` - : css` - font-weight: 400; - line-height: 25px; - color: #cfcfcf; - - &:hover { - font-size: 21px; - font-weight: 400; - line-height: 25px; - letter-spacing: 0em; - color: #606060; - } - `} -`; diff --git a/app/lib/components/navigation/work-mode-button.tsx b/app/lib/components/navigation/work-mode-button.tsx new file mode 100644 index 00000000..66fd460c --- /dev/null +++ b/app/lib/components/navigation/work-mode-button.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import { css } from "@emotion/react"; +import styled from "@emotion/styled"; + +export function WorkmodeButton(props: { + name: string; + active: boolean; + onClick: () => void; +}) { + return ( + <> + + {props.name} + + + ); +} +interface Props { + active: boolean; +} + +const WorkmodeLabel = styled.h3` + display: flex; + text-transform: capitalize; + font-size: 21px; + letter-spacing: 0em; + cursor: pointer; + user-select: none; + + // reset for h3 init style + margin: 0; + + &:first-child { + margin-right: 12px; + } + + ${(props) => + props.active + ? css` + font-weight: 700; + line-height: 26px; + color: #000; + ` + : css` + font-weight: 400; + line-height: 25px; + color: #cfcfcf; + + &:hover { + font-size: 21px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + color: #606060; + } + `} +`; diff --git a/app/lib/main/global-state-atoms.ts b/app/lib/main/global-state-atoms.ts new file mode 100644 index 00000000..d2ccfe47 --- /dev/null +++ b/app/lib/main/global-state-atoms.ts @@ -0,0 +1,6 @@ +import { atom } from "recoil"; + +export const hide_navigation = atom({ + key: "hide_navigation", + default: false, +}); diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 1dc15b74..a629c3f8 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -161,6 +161,15 @@ function TabsLayout(props: { ); } +// region global navigation animation state +import { RecoilRoot, useRecoilState } from "recoil"; +import { + AppbarContainerMotion, + AppbarContentMotion, +} from "../components/navigation/navigation-motions"; +import { hide_navigation } from "./global-state-atoms"; +// endregion + function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { const [workmode, setWorkmode] = useState( props.savedLayout.currentWorkmode @@ -186,6 +195,9 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { }); }; + // region animation state + const [hidden] = useRecoilState(hide_navigation); + return ( // root flex styled container for the whole app
- - - - setExpansion(!expansion)} - /> - - {!expansion && } - + - {/* @ts-ignore */} - - - {/* # region unique route section */} - {standalone_pages.map((p) => { - return ( - { - return ; - }} - /> - ); - })} - {/* # endregion unique route section */} - {/* dynamic route shall be placed at the last point, since it overwrites other routes */} - - - {/* 👆 this is for preventing blank page on book up. this will be fixed and removed.*/} - - - + + + {/* @ts-ignore */} + + + {/* # region unique route section */} + {standalone_pages.map((p) => { + return ( + { + return ; + }} + /> + ); + })} + {/* # endregion unique route section */} + {/* dynamic route shall be placed at the last point, since it overwrites other routes */} + + + {/* 👆 this is for preventing blank page on book up. this will be fixed and removed.*/} + + + + ); } diff --git a/figma-core/code-thread/selection.ts b/figma-core/code-thread/selection.ts index ce8c1846..ffce6809 100644 --- a/figma-core/code-thread/selection.ts +++ b/figma-core/code-thread/selection.ts @@ -10,8 +10,8 @@ export let targetNodeId: string; export function onfigmaselectionchange() { // clear the console for better debugging - console.clear(); - console.warn("log cleared. optimized for new build"); + // console.clear(); + // console.warn("log cleared. optimized for new build"); const rawSelections = figma.currentPage.selection; console.log("selection", rawSelections); const selectionType = analyzeSelection(rawSelections); diff --git a/packages/ui-previewer/preview-responsive/index.tsx b/packages/ui-previewer/preview-responsive/index.tsx index 92fdf260..f8e91054 100644 --- a/packages/ui-previewer/preview-responsive/index.tsx +++ b/packages/ui-previewer/preview-responsive/index.tsx @@ -1,6 +1,6 @@ +import React, { useEffect, useState } from "react"; import styled from "@emotion/styled"; import { useSingleSelection } from "plugin-app"; -import React, { useEffect, useState } from "react"; export interface ResponsivePreviewProps { type: "responsive"; @@ -14,6 +14,8 @@ export interface ResponsivePreviewProps { of?: string; } +const margin = 12; + export function ResponsivePreview({ props, parentWidth, @@ -23,7 +25,6 @@ export function ResponsivePreview({ }) { // TODO: remove me - temporal use const design = useSingleSelection(); - const margin = 12; const [scalefactor, setscalefactor] = useState(0); useEffect(() => { if (design) { diff --git a/packages/ui-previewer/preview/index.tsx b/packages/ui-previewer/preview/index.tsx index dcfde87c..2be1b50d 100644 --- a/packages/ui-previewer/preview/index.tsx +++ b/packages/ui-previewer/preview/index.tsx @@ -1,13 +1,15 @@ import React, { MutableRefObject, useEffect, useRef, useState } from "react"; import styled from "@emotion/styled"; -import { css } from "@emotion/react"; import { ResponsivePreview, ResponsivePreviewProps, } from "../preview-responsive"; import { StaticPreview, StaticPreviewProps } from "../preview-static"; import { EmptyState } from "../components"; -import { calc } from "@web-builder/styles"; +import { useElementScroll } from "framer-motion"; +import { useRecoilState } from "recoil"; +import { update_hide_by_scroll_position_and_velocity } from "app/lib/components/motions"; +import { hide_navigation } from "app/lib/main/global-state-atoms"; interface PreviewProps { auto?: boolean; @@ -32,6 +34,26 @@ type Props = PreviewProps & Subscenario; export function Preview(props: Props) { const previewRefWrap = useRef(); const [size, setsize] = useState(undefined); + const { scrollYProgress } = useElementScroll(previewRefWrap); + + // region navigation animation global state handling by preview's scolling. + const [, set_hide_navigation_state] = useRecoilState(hide_navigation); + let is_animating_by_intense_scrolling = false; + useEffect(() => { + return scrollYProgress.onChange(() => + update_hide_by_scroll_position_and_velocity({ + scrollYProgress, + is_animating_by_intense_scrolling, + on_animating_by_intense_scrolling: () => { + is_animating_by_intense_scrolling = true; + }, + on_change: (hide) => { + set_hide_navigation_state(hide); + }, + }) + ); + }, []); + // endregion useEffect(() => { if (previewRefWrap.current) { @@ -42,29 +64,32 @@ export function Preview(props: Props) { const initialPreviewHeight = 200; const previewWrapPadding = 0; return ( - - - + // + + + <> {props.data || props.auto ? ( <>{size && } ) : (
{props.empty || }
)} - - - + + + ); } +// {/* */} function Content({ props, wrapWidth }: { props: Props; wrapWidth: number }) { switch (props.type) { case "responsive": { - return ; + return ; } case "static": { return ; @@ -94,38 +119,39 @@ const Render = styled.div` /* text-align: center; */ `; -const Container = styled.div` - /* To be deleted later */ - - height: 100%; +// const Container = styled.div` +// /* To be deleted later */ - .preview { - background: #f1f1f1; - height: calc(200px - 24px); - } - - .preview-loading { - width: 100%; - background-color: gray; - } +// /* height: 100%; */ +// /* +// .preview { +// background: #f1f1f1; +// height: calc(200px - 24px); +// } */ +// /* +// .preview-loading { +// width: 100%; +// background-color: gray; +// } */ +// /* +// .render { +// .render height equal .preview height +// width: 100%; +// height: calc(200px - 24px); +// text-align: center; +// object-fit: contain; +// display: table; +// } +// */ - .render { - /* .render height equal .preview height */ - width: 100%; - height: calc(200px - 24px); - text-align: center; - object-fit: contain; - display: table; - } - - .inner-render { - margin: 0 auto; - display: table-cell; - vertical-align: middle; - } - - .rendering-notify { - color: #adaeb2; - font-size: 18px; - } -`; +// /* .inner-render { +// margin: 0 auto; +// display: table-cell; +// vertical-align: middle; +// } */ +// /* +// .rendering-notify { +// color: #adaeb2; +// font-size: 18px; +// } */ +// `; From 9cb813528681480d174735b2c66a9316dff6eb64 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 10 Oct 2021 01:19:45 +0900 Subject: [PATCH 06/20] adjust animation --- .../index.ts | 19 +++++++++++++++---- packages/ui-previewer/preview/index.tsx | 7 ++++++- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts index 0156aeb5..54c4a57e 100644 --- a/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts +++ b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts @@ -5,17 +5,28 @@ export function update_hide_by_scroll_position_and_velocity({ is_animating_by_intense_scrolling, on_animating_by_intense_scrolling, on_change, + options = { + top_sensitivity: 0.01, + bottom_sensitivity: 0.01, + define_intense_velocity: 1, + }, }: { scrollYProgress: ScrollMotionValues["scrollYProgress"]; is_animating_by_intense_scrolling: boolean; on_animating_by_intense_scrolling: (v?: true) => void; on_change: (hide: boolean) => void; + options?: { + top_sensitivity: number; + bottom_sensitivity: number; + define_intense_velocity: number; + }; }) { const velocity = scrollYProgress.getVelocity(); - const is_intense_scrolling = Math.abs(velocity * 10) > 2; + // console.log("velocity", velocity); + const is_intense_scrolling = + Math.abs(velocity) > options.define_intense_velocity; const direction = velocity > 0 ? "down" : "up"; // this is ok. velocity can't be 0. const scroll_progress_percentage = scrollYProgress.get(); - if (is_intense_scrolling) { switch (direction) { // scroll intense + down = hide @@ -29,7 +40,7 @@ export function update_hide_by_scroll_position_and_velocity({ break; } } else { - if (scroll_progress_percentage <= 0.05) { + if (scroll_progress_percentage <= options.top_sensitivity) { switch (direction) { // top + down = hide case "down": @@ -40,7 +51,7 @@ export function update_hide_by_scroll_position_and_velocity({ on_change(false); break; } - } else if (scroll_progress_percentage >= 0.95) { + } else if (scroll_progress_percentage >= 1 - options.bottom_sensitivity) { // bottom = show on_change(false); } else { diff --git a/packages/ui-previewer/preview/index.tsx b/packages/ui-previewer/preview/index.tsx index 2be1b50d..32a0f82d 100644 --- a/packages/ui-previewer/preview/index.tsx +++ b/packages/ui-previewer/preview/index.tsx @@ -50,9 +50,14 @@ export function Preview(props: Props) { on_change: (hide) => { set_hide_navigation_state(hide); }, + options: { + top_sensitivity: 0.05, + bottom_sensitivity: 0.04, + define_intense_velocity: 50, + }, }) ); - }, []); + }); // endregion useEffect(() => { From 4f58c4bc80125516e64a9ba1ca8238396a029d35 Mon Sep 17 00:00:00 2001 From: You-j Date: Sun, 10 Oct 2021 01:25:47 +0900 Subject: [PATCH 07/20] stash add component using storybook --- .../ui-mock-browser/browser-bar/index.tsx | 3 + .../components/address-bar.stories.mdx | 16 +++++ .../components/address-bar.tsx | 71 +++++++++++++++++++ .../browser-navigation-bf-button.stories.mdx | 17 +++++ .../browser-navigation-bf-button.tsx | 35 +++++++++ .../components/browser-tabs-indications.tsx | 40 +++++++++++ .../components/icon/forward-arrow.tsx | 20 ++++++ packages/ui-mock-browser/components/index.ts | 1 + .../ui-mock-browser/components/more-horiz.tsx | 27 +++++++ .../components/refresh-button.tsx | 42 +++++++++++ .../components/trailing/add-icon.tsx | 21 ++++++ .../components/trailing/index.tsx | 2 + .../components/trailing/ios-share-icon.tsx | 21 ++++++ packages/ui-mock-browser/index.ts | 1 + 14 files changed, 317 insertions(+) create mode 100644 packages/ui-mock-browser/components/address-bar.stories.mdx create mode 100644 packages/ui-mock-browser/components/browser-navigation-bf-button.stories.mdx create mode 100644 packages/ui-mock-browser/components/icon/forward-arrow.tsx create mode 100644 packages/ui-mock-browser/components/index.ts create mode 100644 packages/ui-mock-browser/components/more-horiz.tsx create mode 100644 packages/ui-mock-browser/components/trailing/add-icon.tsx create mode 100644 packages/ui-mock-browser/components/trailing/index.tsx create mode 100644 packages/ui-mock-browser/components/trailing/ios-share-icon.tsx diff --git a/packages/ui-mock-browser/browser-bar/index.tsx b/packages/ui-mock-browser/browser-bar/index.tsx index e69de29b..a06b96da 100644 --- a/packages/ui-mock-browser/browser-bar/index.tsx +++ b/packages/ui-mock-browser/browser-bar/index.tsx @@ -0,0 +1,3 @@ +export default function BrowserBar() { + return; +} diff --git a/packages/ui-mock-browser/components/address-bar.stories.mdx b/packages/ui-mock-browser/components/address-bar.stories.mdx new file mode 100644 index 00000000..13c48dc8 --- /dev/null +++ b/packages/ui-mock-browser/components/address-bar.stories.mdx @@ -0,0 +1,16 @@ +import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { AddressBar } from "./address-bar"; + + + +# Preview + + + +
+ +
+ + + +# Props diff --git a/packages/ui-mock-browser/components/address-bar.tsx b/packages/ui-mock-browser/components/address-bar.tsx index e69de29b..79a651ad 100644 --- a/packages/ui-mock-browser/components/address-bar.tsx +++ b/packages/ui-mock-browser/components/address-bar.tsx @@ -0,0 +1,71 @@ +import React from "react"; +import styled from "@emotion/styled"; +import { RefreshButton } from "./refresh-button"; +import { MoreHoriz } from "./more-horiz"; + +export function AddressBar() { + return ( + + + + + + + +
Loading..
+ + + ); +} + +const Wrapper = styled.div` + height: 100%; + background-color: rgba(216, 215, 216, 1); + border-radius: 6px; + position: relative; +`; + +const Frame168 = styled.div` + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; + gap: 7px; + box-sizing: border-box; + position: absolute; + top: calc((calc((50% + 0px)) - 8px)); + right: 10px; + width: 37px; + height: 16px; +`; + +const Frame167 = styled.div` + display: flex; + justify-content: flex-start; + flex-direction: row; + align-items: start; + gap: 6px; + box-sizing: border-box; + position: absolute; + left: calc((calc((50% + 0px)) - 36px)); + top: calc((calc((50% + 0px)) - 7px)); + width: 71px; + height: 14px; +`; + +const BrowserTabsIndicationPlaceholder = styled.img` + object-fit: cover; +`; + +const Address = styled.span` + color: rgba(0, 0, 0, 1); + text-overflow: ellipsis; + font-size: 12px; + font-family: "Helvetica Neue", sans-serif; + font-weight: 400; + line-height: 100%; + text-align: center; +`; diff --git a/packages/ui-mock-browser/components/browser-navigation-bf-button.stories.mdx b/packages/ui-mock-browser/components/browser-navigation-bf-button.stories.mdx new file mode 100644 index 00000000..4a6dddae --- /dev/null +++ b/packages/ui-mock-browser/components/browser-navigation-bf-button.stories.mdx @@ -0,0 +1,17 @@ +import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { BrowserNavigationBfButton } from "./browser-navigation-bf-button"; + + + +# Preview + + + + + + + + + + +# Props diff --git a/packages/ui-mock-browser/components/browser-navigation-bf-button.tsx b/packages/ui-mock-browser/components/browser-navigation-bf-button.tsx index e69de29b..2b205790 100644 --- a/packages/ui-mock-browser/components/browser-navigation-bf-button.tsx +++ b/packages/ui-mock-browser/components/browser-navigation-bf-button.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import styled from "@emotion/styled"; +import { css } from "@emotion/react"; +import ForwardArrowIcon from "./icon/forward-arrow"; + +interface BrowserNavigationBfButtonProps { + isBack?: boolean; +} + +export function BrowserNavigationBfButton( + props?: BrowserNavigationBfButtonProps +) { + return ( + + + + + + ); +} + +const Wrap = styled.div` + &:hover { + background-color: rgba(242, 242, 242, 1); + border-radius: 4px; + } +`; + +const ArrowIconWrap = styled.span<{ isBack?: boolean }>` + position: absolute; + left: calc((calc((50% + 0px)) - 8px)); + top: calc((calc((50% + 0px)) - 8px)); + + transform: ${(props) => (props.isBack ? "rotate(180deg)" : "rotate(0deg)")}; +`; diff --git a/packages/ui-mock-browser/components/browser-tabs-indications.tsx b/packages/ui-mock-browser/components/browser-tabs-indications.tsx index e69de29b..56cbb05c 100644 --- a/packages/ui-mock-browser/components/browser-tabs-indications.tsx +++ b/packages/ui-mock-browser/components/browser-tabs-indications.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import styled from "@emotion/styled"; + +export function BrowserTabsIndications() { + function PinIcon() { + return ( + + + + + + ); + } + + return <>; +} + +const IconWrap = styled.svg` + &:hover { + fill: #737373; + } +`; + +const PlaceholderIcon = styled.div` + border-radius: 3px; + background: linear-gradient( + 180deg, + rgba(196, 196, 196, 1), + rgba(196, 196, 196, 0) + ); +`; diff --git a/packages/ui-mock-browser/components/icon/forward-arrow.tsx b/packages/ui-mock-browser/components/icon/forward-arrow.tsx new file mode 100644 index 00000000..5b66e969 --- /dev/null +++ b/packages/ui-mock-browser/components/icon/forward-arrow.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +export default function ForwardArrowIcon() { + return ( + <> + + + + + ); +} diff --git a/packages/ui-mock-browser/components/index.ts b/packages/ui-mock-browser/components/index.ts new file mode 100644 index 00000000..d6b8be2d --- /dev/null +++ b/packages/ui-mock-browser/components/index.ts @@ -0,0 +1 @@ +export * from "./address-bar"; diff --git a/packages/ui-mock-browser/components/more-horiz.tsx b/packages/ui-mock-browser/components/more-horiz.tsx new file mode 100644 index 00000000..4d7ded48 --- /dev/null +++ b/packages/ui-mock-browser/components/more-horiz.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import styled from "@emotion/styled"; + +export function MoreHoriz() { + return ( + + + + + + ); +} + +const IconWrap = styled.span` + cursor: pointer; +`; diff --git a/packages/ui-mock-browser/components/refresh-button.tsx b/packages/ui-mock-browser/components/refresh-button.tsx index e69de29b..1b8be7c3 100644 --- a/packages/ui-mock-browser/components/refresh-button.tsx +++ b/packages/ui-mock-browser/components/refresh-button.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import styled from "@emotion/styled"; + +interface RefreshButtonProps { + isHoverEvent?: boolean; +} + +export function RefreshButton(props?: RefreshButtonProps) { + function RefreshIcon() { + return ( + + + + + + ); + } + + return ( + <> + + + ); +} + +const IconWrap = styled.span` + opacity: 0; + cursor: pointer; + + &:hover { + opacity: 1; + } +`; diff --git a/packages/ui-mock-browser/components/trailing/add-icon.tsx b/packages/ui-mock-browser/components/trailing/add-icon.tsx new file mode 100644 index 00000000..efc496ab --- /dev/null +++ b/packages/ui-mock-browser/components/trailing/add-icon.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styled from "@emotion/styled"; + +export function AddIcon() { + return ( + <> + + + + + ); +} diff --git a/packages/ui-mock-browser/components/trailing/index.tsx b/packages/ui-mock-browser/components/trailing/index.tsx new file mode 100644 index 00000000..5d83e9e9 --- /dev/null +++ b/packages/ui-mock-browser/components/trailing/index.tsx @@ -0,0 +1,2 @@ +export * from "./ios-share-icon"; +export * from "./add-icon"; diff --git a/packages/ui-mock-browser/components/trailing/ios-share-icon.tsx b/packages/ui-mock-browser/components/trailing/ios-share-icon.tsx new file mode 100644 index 00000000..789354c9 --- /dev/null +++ b/packages/ui-mock-browser/components/trailing/ios-share-icon.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styled from "@emotion/styled"; + +export function IosShare() { + return ( + <> + + + + + ); +} diff --git a/packages/ui-mock-browser/index.ts b/packages/ui-mock-browser/index.ts index e69de29b..9fb51fdb 100644 --- a/packages/ui-mock-browser/index.ts +++ b/packages/ui-mock-browser/index.ts @@ -0,0 +1 @@ +export * from "./browser-bar"; From baf762205460fcbc2ea24ec461862a3a66cafae2 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 10 Oct 2021 03:12:39 +0900 Subject: [PATCH 08/20] add scroll anim trigger to code area & add 2line tab under root nav app --- .../index.ts | 66 +++++-- .../navigation/navigation-motions.tsx | 2 +- app/lib/main/index.tsx | 186 ++++++++---------- packages/app-design-to-code/code-screen.tsx | 14 +- packages/ui-previewer/preview/index.tsx | 34 +--- 5 files changed, 159 insertions(+), 143 deletions(-) diff --git a/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts index 54c4a57e..8fbb1773 100644 --- a/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts +++ b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts @@ -1,4 +1,6 @@ +import { useState, useEffect, RefObject } from "react"; import { ScrollMotionValues } from "framer-motion"; +import { useElementScroll } from "framer-motion"; export function update_hide_by_scroll_position_and_velocity({ scrollYProgress, @@ -22,38 +24,47 @@ export function update_hide_by_scroll_position_and_velocity({ }; }) { const velocity = scrollYProgress.getVelocity(); - // console.log("velocity", velocity); - const is_intense_scrolling = - Math.abs(velocity) > options.define_intense_velocity; + const velocity_abs = Math.abs(velocity); + if ( + // if < 20, this event is not triggered by human, or caused by extremely short scroll area, causing high velocity. + velocity_abs > 20 || + scrollYProgress.get() == scrollYProgress.getPrevious() + ) { + return; + } + const is_intense_scrolling = velocity_abs > options.define_intense_velocity; const direction = velocity > 0 ? "down" : "up"; // this is ok. velocity can't be 0. const scroll_progress_percentage = scrollYProgress.get(); - if (is_intense_scrolling) { + + if (scroll_progress_percentage >= 1 - options.bottom_sensitivity) { + // bottom = show + on_change(false); + } else if (scroll_progress_percentage <= options.top_sensitivity) { switch (direction) { - // scroll intense + down = hide + // top + down = hide case "down": - on_change(true); + if (!is_intense_scrolling) { + on_change(true); + } break; - // scroll intense + up = show case "up": - on_animating_by_intense_scrolling(true); + // top + up = show on_change(false); break; } } else { - if (scroll_progress_percentage <= options.top_sensitivity) { + if (is_intense_scrolling) { switch (direction) { - // top + down = hide + // scroll intense + down = hide case "down": on_change(true); break; + // scroll intense + up = show case "up": - // top + up = show + on_animating_by_intense_scrolling(true); on_change(false); break; } - } else if (scroll_progress_percentage >= 1 - options.bottom_sensitivity) { - // bottom = show - on_change(false); } else { if (!is_animating_by_intense_scrolling) { // middle = hide @@ -62,3 +73,30 @@ export function update_hide_by_scroll_position_and_velocity({ } } } + +export function useScrollTriggeredAnimation(el: RefObject) { + const { scrollYProgress, scrollY } = useElementScroll(el); + const [hide, setHide] = useState(false); + let is_animating_by_intense_scrolling = false; + useEffect(() => { + return scrollYProgress.onChange(() => + update_hide_by_scroll_position_and_velocity({ + scrollYProgress, + is_animating_by_intense_scrolling, + on_animating_by_intense_scrolling: () => { + is_animating_by_intense_scrolling = true; + }, + on_change: (hide) => { + setHide(hide); + }, + options: { + top_sensitivity: 0.05, + bottom_sensitivity: 0.1, + define_intense_velocity: 50, + }, + }) + ); + }); + + return hide; +} diff --git a/app/lib/components/navigation/navigation-motions.tsx b/app/lib/components/navigation/navigation-motions.tsx index 103a2624..84f72690 100644 --- a/app/lib/components/navigation/navigation-motions.tsx +++ b/app/lib/components/navigation/navigation-motions.tsx @@ -7,7 +7,7 @@ export function AppbarContainerMotion({ children, }: { hidden: boolean; - children: JSX.Element; + children: JSX.Element | JSX.Element[]; }) { /** add this const **/ const variants_for_container = { diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index a629c3f8..a9b5fea2 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -96,71 +96,6 @@ function Screen(props: { screen: WorkScreen }) { } } -function TabsLayout(props: { - workmode: WorkMode; - tabIndex: number; - isTabVisible: boolean; - onChange: (index: number, tab: WorkScreen) => void; -}) { - const history = useHistory(); - const { workmode, tabIndex, onChange } = props; - const tabs_as_page_configs = getWorkmodeTabLayout(workmode).map( - (screen, index) => { - const _ = get_page_config(screen); - return { - id: _.id, - name: _.title, - path: _.path, - }; - } - ); - - useEffect(() => { - handleTabChange(tabIndex); - }, []); - - const handleTabChange = (index: number) => { - const screen = tabs_as_page_configs[index]; - onChange(index, screen.id); - history.replace(screen.path); // since it is a movement between tabs, we don't use push. we use replace to avoid the history stack to be too long. - }; - - return ( - <> - {props.isTabVisible && ( - - )} - - {/* the screen's wrapping layout */} -
- - {tabs_as_page_configs.map((v, i) => { - return ( - } - /> - ); - })} - -
- - ); -} - // region global navigation animation state import { RecoilRoot, useRecoilState } from "recoil"; import { @@ -171,6 +106,7 @@ import { hide_navigation } from "./global-state-atoms"; // endregion function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { + const history = useHistory(); const [workmode, setWorkmode] = useState( props.savedLayout.currentWorkmode ); @@ -179,7 +115,7 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { ); const [tabIndex, setTabIndex] = useState(0); const [expansion, setExpansion] = useState(true); - + const isTabVisible = expansion; const on_workmode_select = (workmode: WorkMode) => { setWorkmode(workmode); setTabIndex(0); @@ -196,7 +132,28 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { }; // region animation state - const [hidden] = useRecoilState(hide_navigation); + const [whole_navigation_hidden] = useRecoilState(hide_navigation); + + useEffect(() => { + handleTabChange(tabIndex); + }, []); + + const handleTabChange = (index: number) => { + const screen = tabs_as_page_configs[index]; + on_work_select(index, screen.id); + history.replace(screen.path); // since it is a movement between tabs, we don't use push. we use replace to avoid the history stack to be too long. + }; + + const tabs_as_page_configs = getWorkmodeTabLayout(workmode).map( + (screen, index) => { + const _ = get_page_config(screen); + return { + id: _.id, + name: _.title, + path: _.path, + }; + } + ); return ( // root flex styled container for the whole app @@ -207,39 +164,70 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { height: "100vh", }} > - -
); // @@ -358,7 +346,7 @@ function _update_focused_screen_ev(screen: WorkScreen) { ); } -const AppbarWrapper = styled.div` +const PrimaryWorkmodeWrapper = styled.div` display: flex; padding: 0 16px; /* padding: 0 8px; */ diff --git a/packages/app-design-to-code/code-screen.tsx b/packages/app-design-to-code/code-screen.tsx index 076f0936..265b7b8e 100644 --- a/packages/app-design-to-code/code-screen.tsx +++ b/packages/app-design-to-code/code-screen.tsx @@ -19,6 +19,9 @@ import { ImageHostingRepository, } from "@design-sdk/core/assets-repository"; import { Resizable } from "re-resizable"; +import { useScrollTriggeredAnimation } from "app/lib/components/motions"; +import { useSetRecoilState } from "recoil"; +import { hide_navigation } from "app/lib/main/global-state-atoms"; const resizeBarBase = 5; const resizeBarVerPadding = 5; @@ -52,6 +55,13 @@ export function CodeScreen() { set_vanilla_preview_source(inject_assets_source_to_vanilla(v, r)); }; + const code_scrolling_area_ref = useRef(null); + const set_hide_navigation_state = useSetRecoilState(hide_navigation); + const hide = useScrollTriggeredAnimation(code_scrolling_area_ref); + useEffect(() => { + set_hide_navigation_state(hide); + }, [hide]); + return (
- {/* FIXME: add onCopyClicked to code-box */} -
(); const [size, setsize] = useState(undefined); - const { scrollYProgress } = useElementScroll(previewRefWrap); // region navigation animation global state handling by preview's scolling. - const [, set_hide_navigation_state] = useRecoilState(hide_navigation); - let is_animating_by_intense_scrolling = false; + const set_hide_navigation_state = useSetRecoilState(hide_navigation); + const hide = useScrollTriggeredAnimation(previewRefWrap); useEffect(() => { - return scrollYProgress.onChange(() => - update_hide_by_scroll_position_and_velocity({ - scrollYProgress, - is_animating_by_intense_scrolling, - on_animating_by_intense_scrolling: () => { - is_animating_by_intense_scrolling = true; - }, - on_change: (hide) => { - set_hide_navigation_state(hide); - }, - options: { - top_sensitivity: 0.05, - bottom_sensitivity: 0.04, - define_intense_velocity: 50, - }, - }) - ); - }); + set_hide_navigation_state(hide); + }, [hide]); // endregion useEffect(() => { @@ -108,7 +90,6 @@ const PreviewWrap = styled.div<{ isAutoSizable: boolean; }>` padding: ${(props) => `${props.padding}px`}; - background: #f1f1f1; height: ${(props) => props.isAutoSizable ? `calc(100% - ${props.padding * 2}px)` @@ -120,8 +101,7 @@ const PreviewWrap = styled.div<{ const Render = styled.div` position: relative; width: 100%; - height: auto; - /* text-align: center; */ + height: 100%; `; // const Container = styled.div` From 6b7058a3c0984f1454e9aedf06ecc5306c2f7e85 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 10 Oct 2021 03:30:23 +0900 Subject: [PATCH 09/20] shadow on only code preview screen --- .../index.ts | 9 +++++++-- app/lib/main/index.tsx | 10 ++++++++-- packages/ui-previewer/preview-responsive/index.tsx | 1 + packages/ui-previewer/preview/index.tsx | 2 -- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts index 8fbb1773..7bc33e93 100644 --- a/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts +++ b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts @@ -11,6 +11,7 @@ export function update_hide_by_scroll_position_and_velocity({ top_sensitivity: 0.01, bottom_sensitivity: 0.01, define_intense_velocity: 1, + do_show_on_bottom_hit: true, }, }: { scrollYProgress: ScrollMotionValues["scrollYProgress"]; @@ -21,6 +22,7 @@ export function update_hide_by_scroll_position_and_velocity({ top_sensitivity: number; bottom_sensitivity: number; define_intense_velocity: number; + do_show_on_bottom_hit: boolean; }; }) { const velocity = scrollYProgress.getVelocity(); @@ -37,8 +39,10 @@ export function update_hide_by_scroll_position_and_velocity({ const scroll_progress_percentage = scrollYProgress.get(); if (scroll_progress_percentage >= 1 - options.bottom_sensitivity) { - // bottom = show - on_change(false); + if (options.do_show_on_bottom_hit) { + // bottom = show + on_change(false); + } } else if (scroll_progress_percentage <= options.top_sensitivity) { switch (direction) { // top + down = hide @@ -90,6 +94,7 @@ export function useScrollTriggeredAnimation(el: RefObject) { setHide(hide); }, options: { + do_show_on_bottom_hit: false, top_sensitivity: 0.05, bottom_sensitivity: 0.1, define_intense_velocity: 50, diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index a9b5fea2..871a8e31 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -114,6 +114,7 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { props.savedLayout.workmodeSet ); const [tabIndex, setTabIndex] = useState(0); + const [screen, setScreen] = useState(); const [expansion, setExpansion] = useState(true); const isTabVisible = expansion; const on_workmode_select = (workmode: WorkMode) => { @@ -140,6 +141,7 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { const handleTabChange = (index: number) => { const screen = tabs_as_page_configs[index]; + setScreen(screen.id); on_work_select(index, screen.id); history.replace(screen.path); // since it is a movement between tabs, we don't use push. we use replace to avoid the history stack to be too long. }; @@ -155,6 +157,8 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) { } ); + const shadow_required = screen == WorkScreen.code || !isTabVisible; + return ( // root flex styled container for the whole app