From 779076012ff083ef147ecd7f6fc0804505c694a4 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Sun, 6 Mar 2022 20:28:47 +0800 Subject: [PATCH] Add range details panel --- source/Component/AttrInput/AttrInput.scss | 78 +++++++++++++++++++++ source/Component/AttrInput/AttrInput.tsx | 37 ++++++++++ source/Localization/EN-US.ts | 2 + source/Localization/ZH-CN.ts | 2 + source/Page/SimulatorWeb/SimulatorWeb.tsx | 3 +- source/Panel/Panel.tsx | 6 ++ source/Panel/RangeDetails/RangeDetails.scss | 0 source/Panel/RangeDetails/RangeDetails.tsx | 14 ++++ 8 files changed, 140 insertions(+), 2 deletions(-) create mode 100644 source/Component/AttrInput/AttrInput.scss create mode 100644 source/Component/AttrInput/AttrInput.tsx create mode 100644 source/Panel/RangeDetails/RangeDetails.scss create mode 100644 source/Panel/RangeDetails/RangeDetails.tsx diff --git a/source/Component/AttrInput/AttrInput.scss b/source/Component/AttrInput/AttrInput.scss new file mode 100644 index 0000000..3aebe35 --- /dev/null +++ b/source/Component/AttrInput/AttrInput.scss @@ -0,0 +1,78 @@ +@import "../Theme/Theme.scss"; + +div.attr-input { + width: 100%; + display: flex; + min-height: 24px; + padding: 8px 0; + + div.input-intro { + width: 50%; + height: 100%; + max-width: 180px; + display: flex; + align-items: center; + } + + div.input-content { + width: 50%; + height: 100%; + max-width: 180px; + box-sizing: border-box; + border-radius: 3px; + overflow: hidden; + display: flex; + justify-content: space-between; + align-items: center; + min-height: 24px; + + input { + padding: 0 5px; + width: 100%; + height: 100%; + border: none; + outline:none; + }; + + input:focus { + border: none; + } + + div.button-left, div.button-right { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + vertical-align: middle; + cursor: pointer; + user-select: none; + padding: 0 3px; + } + } +} + +div.dark.attr-input { + + div.input-content, + div.input-content input { + background-color: $lt-bg-color-lvl3-dark; + color: $lt-font-color-normal-dark; + } + + div.button-left:hover, div.button-right:hover { + background-color: $lt-bg-color-lvl2-dark; + } +} + +div.light.attr-input { + + div.input-content, + div.input-content input { + background-color: $lt-bg-color-lvl3-light; + color: $lt-font-color-normal-light; + } + + div.button-left:hover, div.button-right:hover { + background-color: $lt-bg-color-lvl2-light; + } +} \ No newline at end of file diff --git a/source/Component/AttrInput/AttrInput.tsx b/source/Component/AttrInput/AttrInput.tsx new file mode 100644 index 0000000..dd273b4 --- /dev/null +++ b/source/Component/AttrInput/AttrInput.tsx @@ -0,0 +1,37 @@ +import { Component, ReactNode } from "react"; +import { FontLevel, Theme } from "@Component/Theme/Theme"; +import "./AttrInput.scss"; +import { Icon } from "@fluentui/react"; + +interface IAttrInputProps { + isNumber?: boolean; +} + +class AttrInput extends Component { + public render(): ReactNode { + + return +
+ Input +
+
+ { + this.props.isNumber ?
+ +
: null + } + + { + this.props.isNumber ?
+ +
: null + } +
+ + } +} + +export { AttrInput }; \ No newline at end of file diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 1ec0799..fda2eff 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -28,6 +28,8 @@ const EN_US = { "Panel.Info.Render.View": "Live simulation results preview", "Panel.Title.Object.List.View": "Object list", "Panel.Info.Object.List.View": "Edit View All Object Properties", + "Panel.Title.Range.Details.View": "Range attributes", + "Panel.Info.Range.Details.View": "Edit View Range attributes", } export default EN_US; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index c9ef69d..c986442 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -28,5 +28,7 @@ const ZH_CN = { "Panel.Info.Render.View": "实时仿真结果预览", "Panel.Title.Object.List.View": "对象列表", "Panel.Info.Object.List.View": "编辑查看全部对象属性", + "Panel.Title.Range.Details.View": "范围属性", + "Panel.Info.Range.Details.View": "编辑查看范围属性", } export default ZH_CN; \ No newline at end of file diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 3c14aa1..2559350 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -75,8 +75,7 @@ class SimulatorWeb extends Component { items: [{ panles: ["ObjectList", "Test tab"] }, { - items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}], - layout: LayoutDirection.Y + panles: ["RangeDetails", "Label e"] }], layout: LayoutDirection.Y } diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index 47a684e..66b5c66 100644 --- a/source/Panel/Panel.tsx +++ b/source/Panel/Panel.tsx @@ -4,6 +4,7 @@ import { Localization } from "@Component/Localization/Localization"; import { RenderView } from "./RenderView/RenderView"; import { ObjectList } from "./ObjectList/ObjectList"; import { ObjectCommand } from "./ObjectList/ObjectCommand"; +import { RangeDetails } from "./RangeDetails/RangeDetails"; interface IPanelInfo { nameKey: string; @@ -19,6 +20,7 @@ interface IPanelInfo { type PanelId = "" | "RenderView" // 主渲染器 | "ObjectList" // 对象列表 +| "RangeDetails" // 范围属性 ; const PanelInfoMap = new Map(); @@ -30,6 +32,10 @@ PanelInfoMap.set("ObjectList", { nameKey: "Panel.Title.Object.List.View", introKay: "Panel.Info.Object.List.View", class: ObjectList, header: ObjectCommand, hidePadding: true }) +PanelInfoMap.set("RangeDetails", { + nameKey: "Panel.Title.Range.Details.View", introKay: "Panel.Info.Range.Details.View", + class: RangeDetails +}) function getPanelById(panelId: PanelId): ReactNode { switch (panelId) { diff --git a/source/Panel/RangeDetails/RangeDetails.scss b/source/Panel/RangeDetails/RangeDetails.scss new file mode 100644 index 0000000..e69de29 diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx new file mode 100644 index 0000000..0e456db --- /dev/null +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -0,0 +1,14 @@ +import { Component, ReactNode } from "react"; +import { AttrInput } from "@Component/AttrInput/AttrInput"; +import "./RangeDetails.scss"; + +class RangeDetails extends Component { + public render(): ReactNode { + return
+ + +
+ } +} + +export { RangeDetails }; \ No newline at end of file