Add add button on label list

source/Component/LabelList/LabelList.scss

@@ -3,6 +3,8 @@
 div.label {
     width: auto;
     height: auto;
+    min-height: 24px;
+    box-sizing: border-box;
     display: inline-flex;
     margin: 5px 5px;
     justify-content: center;
@@ -23,11 +25,14 @@ div.label {
 
     div.label-name {
         padding: 2px 3px;
+        display: flex;
+        align-items: center;
         text-overflow: ellipsis;
         overflow: hidden;
     }
 
     div.delete-button {
+        flex-shrink: 0;
         padding: 2px 3px;
         border-radius: 3px;
         display: flex;
@@ -37,6 +42,28 @@ div.label {
     }
 }
 
+div.label.one-line div.label-name {
+    max-width: 100%;
+    word-break: keep-all;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+div.label.add-button {
+    width: 24px;
+    align-items: center;
+    justify-content: center;
+}
+
+div.dark.label.add-button {
+    border: .5px dashed $lt-bg-color-lvl3-dark;
+}
+
+div.light.label.add-button {
+    border: .5px dashed $lt-bg-color-lvl3-light;
+}
+
 div.dark.label {
     transition: none;
     background-color: $lt-bg-color-lvl3-dark;

source/Component/LabelList/LabelList.tsx

@@ -6,11 +6,14 @@ import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import "./LabelList.scss";
 
 interface ILabelListProps {
+    minHeight?: number;
+    maxWidth?: number;
+    width?: number;
     labels: Label[];
-    canDelete?: boolean;
     focusLabel?: Label;
     clickLabel?: (label: Label) => any;
     deleteLabel?: (label: Label) => any;
+    addLabel?: () => any;
 }
 
 @useSetting
@@ -21,15 +24,22 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
     private renderLabel(label: Label) {
 
         const theme = this.props.setting?.themes ?? Themes.dark;
-        const classList:string[] = ["label"];
+        const classList: string[] = ["label"];
         classList.push( theme === Themes.dark ? "dark" : "light" );
         const isFocus = this.props.focusLabel && this.props.focusLabel.equal(label);
         if (isFocus) {
             classList.push("focus");
         }
+        if (this.props.maxWidth) {
+            classList.push("one-line");
+        }
         const colorCss = `rgb(${label.color.join(",")})`;
 
         return <div
+            style={{
+                minHeight: this.props.minHeight,
+                maxWidth: this.props.maxWidth
+            }}
             className={classList.join(" ")}
             key={label.id}
             onClick={() => {
@@ -44,10 +54,10 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
                 borderRadius: isFocus ? 0 : 3
             }}/>
             <div className="label-name">
-                {label.name}
+                <div>{label.name}</div>
             </div>
             {
-                this.props.canDelete ? 
+                this.props.deleteLabel ?
                 <div
                     className="delete-button"
                     onClick={() => {
@@ -63,17 +73,43 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
         </div>
     }
 
-    private renderAllLabels(labels: Label[]) {
+    private renderAllLabels() {
         return this.props.labels.map((label) => {
             return this.renderLabel(label);
         });
     }
+
+    private renderAddButton(isNoMargin: boolean = false) {
+        const theme = this.props.setting?.themes ?? Themes.dark;
+        const classList: string[] = ["label", "add-button"];
+        classList.push( theme === Themes.dark ? "dark" : "light" );
+
+        return <div
+            className={classList.join(" ")}
+            style={{
+                minHeight: this.props.minHeight,
+                minWidth: this.props.minHeight,
+                marginLeft: isNoMargin ? "0" : undefined
+            }}
+            onClick={() => {
+                this.props.addLabel ? this.props.addLabel() : null
+            }}
+        >
+            <Icon iconName="add"></Icon>
+        </div>;
+    }
     
     public render() {
         if (this.props.labels.length > 0) {
-            return this.renderAllLabels(this.props.labels);
+            return <>
+                {this.renderAllLabels()}
+                {this.props.addLabel ? this.renderAddButton() : null}
+            </>;
         } else {
-            return <ErrorMessage i18nKey="Panel.Info.Label.List.Error.Nodata"/>
+            return <>
+                <ErrorMessage i18nKey="Panel.Info.Label.List.Error.Nodata"/>
+                {this.props.addLabel ? this.renderAddButton(true) : null}
+            </>;
         }
     }
 }

source/Panel/LabelList/LabelList.scss

@@ -2,7 +2,7 @@
 
 div.label-list-panel-root {
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     padding: 10px;
     box-sizing: border-box;
 }

source/Panel/LabelList/LabelList.tsx

@@ -30,7 +30,6 @@ class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSe
             }}
         >
             <LabelListComponent
-                canDelete
                 labels={labels}
                 focusLabel={this.props.status ? this.props.status.focusLabel : undefined}
                 clickLabel={(label) => {
@@ -49,6 +48,10 @@ class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSe
                     }
                     this.labelInnerClick = true;
                 }}
+                minHeight={26}
+                addLabel={() => {
+                    this.props.status ? this.props.status.newLabel() : undefined;
+                }}
             />
         </div>;
     }