From bcab5fd5dd5e0156a3ac41588dabb3f78e738aef Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 31 Oct 2022 16:17:06 +0800 Subject: [PATCH 01/42] =?UTF-8?q?feat(pagePanel):=20=E2=9C=A8=20pagePanel'?= =?UTF-8?q?s=20ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/rightPagePanel/frame-fixed.svg | 3 + .../rightPagePanel/frame-responsive.svg | 3 + .../assets/rightPagePanel/layout/default.svg | 21 +++ .../assets/rightPagePanel/layout/preset-a.svg | 22 ++++ .../assets/rightPagePanel/layout/preset-b.svg | 23 ++++ .../assets/rightPagePanel/layout/preset-c.svg | 24 ++++ .../assets/rightPagePanel/layout/preset-d.svg | 25 ++++ .../assets/rightPagePanel/layout/preset-e.svg | 24 ++++ apps/builder/src/i18n/locale/en-US.json | 7 + apps/builder/src/i18n/locale/zh-CN.json | 41 +++--- .../App/components/ComponentManager/index.tsx | 4 + .../page/App/components/PageNavBar/index.tsx | 6 +- .../PagePanel/Components/Label/index.tsx | 20 +++ .../PagePanel/Components/Label/interface.ts | 5 + .../PagePanel/Components/Label/style.ts | 34 +++++ .../Components/LayoutSelect/index.tsx | 90 +++++++++++++ .../Components/LayoutSelect/interface.ts | 16 +++ .../Components/LayoutSelect/style.ts | 57 +++++++++ .../PagePanel/Layout/divider/index.tsx | 13 ++ .../PagePanel/Layout/divider/interface.ts | 3 + .../PagePanel/Layout/divider/style.ts | 8 ++ .../PagePanel/Layout/leftAndRight/index.tsx | 8 ++ .../Layout/leftAndRight/interface.ts | 4 + .../PagePanel/Layout/leftAndRight/style.ts | 9 ++ .../PagePanel/Layout/setterPadding/index.tsx | 8 ++ .../Layout/setterPadding/interface.ts | 5 + .../PagePanel/Layout/setterPadding/style.ts | 5 + .../PagePanel/Modules/Frame/index.tsx | 120 ++++++++++++++++++ .../page/App/components/PagePanel/index.tsx | 15 +++ .../page/App/components/PagePanel/style.ts | 25 ++++ apps/builder/src/page/App/style.tsx | 1 + 31 files changed, 629 insertions(+), 20 deletions(-) create mode 100644 apps/builder/src/assets/rightPagePanel/frame-fixed.svg create mode 100644 apps/builder/src/assets/rightPagePanel/frame-responsive.svg create mode 100644 apps/builder/src/assets/rightPagePanel/layout/default.svg create mode 100644 apps/builder/src/assets/rightPagePanel/layout/preset-a.svg create mode 100644 apps/builder/src/assets/rightPagePanel/layout/preset-b.svg create mode 100644 apps/builder/src/assets/rightPagePanel/layout/preset-c.svg create mode 100644 apps/builder/src/assets/rightPagePanel/layout/preset-d.svg create mode 100644 apps/builder/src/assets/rightPagePanel/layout/preset-e.svg create mode 100644 apps/builder/src/page/App/components/PagePanel/Components/Label/index.tsx create mode 100644 apps/builder/src/page/App/components/PagePanel/Components/Label/interface.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Components/Label/style.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/index.tsx create mode 100644 apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/interface.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/style.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/divider/index.tsx create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/divider/interface.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/divider/style.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/index.tsx create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/interface.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/style.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/index.tsx create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/interface.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/style.ts create mode 100644 apps/builder/src/page/App/components/PagePanel/Modules/Frame/index.tsx create mode 100644 apps/builder/src/page/App/components/PagePanel/index.tsx create mode 100644 apps/builder/src/page/App/components/PagePanel/style.ts diff --git a/apps/builder/src/assets/rightPagePanel/frame-fixed.svg b/apps/builder/src/assets/rightPagePanel/frame-fixed.svg new file mode 100644 index 0000000000..2298559dc6 --- /dev/null +++ b/apps/builder/src/assets/rightPagePanel/frame-fixed.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/builder/src/assets/rightPagePanel/frame-responsive.svg b/apps/builder/src/assets/rightPagePanel/frame-responsive.svg new file mode 100644 index 0000000000..aa6c483220 --- /dev/null +++ b/apps/builder/src/assets/rightPagePanel/frame-responsive.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/builder/src/assets/rightPagePanel/layout/default.svg b/apps/builder/src/assets/rightPagePanel/layout/default.svg new file mode 100644 index 0000000000..e353b1123d --- /dev/null +++ b/apps/builder/src/assets/rightPagePanel/layout/default.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/builder/src/assets/rightPagePanel/layout/preset-a.svg b/apps/builder/src/assets/rightPagePanel/layout/preset-a.svg new file mode 100644 index 0000000000..d9a9b884d0 --- /dev/null +++ b/apps/builder/src/assets/rightPagePanel/layout/preset-a.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/builder/src/assets/rightPagePanel/layout/preset-b.svg b/apps/builder/src/assets/rightPagePanel/layout/preset-b.svg new file mode 100644 index 0000000000..b146795950 --- /dev/null +++ b/apps/builder/src/assets/rightPagePanel/layout/preset-b.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/builder/src/assets/rightPagePanel/layout/preset-c.svg b/apps/builder/src/assets/rightPagePanel/layout/preset-c.svg new file mode 100644 index 0000000000..32a33e9db6 --- /dev/null +++ b/apps/builder/src/assets/rightPagePanel/layout/preset-c.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/builder/src/assets/rightPagePanel/layout/preset-d.svg b/apps/builder/src/assets/rightPagePanel/layout/preset-d.svg new file mode 100644 index 0000000000..5cb292da22 --- /dev/null +++ b/apps/builder/src/assets/rightPagePanel/layout/preset-d.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/builder/src/assets/rightPagePanel/layout/preset-e.svg b/apps/builder/src/assets/rightPagePanel/layout/preset-e.svg new file mode 100644 index 0000000000..e018d9ba17 --- /dev/null +++ b/apps/builder/src/assets/rightPagePanel/layout/preset-e.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index c693c478b3..07217ebd85 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -658,6 +658,13 @@ "selects": "Select inputs" }, "tab_title": "Insert" + }, + "page": { + "tab_title": "Page", + "panel_bar_title": { + "frame": "FRAME", + "basic": "BASIC" + } } }, "exit_preview": "Exit Preview", diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index 09b6ea5266..f5fdf5d3ec 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -138,9 +138,6 @@ "required": "请输入{name}" } }, - "resource_choose": { - "deleted": "已删除" - }, "panel": { "btn": { "disable": "关闭", @@ -202,30 +199,30 @@ "ca_certificate": "服务端证书", "client_certificate": "客户端证书", "client_key": "客户端密钥", + "config_type": "配置类型", "connect_type": "连接类型", "connection_format": "连接方式", + "connection_string": "连接地址", "database": "数据库名称", "database_index": "数据库索引", "hostname": "主机", "hostname_port": "主机/端口", - "mongodb_ssl_client": "Client Cert and Key", - "mongodb_ssl_ca": "CA Cert", "mongodb_connection_dns_seed_list": "DNS seed list connection", "mongodb_connection_standard": "Standard Connection", + "mongodb_ssl_ca": "CA Cert", + "mongodb_ssl_client": "Client Cert and Key", "name": "名称", "port": "端口", - "config_type": "配置类型", - "connection_string": "连接地址", "private_key": "私钥", "ssl_options": "SSL 选项", "username_password": "用户名/密码" }, "placeholder": { - "mongo_certificate": "-----BEGIN RSA PRIVATE KEY-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END RSA PRIVATE KEY-----\n-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----\n", "certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----", "database": "acme_production", "database_index": "默认 0", "hostname": "主机名", + "mongo_certificate": "-----BEGIN RSA PRIVATE KEY-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END RSA PRIVATE KEY-----\n-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----\n", "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"", "password": "密码", "username": "用户名" @@ -317,6 +314,9 @@ } } }, + "resource_choose": { + "deleted": "已删除" + }, "result": { "title": { "api_request": "API 请求参数", @@ -375,12 +375,6 @@ "prefabricated": "Prefabricated color", "title": "Edit color" }, - "view_setter": { - "views": "Views" - }, - "tabs_setter": { - "tabs": "Tabs" - }, "column_setter": { "label": "列 ({{number}})", "new": "新建", @@ -405,6 +399,12 @@ "new": "新建", "title": "选项" }, + "tabs_setter": { + "tabs": "Tabs" + }, + "view_setter": { + "views": "Views" + }, "widget_action_type_name": { "blur": "失焦", "change": "内容改变", @@ -492,9 +492,9 @@ "decimal_places": "小数位数", "default_sort_key": "排序列", "default_sort_order": "顺序", + "default_tab": "默认值", "default_value": "默认值", "default_views": "默认视图", - "default_tab": "默认值", "description": "描述", "direction": "方向", "disable_submit": "禁用提交", @@ -533,8 +533,8 @@ "label_width": "宽度(%)", "layout": "布局", "legend_position": "图例位置", - "links_color": "链接色", "link_to_container": "是否关联到容器", + "links_color": "链接色", "loading": "加载中", "loop_back_to_start": "列表循环", "loop_start_to_back": "列表循环", @@ -551,9 +551,9 @@ "new_tab": "在新标签中打开", "only_run_when": "先决条件", "overFlow": "翻页方式", + "pageSize": "每页行数", "pattern": "模式", "pending": "等待", - "pageSize": "每页行数", "placeholder": "占位符", "prefix_text": "前缀文本", "radius": "圆角", @@ -634,6 +634,13 @@ "unselected_tip1": "没有组件被选中。", "unselected_tip2": "请点击组件以选中。" }, + "page": { + "panel_bar_title": { + "basic": "基础", + "frame": "画布" + }, + "tab_title": "页面" + }, "validate_message": { "email": "请输入有效的电子邮箱", "max_length": "请输入最多{{ number }}个字符", diff --git a/apps/builder/src/page/App/components/ComponentManager/index.tsx b/apps/builder/src/page/App/components/ComponentManager/index.tsx index 240dd87f63..48c2b63ccc 100644 --- a/apps/builder/src/page/App/components/ComponentManager/index.tsx +++ b/apps/builder/src/page/App/components/ComponentManager/index.tsx @@ -7,6 +7,7 @@ import { componentPanelCss } from "./style" import { FocusManager } from "@/utils/focusManager" import { ConfigPanel } from "@/page/App/components/ConfigPanel" import { ComponentPanel } from "@/page/App/components/ComponentPanel" +import { PagePanel } from "@/page/App/components/PagePanel" export const ComponentsManager: FC> = ( props, @@ -41,6 +42,9 @@ export const ComponentsManager: FC> = ( setActiveKey(key) }} > + + + diff --git a/apps/builder/src/page/App/components/PageNavBar/index.tsx b/apps/builder/src/page/App/components/PageNavBar/index.tsx index e5cef710da..342c2a84b6 100644 --- a/apps/builder/src/page/App/components/PageNavBar/index.tsx +++ b/apps/builder/src/page/App/components/PageNavBar/index.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useState, MouseEvent } from "react" +import { FC, useCallback, useState } from "react" import { useDispatch, useSelector } from "react-redux" import { useTranslation } from "react-i18next" import { ReactComponent as Logo } from "@/assets/illa-logo.svg" @@ -12,6 +12,8 @@ import { WindowLeftIcon, WindowRightIcon, } from "@illa-design/icon" +import { Trigger } from "@illa-design/trigger" +import { Message } from "@illa-design/message" import { Button, ButtonGroup } from "@illa-design/button" import { PageNavBarProps } from "@/page/App/components/PageNavBar/interface" import { configActions } from "@/redux/config/configSlice" @@ -36,13 +38,11 @@ import { windowIconStyle, } from "./style" import { Api } from "@/api/base" -import { Message } from "@illa-design/message" import { Badge } from "@illa-design/badge" import { DeployResp } from "@/page/App/components/PageNavBar/resp" import { fromNow } from "@/utils/dayjs" import { globalColor, illaPrefix } from "@illa-design/theme" import { getExecutionDebuggerData } from "@/redux/currentApp/executionTree/executionSelector" -import { Trigger } from "@illa-design/trigger" export const PageNavBar: FC = (props) => { const { className } = props diff --git a/apps/builder/src/page/App/components/PagePanel/Components/Label/index.tsx b/apps/builder/src/page/App/components/PagePanel/Components/Label/index.tsx new file mode 100644 index 0000000000..2bd9ecf305 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Components/Label/index.tsx @@ -0,0 +1,20 @@ +import { FC } from "react" +import { labelStyle } from "./style" +import { Trigger } from "@illa-design/react" +import { PageLabelProps } from "./interface" + +export const PageLabel: FC = (props) => { + const { tooltip, labelName, size } = props + return ( + + {labelName} + + ) +} + +PageLabel.displayName = "PageLabel" diff --git a/apps/builder/src/page/App/components/PagePanel/Components/Label/interface.ts b/apps/builder/src/page/App/components/PagePanel/Components/Label/interface.ts new file mode 100644 index 0000000000..52ca0ceba2 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Components/Label/interface.ts @@ -0,0 +1,5 @@ +export interface PageLabelProps { + tooltip?: string + labelName: string + size: "big" | "small" +} diff --git a/apps/builder/src/page/App/components/PagePanel/Components/Label/style.ts b/apps/builder/src/page/App/components/PagePanel/Components/Label/style.ts new file mode 100644 index 0000000000..e41bb57081 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Components/Label/style.ts @@ -0,0 +1,34 @@ +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/react" + +const getLabelSizeFontStyle = (size: "big" | "small") => { + switch (size) { + case "big": { + return css` + font-size: 14px; + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + ` + } + case "small": { + return css` + font-size: 12px; + color: ${globalColor(`--${illaPrefix}-grayBlue-03`)}; + ` + } + } +} + +export function labelStyle(size: "big" | "small", disabledTooltip: boolean) { + const borderStyle = disabledTooltip + ? null + : css` + border-bottom: 1px dashed black; + ` + return css` + font-weight: 500; + height: 22px; + line-height: 22px; + ${borderStyle}; + ${getLabelSizeFontStyle(size)}; + ` +} diff --git a/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/index.tsx b/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/index.tsx new file mode 100644 index 0000000000..b3af6e7cbe --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/index.tsx @@ -0,0 +1,90 @@ +import { ExpandIcon, Trigger } from "@illa-design/react" +import { FC } from "react" +import { + LayoutOptionItemProps, + LayoutOptionsPanelProps, + LayoutSelectProps, +} from "./interface" +import { + applyLayoutOptionItemIconStyle, + layoutOptionItemLabelStyle, + layoutOptionItemWrapperStyle, + layoutOptionsPanelWrapperStyle, + layoutSelectWrapperStyle, +} from "./style" +import { ReactComponent as DefaultIcon } from "@/assets/rightPagePanel/layout/default.svg" +import { ReactComponent as PresetAIcon } from "@/assets/rightPagePanel/layout/preset-a.svg" +import { ReactComponent as PresetBIcon } from "@/assets/rightPagePanel/layout/preset-b.svg" +import { ReactComponent as PresetCIcon } from "@/assets/rightPagePanel/layout/preset-c.svg" +import { ReactComponent as PresetDIcon } from "@/assets/rightPagePanel/layout/preset-d.svg" +import { ReactComponent as PresetEIcon } from "@/assets/rightPagePanel/layout/preset-e.svg" + +export const LAYOUT_OPTIONS = [ + { + label: "Default", + value: "default", + icon: , + }, + { label: "Preset A", value: "presetA", icon: }, + { label: "Preset B", value: "presetB", icon: }, + { label: "Preset C", value: "presetC", icon: }, + { label: "Preset D", value: "presetD", icon: }, + { label: "Preset E", value: "presetE", icon: }, +] + +export const LayoutOptionItem: FC = (props) => { + const { isSelected, label, value, icon } = props + return ( +
{ + console.log("eeeee") + }} + > +
+ {icon} +
+ + {label} + +
+ ) +} + +export const LayoutOptionsPanel: FC = (props) => { + const { selectedValue } = props + + return ( +
+ {LAYOUT_OPTIONS.map((item) => { + return ( + + ) + })} +
+ ) +} + +export const LayoutSelect: FC = (props) => { + const { value } = props + return ( + } + position="bottom-end" + colorScheme="white" + withoutPadding + > +
+ {value} + +
+ + ) +} diff --git a/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/interface.ts b/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/interface.ts new file mode 100644 index 0000000000..a5666b0007 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/interface.ts @@ -0,0 +1,16 @@ +import { ReactChild } from "react" + +export interface LayoutOptionsPanelProps { + selectedValue: string +} + +export interface LayoutSelectProps { + value: string +} + +export interface LayoutOptionItemProps { + isSelected: boolean + label: string + value: string + icon: ReactChild +} diff --git a/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/style.ts b/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/style.ts new file mode 100644 index 0000000000..5da6a70e8b --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/style.ts @@ -0,0 +1,57 @@ +import { globalColor, illaPrefix } from "@illa-design/theme" +import { css } from "@emotion/react" + +export const layoutSelectWrapperStyle = css` + display: flex; + align-items: center; + height: 22px; + gap: 4px; +` + +export const layoutOptionsPanelWrapperStyle = css` + padding: 16px; + background-color: ${globalColor(`--${illaPrefix}-white-01`)}; + box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16); + border-radius: 8px; + display: grid; + gap: 16px; + grid-template-columns: repeat(3, 88px); +` + +export const layoutOptionItemWrapperStyle = css` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4px; +` + +export const applyLayoutOptionItemIconStyle = (isSelected: boolean) => { + return css` + padding: 8px; + background-color: ${isSelected + ? globalColor(`--${illaPrefix}-techPurple-07`) + : globalColor(`--${illaPrefix}-grayBlue-09`)}; + border-radius: 4px; + flex: none; + border: 1px solid + ${isSelected + ? globalColor(`--${illaPrefix}-techPurple-01`) + : "transparent"}; + cursor: pointer; + :hover { + border: 1px solid ${globalColor(`--${illaPrefix}-techPurple-01`)}; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); + background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)}; + } + :active { + border: 1px solid ${globalColor(`--${illaPrefix}-techPurple-01`)}; + background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)}; + } + ` +} + +export const layoutOptionItemLabelStyle = css` + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + font-size: 14px; +` diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/divider/index.tsx b/apps/builder/src/page/App/components/PagePanel/Layout/divider/index.tsx new file mode 100644 index 0000000000..51aa1ddba2 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/divider/index.tsx @@ -0,0 +1,13 @@ +import { Divider } from "@illa-design/react" +import { FC } from "react" +import { PanelDividerProps } from "./interface" +import { applyPanelDividerCss } from "./style" + +export const PanelDivider: FC = (props) => { + const { hasMargin = true } = props + return ( +
+ +
+ ) +} diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/divider/interface.ts b/apps/builder/src/page/App/components/PagePanel/Layout/divider/interface.ts new file mode 100644 index 0000000000..3e08641eca --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/divider/interface.ts @@ -0,0 +1,3 @@ +export interface PanelDividerProps { + hasMargin?: boolean +} diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/divider/style.ts b/apps/builder/src/page/App/components/PagePanel/Layout/divider/style.ts new file mode 100644 index 0000000000..eb8cbb5cd2 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/divider/style.ts @@ -0,0 +1,8 @@ +import { css } from "@emotion/react" + +export const applyPanelDividerCss = (hasMargin: boolean) => { + return css` + padding: 0 16px; + margin-top: ${hasMargin ? "8px" : 0}; + ` +} diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/index.tsx b/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/index.tsx new file mode 100644 index 0000000000..ccb84ecfcb --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/index.tsx @@ -0,0 +1,8 @@ +import { FC } from "react" +import { LeftAndRightLayoutProps } from "./interface" +import { leftAndRightCss } from "./style" + +export const LeftAndRightLayout: FC = (props) => { + const { children } = props + return
{children}
+} diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/interface.ts b/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/interface.ts new file mode 100644 index 0000000000..08a8935822 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/interface.ts @@ -0,0 +1,4 @@ +import { ReactNode } from "react" +export interface LeftAndRightLayoutProps { + children?: ReactNode +} diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/style.ts b/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/style.ts new file mode 100644 index 0000000000..ff48e0ef76 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/leftAndRight/style.ts @@ -0,0 +1,9 @@ +import { css } from "@emotion/react" + +export const leftAndRightCss = css` + min-height: 40px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; +` diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/index.tsx b/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/index.tsx new file mode 100644 index 0000000000..b107819dac --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/index.tsx @@ -0,0 +1,8 @@ +import { FC } from "react" +import { SetterPaddingLayout } from "./interface" +import { setterPaddingStyle } from "./style" + +export const SetterPadding: FC = (props) => { + const { children } = props + return
{children}
+} diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/interface.ts b/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/interface.ts new file mode 100644 index 0000000000..d7546a7f16 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/interface.ts @@ -0,0 +1,5 @@ +import { ReactNode } from "react" + +export interface SetterPaddingLayout { + children: ReactNode +} diff --git a/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/style.ts b/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/style.ts new file mode 100644 index 0000000000..208d935c06 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Layout/setterPadding/style.ts @@ -0,0 +1,5 @@ +import { css } from "@emotion/react" + +export const setterPaddingStyle = css` + padding: 8px 0px; +` diff --git a/apps/builder/src/page/App/components/PagePanel/Modules/Frame/index.tsx b/apps/builder/src/page/App/components/PagePanel/Modules/Frame/index.tsx new file mode 100644 index 0000000000..6ffc567d34 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/Modules/Frame/index.tsx @@ -0,0 +1,120 @@ +import { FC } from "react" +import { PanelBar } from "@/components/PanelBar" +import { useTranslation } from "react-i18next" +import { Input, RadioGroup, Switch } from "@illa-design/react" +import { ReactComponent as FrameFixedIcon } from "@/assets/rightPagePanel/frame-fixed.svg" +import { ReactComponent as FrameResponsiveIcon } from "@/assets/rightPagePanel/frame-responsive.svg" +import { PageLabel } from "@/page/App/components/PagePanel/Components/Label" +import { LayoutSelect } from "@/page/App/components/PagePanel/Components/LayoutSelect" +import { LeftAndRightLayout } from "@/page/App/components/PagePanel/Layout/leftAndRight" +import { SetterPadding } from "@/page/App/components/PagePanel/Layout/setterPadding" +import { PanelDivider } from "@/page/App/components/PagePanel/Layout/divider" + +export const PageFrame: FC = () => { + const { t } = useTranslation() + + return ( + + + , value: "responsive" }, + { label: , value: "fixed" }, + ]} + w="100%" + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +PageFrame.displayName = "PageFrame" diff --git a/apps/builder/src/page/App/components/PagePanel/index.tsx b/apps/builder/src/page/App/components/PagePanel/index.tsx new file mode 100644 index 0000000000..e24d2d651c --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/index.tsx @@ -0,0 +1,15 @@ +import { FC } from "react" +import { PagePanelWrapperStyle, PageScrollContainerWrapperStyle } from "./style" +import { PageFrame } from "./Modules/Frame" + +export const PagePanel: FC = () => { + return ( +
+
+ +
+
+ ) +} + +PagePanel.displayName = "PagePanel" diff --git a/apps/builder/src/page/App/components/PagePanel/style.ts b/apps/builder/src/page/App/components/PagePanel/style.ts new file mode 100644 index 0000000000..2ac5e69750 --- /dev/null +++ b/apps/builder/src/page/App/components/PagePanel/style.ts @@ -0,0 +1,25 @@ +import { globalColor, illaPrefix } from "@illa-design/theme" +import { css } from "@emotion/react" + +export const PagePanelWrapperStyle = css` + border-top: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; + height: 100%; + width: 100%; + padding-bottom: 16px; + overflow: hidden; + display: flex; + flex-direction: column; +` + +export const PageScrollContainerWrapperStyle = css` + width: 100%; + height: 100%; + overflow-y: auto; +` + +export const headerWrapperStyle = css` + display: flex; + height: 48px; + align-items: center; + padding: 0 16px; +` diff --git a/apps/builder/src/page/App/style.tsx b/apps/builder/src/page/App/style.tsx index 0d94e95027..ed2303240c 100644 --- a/apps/builder/src/page/App/style.tsx +++ b/apps/builder/src/page/App/style.tsx @@ -32,6 +32,7 @@ export const navbarStyle = css` box-sizing: border-box; width: 100%; height: ${NAVBAR_HEIGHT}px; + flex: none; ` export const leftPanelStyle = css` From 4e2598e1845b6f3968bd44b297d5c68736edd3c0 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 4 Nov 2022 16:26:50 +0800 Subject: [PATCH 02/42] =?UTF-8?q?feat:=20=E2=9C=A8=20rendering=20layer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/builder/src/config/newAppConfig.tsx | 161 ++++++++++ apps/builder/src/hooks/fakerData.tsx | 0 .../RestApiPanel/BodyEditor/index.tsx | 2 - .../page/App/components/CanvasPanel/index.tsx | 25 +- .../DotPanel/context/resizeContext.tsx | 5 + .../page/App/components/DotPanel/hotSpot.tsx | 0 .../page/App/components/DotPanel/index.tsx | 124 ++++++- .../page/App/components/DotPanel/interface.ts | 44 ++- .../DotPanel/renderComponentCanvas.tsx | 9 +- .../App/components/DotPanel/renderPage.tsx | 285 +++++++++++++++++ .../App/components/DotPanel/renderSection.tsx | 302 ++++++++++++++++++ .../src/page/App/components/DotPanel/style.ts | 125 +++++++- .../ChartSetter/chartKeysSelectSetter.tsx | 1 - .../components/CreateNewModal/index.tsx | 2 + .../editor/components/componentsReducer.ts | 32 ++ .../editor/components/componentsSlice.ts | 2 + .../editor/components/componentsState.ts | 56 +++- .../src/widgetLibrary/SelectWidget/select.tsx | 1 - 18 files changed, 1119 insertions(+), 57 deletions(-) create mode 100644 apps/builder/src/config/newAppConfig.tsx create mode 100644 apps/builder/src/hooks/fakerData.tsx create mode 100644 apps/builder/src/page/App/components/DotPanel/context/resizeContext.tsx create mode 100644 apps/builder/src/page/App/components/DotPanel/hotSpot.tsx create mode 100644 apps/builder/src/page/App/components/DotPanel/renderPage.tsx create mode 100644 apps/builder/src/page/App/components/DotPanel/renderSection.tsx diff --git a/apps/builder/src/config/newAppConfig.tsx b/apps/builder/src/config/newAppConfig.tsx new file mode 100644 index 0000000000..5d3c383dc7 --- /dev/null +++ b/apps/builder/src/config/newAppConfig.tsx @@ -0,0 +1,161 @@ +export const BASIC_APP_CONFIG = [ + { + displayName: "page1", + parentNode: "root", + showName: "page", + error: false, + isDragging: false, + isResizing: false, + type: "PAGE_NODE", + containerType: "EDITOR_DOT_PANEL", + verticalResize: true, + h: 0, + w: 0, + minH: 0, + minW: 0, + unitW: 0, + unitH: 0, + x: -1, + y: -1, + z: 0, + props: { + canvasSize: "auto", + canvasWidth: "auto", + layout: "presetE", + leftPosition: "CENTER", + rightPosition: "CENTER", + hasFooter: true, + hasHeader: true, + hasLeft: true, + hasRight: true, + leftWidth: 20, + rightWidth: 20, + topHeight: 96, + bottomHeight: 96, + }, + panelConfig: null, + childrenNode: [ + { + displayName: "headerSection", + parentNode: "page1", + showName: "headerSection", + error: false, + isDragging: false, + isResizing: false, + type: "SECTION_NODE", + containerType: "EDITOR_DOT_PANEL", + verticalResize: true, + h: 0, + w: 0, + minH: 0, + minW: 0, + unitW: 0, + unitH: 0, + x: -1, + y: -1, + z: 0, + props: { + height: "300px", + isFixed: false, + }, + panelConfig: null, + childrenNode: [], + }, + { + displayName: "rightSection", + parentNode: "page1", + showName: "rightSection", + error: false, + isDragging: false, + isResizing: false, + type: "SECTION_NODE", + containerType: "EDITOR_DOT_PANEL", + verticalResize: true, + h: 0, + w: 0, + minH: 0, + minW: 0, + unitW: 0, + unitH: 0, + x: -1, + y: -1, + z: 0, + props: {}, + panelConfig: null, + childrenNode: [], + }, + { + displayName: "leftSection", + parentNode: "page1", + showName: "leftSection", + error: false, + isDragging: false, + isResizing: false, + type: "SECTION_NODE", + containerType: "EDITOR_DOT_PANEL", + verticalResize: true, + h: 0, + w: 0, + minH: 0, + minW: 0, + unitW: 0, + unitH: 0, + x: -1, + y: -1, + z: 0, + props: {}, + panelConfig: null, + childrenNode: [], + }, + { + displayName: "bodySection", + parentNode: "page1", + showName: "bodySection", + error: false, + isDragging: false, + isResizing: false, + type: "SECTION_NODE", + containerType: "EDITOR_DOT_PANEL", + verticalResize: true, + h: 0, + w: 0, + minH: 0, + minW: 0, + unitW: 0, + unitH: 0, + x: -1, + y: -1, + z: 0, + props: {}, + panelConfig: null, + childrenNode: [], + }, + { + displayName: "footerSection", + parentNode: "page1", + showName: "footerSection", + error: false, + isDragging: false, + isResizing: false, + type: "SECTION_NODE", + containerType: "EDITOR_DOT_PANEL", + verticalResize: true, + h: 0, + w: 0, + minH: 0, + minW: 0, + unitW: 0, + unitH: 0, + x: -1, + y: -1, + z: 0, + props: { + height: "300px", + isFixed: false, + }, + panelConfig: null, + childrenNode: [], + }, + ], + }, +] diff --git a/apps/builder/src/hooks/fakerData.tsx b/apps/builder/src/hooks/fakerData.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx index 262f69aab0..bbd036856f 100644 --- a/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx +++ b/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx @@ -101,8 +101,6 @@ export const BodyEditor: FC = (props) => { } } - console.log("longbo", newBody) - dispatch( configActions.updateCachedAction({ ...actionItem, diff --git a/apps/builder/src/page/App/components/CanvasPanel/index.tsx b/apps/builder/src/page/App/components/CanvasPanel/index.tsx index 6610fbeb60..e986db0746 100644 --- a/apps/builder/src/page/App/components/CanvasPanel/index.tsx +++ b/apps/builder/src/page/App/components/CanvasPanel/index.tsx @@ -9,8 +9,6 @@ import { import { CanvasPanelProps } from "./interface" import { DotPanel } from "@/page/App/components/DotPanel" import { useDispatch, useSelector } from "react-redux" -import { getCanvas } from "@/redux/currentApp/editor/components/componentsSelector" -import { ComponentNode } from "@/redux/currentApp/editor/components/componentsState" import { FullScreenIcon, LockIcon } from "@illa-design/icon" import { Button } from "@illa-design/button" import { getFreezeState, getIllaMode } from "@/redux/config/configSelector" @@ -21,7 +19,6 @@ export const CanvasPanel: FC = (props) => { const { ...otherProps } = props const { t } = useTranslation() - const canvasTree = useSelector(getCanvas) const mode = useSelector(getIllaMode) const dispatch = useDispatch() const isFreeze = useSelector(getFreezeState) @@ -34,7 +31,7 @@ export const CanvasPanel: FC = (props) => { FocusManager.switchFocus("canvas") }} > - {applyCanvasTree(canvasTree)} + {mode === "edit" && ( <> {/*TODO: replace this to illa-design/Message,when Message is ok*/} {isFreeze ? (
diff --git a/apps/builder/src/page/App/components/CanvasPanel/style.ts b/apps/builder/src/page/App/components/CanvasPanel/style.ts index e6858574d2..2e266d75db 100644 --- a/apps/builder/src/page/App/components/CanvasPanel/style.ts +++ b/apps/builder/src/page/App/components/CanvasPanel/style.ts @@ -14,14 +14,6 @@ export function applyScaleContainerStyle(scale: number): SerializedStyles { ` } -export const previewStyle = css` - position: absolute; - z-index: 100; - box-shadow: 0 0 6px 0 ${globalColor(`--${illaPrefix}-blackAlpha-06`)}; - bottom: 8px; - right: 16px; -` - export const messageWrapperStyle = css` top: 16px; position: absolute; diff --git a/apps/builder/src/page/App/components/DotPanel/interface.ts b/apps/builder/src/page/App/components/DotPanel/interface.ts index d4e6b27ff9..cc3b2c74eb 100644 --- a/apps/builder/src/page/App/components/DotPanel/interface.ts +++ b/apps/builder/src/page/App/components/DotPanel/interface.ts @@ -97,10 +97,13 @@ export interface RenderLeftSectionProps { offsetLeft: number containerWidth: number mode: IllaMode + leftWidth: number rightWidth: number currentPageDisplayName: string leftPosition: SECTION_POSITION showFoldIcon: boolean + isFold: boolean + setIsLeftFold: (isFold: boolean) => void } export interface RenderRightSectionProps { @@ -109,9 +112,12 @@ export interface RenderRightSectionProps { containerWidth: number mode: IllaMode leftWidth: number + rightWidth: number currentPageDisplayName: string rightPosition: SECTION_POSITION showFoldIcon: boolean + isFold: boolean + setIsRightFold: (isFold: boolean) => void } export interface RenderContainerProps { diff --git a/apps/builder/src/page/App/components/DotPanel/renderPage.tsx b/apps/builder/src/page/App/components/DotPanel/renderPage.tsx index 34fdd39905..aae1194241 100644 --- a/apps/builder/src/page/App/components/DotPanel/renderPage.tsx +++ b/apps/builder/src/page/App/components/DotPanel/renderPage.tsx @@ -1,4 +1,4 @@ -import { FC, useRef, useLayoutEffect, useMemo } from "react" +import { FC, useRef, useLayoutEffect, useMemo, useState } from "react" import { PageNode, SectionNode, @@ -77,6 +77,9 @@ export const RenderPage: FC = (props) => { showRightFoldIcon, } = pageProps + const [isLeftFold, setIsLeftFold] = useState(false) + const [isRightFold, setIsRightFold] = useState(false) + useLayoutEffect(() => { if ( canvasShape.canvasHeight !== bounds.height || @@ -122,6 +125,36 @@ export const RenderPage: FC = (props) => { : 0 }, [bounds.width, canvasSize, hasRight, rightWidth]) + const calcLeftWidth = useMemo(() => { + const leftWidthPX = getLeftAndRightWidth( + canvasSize, + leftWidth, + bounds.width, + ) + return hasLeft + ? isLeftFold + ? 32 + : leftWidthPX <= LEFT_MIN_WIDTH + ? LEFT_MIN_WIDTH + : leftWidthPX + : 0 + }, [bounds.width, canvasSize, hasLeft, isLeftFold, leftWidth]) + + const calcRightWidth = useMemo(() => { + const rightWidthPX = getLeftAndRightWidth( + canvasSize, + rightWidth, + bounds.width, + ) + return hasRight + ? isRightFold + ? 32 + : rightWidthPX <= RIGHT_MIN_WIDTH + ? RIGHT_MIN_WIDTH + : rightWidthPX + : 0 + }, [bounds.width, canvasSize, hasRight, isRightFold, rightWidth]) + useLayoutEffect(() => { let headerLeft = 0 let headerWidth = bounds.width @@ -167,25 +200,25 @@ export const RenderPage: FC = (props) => { } if (hasLeft) { - bodyWidth -= realLeftWidth - bodyLeft = realLeftWidth + bodyWidth -= calcLeftWidth + bodyLeft = calcLeftWidth switch (leftPosition) { case SECTION_POSITION.TOP: { - headerLeft = realLeftWidth - headerWidth -= realLeftWidth + headerLeft = calcLeftWidth + headerWidth -= calcLeftWidth leftHeight -= bottomHeight break } case SECTION_POSITION.FULL: { - headerLeft = realLeftWidth - headerWidth -= realLeftWidth - footerLeft = realLeftWidth - footerWidth -= realLeftWidth + headerLeft = calcLeftWidth + headerWidth -= calcLeftWidth + footerLeft = calcLeftWidth + footerWidth -= calcLeftWidth break } case SECTION_POSITION.BOTTOM: { - footerLeft = realLeftWidth - footerWidth -= realLeftWidth + footerLeft = calcLeftWidth + footerWidth -= calcLeftWidth leftTop = topHeight leftHeight -= topHeight break @@ -198,20 +231,20 @@ export const RenderPage: FC = (props) => { } if (hasRight) { - bodyWidth -= realRightWidth + bodyWidth -= calcRightWidth switch (rightPosition) { case SECTION_POSITION.TOP: { - headerWidth -= realRightWidth + headerWidth -= calcRightWidth rightHeight -= bottomHeight break } case SECTION_POSITION.FULL: { - headerWidth -= realRightWidth - footerWidth -= realRightWidth + headerWidth -= calcRightWidth + footerWidth -= calcRightWidth break } case SECTION_POSITION.BOTTOM: { - footerWidth -= realRightWidth + footerWidth -= calcRightWidth rightTop = topHeight rightHeight -= topHeight break @@ -232,24 +265,22 @@ export const RenderPage: FC = (props) => { } if (hasLeft && leftRef.current) { - leftRef.current.style.width = `${realLeftWidth}px` leftRef.current.style.height = `${leftHeight}px` leftRef.current.style.top = `${leftTop}px` leftArea = { top: leftTop, bottom: leftTop + leftHeight, left: 0, - right: realLeftWidth, + right: calcLeftWidth, } } if (hasRight && rightRef.current) { - rightRef.current.style.width = `${realRightWidth}px` rightRef.current.style.height = `${rightHeight}px` rightRef.current.style.top = `${rightTop}px` rightArea = { top: rightTop, bottom: rightTop + rightHeight, - left: realRightWidth, + left: calcRightWidth, right: 0, } } @@ -290,6 +321,8 @@ export const RenderPage: FC = (props) => { }, [ bottomHeight, bounds, + calcLeftWidth, + calcRightWidth, canvasSize, hasFooter, hasHeader, @@ -341,10 +374,13 @@ export const RenderPage: FC = (props) => { offsetLeft={bounds.left} containerWidth={bounds.width} mode={mode} + leftWidth={realLeftWidth} rightWidth={realRightWidth} currentPageDisplayName={currentPageDisplayName} leftPosition={leftPosition} showFoldIcon={showLeftFoldIcon} + isFold={isLeftFold} + setIsLeftFold={setIsLeftFold} /> )} {bodySection && ( @@ -361,6 +397,9 @@ export const RenderPage: FC = (props) => { currentPageDisplayName={currentPageDisplayName} rightPosition={rightPosition} showFoldIcon={showRightFoldIcon} + isFold={isRightFold} + rightWidth={realRightWidth} + setIsRightFold={setIsRightFold} /> )} {hasFooter && footerSection && ( diff --git a/apps/builder/src/page/App/components/DotPanel/renderSection.tsx b/apps/builder/src/page/App/components/DotPanel/renderSection.tsx index 00e89a1dcf..3fb7e745cd 100644 --- a/apps/builder/src/page/App/components/DotPanel/renderSection.tsx +++ b/apps/builder/src/page/App/components/DotPanel/renderSection.tsx @@ -27,6 +27,11 @@ import { resizeVerticalBarWrapperStyle, applySideBarWrapperStyle, sideBarIconStyle, + openFoldWrapperStyle, + leftOpenFoldPositionStyle, + applyNoBottomPaddingStyle, + rightOpenFoldPositionStyle, + disabledHorizontalBarWrapperStyle, } from "./style" import { RenderComponentCanvas } from "./renderComponentCanvas" import useMeasure from "react-use-measure" @@ -551,6 +556,9 @@ export const RenderLeftSection = forwardRef< currentPageDisplayName, leftPosition, showFoldIcon, + isFold, + leftWidth, + setIsLeftFold, } = props const { viewSortedKey, currentViewIndex } = sectionNode.props @@ -669,9 +677,17 @@ export const RenderLeftSection = forwardRef< [currentPageDisplayName, dispatch, leftPosition], ) + const handleOnClickFoldIcon = useCallback(() => { + setIsLeftFold(!isFold) + }, [isFold, setIsLeftFold]) + return (
)} -
{ - containerBoundRef(ele) - containerRef.current = ele - }} - > - {componentNode && ( - - )} - {showFoldIcon && ( -
- -
- )} -
- {mode === "edit" && ( + + {!isFold ? (
{ + containerBoundRef(ele) + containerRef.current = ele + }} + > + {componentNode && ( + + )} + {showFoldIcon && ( +
+ +
+ )} +
+ ) : ( +
+ )} + + {isFold && ( +
-
+
)} + {mode === "edit" && + (isFold ? ( +
+ ) : ( +
+
+
+ ))}
) }) @@ -750,6 +786,9 @@ export const RenderRightSection = forwardRef< currentPageDisplayName, rightPosition, showFoldIcon, + isFold, + rightWidth, + setIsRightFold, } = props const { viewSortedKey, currentViewIndex } = sectionNode.props @@ -870,9 +909,17 @@ export const RenderRightSection = forwardRef< [currentPageDisplayName, dispatch, rightPosition], ) + const handleOnClickFoldIcon = useCallback(() => { + setIsRightFold(!isFold) + }, [isFold, setIsRightFold]) + return (
)} -
{ - containerBoundRef(ele) - containerRef.current = ele - }} - > - {componentNode && ( - - )} - {showFoldIcon && ( -
- -
- )} -
- {mode === "edit" && ( + {!isFold ? (
{ + containerBoundRef(ele) + containerRef.current = ele + }} + > + {componentNode && ( + + )} + {showFoldIcon && ( +
+ +
+ )} +
+ ) : ( +
+ )} + {isFold && ( +
-
+
)} + {mode === "edit" && + (isFold ? ( +
+ ) : ( +
+
+
+ ))}
) }) diff --git a/apps/builder/src/page/App/components/DotPanel/style.ts b/apps/builder/src/page/App/components/DotPanel/style.ts index 94b1e0a090..d4d6a98064 100644 --- a/apps/builder/src/page/App/components/DotPanel/style.ts +++ b/apps/builder/src/page/App/components/DotPanel/style.ts @@ -157,6 +157,12 @@ export const resizeVerticalBarStyle = css` background-color: ${globalColor(`--${illaPrefix}-grayBlue-06`)}; ` +export const disabledHorizontalBarWrapperStyle = css` + height: 100%; + width: 8px; + background-color: #f7f8fa; +` + export const resizeHorizontalBarWrapperStyle = css` height: 100%; width: 8px; @@ -219,6 +225,7 @@ export const applyFooterSectionWrapperStyle = ( export const applyLeftSectionWrapperStyle = ( width: string, top: string = "0px", + isFold: boolean, ) => { return css` position: absolute; @@ -228,13 +235,14 @@ export const applyLeftSectionWrapperStyle = ( width: ${width}; display: flex; flex-direction: row; - min-width: 240px; + min-width: ${isFold ? 0 : "240px"}; ` } export const applyRightSectionWrapperStyle = ( width: string, top: string = "0px", + isFold: boolean, ) => { return css` position: absolute; @@ -244,7 +252,7 @@ export const applyRightSectionWrapperStyle = ( width: ${width}; display: flex; flex-direction: row-reverse; - min-width: 240px; + min-width: ${isFold ? 0 : "240px"}; ` } @@ -258,6 +266,14 @@ export const applyContainerWrapperStyle = (model: IllaMode) => { ` } +export const applyNoBottomPaddingStyle = (isShowFold: boolean) => { + return isShowFold + ? css` + padding-bottom: 0; + ` + : null +} + export const changeLayoutTopBarWrapperStyle = css` position: absolute; top: -9px; @@ -331,6 +347,9 @@ export const applySideBarWrapperStyle = (direction: "left" | "right") => { display: flex; align-items: center; justify-content: ${direction === "left" ? "flex-end" : "flex-start"}; + padding: 8px 0px; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; + font-size: 12px; ` } @@ -338,3 +357,28 @@ export const sideBarIconStyle = css` cursor: pointer; flex: none; ` + +export const openFoldWrapperStyle = css` + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background-color: ${globalColor(`--${illaPrefix}-white-01`)}; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08); + border-radius: 0px 16px 16px 0px; + cursor: pointer; + font-size: 12px; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; +` + +export const leftOpenFoldPositionStyle = css` + position: absolute; + bottom: 8px; +` + +export const rightOpenFoldPositionStyle = css` + transform: rotate(180deg); + position: absolute; + bottom: 8px; +` diff --git a/apps/builder/src/page/App/components/PageNavBar/index.tsx b/apps/builder/src/page/App/components/PageNavBar/index.tsx index 342c2a84b6..dd1cd0551d 100644 --- a/apps/builder/src/page/App/components/PageNavBar/index.tsx +++ b/apps/builder/src/page/App/components/PageNavBar/index.tsx @@ -6,6 +6,7 @@ import { BugIcon, CaretRightIcon, ExitIcon, + FullScreenIcon, LockIcon, UnlockIcon, WindowBottomIcon, @@ -189,6 +190,15 @@ export const PageNavBar: FC = (props) => { onClick={handleClickFreezeIcon} /> +