MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add label list edit panel

Browse Source
This commit is contained in:
MrKBear 2022-03-11 17:00:05 +08:00
parent 1b401dda57
commit 7e9a652249
9 changed files with 72 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
source/Component/AttrInput/AttrInput.tsx
View File

@ -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<IAttrInputProps> {
return <Localization i18nKey="Input.Error.Length" options={{ num: maxLength.toString() }} />
}
const minLength = this.props.minLength ?? 1;
if (value.length < minLength) {
return <Localization i18nKey="Input.Error.Length.Less" options={{ num: minLength.toString() }} />
}
if (this.props.isNumber) {
const praseNumber = (value as any) / 1;

16
source/Component/LabelList/LabelList.scss
View File

@ -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;
}

3
source/Component/LabelList/LabelList.tsx
View File

@ -38,9 +38,6 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
}
this.isDeleteClick = false;
}}
style={{
borderColor: isFocus ? colorCss : undefined
}}
>
<div className="label-color" style={{
backgroundColor: colorCss,

18
source/Component/TogglesInput/TogglesInput.tsx
View File

@ -9,7 +9,9 @@ interface ITogglesInputProps {
infoI18n?: AllI18nKeys;
value?: boolean;
disable?: boolean;
valueChange?: (color: boolean) => any;
onIconName?: string;
offIconName?: string;
valueChange?: (value: boolean) => any;
}
class TogglesInput extends Component<ITogglesInputProps> {
@ -33,9 +35,17 @@ class TogglesInput extends Component<ITogglesInputProps> {
}
})}
>
<Icon iconName="CheckMark" style={{
display: this.props.value ? "inline-block" : "none"
}}></Icon>
<Icon
iconName={
this.props.value ?
this.props.onIconName ?? "CheckMark" :
this.props.offIconName ?? undefined
}
style={{
display: this.props.value ? "inline-block" :
this.props.offIconName ? "inline-block" : "none"
}}
></Icon>
</div>
</div>
</Theme>

19
source/Context/Status.tsx
View File

@ -32,6 +32,7 @@ interface IStatusEvent {
objectChange: void;
labelChange: void;
rangeAttrChange: void;
labelAttrChange: void;
}
class Status extends Emitter<IStatusEvent> {
@ -120,6 +121,24 @@ class Status extends Emitter<IStatusEvent> {
}
}
/**
* 修改范围属性
*/
public changeLabelAttrib<K extends keyof Label>
(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");
}
}
/**
* 鼠标工具状态
*/

2
source/Localization/EN-US.ts
View File

@ -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",

2
source/Localization/ZH-CN.ts
View File

@ -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": "未指定范围对象",

37
source/Panel/LabelDetails/LabelDetails.tsx
View File

@ -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<IMixinStatusProps> {
public readonly AttrI18nKey: AllI18nKeys[] = [
"Common.Attr.Key.Display.Name",
"Common.Attr.Key.Color",
]
private renderFrom(label: Label) {
return <>
<LabelList
labels={[label]}
canDelete
deleteLabel={() => {
if (this.props.status) {
this.props.status.model.deleteLabel(label);
this.props.status.setLabelObject();
}
}}
/>
<AttrInput keyI18n="Common.Attr.Key.Display.Name" maxLength={15} value={label.name}/>
<AttrInput keyI18n="Common.Attr.Key.Display.Name" maxLength={15} value={label.name} valueChange={(value) => {
if (this.props.status) {
this.props.status.changeLabelAttrib(label, "name", value);
}
}}/>
<ColorInput keyI18n="Common.Attr.Key.Color" value={label.color} valueChange={(color) => {
if (this.props.status) {
this.props.status.changeLabelAttrib(label, "color", color);
}
}}/>
<TogglesInput keyI18n="Common.Attr.Key.Delete" onIconName="delete" offIconName="delete" valueChange={() => {
if (this.props.status) {
this.props.status.model.deleteLabel(label);
this.props.status.setLabelObject();
}
}}/>

2
source/Panel/LabelList/LabelList.tsx
View File

@ -10,7 +10,7 @@ interface ILabelListProps {
}
@useSetting
@useStatusWithEvent("labelChange", "focusLabelChange")
@useStatusWithEvent("labelChange", "focusLabelChange", "labelAttrChange")
class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSettingProps> {
private labelInnerClick: boolean = false;