From a0e04d887454518ca975183d7cb3884513c9d295 Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 17 Aug 2021 00:02:55 +0900 Subject: [PATCH 01/26] add style: disable select --- app/lib/components/navigation/primary-workmode-select.tsx | 1 + app/lib/components/navigation/secondary-workmode-choice.tsx | 1 + app/lib/components/navigation/workmode-screen-tabs.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/app/lib/components/navigation/primary-workmode-select.tsx b/app/lib/components/navigation/primary-workmode-select.tsx index 093cb82c..1def83bc 100644 --- a/app/lib/components/navigation/primary-workmode-select.tsx +++ b/app/lib/components/navigation/primary-workmode-select.tsx @@ -55,6 +55,7 @@ const WorkmodeLabel = styled.h3` font-size: 21px; letter-spacing: 0em; cursor: pointer; + user-select: none; &:first-child { margin-right: 12px; diff --git a/app/lib/components/navigation/secondary-workmode-choice.tsx b/app/lib/components/navigation/secondary-workmode-choice.tsx index 71debc45..fec9ca3a 100644 --- a/app/lib/components/navigation/secondary-workmode-choice.tsx +++ b/app/lib/components/navigation/secondary-workmode-choice.tsx @@ -25,6 +25,7 @@ const Title = styled.h6` text-transform: capitalize; margin: 0; // for reset h6 inital margin margin-right: 10px; + user-select: none; /* &:nth-child(3n) { margin-right: 0; diff --git a/app/lib/components/navigation/workmode-screen-tabs.tsx b/app/lib/components/navigation/workmode-screen-tabs.tsx index a472fe8e..4dd09b4a 100644 --- a/app/lib/components/navigation/workmode-screen-tabs.tsx +++ b/app/lib/components/navigation/workmode-screen-tabs.tsx @@ -34,6 +34,7 @@ export function WorkmodeScreenTabs(props: { TabIndicatorProps={{ style: { display: "none", + userSelect: "none", }, }} > From 4a40fb64b1902d3b70c777cf482cc65bedc04081 Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 17 Aug 2021 00:11:21 +0900 Subject: [PATCH 02/26] fix: label style --- app/lib/components/navigation/primary-workmode-select.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/lib/components/navigation/primary-workmode-select.tsx b/app/lib/components/navigation/primary-workmode-select.tsx index 1def83bc..c7477b72 100644 --- a/app/lib/components/navigation/primary-workmode-select.tsx +++ b/app/lib/components/navigation/primary-workmode-select.tsx @@ -57,6 +57,10 @@ const WorkmodeLabel = styled.h3` cursor: pointer; user-select: none; + // reset for h3 init style + margin: 0; + margin-top: 8px; + &:first-child { margin-right: 12px; } From b1dbc4b140e49a615c1636906debce081f759305 Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 17 Aug 2021 00:23:10 +0900 Subject: [PATCH 03/26] fix tabLayout disable contorl --- .../navigation/secondary-workmode-menu.tsx | 2 +- app/lib/main/index.tsx | 39 +++++++++++-------- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/app/lib/components/navigation/secondary-workmode-menu.tsx b/app/lib/components/navigation/secondary-workmode-menu.tsx index 4c6c8ea7..c1881243 100644 --- a/app/lib/components/navigation/secondary-workmode-menu.tsx +++ b/app/lib/components/navigation/secondary-workmode-menu.tsx @@ -12,7 +12,7 @@ export function SecondaryWorkmodeMenu(props: { }) { return ( - + {props.menus.map((menu, index) => { if (index < 3) { diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 50a169c0..21440e6e 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -144,6 +144,7 @@ function Screen(props: { screen: WorkScreen }) { function TabsLayout(props: { workmode: WorkMode; tabIndex: number; + isTabVisible: boolean; onChange: (index: number, tab: WorkScreen) => void; }) { const { workmode, tabIndex, onChange } = props; @@ -163,13 +164,16 @@ function TabsLayout(props: { return (
-
- -
+ {props.isTabVisible && ( +
+ +
+ )} + {tabLayout.map((v, i) => { return ( @@ -227,16 +231,17 @@ function TabNavigationApp() { _update_focused_screen_ev(newTabLayout[0]); }} /> */} - {expansion && ( - { - _update_focused_screen_ev(screen); - setTabIndex(index); - }} - /> - )} + {/* {expansion && ( */} + { + _update_focused_screen_ev(screen); + setTabIndex(index); + }} + /> + {/* )} */} ); // From 0912e340820e71a949a971fc49026e4a3bf6d552 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 04:39:34 +0900 Subject: [PATCH 04/26] clean imports --- app/lib/main/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 3f661d86..732daded 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -3,10 +3,6 @@ import "../app.css"; import { initialize } from "../analytics"; // UI COMPS -import Button from "@material-ui/core/Button"; -import MenuItem from "@material-ui/core/MenuItem"; -import Menu from "@material-ui/core/Menu"; -import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"; import { EK_SET_APP_MODE } from "../constants/ek.constant"; import { PluginApp } from "plugin-app"; import BatchMetaEditor from "../pages/tool-box/batch-meta-editor"; From 861673bc25cebc27d0a9e655f1e6c4f8205ad256 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 04:42:44 +0900 Subject: [PATCH 05/26] use plugin sdk store to save layout --- app/lib/navigation/navigation-store/index.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/app/lib/navigation/navigation-store/index.ts b/app/lib/navigation/navigation-store/index.ts index 459197a9..3b930707 100644 --- a/app/lib/navigation/navigation-store/index.ts +++ b/app/lib/navigation/navigation-store/index.ts @@ -1,3 +1,4 @@ +import { PluginSdk } from "@plugin-sdk/app"; import { PrimaryWorkmodeSet } from "../primary-workmode-selector"; import { WorkMode } from "../work-mode"; import { WorkScreen } from "../work-screen"; @@ -10,13 +11,9 @@ export interface NavigationStoreState { const __KEY = "app-navigation-full-layout"; export async function saveLayout(state: NavigationStoreState) { - const payload = JSON.stringify(state); - - // save payload - // + PluginSdk.setItem(__KEY, state); } export async function loadLayout(): Promise { - const payload = await localStorage.getItem(__KEY); - return JSON.parse(payload); + return PluginSdk.getItem(__KEY); } From 9b3826fec2c5bef30815f238a4d85144f6927453 Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 17 Aug 2021 04:43:14 +0900 Subject: [PATCH 06/26] add: init layer --- app/lib/components/assets/close.svg | 3 + app/lib/components/assets/expand.svg | 3 + app/lib/pages/lint/error-by-layer-item.tsx | 64 ++++++++++++++++++++++ 3 files changed, 70 insertions(+) create mode 100644 app/lib/components/assets/close.svg create mode 100644 app/lib/components/assets/expand.svg create mode 100644 app/lib/pages/lint/error-by-layer-item.tsx diff --git a/app/lib/components/assets/close.svg b/app/lib/components/assets/close.svg new file mode 100644 index 00000000..95ce701c --- /dev/null +++ b/app/lib/components/assets/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/assets/expand.svg b/app/lib/components/assets/expand.svg new file mode 100644 index 00000000..b4878cec --- /dev/null +++ b/app/lib/components/assets/expand.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/pages/lint/error-by-layer-item.tsx b/app/lib/pages/lint/error-by-layer-item.tsx new file mode 100644 index 00000000..17fccd2c --- /dev/null +++ b/app/lib/pages/lint/error-by-layer-item.tsx @@ -0,0 +1,64 @@ +import styled from "@emotion/styled"; +import * as React from "react"; +import { Level } from "./lint-colors"; +import { LintError, LintErrorIcon } from "./lint-error-icon"; +import { LintLevelIndicator } from "./lint-level-indicator"; + +interface IErrorByLayerItem { + icon: boolean; + level: Level; + expand: boolean; + error: { + id: string; + name: string; + userMessage: string; + }; +} + +const CloseIcon = require("../../../lib/components/assets/close.svg") as string; +const ExpandIcon = + require("../../../lib/components/assets/expand.svg") as string; + +export function ErrorByLayerItem(props: IErrorByLayerItem) { + return ( + + + {props.icon && } + {props.error.name} + + {props.expand ? : } + + {props.error.userMessage} + + ); +} + +const Wrapper = styled.div` + background: #fff; + + &:hover { + background: #fcfcfc; + } +`; + +const Inner = styled.div` + display: flex; +`; +const Title = styled.h6` + margin: 0; + + font-size: 16px; + font-weight: 500; + line-height: 20px; + margin-right: auto; +`; + +const SubTitle = styled.h6` + margin: 0; + font-size: 12px; + line-height: 14px; + margin-top: 4px; + max-width: 262px; + + color: #666666; +`; From eed7864ad65ad19f6385581218487f0f34782e09 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 06:15:58 +0900 Subject: [PATCH 07/26] add tab router --- app/lib/main/index.tsx | 53 ++++++++++++++++++++++++------------- app/lib/navigation/index.ts | 20 +++++++++++++- app/package.json | 3 ++- yarn.lock | 13 +++++++++ 4 files changed, 68 insertions(+), 21 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 732daded..f2b6214a 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -6,7 +6,14 @@ import { initialize } from "../analytics"; import { EK_SET_APP_MODE } from "../constants/ek.constant"; import { PluginApp } from "plugin-app"; import BatchMetaEditor from "../pages/tool-box/batch-meta-editor"; -import { BrowserRouter } from "react-router-dom"; +import { + useHistory, + Switch, + Route, + Link, + BrowserRouter, + Redirect, +} from "react-router-dom"; // // region screens import @@ -143,21 +150,25 @@ function TabsLayout(props: { isTabVisible: boolean; onChange: (index: number, tab: WorkScreen) => void; }) { + const history = useHistory(); const { workmode, tabIndex, onChange } = props; - const tabLayout = getWorkmodeTabLayout(workmode); + const tabs_as_page_configs = getWorkmodeTabLayout(workmode).map( + (screen, index) => { + const _ = get_page_config(screen); + return { + id: _.id, + name: _.title, + path: _.path, + }; + } + ); + const handleTabChange = (index: number) => { - const screen = tabLayout[index]; - onChange(index, screen); + const screen = tabs_as_page_configs[index]; + onChange(index, screen.id); + history.push(screen.path); }; - const tabs_as_page_configs = tabLayout.map((screen, index) => { - const _ = get_page_config(screen); - return { - id: _.id, - name: _.title, - }; - }); - return (
{props.isTabVisible && ( @@ -170,13 +181,17 @@ function TabsLayout(props: {
)} - {tabLayout.map((v, i) => { - return ( - - - - ); - })} + + {/*
Tab 3
} /> */} + {/*
Tab 1
} /> */} + {tabs_as_page_configs.map((v, i) => { + return ( + // + } /> + // + ); + })} +
); } diff --git a/app/lib/navigation/index.ts b/app/lib/navigation/index.ts index 829d309d..02b126b9 100644 --- a/app/lib/navigation/index.ts +++ b/app/lib/navigation/index.ts @@ -12,6 +12,7 @@ export interface WorkmodeConfig { export interface PageConfig { id: WorkScreen; title: string; + path: string; } /// @@ -21,73 +22,90 @@ export interface PageConfig { const page_code_preview: PageConfig = { id: WorkScreen.code, title: "Preview", + path: "/code/preview", }; const page_code_layout: PageConfig = { id: WorkScreen.layout, title: "Layout", + path: "/code/layout", }; const page_code_component: PageConfig = { id: WorkScreen.component, title: "Component", + path: "/code/component", }; const page_code_lint: PageConfig = { id: WorkScreen.lint, title: "Lint", + path: "/code/lint", }; const page_design_icon: PageConfig = { id: WorkScreen.icon, title: "Icon", + path: "/design/icons", }; const page_design_layout: PageConfig = { id: WorkScreen.layout, title: "Layout", + path: "/design/layout", }; const page_design_lint: PageConfig = { id: WorkScreen.lint, title: "Lint", + path: "/design/lint", }; const page_content_g11n: PageConfig = { id: WorkScreen.g11n, title: "Globalize", + path: "/content/globalize", }; const page_about: PageConfig = { id: WorkScreen.about, title: "About", + path: "/about", }; const page_toolbox_font_replacer: PageConfig = { id: WorkScreen.tool_font_replacer, - title: "About", + title: "Font replacer", + path: "/toolbox/font-replacer", }; const page_toolbox_desing_button_maker: PageConfig = { id: WorkScreen.tool_desing_button_maker, title: "Button Maker", + path: "/toolbox/button-maker", }; const page_toolbox_meta_editor: PageConfig = { id: WorkScreen.tool_meta_editor, title: "Meta", + path: "/toolbox/meta-editor", }; const page_toolbox_batch_meta_editor: PageConfig = { id: WorkScreen.tool_batch_meta_editor, title: "Batch Meta", + path: "/toolbox/batch-meta-editor", }; const page_toolbox_data_mapper: PageConfig = { id: WorkScreen.tool_data_mapper, title: "Data mapper", + path: "/toolbox/data-mapper", }; +/** + * list of all pages + */ const all_pages: PageConfig[] = [ page_toolbox_data_mapper, page_toolbox_batch_meta_editor, diff --git a/app/package.json b/app/package.json index 1f7f0eb7..a33a4be8 100644 --- a/app/package.json +++ b/app/package.json @@ -45,6 +45,7 @@ "devDependencies": { "@types/lodash": "^4.14.172", "@types/react": "^17.0.3", - "@types/react-dom": "^16.9.8" + "@types/react-dom": "^16.9.8", + "@types/react-router": "^5.1.16" } } diff --git a/yarn.lock b/yarn.lock index 443b6570..ade31086 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2894,6 +2894,11 @@ dependencies: "@types/unist" "*" +"@types/history@*": + version "4.7.9" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724" + integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ== + "@types/html-minifier-terser@^5.0.0": version "5.1.1" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50" @@ -3016,6 +3021,14 @@ dependencies: "@types/react" "^16" +"@types/react-router@^5.1.16": + version "5.1.16" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99" + integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg== + dependencies: + "@types/history" "*" + "@types/react" "*" + "@types/react-transition-group@^4.2.0": version "4.4.1" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1" From 900c7e1c0eda6385716523d382fb6776f0caad22 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 06:25:48 +0900 Subject: [PATCH 08/26] routing implemented --- app/lib/main/index.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index f2b6214a..b3fd3f7d 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -51,6 +51,7 @@ import { } from "../components/navigation"; import styled from "@emotion/styled"; import { Column, Row } from "../components/style/global-style"; +import { UploadSteps } from "../components/upload-steps"; /** The container of tab content */ function TabPanel(props: { @@ -166,7 +167,7 @@ function TabsLayout(props: { const handleTabChange = (index: number) => { const screen = tabs_as_page_configs[index]; onChange(index, screen.id); - history.push(screen.path); + 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 ( @@ -275,7 +276,17 @@ export default function App(props: { platform: TargetPlatform }) { return ( - + {/* # region unique route section */} + + + + {/* # endregion unique route section */} + {/* dynamic route shall be placed at the last point, since it overwrites other routes */} + + ); From 1a27f4fc9bac847348e9cb9b55699c526cadc7c8 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 06:29:16 +0900 Subject: [PATCH 09/26] add black page prevent --- app/lib/main/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index b3fd3f7d..cd502f11 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -286,6 +286,8 @@ export default function App(props: { platform: TargetPlatform }) { {/* # 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.*/} From 80a16387993773f327381b1159ff3b5e9f24bcbb Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 14:10:01 +0900 Subject: [PATCH 10/26] add memory router for on-iframe (plugin) usage --- app/lib/main/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index cd502f11..4ac37a47 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -11,8 +11,8 @@ import { Switch, Route, Link, + MemoryRouter, BrowserRouter, - Redirect, } from "react-router-dom"; // @@ -273,9 +273,11 @@ export default function App(props: { platform: TargetPlatform }) { // endregion init GA }, []); + const Router = _is_in_iframe() ? MemoryRouter : BrowserRouter; + return ( - + {/* # region unique route section */} {" "} {/* 👆 this is for preventing blank page on book up. this will be fixed and removed.*/} - + ); } +function _is_in_iframe() { + // The page is in an iframe + return window.location !== window.parent.location; +} + function _update_focused_screen_ev(screen: WorkScreen) { // notify code.ts that app mode has set. parent.postMessage( From 42bc21f3d71cab3351e7ad635fdad61bfff79a4f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 16:09:30 +0900 Subject: [PATCH 11/26] extract pages --- app/lib/navigation/index.ts | 132 +----------------------------------- app/lib/navigation/pages.ts | 126 ++++++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 131 deletions(-) create mode 100644 app/lib/navigation/pages.ts diff --git a/app/lib/navigation/index.ts b/app/lib/navigation/index.ts index 02b126b9..70aded6d 100644 --- a/app/lib/navigation/index.ts +++ b/app/lib/navigation/index.ts @@ -2,134 +2,4 @@ export * from "./layout-preference"; export * from "./work-mode"; export * from "./work-screen"; export * from "./primary-workmode-selector"; - -import { WorkScreen } from "./work-screen"; - -export interface WorkmodeConfig { - tabs: PageConfig[]; -} - -export interface PageConfig { - id: WorkScreen; - title: string; - path: string; -} - -/// -/// region page declarations -/// - -const page_code_preview: PageConfig = { - id: WorkScreen.code, - title: "Preview", - path: "/code/preview", -}; - -const page_code_layout: PageConfig = { - id: WorkScreen.layout, - title: "Layout", - path: "/code/layout", -}; - -const page_code_component: PageConfig = { - id: WorkScreen.component, - title: "Component", - path: "/code/component", -}; - -const page_code_lint: PageConfig = { - id: WorkScreen.lint, - title: "Lint", - path: "/code/lint", -}; - -const page_design_icon: PageConfig = { - id: WorkScreen.icon, - title: "Icon", - path: "/design/icons", -}; - -const page_design_layout: PageConfig = { - id: WorkScreen.layout, - title: "Layout", - path: "/design/layout", -}; - -const page_design_lint: PageConfig = { - id: WorkScreen.lint, - title: "Lint", - path: "/design/lint", -}; - -const page_content_g11n: PageConfig = { - id: WorkScreen.g11n, - title: "Globalize", - path: "/content/globalize", -}; - -const page_about: PageConfig = { - id: WorkScreen.about, - title: "About", - path: "/about", -}; - -const page_toolbox_font_replacer: PageConfig = { - id: WorkScreen.tool_font_replacer, - title: "Font replacer", - path: "/toolbox/font-replacer", -}; - -const page_toolbox_desing_button_maker: PageConfig = { - id: WorkScreen.tool_desing_button_maker, - title: "Button Maker", - path: "/toolbox/button-maker", -}; - -const page_toolbox_meta_editor: PageConfig = { - id: WorkScreen.tool_meta_editor, - title: "Meta", - path: "/toolbox/meta-editor", -}; - -const page_toolbox_batch_meta_editor: PageConfig = { - id: WorkScreen.tool_batch_meta_editor, - title: "Batch Meta", - path: "/toolbox/batch-meta-editor", -}; - -const page_toolbox_data_mapper: PageConfig = { - id: WorkScreen.tool_data_mapper, - title: "Data mapper", - path: "/toolbox/data-mapper", -}; - -/** - * list of all pages - */ -const all_pages: PageConfig[] = [ - page_toolbox_data_mapper, - page_toolbox_batch_meta_editor, - page_toolbox_meta_editor, - page_toolbox_desing_button_maker, - page_toolbox_font_replacer, - page_about, - page_content_g11n, - page_design_lint, - page_design_layout, - page_design_icon, - page_code_layout, - page_code_preview, - page_code_component, - page_code_lint, -]; - -export function get_page_config(id: WorkScreen): PageConfig { - const _ = all_pages.find((p) => p.id === id); - if (_) { - return _; - } - throw `${id} is not found from registered page configs`; -} -/// -/// endregion page declarations -/// +export * from "./pages"; diff --git a/app/lib/navigation/pages.ts b/app/lib/navigation/pages.ts new file mode 100644 index 00000000..5e3b4a80 --- /dev/null +++ b/app/lib/navigation/pages.ts @@ -0,0 +1,126 @@ +import { WorkScreen } from "./work-screen"; + +export interface PageConfig { + id: WorkScreen; + title: string; + path: string; +} + +/// +/// region page declarations +/// + +const page_code_preview: PageConfig = { + id: WorkScreen.code, + title: "Preview", + path: "/code/preview", +}; + +const page_code_layout: PageConfig = { + id: WorkScreen.layout, + title: "Layout", + path: "/code/layout", +}; + +const page_code_component: PageConfig = { + id: WorkScreen.component, + title: "Component", + path: "/code/component", +}; + +const page_code_lint: PageConfig = { + id: WorkScreen.lint, + title: "Lint", + path: "/code/lint", +}; + +const page_design_icon: PageConfig = { + id: WorkScreen.icon, + title: "Icon", + path: "/design/icons", +}; + +const page_design_layout: PageConfig = { + id: WorkScreen.layout, + title: "Layout", + path: "/design/layout", +}; + +const page_design_lint: PageConfig = { + id: WorkScreen.lint, + title: "Lint", + path: "/design/lint", +}; + +const page_content_g11n: PageConfig = { + id: WorkScreen.g11n, + title: "Globalize", + path: "/content/globalize", +}; + +const page_about: PageConfig = { + id: WorkScreen.about, + title: "About", + path: "/about", +}; + +const page_toolbox_font_replacer: PageConfig = { + id: WorkScreen.tool_font_replacer, + title: "Font replacer", + path: "/toolbox/font-replacer", +}; + +const page_toolbox_desing_button_maker: PageConfig = { + id: WorkScreen.tool_desing_button_maker, + title: "Button Maker", + path: "/toolbox/button-maker", +}; + +const page_toolbox_meta_editor: PageConfig = { + id: WorkScreen.tool_meta_editor, + title: "Meta", + path: "/toolbox/meta-editor", +}; + +const page_toolbox_batch_meta_editor: PageConfig = { + id: WorkScreen.tool_batch_meta_editor, + title: "Batch Meta", + path: "/toolbox/batch-meta-editor", +}; + +const page_toolbox_data_mapper: PageConfig = { + id: WorkScreen.tool_data_mapper, + title: "Data mapper", + path: "/toolbox/data-mapper", +}; + +/** + * list of all pages + */ +const all_pages: PageConfig[] = [ + page_toolbox_data_mapper, + page_toolbox_batch_meta_editor, + page_toolbox_meta_editor, + page_toolbox_desing_button_maker, + page_toolbox_font_replacer, + page_about, + page_content_g11n, + page_design_lint, + page_design_layout, + page_design_icon, + page_code_layout, + page_code_preview, + page_code_component, + page_code_lint, +]; + +export function get_page_config(id: WorkScreen): PageConfig { + const _ = all_pages.find((p) => p.id === id); + if (_) { + return _; + } + throw `${id} is not found from registered page configs`; +} +/// +/// endregion page declarations +/// From 030b9cf29591933caee20599b8a6adf4fba816e6 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 16:12:32 +0900 Subject: [PATCH 12/26] extract dedicated router --- app/lib/main/index.tsx | 17 +++-------------- app/lib/navigation/index.ts | 1 + app/lib/navigation/router.ts | 9 +++++++++ 3 files changed, 13 insertions(+), 14 deletions(-) create mode 100644 app/lib/navigation/router.ts diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 4ac37a47..e6f27928 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -6,14 +6,7 @@ import { initialize } from "../analytics"; import { EK_SET_APP_MODE } from "../constants/ek.constant"; import { PluginApp } from "plugin-app"; import BatchMetaEditor from "../pages/tool-box/batch-meta-editor"; -import { - useHistory, - Switch, - Route, - Link, - MemoryRouter, - BrowserRouter, -} from "react-router-dom"; +import { useHistory, Switch, Route } from "react-router-dom"; // // region screens import @@ -35,6 +28,7 @@ import { AboutScreen } from "../pages/about"; // import { + getDedicatedRouter, getWorkmodeTabLayout, get_page_config, WorkMode, @@ -273,7 +267,7 @@ export default function App(props: { platform: TargetPlatform }) { // endregion init GA }, []); - const Router = _is_in_iframe() ? MemoryRouter : BrowserRouter; + const Router = getDedicatedRouter(); return ( @@ -296,11 +290,6 @@ export default function App(props: { platform: TargetPlatform }) { ); } -function _is_in_iframe() { - // The page is in an iframe - return window.location !== window.parent.location; -} - function _update_focused_screen_ev(screen: WorkScreen) { // notify code.ts that app mode has set. parent.postMessage( diff --git a/app/lib/navigation/index.ts b/app/lib/navigation/index.ts index 70aded6d..c94967ae 100644 --- a/app/lib/navigation/index.ts +++ b/app/lib/navigation/index.ts @@ -3,3 +3,4 @@ export * from "./work-mode"; export * from "./work-screen"; export * from "./primary-workmode-selector"; export * from "./pages"; +export * from "./router"; diff --git a/app/lib/navigation/router.ts b/app/lib/navigation/router.ts new file mode 100644 index 00000000..3ad2d29b --- /dev/null +++ b/app/lib/navigation/router.ts @@ -0,0 +1,9 @@ +import { MemoryRouter, BrowserRouter } from "react-router-dom"; + +export const getDedicatedRouter = () => + _is_in_iframe() ? MemoryRouter : BrowserRouter; + +function _is_in_iframe() { + // The page is in an iframe + return window.location !== window.parent.location; +} From 9c2e27f1ed2baced679dab294ae82ca430a9b647 Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 17 Aug 2021 16:26:47 +0900 Subject: [PATCH 13/26] stash add: lint-screen component --- app/lib/components/assets/right-arrow.svg | 3 + app/lib/components/style/global-style.ts | 13 +- app/lib/pages/lint/lint-colors.ts | 2 +- app/lib/pages/lint/lint-level-indicator.tsx | 4 +- .../pages/lint/lint-option-choice-item.tsx | 64 ++++ app/lib/pages/lint/lint-screen.tsx | 362 ++++++++---------- 6 files changed, 237 insertions(+), 211 deletions(-) create mode 100644 app/lib/components/assets/right-arrow.svg create mode 100644 app/lib/pages/lint/lint-option-choice-item.tsx diff --git a/app/lib/components/assets/right-arrow.svg b/app/lib/components/assets/right-arrow.svg new file mode 100644 index 00000000..b7cbc78e --- /dev/null +++ b/app/lib/components/assets/right-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/style/global-style.ts b/app/lib/components/style/global-style.ts index 6b402d04..f02afa11 100644 --- a/app/lib/components/style/global-style.ts +++ b/app/lib/components/style/global-style.ts @@ -11,6 +11,7 @@ export const ButtonStyle = css` box-sizing: border-box; padding-top: 16px; padding-bottom: 16px; + cursor: pointer; // FIXME: CHEKC IS RIGHT capitalize? text-transform: capitalize; @@ -28,6 +29,12 @@ export const BlackButton = css` color: #fff; background: #17181a; } + + &:disabled { + background: #949494; + color: #bbb; + border: 1px solid #949494; + } `; export const WhtieButton = css` @@ -39,10 +46,12 @@ export const WhtieButton = css` export const TransparencyButton = css` ${ButtonStyle} - color: #C1C1C1; + color: #c1c1c1; + border: 0; + background: rgba(255, 255, 255, 0); &:hover { - background: rgba(255, 255, 255, 0); + background: rgba(255, 255, 255, 0.3); } `; diff --git a/app/lib/pages/lint/lint-colors.ts b/app/lib/pages/lint/lint-colors.ts index 93f3bedd..61f03916 100644 --- a/app/lib/pages/lint/lint-colors.ts +++ b/app/lib/pages/lint/lint-colors.ts @@ -1,5 +1,5 @@ export enum Level { - warn = "warn", + warn = "warning", error = "error", none = "none", ignore = "ignore", diff --git a/app/lib/pages/lint/lint-level-indicator.tsx b/app/lib/pages/lint/lint-level-indicator.tsx index 4c300c2b..e24619f2 100644 --- a/app/lib/pages/lint/lint-level-indicator.tsx +++ b/app/lib/pages/lint/lint-level-indicator.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import { Level } from "./lint-colors"; interface ILintLevelIndicator { - color: Level; + color: string; } export function LintLevelIndicator(props: ILintLevelIndicator) { @@ -12,7 +12,7 @@ export function LintLevelIndicator(props: ILintLevelIndicator) { } interface IIndicator { - color: Level; + color: string; } const Indicator = styled.div` diff --git a/app/lib/pages/lint/lint-option-choice-item.tsx b/app/lib/pages/lint/lint-option-choice-item.tsx new file mode 100644 index 00000000..58dcf8ed --- /dev/null +++ b/app/lib/pages/lint/lint-option-choice-item.tsx @@ -0,0 +1,64 @@ +import { css } from "@emotion/react"; +import styled from "@emotion/styled"; +import * as React from "react"; + +interface Props { + selected: boolean; + placeholder?: boolean; +} + +export function OptionChoiceItem(props: Props) { + const RightArrowIcon = + require("../../../lib/components/assets/right-arrow.svg") as string; + + return ( + <> + + + + hi + hibye + + ); +} + +const StyledArrow = styled.div` + cursor: pointer; + + ${(props) => + props.selected + ? css` + fill: "#000"; + ` + : props.placeholder + ? css` + fill: "#DEDEDE"; + ` + : css` + fill: "rgba(255,255,255,0)"; + + &:hover { + fill: "#8B8B8B;"; + } + `} +`; + +const Title = styled.h6` + margin: 0; + + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 17px; + + color: #000000; +`; + +const SubTitle = styled.body` + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 17px; + + color: #8a8a8a; +`; diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx index 435b0392..e5a58f69 100644 --- a/app/lib/pages/lint/lint-screen.tsx +++ b/app/lib/pages/lint/lint-screen.tsx @@ -8,191 +8,49 @@ import styled from "@emotion/styled"; import { LintLevelIndicator } from "./lint-level-indicator"; import { Level } from "./lint-colors"; import { _APP_EVENT_LINT_RESULT_EK } from "../../lint/__plugin/events"; +import { + BlackButton, + TransparencyButton, +} from "../../components/style/global-style"; +import { makeSummary, requestLintOnCurrentSelection } from "../../lint/actions"; +import { useSingleSelection } from "../../utils/plugin-hooks"; interface State { feedbacks: Array; + selection: any; } -const TestObj = [ - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3460;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3460;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3460;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3460;2787:3435;2831:11867", - }, - ], - }, - }, - }, - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3465;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3465;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3465;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3465;2787:3435;2831:11867", - }, - ], - }, - }, - }, - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3470;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3470;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3470;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3470;2787:3435;2831:11867", - }, - ], - }, - }, - }, - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3475;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3475;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3475;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3475;2787:3435;2831:11867", - }, - ], - }, - }, - }, - { - name: "MissingTextStyleWarning", - userMessage: - 'missing text style on text node "“iPhone XS - 3” is not a valid component name"', - node: { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3695;2787:3435;61:171", - parentReference: { - name: "(base) error-line-item", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3695;2787:3435", - children: [ - { - name: "“iPhone XS - 3” is not a valid component name", - type: "TEXT", - origin: "TEXT", - id: "I2787:3695;2787:3435;61:171", - }, - { - name: "lint-level-indicator", - type: "FRAME", - origin: "INSTANCE", - id: "I2787:3695;2787:3435;2831:11867", - }, - ], - }, - }, - }, -]; +export const LintScreen = () => { + // constructor(props) { + // super(props); -export class LintScreen extends React.Component { - constructor(props) { - super(props); + // this.state = { + // feedbacks: [], + // selection: useSelection(), + // }; + // } - this.state = { - feedbacks: [], - }; - } + // componentDidMount() { + // console.log(_selection); + // this.setState({ selection: _selection }); - componentDidMount() { - window.addEventListener("message", (ev: MessageEvent) => { - const msg = ev.data.pluginMessage; - if (msg.type == _APP_EVENT_LINT_RESULT_EK) { - const feedbacks = msg.data as Array; - this.setState((state, props) => { - return { feedbacks: feedbacks }; - }); - } - }); - } + const [feedbacks, setFeedbacks] = React.useState([]); + + const selection = useSingleSelection(); + + console.log("feedbacks: ", feedbacks); + // console.log("selection: ", _s); + + window.addEventListener("message", (ev: MessageEvent) => { + const msg = ev.data.pluginMessage; + if (msg.type == _APP_EVENT_LINT_RESULT_EK) { + const _feedbacks = msg.data as Array; + setFeedbacks(_feedbacks); + } + }); + // } - onFeedbackTap(feedback: ReflectLintFeedback) { + function onFeedbackTap(feedback: ReflectLintFeedback) { const targetNodeId = feedback.node.id; console.log(targetNodeId); // move to target element @@ -209,41 +67,78 @@ export class LintScreen extends React.Component { ); } - render() { - function ErrorLineItem() { - return ( - <> - - {feedbacks.map((item, i) => { - return ( - - - - - ); - })} - - - ); - } + function handleSelectionLayer() { + return ( + <> + {feedbacks ? ( + <> + Run lint on “example” + + Run lint under “example” Across {feedbacks.length} layers. + + + ) : ( + <> + {feedbacks.length} Improvements found + + {console.log(makeSummary(feedbacks))} + Across 24 layers, there were 4 must-fix errors and 8 + warnings. + + + )} + + ); + } - // const { feedbacks } = this.state; - const feedbacks = TestObj; + function ErrorLineItem() { return ( <> - - - {feedbacks.length} Improvements found - - Across 24 layers, there were 4 must-fix errors and 8 - warnings. - - {ErrorLineItem()} - + + {feedbacks.map((item, i) => { + return ( + onFeedbackTap(item)}> + + + + ); + })} + ); } -} + + return ( + <> + + + {!!selection ? ( + <>{handleSelectionLayer()} + ) : ( + <> + {`Select a layer / frame to run lint on :)`} + + )} + + {ErrorLineItem()} + {/* {!!feedbacks ? ( */} + {!feedbacks ? ( + + Run lint + + ) : ( + + Jump to first error + Clear + + )} + + + ); +}; const ErrorWrapper = styled.div` margin: 0 8px; @@ -272,15 +167,70 @@ const ErrorComent = styled.h6` } `; +const EmptyMessage = styled.div` + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + text-align: center; + + color: #8d8d8d; +`; + const ErrorList = styled.ul` padding: 0; `; +const UnderBtnWrapper = styled.div` + width: calc(100% - 32px); + display: flex; + position: absolute; + bottom: 16px; +`; + +const RunLintButtton = styled.button` + ${BlackButton} + width: calc(100% - 32px); + position: absolute; + bottom: 16px; +`; + +const FirstErrorButton = styled.button` + ${BlackButton} + width: 66.6666%; + margin-right: 8px; +`; + +const ClearButton = styled.button` + ${TransparencyButton} + width: 33.3333%; +`; + +const RunLintTitle = styled.h2` + // Run lint on “example” + margin: 0; + font-weight: 500; + font-size: 16px; + line-height: 20px; + + color: #000000; +`; + +const RunLintSubTitle = styled.h5` + margin: 0; + font-weight: normal; + font-size: 12px; + line-height: 14px; + + color: #959595; +`; + const List = styled.li` display: flex; align-items: center; - + cursor: pointer; margin-bottom: 12px; + &:last-child { margin-bottom: 0; } From 64e90a591328143f856958aaca82470edcf11b63 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 16:35:56 +0900 Subject: [PATCH 14/26] add upload steps def --- app/lib/navigation/pages.ts | 15 ++++++++++++++- app/lib/navigation/work-screen.ts | 1 + 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/app/lib/navigation/pages.ts b/app/lib/navigation/pages.ts index 5e3b4a80..245c0a27 100644 --- a/app/lib/navigation/pages.ts +++ b/app/lib/navigation/pages.ts @@ -94,6 +94,12 @@ const page_toolbox_data_mapper: PageConfig = { path: "/toolbox/data-mapper", }; +const page_scene_upload_steps_final: PageConfig = { + id: WorkScreen.scene_upload_steps_final, + title: "Review your scene", // not used + path: "/code/uploadsteps/final-upload", +}; + /** * list of all pages */ @@ -103,7 +109,6 @@ const all_pages: PageConfig[] = [ page_toolbox_meta_editor, page_toolbox_desing_button_maker, page_toolbox_font_replacer, - page_about, page_content_g11n, page_design_lint, page_design_layout, @@ -112,6 +117,14 @@ const all_pages: PageConfig[] = [ page_code_preview, page_code_component, page_code_lint, + // standalones + page_about, + page_scene_upload_steps_final, +]; + +export const standalone_pages: PageConfig[] = [ + page_about, + page_scene_upload_steps_final, ]; export function get_page_config(id: WorkScreen): PageConfig { diff --git a/app/lib/navigation/work-screen.ts b/app/lib/navigation/work-screen.ts index 899ba115..cd886512 100644 --- a/app/lib/navigation/work-screen.ts +++ b/app/lib/navigation/work-screen.ts @@ -18,4 +18,5 @@ export enum WorkScreen { tool_meta_editor = "tool_meta_editor", tool_batch_meta_editor = "tool_batch_meta_editor", tool_data_mapper = "tool_data_mapper", + scene_upload_steps_final = "scene_upload_steps_final", } From ed7b6b2099f20f13bfb78a264f50ecaf764b4d46 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 16:41:28 +0900 Subject: [PATCH 15/26] add standalone routes handling --- app/lib/main/index.tsx | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index e6f27928..fb385130 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -33,7 +33,7 @@ import { get_page_config, WorkMode, WorkScreen, - worspaceModeToName, + standalone_pages, PrimaryWorkmodeSet, } from "../navigation"; @@ -136,6 +136,10 @@ function Screen(props: { screen: WorkScreen }) { return ; case WorkScreen.tool_data_mapper: return ; + case WorkScreen.scene_upload_steps_final: + return ; + default: + return
Not found
; } } @@ -272,17 +276,22 @@ export default function App(props: { platform: TargetPlatform }) { return ( - {/* # region unique route section */} - - + {/* # 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.*/} From b21419e5fcdf74a86dd43b6ffc1d7b16a3a186e6 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 17:24:25 +0900 Subject: [PATCH 16/26] enabled event io for webdev --- .../utils/plugin-init/init-target-platform.ts | 4 ++++ packages/plugin-sdk-app/index.ts | 9 +++++++-- packages/plugin-sdk-service/index.ts | 16 ++++++++-------- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/app/lib/utils/plugin-init/init-target-platform.ts b/app/lib/utils/plugin-init/init-target-platform.ts index 32d47cb2..7bec58a1 100644 --- a/app/lib/utils/plugin-init/init-target-platform.ts +++ b/app/lib/utils/plugin-init/init-target-platform.ts @@ -11,6 +11,10 @@ export let TARGET_PLATFORM: TargetPlatform; */ export async function initializeTargetPlatform(platform: TargetPlatform) { TARGET_PLATFORM = platform; + if (platform == TargetPlatform.webdev) { + return true; + } + // sync this to code side. await PluginSdk.request({ namespace: "__INTERNAL__", diff --git a/packages/plugin-sdk-app/index.ts b/packages/plugin-sdk-app/index.ts index 00986a3f..99e4f1e9 100644 --- a/packages/plugin-sdk-app/index.ts +++ b/packages/plugin-sdk-app/index.ts @@ -34,9 +34,12 @@ const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache( "co.grida.assistant" ); export class PluginSdk { - static window: Window; + private static _window: Window; + static get window(): Window { + return this._window; + } static initializeWindow(window: Window) { - this.window = window; + this._window = window; } // region general canvas api @@ -88,6 +91,7 @@ export class PluginSdk { namespace: PLUGIN_SDK_NS_STORAGE, key: PLUGIN_SDK_EK_STORAGE_ALIAS.set, data: >{ + type: "set-item", key: key, value: value, }, @@ -107,6 +111,7 @@ export class PluginSdk { namespace: PLUGIN_SDK_NS_STORAGE, key: PLUGIN_SDK_EK_STORAGE_ALIAS.get, data: >{ + type: "get-item", key: key, }, }); diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts index f9b4536e..61968ffe 100644 --- a/packages/plugin-sdk-service/index.ts +++ b/packages/plugin-sdk-service/index.ts @@ -299,7 +299,7 @@ export function handleNotify(props: HanderProps) { response(props.id, true); } -function handleStorageEvent(props: HanderProps) { +async function handleStorageEvent(props: HanderProps) { const _get_dedicated_storage = (): IStorage => { switch (TARGET_PLATFORM) { case TargetPlatform.webdev: { @@ -314,14 +314,12 @@ function handleStorageEvent(props: HanderProps) { const _storage = _get_dedicated_storage(); switch (props.data.type) { case "get-item": - _storage.getItem(props.data.key).then((d) => { - response(props.id, { value: d }); - }); + const d = await _storage.getItem(props.data.key); + response(props.id, { value: d }); break; case "set-item": - _storage.setItem(props.data.key, props.data.value).then(() => { - response(props.id, true); // setting data to storage does not require response data payload (using `true`.). - }); + await _storage.setItem(props.data.key, props.data.value); + response(props.id, true); // setting data to storage does not require response data payload (using `true`.). break; } } @@ -383,10 +381,12 @@ function response( }; switch (TARGET_PLATFORM) { case TargetPlatform.webdev: { - window.postMessage(msg, undefined); + window.postMessage({ pluginMessage: msg }, undefined); + break; } case TargetPlatform.figma: { figma.ui.postMessage(msg); + break; } } From e9cadd0953746f0c8bcf418c565472c92c3f07d7 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 17:24:34 +0900 Subject: [PATCH 17/26] add saved layout loader --- app/lib/main/index.tsx | 53 ++++++++++---------- app/lib/navigation/index.ts | 1 + app/lib/navigation/navigation-store/index.ts | 16 +++++- app/lib/navigation/work-screen.ts | 1 + packages/pugin-app/index.tsx | 18 +++++-- 5 files changed, 56 insertions(+), 33 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index fb385130..c76eb15b 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import React, { useState, useEffect } from "react"; import "../app.css"; import { initialize } from "../analytics"; @@ -35,6 +35,8 @@ import { WorkScreen, standalone_pages, PrimaryWorkmodeSet, + loadLayout, + NavigationStoreState, } from "../navigation"; import { @@ -181,13 +183,9 @@ function TabsLayout(props: { )} - {/*
Tab 3
} /> */} - {/*
Tab 1
} /> */} {tabs_as_page_configs.map((v, i) => { return ( - // } /> - // ); })} @@ -195,19 +193,18 @@ function TabsLayout(props: { ); } -function TabNavigationApp() { - const [workmode, setWorkmode] = React.useState(WorkMode.code); - const [workmodeSet, setWorkmodeSet] = React.useState({ - first: WorkMode.code, - second: WorkMode.design, - }); +function TabNavigationApp(props?: { savedLayout: NavigationStoreState }) { + const [workmode, setWorkmode] = useState(WorkMode.code); + const [workmodeSet, setWorkmodeSet] = useState( + props?.savedLayout?.workmodeSet + ); const on_workmode_select = (workmode: WorkMode) => { setWorkmode(workmode); }; - const [tabIndex, setTabIndex] = React.useState(0); - const [expansion, setExpansion] = React.useState(true); + const [tabIndex, setTabIndex] = useState(0); + const [expansion, setExpansion] = useState(true); return ( <> @@ -226,21 +223,8 @@ function TabNavigationApp() { {!expansion && } - - {/* {}} /> */} - {/* LEGACY */} - {/* { - // when workspace mode is updated, by default the first index 0 tab will be selected without select event. - // explicitly triggering the event. - setWorkmode(selected); - const newTabLayout = getWorkmodeTabLayout(selected); - _update_focused_screen_ev(newTabLayout[0]); - }} - /> */} {/* {expansion && ( */} (undefined); + + useEffect(() => { + loadLayout() + .then((d) => { + setSavedLayout(d); + }) + .finally(() => {}); + }, []); + + return <>{savedLayout && }; +} + export default function App(props: { platform: TargetPlatform }) { React.useEffect(() => { // FIXME: - dynamicallt change initial focused screen. (currently inital setup is not implemented. - initial setup is done by below line.) @@ -291,7 +290,7 @@ export default function App(props: { platform: TargetPlatform }) { {/* # 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/app/lib/navigation/index.ts b/app/lib/navigation/index.ts index c94967ae..78316c2c 100644 --- a/app/lib/navigation/index.ts +++ b/app/lib/navigation/index.ts @@ -1,3 +1,4 @@ +export * from "./navigation-store"; export * from "./layout-preference"; export * from "./work-mode"; export * from "./work-screen"; diff --git a/app/lib/navigation/navigation-store/index.ts b/app/lib/navigation/navigation-store/index.ts index 3b930707..5a04509b 100644 --- a/app/lib/navigation/navigation-store/index.ts +++ b/app/lib/navigation/navigation-store/index.ts @@ -9,11 +9,25 @@ export interface NavigationStoreState { currentWork: WorkScreen; } +const _default_state: NavigationStoreState = { + workmodeSet: { + first: WorkMode.code, + second: WorkMode.design, + }, + currentWorkmode: WorkMode.code, + currentWork: WorkScreen.code, +}; + const __KEY = "app-navigation-full-layout"; export async function saveLayout(state: NavigationStoreState) { PluginSdk.setItem(__KEY, state); } export async function loadLayout(): Promise { - return PluginSdk.getItem(__KEY); + const saved = await PluginSdk.getItem(__KEY); + console.log("saved", saved); + if (saved) { + return saved; + } + return _default_state; } diff --git a/app/lib/navigation/work-screen.ts b/app/lib/navigation/work-screen.ts index cd886512..c5dd3ed4 100644 --- a/app/lib/navigation/work-screen.ts +++ b/app/lib/navigation/work-screen.ts @@ -1,5 +1,6 @@ export enum WorkScreen { about = "about", + /** todo: rename to code/preview */ code = "code", /** @deprecated only used for sendig event */ code_flutter = "code/flutter", diff --git a/packages/pugin-app/index.tsx b/packages/pugin-app/index.tsx index 97bf9507..c9b773d9 100644 --- a/packages/pugin-app/index.tsx +++ b/packages/pugin-app/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { useSetRecoilState } from "recoil"; import Axios from "axios"; import { @@ -17,6 +17,7 @@ import { } from "../../app/lib/utils/plugin-init/init-target-platform"; export function PluginApp(props: { platform: TargetPlatform; children: any }) { + const [booting, setBooting] = useState(true); useEffect(() => { PluginSdk.initializeWindow(parent); window.addEventListener("message", (ev: MessageEvent) => { @@ -42,12 +43,19 @@ export function PluginApp(props: { platform: TargetPlatform; children: any }) { }); // init platform - initializeTargetPlatform(props.platform).then(() => { - console.info("PluginApp initiallized"); - }); + initializeTargetPlatform(props.platform) + .then(() => {}) + .finally(() => { + console.info("PluginApp initiallized"); + setBooting(false); + }); }, []); - return
{props.children}
; + if (booting) { + return null; + } + + return <>{props.children}; } function registerPluginSdkHandler(message: TransportPluginEvent) { From 038206b5e1395cb955f54cba9dfc69dd195f7f92 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 17:52:48 +0900 Subject: [PATCH 18/26] add path tab wrapper - wip --- app/lib/main/index.tsx | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index c76eb15b..f4fe1cf6 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -185,7 +185,11 @@ function TabsLayout(props: { {tabs_as_page_configs.map((v, i) => { return ( - } /> + } + /> ); })} @@ -241,6 +245,20 @@ function TabNavigationApp(props?: { savedLayout: NavigationStoreState }) { // } +function RouterTabNavigationApp(props) { + const [savedLayout, setSavedLayout] = useState(); + useEffect(() => { + loadLayout().then((l) => setSavedLayout(l)); + }, []); + + const params = props.match.params; + const workmode = params.workmode; + const work = params.work; + // TODO: make new layout based on saved one and givven param. + + return <>{savedLayout && }; +} + function Home() { const [savedLayout, setSavedLayout] = useState(undefined); @@ -289,7 +307,7 @@ export default function App(props: { platform: TargetPlatform }) { })} {/* # 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.*/} From bead90d6a797dd76c75a9e9fb11a27f733c87152 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 17 Aug 2021 19:07:31 +0900 Subject: [PATCH 19/26] fix plugin app to receive platform sync event from figma --- app/lib/main/index.tsx | 2 +- packages/plugin-sdk-app/index.ts | 1 + packages/plugin-sdk-service/index.ts | 6 +++++- .../plugin-sdk-service/storage/payload-handle.ts | 10 +++++++++- packages/pugin-app/index.tsx | 13 ++++++++++++- 5 files changed, 28 insertions(+), 4 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index f4fe1cf6..47829f5f 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -275,7 +275,7 @@ function Home() { } export default function App(props: { platform: TargetPlatform }) { - React.useEffect(() => { + useEffect(() => { // FIXME: - dynamicallt change initial focused screen. (currently inital setup is not implemented. - initial setup is done by below line.) _update_focused_screen_ev(WorkScreen.code_flutter); diff --git a/packages/plugin-sdk-app/index.ts b/packages/plugin-sdk-app/index.ts index 99e4f1e9..03dc7887 100644 --- a/packages/plugin-sdk-app/index.ts +++ b/packages/plugin-sdk-app/index.ts @@ -240,6 +240,7 @@ export class PluginSdk { // endregion canvas static postMessage(event: TransportPluginEvent) { + // console.log("::plugin-sdk post message", event); PluginSdk.window.postMessage( { pluginMessage: event, diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts index 61968ffe..657ae549 100644 --- a/packages/plugin-sdk-service/index.ts +++ b/packages/plugin-sdk-service/index.ts @@ -104,6 +104,10 @@ export class PluginSdkService { } if (event.namespace == "__INTERNAL__") { + // console.log( + // 'handling internal ivent with event ns - "__INTERNAL__"', + // event + // ); return handleInternalEvent(event); } @@ -185,7 +189,7 @@ export class PluginSdkService { function handleInternalEvent(event: HanderProps) { if (event.key == "sync-target-platform") { - return __syncTargetPlatformForCodeThread(event.data); + return response(event.id, __syncTargetPlatformForCodeThread(event.data)); } return response(event.id, true); } diff --git a/packages/plugin-sdk-service/storage/payload-handle.ts b/packages/plugin-sdk-service/storage/payload-handle.ts index eca4c973..7eee8109 100644 --- a/packages/plugin-sdk-service/storage/payload-handle.ts +++ b/packages/plugin-sdk-service/storage/payload-handle.ts @@ -1,6 +1,14 @@ export function encode(payload: T): string { return JSON.stringify(payload); } + export function decode(payload: string): T { - return JSON.parse(payload) as T; + try { + if (payload === null || payload === undefined) { + return JSON.parse(payload) as T; + } + return null; + } catch (_) { + return null; + } } diff --git a/packages/pugin-app/index.tsx b/packages/pugin-app/index.tsx index c9b773d9..c0cddde7 100644 --- a/packages/pugin-app/index.tsx +++ b/packages/pugin-app/index.tsx @@ -19,6 +19,7 @@ import { export function PluginApp(props: { platform: TargetPlatform; children: any }) { const [booting, setBooting] = useState(true); useEffect(() => { + // console.log("start initializing plugin app..."); PluginSdk.initializeWindow(parent); window.addEventListener("message", (ev: MessageEvent) => { const message: TransportPluginEvent = ev.data.pluginMessage; @@ -52,7 +53,17 @@ export function PluginApp(props: { platform: TargetPlatform; children: any }) { }, []); if (booting) { - return null; + return ( +
+ Loading.. +
+ ); } return <>{props.children}; From b3c519e18d31267699c84b821b63a78ddccd5bb7 Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 17 Aug 2021 21:05:20 +0900 Subject: [PATCH 20/26] stash change: lint structure --- app/lib/components/assets/expand-down.svg | 3 + app/lib/components/assets/expand-right.svg | 3 + app/lib/components/assets/right-arrow.svg | 2 +- app/lib/lint/lint-colors.ts | 7 ++ app/lib/{pages => }/lint/lint-error-icon.tsx | 18 ++-- app/lib/lint/lint-item-row/lint-item-row.tsx | 82 +++++++++++++++---- .../{pages => }/lint/lint-level-indicator.tsx | 2 +- app/lib/lint/lint-list-view/index.ts | 4 - app/lib/lint/lint-list-view/index.tsx | 20 +++++ app/lib/pages/lint/error-by-layer-item.tsx | 4 +- app/lib/pages/lint/lint-screen.tsx | 37 ++++++--- 11 files changed, 136 insertions(+), 46 deletions(-) create mode 100644 app/lib/components/assets/expand-down.svg create mode 100644 app/lib/components/assets/expand-right.svg create mode 100644 app/lib/lint/lint-colors.ts rename app/lib/{pages => }/lint/lint-error-icon.tsx (54%) rename app/lib/{pages => }/lint/lint-level-indicator.tsx (94%) delete mode 100644 app/lib/lint/lint-list-view/index.ts create mode 100644 app/lib/lint/lint-list-view/index.tsx diff --git a/app/lib/components/assets/expand-down.svg b/app/lib/components/assets/expand-down.svg new file mode 100644 index 00000000..5ba1bf46 --- /dev/null +++ b/app/lib/components/assets/expand-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/assets/expand-right.svg b/app/lib/components/assets/expand-right.svg new file mode 100644 index 00000000..098b0f52 --- /dev/null +++ b/app/lib/components/assets/expand-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/components/assets/right-arrow.svg b/app/lib/components/assets/right-arrow.svg index b7cbc78e..35fba15a 100644 --- a/app/lib/components/assets/right-arrow.svg +++ b/app/lib/components/assets/right-arrow.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/app/lib/lint/lint-colors.ts b/app/lib/lint/lint-colors.ts new file mode 100644 index 00000000..61f03916 --- /dev/null +++ b/app/lib/lint/lint-colors.ts @@ -0,0 +1,7 @@ +export enum Level { + warn = "warning", + error = "error", + none = "none", + ignore = "ignore", + todo = "todo", +} diff --git a/app/lib/pages/lint/lint-error-icon.tsx b/app/lib/lint/lint-error-icon.tsx similarity index 54% rename from app/lib/pages/lint/lint-error-icon.tsx rename to app/lib/lint/lint-error-icon.tsx index 0c5bdfc8..86b10d72 100644 --- a/app/lib/pages/lint/lint-error-icon.tsx +++ b/app/lib/lint/lint-error-icon.tsx @@ -1,25 +1,25 @@ import * as React from "react"; export enum LintError { - text = "missing-text-style", - name = "name-error", - mdi = "mdi_texture", - color = "missing-color-style-error", + text = "missingTextStyle", + name = "nameError", + mdi = "mdiTexture", + color = "missingColorStyleError", } interface Props { - id?: LintError; + id?: string; } export function LintErrorIcon(props: Props) { const MdiTextureIcon = - require("../../../lib/components/assets/mdi-texture.svg") as string; + require("../components/assets/mdi-texture.svg") as string; const ColorErrorIcon = - require("../../../lib/components/assets/missing-color-style-error.svg") as string; + require("../components/assets/missing-color-style-error.svg") as string; const TextErrorIcon = - require("../../../lib/components/assets/missing-text.svg") as string; + require("../components/assets/missing-text.svg") as string; const NameErrorIcon = - require("../../../lib/components/assets/name-error.svg") as string; + require("../components/assets/name-error.svg") as string; switch (props.id) { case LintError.text: diff --git a/app/lib/lint/lint-item-row/lint-item-row.tsx b/app/lib/lint/lint-item-row/lint-item-row.tsx index 9bd5dfad..6c5a1b11 100644 --- a/app/lib/lint/lint-item-row/lint-item-row.tsx +++ b/app/lib/lint/lint-item-row/lint-item-row.tsx @@ -1,24 +1,72 @@ -import * as React from "react" - +import * as React from "react"; +import styled from "@emotion/styled"; +import { LintError, LintErrorIcon } from "../lint-error-icon"; +import { LintLevelIndicator } from "../lint-level-indicator"; interface Props { - onTap: Function - name: string - icon?: any + onTap: Function; + name: string; + icon?: any; + expand: boolean; + level: string; + error: { + id: string; + name: string; + userMessage: string; + }; } -interface State { - -} +interface State {} export class LintItemRow extends React.Component { - constructor(props) { - super(props) - } - - render() { - return <> -

{this.props.name}

- - } + constructor(props) { + super(props); + } + + CloseIcon = require("../../components/assets/close.svg") as string; + ExpandIcon = require("../../components/assets/expand.svg") as string; + + render() { + return ( + + + {this.props.icon && } + {this.props.error.name} + + {this.props.expand ? : } + + {this.props.error.userMessage} + + ); + } } + +const Wrapper = styled.div` + background: #fff; + + &:hover { + background: #fcfcfc; + } +`; + +const Inner = styled.div` + display: flex; +`; +const Title = styled.h6` + margin: 0; + + font-size: 16px; + font-weight: 500; + line-height: 20px; + margin-right: auto; +`; + +const SubTitle = styled.h6` + margin: 0; + font-size: 12px; + line-height: 14px; + margin-top: 4px; + max-width: 262px; + + color: #666666; +`; diff --git a/app/lib/pages/lint/lint-level-indicator.tsx b/app/lib/lint/lint-level-indicator.tsx similarity index 94% rename from app/lib/pages/lint/lint-level-indicator.tsx rename to app/lib/lint/lint-level-indicator.tsx index e24619f2..e4f07c82 100644 --- a/app/lib/pages/lint/lint-level-indicator.tsx +++ b/app/lib/lint/lint-level-indicator.tsx @@ -1,7 +1,7 @@ import { css } from "@emotion/react"; import styled from "@emotion/styled"; import * as React from "react"; -import { Level } from "./lint-colors"; +import { Level } from "../pages/lint/lint-colors"; interface ILintLevelIndicator { color: string; diff --git a/app/lib/lint/lint-list-view/index.ts b/app/lib/lint/lint-list-view/index.ts deleted file mode 100644 index b3bc2a07..00000000 --- a/app/lib/lint/lint-list-view/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// TODO: - -/** @deprecated this is dummy. replace me */ -export const dummy = "dummy"; diff --git a/app/lib/lint/lint-list-view/index.tsx b/app/lib/lint/lint-list-view/index.tsx new file mode 100644 index 00000000..6c91d3cb --- /dev/null +++ b/app/lib/lint/lint-list-view/index.tsx @@ -0,0 +1,20 @@ +// TODO: + +import React from "react"; +import { LintErrorIcon } from "../lint-error-icon"; + +/** @deprecated this is dummy. replace me */ +export const dummy = "dummy"; + +export const rowDummy = { + onTap: () => {}, + name: "hi", + icon: () => , + expand: false, + level: "warning", + error: { + id: "s", + name: "name", + userMessage: "has error beacsue", + }, +}; diff --git a/app/lib/pages/lint/error-by-layer-item.tsx b/app/lib/pages/lint/error-by-layer-item.tsx index 17fccd2c..3ad2a736 100644 --- a/app/lib/pages/lint/error-by-layer-item.tsx +++ b/app/lib/pages/lint/error-by-layer-item.tsx @@ -1,8 +1,8 @@ import styled from "@emotion/styled"; import * as React from "react"; import { Level } from "./lint-colors"; -import { LintError, LintErrorIcon } from "./lint-error-icon"; -import { LintLevelIndicator } from "./lint-level-indicator"; +import { LintError, LintErrorIcon } from "../../lint/lint-error-icon"; +import { LintLevelIndicator } from "../../lint/lint-level-indicator"; interface IErrorByLayerItem { icon: boolean; diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx index e5a58f69..f5bb837a 100644 --- a/app/lib/pages/lint/lint-screen.tsx +++ b/app/lib/pages/lint/lint-screen.tsx @@ -2,10 +2,10 @@ import { Button, Typography } from "@material-ui/core"; import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks"; import * as React from "react"; import { Preview } from "../../components/preview"; -import { LintTreeView } from "../../lint"; +import { LintItemRow, LintTreeView } from "../../lint"; import { EK_FOCUS_REQUEST } from "../../constants/ek.constant"; import styled from "@emotion/styled"; -import { LintLevelIndicator } from "./lint-level-indicator"; +import { LintLevelIndicator } from "../../lint/lint-level-indicator"; import { Level } from "./lint-colors"; import { _APP_EVENT_LINT_RESULT_EK } from "../../lint/__plugin/events"; import { @@ -14,6 +14,7 @@ import { } from "../../components/style/global-style"; import { makeSummary, requestLintOnCurrentSelection } from "../../lint/actions"; import { useSingleSelection } from "../../utils/plugin-hooks"; +import { rowDummy } from "../../lint/lint-list-view"; interface State { feedbacks: Array; @@ -38,7 +39,7 @@ export const LintScreen = () => { const selection = useSingleSelection(); - console.log("feedbacks: ", feedbacks); + console.log(feedbacks.length === 0); // console.log("selection: ", _s); window.addEventListener("message", (ev: MessageEvent) => { @@ -48,7 +49,12 @@ export const LintScreen = () => { setFeedbacks(_feedbacks); } }); - // } + + function countSelection() { + // FIXME: just tmp + // return selection.node.children.length; + return 3; + } function onFeedbackTap(feedback: ReflectLintFeedback) { const targetNodeId = feedback.node.id; @@ -70,20 +76,21 @@ export const LintScreen = () => { function handleSelectionLayer() { return ( <> - {feedbacks ? ( + {feedbacks.length === 0 ? ( <> Run lint on “example” - Run lint under “example” Across {feedbacks.length} layers. + Run lint under “example” Across {countSelection()} + layers. ) : ( <> {feedbacks.length} Improvements found - {console.log(makeSummary(feedbacks))} - Across 24 layers, there were 4 must-fix errors and 8 - warnings. + Across 24 layers, there were 4 must-fix errors +
+ and 8 warnings. )} @@ -116,13 +123,13 @@ export const LintScreen = () => { <>{handleSelectionLayer()} ) : ( <> - {`Select a layer / frame to run lint on :)`} + + {/* {`Select a layer / frame to run lint on :)`} */} )} {ErrorLineItem()} - {/* {!!feedbacks ? ( */} - {!feedbacks ? ( + {feedbacks.length === 0 ? ( Date: Tue, 17 Aug 2021 23:50:25 +0900 Subject: [PATCH 21/26] stash add: fix-yourself component --- app/lib/lint/lint-error-icon.tsx | 8 +-- app/lib/lint/lint-item-row/lint-item-row.tsx | 64 ++++++++++++------- app/lib/lint/lint-level-indicator.tsx | 8 +-- app/lib/lint/lint-list-view/index.tsx | 23 +++++-- .../pages/lint/lint-option-choice-item.tsx | 14 ++-- 5 files changed, 77 insertions(+), 40 deletions(-) diff --git a/app/lib/lint/lint-error-icon.tsx b/app/lib/lint/lint-error-icon.tsx index 86b10d72..b968e8d6 100644 --- a/app/lib/lint/lint-error-icon.tsx +++ b/app/lib/lint/lint-error-icon.tsx @@ -23,13 +23,13 @@ export function LintErrorIcon(props: Props) { switch (props.id) { case LintError.text: - return ; + return ; case LintError.name: - return ; + return ; case LintError.mdi: - return ; + return ; case LintError.color: - return ; + return ; default: return <>; } diff --git a/app/lib/lint/lint-item-row/lint-item-row.tsx b/app/lib/lint/lint-item-row/lint-item-row.tsx index 6c5a1b11..ce8819c1 100644 --- a/app/lib/lint/lint-item-row/lint-item-row.tsx +++ b/app/lib/lint/lint-item-row/lint-item-row.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import styled from "@emotion/styled"; import { LintError, LintErrorIcon } from "../lint-error-icon"; import { LintLevelIndicator } from "../lint-level-indicator"; +import { choiceItem } from "../lint-list-view"; interface Props { onTap: Function; @@ -14,35 +15,42 @@ interface Props { name: string; userMessage: string; }; + children?: any; } -interface State {} +export function LintItemRow(props: Props) { + const CloseIcon = require("../../components/assets/close.svg") as string; + const ExpandIcon = require("../../components/assets/expand.svg") as string; -export class LintItemRow extends React.Component { - constructor(props) { - super(props); - } + return ( + + + + + - CloseIcon = require("../../components/assets/close.svg") as string; - ExpandIcon = require("../../components/assets/expand.svg") as string; + {props.error.name} + + + - render() { - return ( - - - {this.props.icon && } - {this.props.error.name} - - {this.props.expand ? : } - - {this.props.error.userMessage} - - ); - } + {props.expand ? : } + + {props.error.userMessage} + {props.onTap([choiceItem])} + + ); } const Wrapper = styled.div` background: #fff; + height: 100px; + margin-bottom: 16px; + + // for reset parent margin + margin-right: -16px; + margin-left: -16px; + padding: 16px; &:hover { background: #fcfcfc; @@ -51,14 +59,26 @@ const Wrapper = styled.div` const Inner = styled.div` display: flex; + align-items: center; +`; + +const IconWrapper = styled.div` + margin-right: 6px; +`; + +const IndicatorWrapper = styled.div` + margin-right: 10px; `; + const Title = styled.h6` margin: 0; + margin-right: auto; - font-size: 16px; + font-style: normal; font-weight: 500; + font-size: 16px; line-height: 20px; - margin-right: auto; + color: #202020; `; const SubTitle = styled.h6` diff --git a/app/lib/lint/lint-level-indicator.tsx b/app/lib/lint/lint-level-indicator.tsx index e4f07c82..b007bba8 100644 --- a/app/lib/lint/lint-level-indicator.tsx +++ b/app/lib/lint/lint-level-indicator.tsx @@ -21,19 +21,19 @@ const Indicator = styled.div` border-radius: 50%; ${(props) => - props.color === Level.warn + props.color == Level.warn ? css` background: #ffc700; ` - : props.color === Level.error + : props.color == Level.error ? css` background: #ff3a3a; ` - : props.color === Level.ignore + : props.color == Level.ignore ? css` background: #c6c6c6; ` - : props.color === Level.todo + : props.color == Level.todo ? css` background: #000; ` diff --git a/app/lib/lint/lint-list-view/index.tsx b/app/lib/lint/lint-list-view/index.tsx index 6c91d3cb..40e694b5 100644 --- a/app/lib/lint/lint-list-view/index.tsx +++ b/app/lib/lint/lint-list-view/index.tsx @@ -1,20 +1,33 @@ // TODO: import React from "react"; +import { OptionChoiceItem } from "../../pages/lint/lint-option-choice-item"; import { LintErrorIcon } from "../lint-error-icon"; /** @deprecated this is dummy. replace me */ export const dummy = "dummy"; +export const choiceItem = { + selected: false, + choice: { + title: "choice 1", + explanation: "I’ll choose this option to resolve this issue.", + }, +}; + export const rowDummy = { - onTap: () => {}, + onTap: function T(children: any[]) { + children.map((item, i) => { + return ; + }); + }, name: "hi", - icon: () => , + icon: "missingTextStyle", expand: false, level: "warning", error: { - id: "s", - name: "name", - userMessage: "has error beacsue", + id: "id", + name: "Error name", + userMessage: "This error is caused by “layer-name” and needs to be fixed.", }, }; diff --git a/app/lib/pages/lint/lint-option-choice-item.tsx b/app/lib/pages/lint/lint-option-choice-item.tsx index 58dcf8ed..95c1790e 100644 --- a/app/lib/pages/lint/lint-option-choice-item.tsx +++ b/app/lib/pages/lint/lint-option-choice-item.tsx @@ -5,24 +5,28 @@ import * as React from "react"; interface Props { selected: boolean; placeholder?: boolean; + choice: { + title: string; + explanation: string; + }; } export function OptionChoiceItem(props: Props) { const RightArrowIcon = require("../../../lib/components/assets/right-arrow.svg") as string; - + alert("hi"); return ( <> - + - hi - hibye + {props.choice.title} + {props.choice.explanation} ); } -const StyledArrow = styled.div` +const StyledArrow = styled.div<{ selected: boolean }>` cursor: pointer; ${(props) => From de4b97c8891481ee17d4e0a89a897ed1f2919062 Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 18 Aug 2021 00:11:27 +0900 Subject: [PATCH 22/26] fix empty message view --- app/lib/pages/lint/lint-screen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx index f5bb837a..7bd4bced 100644 --- a/app/lib/pages/lint/lint-screen.tsx +++ b/app/lib/pages/lint/lint-screen.tsx @@ -123,8 +123,8 @@ export const LintScreen = () => { <>{handleSelectionLayer()} ) : ( <> - - {/* {`Select a layer / frame to run lint on :)`} */} + {/* */} + {`Select a layer / frame to run lint on :)`} )} From 4c22f4246b9edf1ff05b810a148e4c4771817752 Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 18 Aug 2021 16:22:36 +0900 Subject: [PATCH 23/26] fix: choice component --- app/lib/lint/lint-item-row/lint-item-row.tsx | 59 ++++++++++++++----- app/lib/lint/lint-list-view/index.tsx | 9 +-- .../pages/lint/lint-option-choice-item.tsx | 38 +++++++++--- 3 files changed, 77 insertions(+), 29 deletions(-) diff --git a/app/lib/lint/lint-item-row/lint-item-row.tsx b/app/lib/lint/lint-item-row/lint-item-row.tsx index ce8819c1..ee493396 100644 --- a/app/lib/lint/lint-item-row/lint-item-row.tsx +++ b/app/lib/lint/lint-item-row/lint-item-row.tsx @@ -3,6 +3,7 @@ import styled from "@emotion/styled"; import { LintError, LintErrorIcon } from "../lint-error-icon"; import { LintLevelIndicator } from "../lint-level-indicator"; import { choiceItem } from "../lint-list-view"; +import { OptionChoiceItem } from "../../pages/lint/lint-option-choice-item"; interface Props { onTap: Function; @@ -18,26 +19,41 @@ interface Props { children?: any; } +function Options(children: any[]) { + return ( + <> + {children.map((item, i) => { + return ; + })} + + ); +} + export function LintItemRow(props: Props) { const CloseIcon = require("../../components/assets/close.svg") as string; const ExpandIcon = require("../../components/assets/expand.svg") as string; return ( - - - - - - {props.error.name} - - - - - {props.expand ? : } - - {props.error.userMessage} - {props.onTap([choiceItem])} + props.onTap()}> + + + + + + {props.error.name} + + + + + {props.expand ? : } + + {props.error.userMessage} + + + + {Options([choiceItem])} + ); } @@ -51,12 +67,17 @@ const Wrapper = styled.div` margin-right: -16px; margin-left: -16px; padding: 16px; + padding-bottom: 32px; &:hover { background: #fcfcfc; } `; +const Outer = styled.div` + padding-bottom: 32px; +`; + const Inner = styled.div` display: flex; align-items: center; @@ -90,3 +111,13 @@ const SubTitle = styled.h6` color: #666666; `; + +const ChoiceWrapper = styled.div<{ display: boolean }>` + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + + display: ${(props) => (props.display ? "block" : "none")}; +`; diff --git a/app/lib/lint/lint-list-view/index.tsx b/app/lib/lint/lint-list-view/index.tsx index 40e694b5..2ae0a380 100644 --- a/app/lib/lint/lint-list-view/index.tsx +++ b/app/lib/lint/lint-list-view/index.tsx @@ -2,7 +2,6 @@ import React from "react"; import { OptionChoiceItem } from "../../pages/lint/lint-option-choice-item"; -import { LintErrorIcon } from "../lint-error-icon"; /** @deprecated this is dummy. replace me */ export const dummy = "dummy"; @@ -16,14 +15,12 @@ export const choiceItem = { }; export const rowDummy = { - onTap: function T(children: any[]) { - children.map((item, i) => { - return ; - }); + onTap: function T() { + // FIXME: here is setState }, name: "hi", icon: "missingTextStyle", - expand: false, + expand: false, // FIXME: here is state level: "warning", error: { id: "id", diff --git a/app/lib/pages/lint/lint-option-choice-item.tsx b/app/lib/pages/lint/lint-option-choice-item.tsx index 95c1790e..bed71b2d 100644 --- a/app/lib/pages/lint/lint-option-choice-item.tsx +++ b/app/lib/pages/lint/lint-option-choice-item.tsx @@ -1,6 +1,7 @@ import { css } from "@emotion/react"; import styled from "@emotion/styled"; import * as React from "react"; +import { Column, Row } from "../../components/style/global-style"; interface Props { selected: boolean; @@ -14,18 +15,37 @@ interface Props { export function OptionChoiceItem(props: Props) { const RightArrowIcon = require("../../../lib/components/assets/right-arrow.svg") as string; - alert("hi"); return ( - <> - - - - {props.choice.title} - {props.choice.explanation} - + + + + + + + {props.choice.title} + {props.choice.explanation} + + + ); } +const Wrapper = styled.div` + cursor: pointer; + &:hover { + img { + fill: #8b8b8b; + } + h6 { + color: #8a8a8a; + } + } +`; + +const Icon = styled.img` + margin-right: 15px; +`; + const StyledArrow = styled.div<{ selected: boolean }>` cursor: pointer; @@ -58,7 +78,7 @@ const Title = styled.h6` color: #000000; `; -const SubTitle = styled.body` +const SubTitle = styled.span` font-style: normal; font-weight: normal; font-size: 14px; From 8aef1f63abe464267383669e593a7d619402cab7 Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 18 Aug 2021 17:11:31 +0900 Subject: [PATCH 24/26] add: fix your self page --- app/lib/components/assets/left-arrow.svg | 3 ++ app/lib/lint/lint-item-row/lint-item-row.tsx | 1 + app/lib/lint/lint-level-indicator.tsx | 2 +- app/lib/lint/lint-list-view/index.tsx | 5 -- .../lint/lint-process-paginator.tsx | 12 ++--- app/lib/pages/lint/error-by-layer-item.tsx | 2 +- app/lib/pages/lint/fix-your-self.tsx | 46 +++++++++++++++++++ app/lib/pages/lint/lint-colors.ts | 7 --- app/lib/pages/lint/lint-screen.tsx | 3 +- 9 files changed, 59 insertions(+), 22 deletions(-) create mode 100644 app/lib/components/assets/left-arrow.svg rename app/lib/{pages => }/lint/lint-process-paginator.tsx (60%) create mode 100644 app/lib/pages/lint/fix-your-self.tsx delete mode 100644 app/lib/pages/lint/lint-colors.ts diff --git a/app/lib/components/assets/left-arrow.svg b/app/lib/components/assets/left-arrow.svg new file mode 100644 index 00000000..699c9776 --- /dev/null +++ b/app/lib/components/assets/left-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/lib/lint/lint-item-row/lint-item-row.tsx b/app/lib/lint/lint-item-row/lint-item-row.tsx index ee493396..af2afbcb 100644 --- a/app/lib/lint/lint-item-row/lint-item-row.tsx +++ b/app/lib/lint/lint-item-row/lint-item-row.tsx @@ -76,6 +76,7 @@ const Wrapper = styled.div` const Outer = styled.div` padding-bottom: 32px; + cursor: pointer; `; const Inner = styled.div` diff --git a/app/lib/lint/lint-level-indicator.tsx b/app/lib/lint/lint-level-indicator.tsx index b007bba8..bd15f0a4 100644 --- a/app/lib/lint/lint-level-indicator.tsx +++ b/app/lib/lint/lint-level-indicator.tsx @@ -1,7 +1,7 @@ import { css } from "@emotion/react"; import styled from "@emotion/styled"; import * as React from "react"; -import { Level } from "../pages/lint/lint-colors"; +import { Level } from "./lint-colors"; interface ILintLevelIndicator { color: string; diff --git a/app/lib/lint/lint-list-view/index.tsx b/app/lib/lint/lint-list-view/index.tsx index 2ae0a380..324ff7da 100644 --- a/app/lib/lint/lint-list-view/index.tsx +++ b/app/lib/lint/lint-list-view/index.tsx @@ -1,8 +1,3 @@ -// TODO: - -import React from "react"; -import { OptionChoiceItem } from "../../pages/lint/lint-option-choice-item"; - /** @deprecated this is dummy. replace me */ export const dummy = "dummy"; diff --git a/app/lib/pages/lint/lint-process-paginator.tsx b/app/lib/lint/lint-process-paginator.tsx similarity index 60% rename from app/lib/pages/lint/lint-process-paginator.tsx rename to app/lib/lint/lint-process-paginator.tsx index a38f678f..7897f2ca 100644 --- a/app/lib/pages/lint/lint-process-paginator.tsx +++ b/app/lib/lint/lint-process-paginator.tsx @@ -5,8 +5,8 @@ interface Props { index: number; total: number; } -const LeftArrow = require("../../../lib/components/assets/pre-before-paginator.svg"); -const RightArrow = require("../../../lib/components/assets/pre-next-paginator.svg"); +const LeftArrow = require("../components/assets/prev-before-paginator.svg"); +const RightArrow = require("../components/assets/prev-next-paginator.svg"); export function LintProcessPaginator(props?: Props) { return ( @@ -14,8 +14,8 @@ export function LintProcessPaginator(props?: Props) { {!props ? "--" : `${props.index} of ${props.total}`} - - + + ); } @@ -31,10 +31,10 @@ const Paginator = styled.span` line-height: 17px; `; -const NextArrow = styled(LeftArrow)<{ disable: boolean }>` +const NextArrow = styled.img<{ disable: boolean }>` fill: ${(props) => (props.disable ? "#808080" : "#000")}; `; -const BeforeArrow = styled(RightArrow)<{ disable: boolean }>` +const BeforeArrow = styled.img<{ disable: boolean }>` fill: ${(props) => (props.disable ? "#808080" : "#000")}; `; diff --git a/app/lib/pages/lint/error-by-layer-item.tsx b/app/lib/pages/lint/error-by-layer-item.tsx index 3ad2a736..5d71fe77 100644 --- a/app/lib/pages/lint/error-by-layer-item.tsx +++ b/app/lib/pages/lint/error-by-layer-item.tsx @@ -1,6 +1,6 @@ import styled from "@emotion/styled"; import * as React from "react"; -import { Level } from "./lint-colors"; +import { Level } from "../../lint/lint-colors"; import { LintError, LintErrorIcon } from "../../lint/lint-error-icon"; import { LintLevelIndicator } from "../../lint/lint-level-indicator"; diff --git a/app/lib/pages/lint/fix-your-self.tsx b/app/lib/pages/lint/fix-your-self.tsx new file mode 100644 index 00000000..b6ed00f3 --- /dev/null +++ b/app/lib/pages/lint/fix-your-self.tsx @@ -0,0 +1,46 @@ +import styled from "@emotion/styled"; +import React from "react"; +import { BlackButton } from "../../components/style/global-style"; +import { LintItemRow } from "../../lint"; +import { rowDummy } from "../../lint/lint-list-view"; +import { LintProcessPaginator } from "../../lint/lint-process-paginator"; + +export function FixYourSelf() { + const LeftArrow = require("../../components/assets/left-arrow.svg"); + return ( + + + + + + + + + + + Next Layer + + ); +} + +const Wrapper = styled.div` + padding: 16px 8px; +`; + +const BackIcon = styled.div` + margin-bottom: 24px; +`; + +const Pagination = styled.div` + position: absolute; + bottom: 83px; + right: 16px; +`; + +const NextLayerBtn = styled.button` + ${BlackButton} + width: calc(100% - 32px); + position: absolute; + bottom: 16px; + left: 16px; +`; diff --git a/app/lib/pages/lint/lint-colors.ts b/app/lib/pages/lint/lint-colors.ts deleted file mode 100644 index 61f03916..00000000 --- a/app/lib/pages/lint/lint-colors.ts +++ /dev/null @@ -1,7 +0,0 @@ -export enum Level { - warn = "warning", - error = "error", - none = "none", - ignore = "ignore", - todo = "todo", -} diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx index 7bd4bced..9bfd7bd2 100644 --- a/app/lib/pages/lint/lint-screen.tsx +++ b/app/lib/pages/lint/lint-screen.tsx @@ -6,7 +6,6 @@ import { LintItemRow, LintTreeView } from "../../lint"; import { EK_FOCUS_REQUEST } from "../../constants/ek.constant"; import styled from "@emotion/styled"; import { LintLevelIndicator } from "../../lint/lint-level-indicator"; -import { Level } from "./lint-colors"; import { _APP_EVENT_LINT_RESULT_EK } from "../../lint/__plugin/events"; import { BlackButton, @@ -15,6 +14,7 @@ import { import { makeSummary, requestLintOnCurrentSelection } from "../../lint/actions"; import { useSingleSelection } from "../../utils/plugin-hooks"; import { rowDummy } from "../../lint/lint-list-view"; +import { FixYourSelf } from "./fix-your-self"; interface State { feedbacks: Array; @@ -123,7 +123,6 @@ export const LintScreen = () => { <>{handleSelectionLayer()} ) : ( <> - {/* */} {`Select a layer / frame to run lint on :)`} )} From 701cade341363f3b6cbac419437e99b96bbce0ba Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 18 Aug 2021 17:17:38 +0900 Subject: [PATCH 25/26] fix: style in lint page --- app/lib/lint/lint-process-paginator.tsx | 3 ++- app/lib/pages/lint/error-by-layer-item.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/lib/lint/lint-process-paginator.tsx b/app/lib/lint/lint-process-paginator.tsx index 7897f2ca..c1894eb6 100644 --- a/app/lib/lint/lint-process-paginator.tsx +++ b/app/lib/lint/lint-process-paginator.tsx @@ -22,9 +22,10 @@ export function LintProcessPaginator(props?: Props) { const Wrapper = styled.div` display: flex; + align-items: center; `; -const Paginator = styled.span` +const Paginator = styled.p` font-size: 14px; font-style: normal; font-weight: 400; diff --git a/app/lib/pages/lint/error-by-layer-item.tsx b/app/lib/pages/lint/error-by-layer-item.tsx index 5d71fe77..aac24f80 100644 --- a/app/lib/pages/lint/error-by-layer-item.tsx +++ b/app/lib/pages/lint/error-by-layer-item.tsx @@ -55,6 +55,7 @@ const Title = styled.h6` const SubTitle = styled.h6` margin: 0; + font-weight: 400; font-size: 12px; line-height: 14px; margin-top: 4px; From f116bdd8b4b457229fba25612c4dd496eba72a14 Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 18 Aug 2021 17:46:18 +0900 Subject: [PATCH 26/26] add: router in fix yourself --- app/lib/main/index.tsx | 3 ++ app/lib/navigation/pages.ts | 8 ++++++ app/lib/navigation/work-screen.ts | 1 + app/lib/pages/lint/fix-your-self.tsx | 8 +++++- app/lib/pages/lint/lint-screen.tsx | 42 +++++++++++++++++----------- 5 files changed, 44 insertions(+), 18 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 47829f5f..c6f7553d 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -48,6 +48,7 @@ import { import styled from "@emotion/styled"; import { Column, Row } from "../components/style/global-style"; import { UploadSteps } from "../components/upload-steps"; +import { FixYourSelf } from "../pages/lint/fix-your-self"; /** The container of tab content */ function TabPanel(props: { @@ -140,6 +141,8 @@ function Screen(props: { screen: WorkScreen }) { return ; case WorkScreen.scene_upload_steps_final: return ; + case WorkScreen.lint_fix_yourself: + return ; default: return
Not found
; } diff --git a/app/lib/navigation/pages.ts b/app/lib/navigation/pages.ts index 245c0a27..2a575027 100644 --- a/app/lib/navigation/pages.ts +++ b/app/lib/navigation/pages.ts @@ -100,6 +100,12 @@ const page_scene_upload_steps_final: PageConfig = { path: "/code/uploadsteps/final-upload", }; +const page_lint_fix_yourself: PageConfig = { + id: WorkScreen.lint_fix_yourself, + title: "Resovlve design errors", // not used + path: "/lint/by-layer/any-error/fix-yourself", +}; + /** * list of all pages */ @@ -120,11 +126,13 @@ const all_pages: PageConfig[] = [ // standalones page_about, page_scene_upload_steps_final, + page_lint_fix_yourself, ]; export const standalone_pages: PageConfig[] = [ page_about, page_scene_upload_steps_final, + page_lint_fix_yourself, ]; export function get_page_config(id: WorkScreen): PageConfig { diff --git a/app/lib/navigation/work-screen.ts b/app/lib/navigation/work-screen.ts index c5dd3ed4..b44fd405 100644 --- a/app/lib/navigation/work-screen.ts +++ b/app/lib/navigation/work-screen.ts @@ -10,6 +10,7 @@ export enum WorkScreen { layout = "layout", icon = "icon", lint = "lint", + lint_fix_yourself = "lint_fix_yourself", g11n = "g11n", dev = "dev", slot = "slot", diff --git a/app/lib/pages/lint/fix-your-self.tsx b/app/lib/pages/lint/fix-your-self.tsx index b6ed00f3..f07d4283 100644 --- a/app/lib/pages/lint/fix-your-self.tsx +++ b/app/lib/pages/lint/fix-your-self.tsx @@ -1,15 +1,21 @@ import styled from "@emotion/styled"; import React from "react"; +import { useHistory } from "react-router"; import { BlackButton } from "../../components/style/global-style"; import { LintItemRow } from "../../lint"; import { rowDummy } from "../../lint/lint-list-view"; import { LintProcessPaginator } from "../../lint/lint-process-paginator"; export function FixYourSelf() { + const history = useHistory(); const LeftArrow = require("../../components/assets/left-arrow.svg"); return ( - + { + history.goBack(); + }} + > diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx index 9bfd7bd2..2b511b39 100644 --- a/app/lib/pages/lint/lint-screen.tsx +++ b/app/lib/pages/lint/lint-screen.tsx @@ -15,6 +15,7 @@ import { makeSummary, requestLintOnCurrentSelection } from "../../lint/actions"; import { useSingleSelection } from "../../utils/plugin-hooks"; import { rowDummy } from "../../lint/lint-list-view"; import { FixYourSelf } from "./fix-your-self"; +import { useHistory } from "react-router"; interface State { feedbacks: Array; @@ -22,19 +23,7 @@ interface State { } export const LintScreen = () => { - // constructor(props) { - // super(props); - - // this.state = { - // feedbacks: [], - // selection: useSelection(), - // }; - // } - - // componentDidMount() { - // console.log(_selection); - // this.setState({ selection: _selection }); - + const histoy = useHistory(); const [feedbacks, setFeedbacks] = React.useState([]); const selection = useSingleSelection(); @@ -78,9 +67,12 @@ export const LintScreen = () => { <> {feedbacks.length === 0 ? ( <> - Run lint on “example” + + Run lint on “{_makeshortname(selection.node.name)}” + - Run lint under “example” Across {countSelection()} + Run lint under “{_makeshortname(selection.node.name)}” Across{" "} + {countSelection()} layers. @@ -137,8 +129,20 @@ export const LintScreen = () => { ) : ( - Jump to first error - Clear + { + histoy.push("/lint/by-layer/any-error/fix-yourself"); + }} + > + Jump to first error + + { + setFeedbacks([]); + }} + > + Clear + )} @@ -146,6 +150,10 @@ export const LintScreen = () => { ); }; +function _makeshortname(origin: string): string { + return origin; +} + const ErrorWrapper = styled.div` margin: 0 8px; `;