From d0f202deab3e559f24c73a6dcd0149c467f6d2df Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Mon, 18 Apr 2022 15:35:45 +0900 Subject: [PATCH 1/8] init editor task queue state model --- editor/core/states/editor-state.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/editor/core/states/editor-state.ts b/editor/core/states/editor-state.ts index 855ec2f2..0ad5e552 100644 --- a/editor/core/states/editor-state.ts +++ b/editor/core/states/editor-state.ts @@ -28,6 +28,7 @@ export interface EditorState { code?: CodeRepository; editingModule?: EditingModule; devtoolsConsole?: DevtoolsConsole; + editorTaskQueue?: EditorTaskQueue; } export interface EditorSnapshot { @@ -131,3 +132,20 @@ export interface ConsoleLog { | "count" | "assert"; } + +export interface EditorTaskQueue { + isBusy: boolean; + tasks: EditorTask[]; +} + +export interface EditorTask { + id: string; + name: string; + description: string; + cancelable: boolean; + onCancel: () => void; + /** + * 0-1, if null, it is indeterminate + */ + progress: number | null; +} From d4e75821d1e135f0364dafe4a5ca8b50e59e9bef Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Mon, 18 Apr 2022 15:58:01 +0900 Subject: [PATCH 2/8] add action & reducer --- editor/core/actions/index.ts | 31 ++++++++++++++++++-- editor/core/reducers/editor-reducer.ts | 33 ++++++++++++++++++++++ editor/core/states/editor-initial-state.ts | 11 ++++++++ editor/core/states/editor-state.ts | 14 ++++++--- 4 files changed, 83 insertions(+), 6 deletions(-) diff --git a/editor/core/actions/index.ts b/editor/core/actions/index.ts index 54187be4..c537a789 100644 --- a/editor/core/actions/index.ts +++ b/editor/core/actions/index.ts @@ -1,5 +1,10 @@ import type { FrameworkConfig } from "@designto/config"; -import type { ConsoleLog, EditorState, ScenePreviewData } from "core/states"; +import type { + ConsoleLog, + EditorState, + EditorTask, + ScenePreviewData, +} from "core/states"; export type WorkspaceAction = // @@ -21,7 +26,8 @@ export type Action = | CanvasModeAction | PreviewAction | CodeEditorAction - | DevtoolsAction; + | DevtoolsAction + | EditorTaskAction; export type ActionType = Action["type"]; @@ -85,3 +91,24 @@ export interface DevtoolsConsoleAction { export interface DevtoolsConsoleClearAction { type: "devtools-console-clear"; } + +export type EditorTaskAction = + | EditorTaskPushAction + | EditorTaskPopAction + | EditorTaskUpdateProgressAction; + +export interface EditorTaskPushAction { + type: "editor-task-push"; + task: EditorTask; +} + +export interface EditorTaskPopAction { + type: "editor-task-pop"; + task: EditorTask | { id: string }; +} + +export interface EditorTaskUpdateProgressAction { + type: "editor-task-update-progress"; + id: string; + progress: number; +} diff --git a/editor/core/reducers/editor-reducer.ts b/editor/core/reducers/editor-reducer.ts index 91e2e05d..e6c89f25 100644 --- a/editor/core/reducers/editor-reducer.ts +++ b/editor/core/reducers/editor-reducer.ts @@ -10,6 +10,9 @@ import type { PreviewSetAction, DevtoolsConsoleAction, DevtoolsConsoleClearAction, + EditorTaskPushAction, + EditorTaskPopAction, + EditorTaskUpdateProgressAction, } from "core/actions"; import { EditorState } from "core/states"; import { useRouter } from "next/router"; @@ -184,6 +187,36 @@ export function editorReducer(state: EditorState, action: Action): EditorState { }); break; } + case "editor-task-push": { + const { task } = action; + const { id } = task; + // TODO: check id duplication + + return produce(state, (draft) => { + draft.editorTaskQueue.tasks.push(task); + }); + break; + } + case "editor-task-pop": { + const { task } = action; + const { id } = task; + + return produce(state, (draft) => { + draft.editorTaskQueue.tasks = draft.editorTaskQueue.tasks.filter( + (i) => i.id !== id + ); + // TODO: handle isBusy property by the task + }); + break; + } + case "editor-task-update-progress": { + const { id, progress } = action; + return produce(state, (draft) => { + draft.editorTaskQueue.tasks.find((i) => i.id !== id).progress = + progress; + }); + break; + } default: throw new Error(`Unhandled action type: ${action["type"]}`); } diff --git a/editor/core/states/editor-initial-state.ts b/editor/core/states/editor-initial-state.ts index 5ad68cf0..3b43d556 100644 --- a/editor/core/states/editor-initial-state.ts +++ b/editor/core/states/editor-initial-state.ts @@ -8,6 +8,7 @@ export function createInitialEditorState(editor: EditorSnapshot): EditorState { selectedLayersOnPreview: editor.selectedLayersOnPreview, design: editor.design, canvasMode: editor.canvasMode, + editorTaskQueue: editor.editorTaskQueue, }; } @@ -19,5 +20,15 @@ export function createPendingEditorState(): EditorState { selectedLayersOnPreview: [], design: null, canvasMode: "free", + editorTaskQueue: { + isBusy: true, + tasks: [ + { + id: "pending", + name: "loading", + progress: null, + }, + ], + }, }; } diff --git a/editor/core/states/editor-state.ts b/editor/core/states/editor-state.ts index 0ad5e552..f7cb99d5 100644 --- a/editor/core/states/editor-state.ts +++ b/editor/core/states/editor-state.ts @@ -28,7 +28,7 @@ export interface EditorState { code?: CodeRepository; editingModule?: EditingModule; devtoolsConsole?: DevtoolsConsole; - editorTaskQueue?: EditorTaskQueue; + editorTaskQueue: EditorTaskQueue; } export interface EditorSnapshot { @@ -38,6 +38,7 @@ export interface EditorSnapshot { selectedNodesInitial?: string[] | null; design: FigmaReflectRepository; canvasMode: TCanvasMode; + editorTaskQueue: EditorTaskQueue; } export interface FigmaReflectRepository { @@ -141,9 +142,14 @@ export interface EditorTaskQueue { export interface EditorTask { id: string; name: string; - description: string; - cancelable: boolean; - onCancel: () => void; + /** + * If the task is short-lived, wait this much ms before displaying it. + * @default 200 (0.2s) + */ + debounce?: number; + description?: string; + cancelable?: boolean; + onCancel?: () => void; /** * 0-1, if null, it is indeterminate */ From 504987743d18b42b5323ff0f89c9da769a4212d0 Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Mon, 18 Apr 2022 16:17:48 +0900 Subject: [PATCH 3/8] add visual components (not tested) --- ...tor-progress-indicator-popover-content.tsx | 26 ++++++ ...itor-progress-indicator-trigger-button.tsx | 43 +++++++++ .../editor-progress-indicator.tsx | 27 ++++++ .../editor-task-item.tsx | 87 +++++++++++++++++++ .../editor-progress-indicator/index.ts | 4 + .../editor-progress-indicator/index.tsx | 12 +++ 6 files changed, 199 insertions(+) create mode 100644 editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx create mode 100644 editor/components/editor-progress-indicator/editor-progress-indicator-trigger-button.tsx create mode 100644 editor/components/editor-progress-indicator/editor-progress-indicator.tsx create mode 100644 editor/components/editor-progress-indicator/editor-task-item.tsx create mode 100644 editor/components/editor-progress-indicator/index.ts create mode 100644 editor/scaffolds/editor-progress-indicator/index.tsx diff --git a/editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx b/editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx new file mode 100644 index 00000000..2661ec87 --- /dev/null +++ b/editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import styled from "@emotion/styled"; + +export function EditorProgressIndicatorPopoverContent({ + children, +}: { + children: React.ReactNode; +}) { + return {children}; +} + +const Container = styled.div` + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + flex: none; + gap: 32px; + box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.25); + border: solid 1px rgb(74, 73, 77); + border-radius: 12px; + background-color: rgba(30, 30, 30, 0.4); + box-sizing: border-box; + padding: 24px; + backdrop-filter: blur(32px); +`; diff --git a/editor/components/editor-progress-indicator/editor-progress-indicator-trigger-button.tsx b/editor/components/editor-progress-indicator/editor-progress-indicator-trigger-button.tsx new file mode 100644 index 00000000..00bfca80 --- /dev/null +++ b/editor/components/editor-progress-indicator/editor-progress-indicator-trigger-button.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import styled from "@emotion/styled"; + +export function EditorProgressIndicatorButton({ + isBusy = false, +}: { + isBusy?: boolean; +}) { + return ( + + + + + {isBusy && } + + ); +} + +const Container = styled.div` + display: flex; + justify-content: flex-start; + flex-direction: column; + align-items: center; + flex: none; + gap: 2px; + box-sizing: border-box; +`; + +const IndicatorLine = styled.div` + width: 20px; + height: 4px; + background-color: rgb(37, 98, 255); + border-radius: 7px; +`; diff --git a/editor/components/editor-progress-indicator/editor-progress-indicator.tsx b/editor/components/editor-progress-indicator/editor-progress-indicator.tsx new file mode 100644 index 00000000..479f5162 --- /dev/null +++ b/editor/components/editor-progress-indicator/editor-progress-indicator.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import styled from "@emotion/styled"; +import { EditorTaskItem } from "./editor-task-item"; +import { EditorProgressIndicatorButton } from "./editor-progress-indicator-trigger-button"; +import { EditorProgressIndicatorPopoverContent } from "./editor-progress-indicator-popover-content"; +import * as Popover from "@radix-ui/react-popover"; + +export function EditorProgressIndicator({ + isBusy, + tasks, +}: { + isBusy: boolean; + tasks: any[]; +}) { + return ( + + + + + + {tasks.map((task, index) => ( + + ))} + + + ); +} diff --git a/editor/components/editor-progress-indicator/editor-task-item.tsx b/editor/components/editor-progress-indicator/editor-task-item.tsx new file mode 100644 index 00000000..5e386398 --- /dev/null +++ b/editor/components/editor-progress-indicator/editor-task-item.tsx @@ -0,0 +1,87 @@ +import React from "react"; +import styled from "@emotion/styled"; + +export function EditorTaskItem({ + label, + description, +}: { + label: string; + description?: string; +}) { + return ( + + + {label} + + + + + {description} + + ); +} + +const RootWrapperProgressingItemReadonly = styled.div` + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + flex: none; + gap: 4px; + min-height: 100vh; + box-sizing: border-box; +`; + +const TitleAndValueContainer = styled.div` + display: flex; + justify-content: flex-start; + flex-direction: row; + align-items: center; + gap: 4px; + align-self: stretch; + box-sizing: border-box; + flex-shrink: 0; +`; + +const ThisLabel = styled.span` + color: white; + text-overflow: ellipsis; + font-size: 12px; + font-family: Roboto, sans-serif; + font-weight: 400; + text-align: left; + width: 80px; +`; + +const ProgressBar = styled.div` + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + flex: 1; + gap: 10px; + border-radius: 7px; + width: 203px; + height: 4px; + background-color: rgba(255, 255, 255, 0.5); + box-sizing: border-box; +`; + +const Value = styled.div` + height: 4px; + background-color: rgb(37, 98, 255); + border-radius: 4px; + align-self: stretch; + flex-shrink: 0; + flex: 1; +`; + +const ThisDescription = styled.span` + color: rgba(255, 255, 255, 0.5); + text-overflow: ellipsis; + font-size: 10px; + font-weight: 400; + text-align: left; + align-self: stretch; + flex-shrink: 0; +`; diff --git a/editor/components/editor-progress-indicator/index.ts b/editor/components/editor-progress-indicator/index.ts new file mode 100644 index 00000000..e814dc4b --- /dev/null +++ b/editor/components/editor-progress-indicator/index.ts @@ -0,0 +1,4 @@ +export { EditorProgressIndicator } from "./editor-progress-indicator"; +export { EditorProgressIndicatorPopoverContent } from "./editor-progress-indicator-popover-content"; +export { EditorProgressIndicatorButton } from "./editor-progress-indicator-trigger-button"; +export { EditorTaskItem } from "./editor-task-item"; diff --git a/editor/scaffolds/editor-progress-indicator/index.tsx b/editor/scaffolds/editor-progress-indicator/index.tsx new file mode 100644 index 00000000..c16c1f11 --- /dev/null +++ b/editor/scaffolds/editor-progress-indicator/index.tsx @@ -0,0 +1,12 @@ +import { EditorProgressIndicator as Base } from "components/editor-progress-indicator"; +import { useDispatch } from "core/dispatch"; +import { useEditorState } from "core/states"; + +export function EditorProgressIndicator() { + const dispatch = useDispatch(); + const [state] = useEditorState(); + + const { editorTaskQueue } = state; + + return ; +} From ff0e2b3e8f8585f0c12762dfcc6242b31a2e96cd Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Mon, 18 Apr 2022 16:42:27 +0900 Subject: [PATCH 4/8] add popover --- .../editor-progress-indicator.tsx | 17 +++++++---- .../editor-task-item.tsx | 30 +++++-------------- ...editor-appbar-fragment-for-code-editor.tsx | 2 ++ editor/pages/files/[key]/index.tsx | 10 +++++++ editor/scaffolds/appbar/index.tsx | 19 ++++++++++++ editor/scaffolds/code/index.tsx | 2 -- editor/scaffolds/editor/editor.tsx | 2 ++ 7 files changed, 52 insertions(+), 30 deletions(-) create mode 100644 editor/scaffolds/appbar/index.tsx diff --git a/editor/components/editor-progress-indicator/editor-progress-indicator.tsx b/editor/components/editor-progress-indicator/editor-progress-indicator.tsx index 479f5162..2a88db98 100644 --- a/editor/components/editor-progress-indicator/editor-progress-indicator.tsx +++ b/editor/components/editor-progress-indicator/editor-progress-indicator.tsx @@ -17,11 +17,18 @@ export function EditorProgressIndicator({ - - {tasks.map((task, index) => ( - - ))} - + + + {tasks.map((task, index) => ( + + ))} + + ); } diff --git a/editor/components/editor-progress-indicator/editor-task-item.tsx b/editor/components/editor-progress-indicator/editor-task-item.tsx index 5e386398..e1702c6a 100644 --- a/editor/components/editor-progress-indicator/editor-task-item.tsx +++ b/editor/components/editor-progress-indicator/editor-task-item.tsx @@ -1,20 +1,21 @@ import React from "react"; import styled from "@emotion/styled"; +import LinearProgress from "@mui/material/LinearProgress"; export function EditorTaskItem({ label, description, + progress, }: { label: string; description?: string; + progress: number | null; }) { return ( {label} - - - + {description} @@ -28,7 +29,6 @@ const RootWrapperProgressingItemReadonly = styled.div` align-items: flex-start; flex: none; gap: 4px; - min-height: 100vh; box-sizing: border-box; `; @@ -53,27 +53,11 @@ const ThisLabel = styled.span` width: 80px; `; -const ProgressBar = styled.div` - display: flex; - justify-content: center; - flex-direction: column; - align-items: flex-start; - flex: 1; - gap: 10px; - border-radius: 7px; - width: 203px; - height: 4px; - background-color: rgba(255, 255, 255, 0.5); - box-sizing: border-box; -`; - -const Value = styled.div` +const ColoredLinearProgress = styled(LinearProgress)` height: 4px; + width: 203px; + border-radius: 7px; background-color: rgb(37, 98, 255); - border-radius: 4px; - align-self: stretch; - flex-shrink: 0; - flex: 1; `; const ThisDescription = styled.span` diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx index c11f393a..966e72ac 100644 --- a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx +++ b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx @@ -4,6 +4,7 @@ import { useRouter } from "next/router"; import { EditorAppbarIconButton } from "./editor-appbar-icon-button"; import { GithubIcon, NotificationBellIcon } from "icons"; import { EditorFrameworkConfigOnAppbar } from "../editor-framework-config-on-appbar"; +import { EditorProgressIndicator } from "scaffolds/editor-progress-indicator"; export function AppbarFragmentForCodeEditor() { const router = useRouter(); @@ -20,6 +21,7 @@ export function AppbarFragmentForCodeEditor() { )} + { window.open("https://github.com/gridaco/designto-code/", "_blank"); diff --git a/editor/pages/files/[key]/index.tsx b/editor/pages/files/[key]/index.tsx index e3169c2d..39d9fb0d 100644 --- a/editor/pages/files/[key]/index.tsx +++ b/editor/pages/files/[key]/index.tsx @@ -103,6 +103,16 @@ function SetupEditor({ selectedNodesInitial: initialSelections, selectedPage: warmup.selectedPage(prevstate, pages, nodeid && [nodeid]), selectedLayersOnPreview: [], + editorTaskQueue: { + isBusy: true, + tasks: [ + { + id: "refetch-file", + name: "refreshing..", + progress: null, + }, + ], + }, design: { name: file.name, input: null, diff --git a/editor/scaffolds/appbar/index.tsx b/editor/scaffolds/appbar/index.tsx new file mode 100644 index 00000000..288b8e94 --- /dev/null +++ b/editor/scaffolds/appbar/index.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { EditorAppbarFragments } from "components/editor"; +/** + * a scaffold App bar linked with editor state + */ +export function Appbar() { + return ( +
+ + + +
+ ); +} diff --git a/editor/scaffolds/code/index.tsx b/editor/scaffolds/code/index.tsx index 11a41cf6..22a084d3 100644 --- a/editor/scaffolds/code/index.tsx +++ b/editor/scaffolds/code/index.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from "react"; import styled from "@emotion/styled"; import { useRouter } from "next/router"; import { CodeEditor } from "components/code-editor"; -import { EditorAppbarFragments } from "components/editor"; import { get_framework_config } from "query/to-code-options-from-query"; import { CodeOptionsControl } from "components/codeui-code-options-control"; import { designToCode, Result } from "@designto/code"; @@ -131,7 +130,6 @@ export function CodeSegment() { const { code, scaffold, name: componentName } = result ?? {}; return ( - , }} + appbar={} // rightbar={} > From 43f74321f672a0abc6d315263370e5d284dea4fb Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Mon, 18 Apr 2022 17:06:12 +0900 Subject: [PATCH 5/8] sanitize view --- .../editor-appbar-fragment-for-canvas.tsx | 1 - ...editor-appbar-fragment-for-code-editor.tsx | 18 ++++++++++----- .../editor/editor-appbar/editor-appbar.tsx | 6 ++--- .../default-editor-workspace-layout.tsx | 22 ++++++++++++++++++- editor/scaffolds/appbar/index.tsx | 11 +++++++--- editor/scaffolds/editor/editor.tsx | 3 ++- 6 files changed, 47 insertions(+), 14 deletions(-) diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx index 33bc1523..aad350d8 100644 --- a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx +++ b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx @@ -20,7 +20,6 @@ const RootWrapperAppbarFragmentForCanvas = styled.div` align-items: center; gap: 10px; align-self: stretch; - background-color: ${colors.color_editor_bg_on_dark}; box-sizing: border-box; padding: 10px 24px; `; diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx index 966e72ac..78a794ea 100644 --- a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx +++ b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx @@ -1,17 +1,22 @@ import React from "react"; import styled from "@emotion/styled"; -import { useRouter } from "next/router"; import { EditorAppbarIconButton } from "./editor-appbar-icon-button"; import { GithubIcon, NotificationBellIcon } from "icons"; import { EditorFrameworkConfigOnAppbar } from "../editor-framework-config-on-appbar"; import { EditorProgressIndicator } from "scaffolds/editor-progress-indicator"; +import { colors } from "theme"; -export function AppbarFragmentForCodeEditor() { - const router = useRouter(); +export function AppbarFragmentForCodeEditor({ + background = false, +}: { + background?: boolean; +}) { const hasNotification = false; return ( - + {/* disable temporarily */}
{/* */} @@ -34,7 +39,9 @@ export function AppbarFragmentForCodeEditor() { ); } -const RootWrapperAppbarFragmentForCodeEditor = styled.div` +const RootWrapperAppbarFragmentForCodeEditor = styled.div<{ + background: React.CSSProperties["background"]; +}>` z-index: 10; display: flex; justify-content: center; @@ -48,6 +55,7 @@ const RootWrapperAppbarFragmentForCodeEditor = styled.div` padding-top: 14px; padding-left: 12px; padding-right: 20px; + background: ${(props) => props.background}; `; const AppbarActions = styled.div` diff --git a/editor/components/editor/editor-appbar/editor-appbar.tsx b/editor/components/editor/editor-appbar/editor-appbar.tsx index 7a842d92..9c3331a8 100644 --- a/editor/components/editor/editor-appbar/editor-appbar.tsx +++ b/editor/components/editor/editor-appbar/editor-appbar.tsx @@ -7,9 +7,9 @@ import { AppbarFragmentForCodeEditor } from "./editor-appbar-fragment-for-code-e export function Appbar() { return ( - - - + + + ); } diff --git a/editor/layouts/default-editor-workspace-layout.tsx b/editor/layouts/default-editor-workspace-layout.tsx index 1c8a1bdb..0b92b385 100644 --- a/editor/layouts/default-editor-workspace-layout.tsx +++ b/editor/layouts/default-editor-workspace-layout.tsx @@ -14,7 +14,14 @@ type SidebarElementSignature = export function DefaultEditorWorkspaceLayout(props: { leftbar?: SidebarElementSignature; rightbar?: SidebarElementSignature; + /** + * global area appbar + */ appbar?: JSX.Element; + /** + * content area appbar + */ + contentAreaAppbar?: JSX.Element; children: JSX.Element | Array; display?: "none" | "initial"; // set to none when to hide. backgroundColor?: string; @@ -30,7 +37,20 @@ export function DefaultEditorWorkspaceLayout(props: { {props.leftbar && ( )} - {props.children} + {props.contentAreaAppbar ? ( +
+ {props.contentAreaAppbar} + {props.children} +
+ ) : ( + {props.children} + )} {props.rightbar && ( )} diff --git a/editor/scaffolds/appbar/index.tsx b/editor/scaffolds/appbar/index.tsx index 288b8e94..0095f8b4 100644 --- a/editor/scaffolds/appbar/index.tsx +++ b/editor/scaffolds/appbar/index.tsx @@ -1,9 +1,16 @@ import React from "react"; import { EditorAppbarFragments } from "components/editor"; +import { useEditorState } from "core/states"; /** * a scaffold App bar linked with editor state */ export function Appbar() { + const [state] = useEditorState(); + + const isCodeEditorShown = state.selectedNodes.length > 0; + + console.log("Appbar", isCodeEditorShown); + return (
- - - +
); } diff --git a/editor/scaffolds/editor/editor.tsx b/editor/scaffolds/editor/editor.tsx index f9b11953..d37c0c2a 100644 --- a/editor/scaffolds/editor/editor.tsx +++ b/editor/scaffolds/editor/editor.tsx @@ -47,7 +47,8 @@ export function Editor({ maxWidth: 600, children: , }} - appbar={} + contentAreaAppbar={} + // appbar={} // rightbar={} > From 3c3af89d2a498ab912aff867d87725866b1200e9 Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Mon, 18 Apr 2022 17:15:15 +0900 Subject: [PATCH 6/8] fix styles --- ...editor-progress-indicator-popover-content.tsx | 4 ++-- .../editor-progress-indicator.tsx | 16 +++++++++++++--- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx b/editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx index 2661ec87..47075257 100644 --- a/editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx +++ b/editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx @@ -16,10 +16,10 @@ const Container = styled.div` align-items: center; flex: none; gap: 32px; - box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.25); + box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.25); border: solid 1px rgb(74, 73, 77); border-radius: 12px; - background-color: rgba(30, 30, 30, 0.4); + background-color: rgba(30, 30, 30, 0.8); box-sizing: border-box; padding: 24px; backdrop-filter: blur(32px); diff --git a/editor/components/editor-progress-indicator/editor-progress-indicator.tsx b/editor/components/editor-progress-indicator/editor-progress-indicator.tsx index 2a88db98..791f91d3 100644 --- a/editor/components/editor-progress-indicator/editor-progress-indicator.tsx +++ b/editor/components/editor-progress-indicator/editor-progress-indicator.tsx @@ -14,10 +14,14 @@ export function EditorProgressIndicator({ }) { return ( - + - - + + {tasks.map((task, index) => ( ); } + +const StyledTrigger = styled(Popover.Trigger)` + outline: none; + border: none; + background: none; +`; From df8c7f070fee1e825830a52af686ca69b092d689 Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Mon, 18 Apr 2022 17:32:57 +0900 Subject: [PATCH 7/8] update messages --- editor/pages/files/[key]/index.tsx | 23 +++++++++++++---------- editor/scaffolds/appbar/index.tsx | 2 -- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/editor/pages/files/[key]/index.tsx b/editor/pages/files/[key]/index.tsx index 39d9fb0d..86ecc6c5 100644 --- a/editor/pages/files/[key]/index.tsx +++ b/editor/pages/files/[key]/index.tsx @@ -43,6 +43,8 @@ export default function FileEntryEditor() { ); } +const action_fetchfile_id = "fetchfile"; + function SetupEditor({ filekey, nodeid, @@ -103,16 +105,6 @@ function SetupEditor({ selectedNodesInitial: initialSelections, selectedPage: warmup.selectedPage(prevstate, pages, nodeid && [nodeid]), selectedLayersOnPreview: [], - editorTaskQueue: { - isBusy: true, - tasks: [ - { - id: "refetch-file", - name: "refreshing..", - progress: null, - }, - ], - }, design: { name: file.name, input: null, @@ -122,6 +114,17 @@ function SetupEditor({ pages: pages, }, canvasMode: initialCanvasMode, + editorTaskQueue: { + isBusy: true, + tasks: [ + { + id: action_fetchfile_id, + name: "Figma File", + description: "Refreshing remote file", + progress: null, + }, + ], + }, }; } diff --git a/editor/scaffolds/appbar/index.tsx b/editor/scaffolds/appbar/index.tsx index 0095f8b4..ef012673 100644 --- a/editor/scaffolds/appbar/index.tsx +++ b/editor/scaffolds/appbar/index.tsx @@ -9,8 +9,6 @@ export function Appbar() { const isCodeEditorShown = state.selectedNodes.length > 0; - console.log("Appbar", isCodeEditorShown); - return (
Date: Tue, 25 Oct 2022 02:12:51 +0900 Subject: [PATCH 8/8] fix build --- editor/core/actions/index.ts | 2 +- editor/scaffolds/code/index.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/editor/core/actions/index.ts b/editor/core/actions/index.ts index 3b57fb45..50846655 100644 --- a/editor/core/actions/index.ts +++ b/editor/core/actions/index.ts @@ -1,4 +1,4 @@ -import type { FrameworkConfig } from "@designto/config"; +import type { FrameworkConfig } from "@grida/builder-config"; import type { ConsoleLog, EditorState, diff --git a/editor/scaffolds/code/index.tsx b/editor/scaffolds/code/index.tsx index 44f1ad53..3b50e54c 100644 --- a/editor/scaffolds/code/index.tsx +++ b/editor/scaffolds/code/index.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react"; import styled from "@emotion/styled"; import { useRouter } from "next/router"; import { CodeEditor } from "components/code-editor"; +import { EditorAppbarFragments } from "components/editor"; import { get_framework_config } from "query/to-code-options-from-query"; import { CodeOptionsControl } from "components/codeui-code-options-control"; import { designToCode, Result } from "@designto/code";