From 7e9a652249d2dd98d2dada7d060dffe1f0a4680f Mon Sep 17 00:00:00 2001 From: MrKBear Date: Fri, 11 Mar 2022 17:00:05 +0800 Subject: [PATCH] Add label list edit panel --- source/Component/AttrInput/AttrInput.tsx | 6 +++ source/Component/LabelList/LabelList.scss | 16 ++++++-- source/Component/LabelList/LabelList.tsx | 3 -- .../Component/TogglesInput/TogglesInput.tsx | 18 +++++++-- source/Context/Status.tsx | 19 ++++++++++ source/Localization/EN-US.ts | 2 + source/Localization/ZH-CN.ts | 2 + source/Panel/LabelDetails/LabelDetails.tsx | 37 ++++++++----------- source/Panel/LabelList/LabelList.tsx | 2 +- 9 files changed, 72 insertions(+), 33 deletions(-) diff --git a/source/Component/AttrInput/AttrInput.tsx b/source/Component/AttrInput/AttrInput.tsx index 03bbc77..148d3fe 100644 --- a/source/Component/AttrInput/AttrInput.tsx +++ b/source/Component/AttrInput/AttrInput.tsx @@ -12,6 +12,7 @@ interface IAttrInputProps { value?: number | string; isNumber?: boolean; maxLength?: number; + minLength?: number; max?: number; min?: number; step?: number; @@ -40,6 +41,11 @@ class AttrInput extends Component { return } + const minLength = this.props.minLength ?? 1; + if (value.length < minLength) { + return + } + if (this.props.isNumber) { const praseNumber = (value as any) / 1; diff --git a/source/Component/LabelList/LabelList.scss b/source/Component/LabelList/LabelList.scss index fb58a26..a7adf0c 100644 --- a/source/Component/LabelList/LabelList.scss +++ b/source/Component/LabelList/LabelList.scss @@ -63,14 +63,22 @@ div.light.label { } } -div.dark.label:hover, -div.dark.label.focus { +div.dark.label:hover { color: $lt-font-color-lvl2-dark; background-color: $lt-bg-color-lvl2-dark; } -div.light.label:hover, -div.light.label.focus { +div.dark.label.focus { + color: $lt-font-color-lvl1-dark; + background-color: $lt-bg-color-lvl1-dark; +} + +div.light.label:hover { color: $lt-font-color-lvl2-light; background-color: $lt-bg-color-lvl2-light; +} + +div.light.label.focus { + color: $lt-font-color-lvl1-light; + background-color: $lt-bg-color-lvl1-light; } \ No newline at end of file diff --git a/source/Component/LabelList/LabelList.tsx b/source/Component/LabelList/LabelList.tsx index 59eba50..a37f410 100644 --- a/source/Component/LabelList/LabelList.tsx +++ b/source/Component/LabelList/LabelList.tsx @@ -38,9 +38,6 @@ class LabelList extends Component { } this.isDeleteClick = false; }} - style={{ - borderColor: isFocus ? colorCss : undefined - }} >
any; + onIconName?: string; + offIconName?: string; + valueChange?: (value: boolean) => any; } class TogglesInput extends Component { @@ -33,9 +35,17 @@ class TogglesInput extends Component { } })} > - +
diff --git a/source/Context/Status.tsx b/source/Context/Status.tsx index 957e196..27bea80 100644 --- a/source/Context/Status.tsx +++ b/source/Context/Status.tsx @@ -32,6 +32,7 @@ interface IStatusEvent { objectChange: void; labelChange: void; rangeAttrChange: void; + labelAttrChange: void; } class Status extends Emitter { @@ -120,6 +121,24 @@ class Status extends Emitter { } } + /** + * 修改范围属性 + */ + public changeLabelAttrib + (label: Label, key: K, val: Label[K]) { + let findLabel: Label | undefined; + for (let i = 0; i < this.model.labelPool.length; i++) { + if (this.model.labelPool[i].equal(label)) { + findLabel = this.model.labelPool[i]; + break; + } + } + if (findLabel) { + findLabel[key] = val; + this.emit("labelAttrChange"); + } + } + /** * 鼠标工具状态 */ diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 9253e47..6f7d75f 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -23,6 +23,7 @@ const EN_US = { "Input.Error.Max": "Enter value must be less than {num}", "Input.Error.Min": "Enter value must be greater than {num}", "Input.Error.Length": "The length of the input content must be less than {num}", + "Input.Error.Length.Less": "The length of the input content must be greater than {num}", "Object.List.New.Group": "Group object {id}", "Object.List.New.Range": "Range object {id}", "Object.List.New.Label": "Label {id}", @@ -49,6 +50,7 @@ const EN_US = { "Common.Attr.Key.Color": "Color", "Common.Attr.Key.Display": "Display", "Common.Attr.Key.Update": "Update", + "Common.Attr.Key.Delete": "Delete", "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 7986b9e..b6731a9 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -23,6 +23,7 @@ const ZH_CN = { "Input.Error.Max": "输入数值须小于 {number}", "Input.Error.Min": "输入数值须大于 {number}", "Input.Error.Length": "输入内容长度须小于 {number}", + "Input.Error.Length.Less": "输入内容长度须大于 {number}", "Object.List.New.Group": "组对象 {id}", "Object.List.New.Range": "范围对象 {id}", "Object.List.New.Label": "标签 {id}", @@ -49,6 +50,7 @@ const ZH_CN = { "Common.Attr.Key.Color": "颜色", "Common.Attr.Key.Display": "显示", "Common.Attr.Key.Update": "更新", + "Common.Attr.Key.Delete": "删除", "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/LabelDetails/LabelDetails.tsx b/source/Panel/LabelDetails/LabelDetails.tsx index 118a2df..fbda488 100644 --- a/source/Panel/LabelDetails/LabelDetails.tsx +++ b/source/Panel/LabelDetails/LabelDetails.tsx @@ -4,37 +4,32 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; import { AllI18nKeys } from "@Component/Localization/Localization"; import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage"; import { ColorInput } from "@Component/ColorInput/ColorInput"; -import "./LabelDetails.scss"; -import { LabelList } from "@Component/LabelList/LabelList"; import { Label } from "@Model/Label"; +import { TogglesInput } from "@Component/TogglesInput/TogglesInput"; +import "./LabelDetails.scss"; -@useStatusWithEvent("focusLabelChange") +@useStatusWithEvent("focusLabelChange", "labelAttrChange", "labelChange") class LabelDetails extends Component { - - public readonly AttrI18nKey: AllI18nKeys[] = [ - "Common.Attr.Key.Display.Name", - "Common.Attr.Key.Color", - ] private renderFrom(label: Label) { return <> - - { - if (this.props.status) { - this.props.status.model.deleteLabel(label); - this.props.status.setLabelObject(); - } - }} - /> - + { + if (this.props.status) { + this.props.status.changeLabelAttrib(label, "name", value); + } + }}/> { if (this.props.status) { - + this.props.status.changeLabelAttrib(label, "color", color); + } + }}/> + + { + if (this.props.status) { + this.props.status.model.deleteLabel(label); + this.props.status.setLabelObject(); } }}/> diff --git a/source/Panel/LabelList/LabelList.tsx b/source/Panel/LabelList/LabelList.tsx index bb41ae5..b6dd9a1 100644 --- a/source/Panel/LabelList/LabelList.tsx +++ b/source/Panel/LabelList/LabelList.tsx @@ -10,7 +10,7 @@ interface ILabelListProps { } @useSetting -@useStatusWithEvent("labelChange", "focusLabelChange") +@useStatusWithEvent("labelChange", "focusLabelChange", "labelAttrChange") class LabelList extends Component { private labelInnerClick: boolean = false;