From 47e3c973fb6a7eca232cbe5356291f95cf4e7e99 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Tue, 8 Mar 2022 17:36:26 +0800 Subject: [PATCH] Add toggles input component --- .../Component/TogglesInput/TogglesInput.scss | 63 +++++++++++++++++++ .../Component/TogglesInput/TogglesInput.tsx | 45 +++++++++++++ source/Localization/EN-US.ts | 1 + source/Localization/ZH-CN.ts | 1 + source/Panel/RangeDetails/RangeDetails.tsx | 28 ++++++--- 5 files changed, 129 insertions(+), 9 deletions(-) create mode 100644 source/Component/TogglesInput/TogglesInput.scss create mode 100644 source/Component/TogglesInput/TogglesInput.tsx diff --git a/source/Component/TogglesInput/TogglesInput.scss b/source/Component/TogglesInput/TogglesInput.scss new file mode 100644 index 0000000..88598f9 --- /dev/null +++ b/source/Component/TogglesInput/TogglesInput.scss @@ -0,0 +1,63 @@ +@import "../Theme/Theme.scss"; + +$line-min-height: 26px; + +div.toggles-input { + width: 100%; + display: flex; + min-height: $line-min-height; + padding: 5px 0; + + div.toggles-intro { + width: 50%; + height: 100%; + max-width: 220px; + display: flex; + align-items: center; + padding-right: 5px; + box-sizing: border-box; + } + + div.toggles-content { + width: 50%; + height: 100%; + max-width: 180px; + min-height: $line-min-height; + + div.checkbox { + width: $line-min-height; + height: $line-min-height; + overflow: hidden; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + } + } +} + +div.dark.toggles-input { + + div.toggles-content div.checkbox { + background-color: $lt-bg-color-lvl3-dark; + color: $lt-font-color-normal-dark; + } + + div.toggles-content div.checkbox:hover { + background-color: $lt-bg-color-lvl2-dark; + } +} + +div.light.toggles-input { + + div.toggles-content div.checkbox { + background-color: $lt-bg-color-lvl3-light; + color: $lt-font-color-normal-light; + } + + div.toggles-content div.checkbox:hover { + background-color: $lt-bg-color-lvl2-light; + } +} \ No newline at end of file diff --git a/source/Component/TogglesInput/TogglesInput.tsx b/source/Component/TogglesInput/TogglesInput.tsx new file mode 100644 index 0000000..0aa21c6 --- /dev/null +++ b/source/Component/TogglesInput/TogglesInput.tsx @@ -0,0 +1,45 @@ +import { AllI18nKeys, Localization } from "@Component/Localization/Localization"; +import { Theme } from "@Component/Theme/Theme"; +import { Icon } from "@fluentui/react"; +import { Component, ReactNode } from "react"; +import "./TogglesInput.scss"; + +interface ITogglesInputProps { + keyI18n: AllI18nKeys; + infoI18n?: AllI18nKeys; + value?: boolean; + disable?: boolean; + valueChange?: (color: boolean) => any; +} + +class TogglesInput extends Component { + public render(): ReactNode { + return +
+ +
+
+
{ + if (this.props.disable) { + return; + } + if (this.props.valueChange) { + this.props.valueChange(!this.props.value); + } + })} + > + +
+
+ + } +} + +export { TogglesInput }; \ No newline at end of file diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 2ab0d8c..752c7a2 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -42,6 +42,7 @@ const EN_US = { "Common.Attr.Key.Radius.Y": "Radius Y", "Common.Attr.Key.Radius.Z": "Radius Z", "Common.Attr.Key.Color": "Color", + "Common.Attr.Key.Display": "Display", "Common.Attr.Key.Error.Multiple": "Multiple values", "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range", "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 80753da..dfa4c99 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -42,6 +42,7 @@ const ZH_CN = { "Common.Attr.Key.Radius.Y": "Y 半径", "Common.Attr.Key.Radius.Z": "Z 半径", "Common.Attr.Key.Color": "颜色", + "Common.Attr.Key.Display": "显示", "Common.Attr.Key.Error.Multiple": "多重数值", "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围", "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象", diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx index 4fe9548..8f0ac55 100644 --- a/source/Panel/RangeDetails/RangeDetails.tsx +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -5,6 +5,7 @@ import { AllI18nKeys } from "@Component/Localization/Localization"; import { Range } from "@Model/Range"; import { ObjectID } from "@Model/Renderer"; import { ColorInput } from "@Component/ColorInput/ColorInput"; +import { TogglesInput } from "@Component/TogglesInput/TogglesInput"; import "./RangeDetails.scss"; @useStatusWithEvent("rangeAttrChange", "focusObjectChange") @@ -12,6 +13,7 @@ class RangeDetails extends Component { public readonly AttrI18nKey: AllI18nKeys[] = [ "Common.Attr.Key.Display.Name", + "Common.Attr.Key.Display", "Common.Attr.Key.Color", "Common.Attr.Key.Position.X", "Common.Attr.Key.Position.Y", @@ -55,40 +57,48 @@ class RangeDetails extends Component { } private renderFrom(range: Range) { - // console.log(range); + + let keyIndex = 0; + return <> - {this.renderAttrInput(range.id, 0, range.displayName, (val, status) => { + {this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => { status.changeRangeAttrib(range.id, "displayName", val); })} + + { + if (this.props.status) { + this.props.status.changeRangeAttrib(range.id, "display", val); + } + }}/> - { + { if (this.props.status) { this.props.status.changeRangeAttrib(range.id, "color", color); } }}/> - {this.renderAttrInput(range.id, 2, range.position[0], (val, status) => { + {this.renderAttrInput(range.id, keyIndex ++, range.position[0], (val, status) => { range.position[0] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 3, range.position[1], (val, status) => { + {this.renderAttrInput(range.id, keyIndex ++, range.position[1], (val, status) => { range.position[1] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 4, range.position[2], (val, status) => { + {this.renderAttrInput(range.id, keyIndex ++, range.position[2], (val, status) => { range.position[2] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 5, range.radius[0], (val, status) => { + {this.renderAttrInput(range.id, keyIndex ++, range.radius[0], (val, status) => { range.radius[0] = (val as any) / 1; status.changeRangeAttrib(range.id, "radius", range.radius); }, .1, undefined, 0)} - {this.renderAttrInput(range.id, 6, range.radius[1], (val, status) => { + {this.renderAttrInput(range.id, keyIndex ++, range.radius[1], (val, status) => { range.radius[1] = (val as any) / 1; status.changeRangeAttrib(range.id, "radius", range.radius); }, .1, undefined, 0)} - {this.renderAttrInput(range.id, 7, range.radius[2], (val, status) => { + {this.renderAttrInput(range.id, keyIndex ++, range.radius[2], (val, status) => { range.radius[2] = (val as any) / 1; status.changeRangeAttrib(range.id, "radius", range.radius); }, .1, undefined, 0)}