Add label list edit panel

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<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();
                 }
             }}/>
 

source/Panel/LabelList/LabelList.tsx

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