Add label list component

source/Component/ColorInput/ColorInput.scss

@@ -37,6 +37,7 @@ div.color-input-root {
             div.color-box {
                 width: 12px;
                 height: 12px;
+                border-radius: 3px;
             }
         }
 

source/Component/CommandBar/CommandBar.tsx

@@ -58,7 +58,13 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
                     }
                 })}
                 {this.getRenderButton({ iconName: "StepSharedAdd", i18NKey: "Command.Bar.Add.Behavior.Info" })}
-                {this.getRenderButton({ iconName: "Tag", i18NKey: "Command.Bar.Add.Tag.Info" })}
+                {this.getRenderButton({
+                    iconName: "Tag",
+                    i18NKey: "Command.Bar.Add.Tag.Info",
+                    click: () => {
+                        this.props.status ? this.props.status.newLabel() : undefined;
+                    }
+                })}
                 {this.getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
             </div>
             <div>

source/Component/LabelList/LabelList.scss

@@ -0,0 +1,64 @@
+@import "../Theme/Theme.scss";
+
+div.label {
+    width: auto;
+    height: auto;
+    display: inline-flex;
+    margin: 5px 5px;
+    justify-content: center;
+    vertical-align: middle;
+    align-items: stretch;
+    border-radius: 3px;
+    border: .5px solid transparent;
+    overflow: hidden;
+    user-select: none;
+    cursor: pointer;
+
+    div.label-color {
+        width: 3px;
+        margin-right: 2px;
+        border-radius: 3px;
+        flex-shrink: 0;
+    }
+
+    div.label-name {
+        padding: 2px 3px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    div.delete-button {
+        padding: 2px 3px;
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+    }
+}
+
+div.dark.label {
+    background-color: $lt-bg-color-lvl3-dark;
+
+    div.label-color {
+        color: $lt-bg-color-lvl3-dark;
+    }
+
+    div.delete-button:hover {
+        color: $lt-font-color-lvl2-dark;
+        background-color: $lt-bg-color-lvl2-dark;
+    }
+}
+
+div.light.label {
+    background-color: $lt-bg-color-lvl3-light;
+
+    div.label-color {
+        color: $lt-bg-color-lvl3-light;
+    }
+
+    div.delete-button:hover {
+        color: $lt-font-color-lvl2-light;
+        background-color: $lt-bg-color-lvl2-light;
+    }
+}

source/Component/LabelList/LabelList.tsx

@@ -0,0 +1,56 @@
+import { Component } from "react";
+import { Label } from "@Model/Label";
+import { Icon } from "@fluentui/react";
+import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
+import "./LabelList.scss";
+
+interface ILabelListProps {
+    labels: Label[];
+    canDelete?: boolean;
+}
+
+interface ILabelListState {
+    focusLabel?: Label;
+}
+
+@useSetting
+class LabelList extends Component<ILabelListProps & IMixinSettingProps, ILabelListState> {
+    
+    public state: Readonly<ILabelListState> = {
+        focusLabel: undefined
+    };
+
+    private renderLabel(label: Label) {
+
+        const theme = this.props.setting?.themes ?? Themes.dark;
+        const themeClassName = theme === Themes.dark ? "dark" : "light";
+        const colorCss = `rgb(${label.color.join(",")})`;
+
+        return <div className={`label ${themeClassName}`} key={label.id}>
+            <div className="label-color" style={{
+                backgroundColor: colorCss
+            }}/>
+            <div className="label-name">
+                {label.name}
+            </div>
+            {
+                this.props.canDelete ? 
+                <div className="delete-button">
+                    <Icon iconName="delete"></Icon>
+                </div> : null
+            }
+        </div>
+    }
+    
+    public render() {
+        return <>
+            {
+                this.props.labels.map((label) => {
+                    return this.renderLabel(label);
+                })
+            }
+        </>
+    }
+}
+
+export { LabelList };