Add label details panel

source/Component/LabelList/LabelList.scss

@@ -38,6 +38,7 @@ div.label {
 }
 
 div.dark.label {
+    transition: none;
     background-color: $lt-bg-color-lvl3-dark;
 
     div.label-color {
@@ -45,12 +46,12 @@ div.dark.label {
     }
 
     div.delete-button:hover {
-        color: $lt-font-color-lvl2-dark;
-        background-color: $lt-bg-color-lvl2-dark;
+        color: $lt-red;
     }
 }
 
 div.light.label {
+    transition: none;
     background-color: $lt-bg-color-lvl3-light;
 
     div.label-color {
@@ -58,7 +59,18 @@ div.light.label {
     }
 
     div.delete-button:hover {
-        color: $lt-font-color-lvl2-light;
-        background-color: $lt-bg-color-lvl2-light;
+        color: $lt-red;
     }
+}
+
+div.dark.label:hover,
+div.dark.label.focus {
+    color: $lt-font-color-lvl2-dark;
+    background-color: $lt-bg-color-lvl2-dark;
+}
+
+div.light.label:hover,
+div.light.label.focus {
+    color: $lt-font-color-lvl2-light;
+    background-color: $lt-bg-color-lvl2-light;
 }

source/Component/LabelList/LabelList.tsx

@@ -2,54 +2,82 @@ import { Component } from "react";
 import { Label } from "@Model/Label";
 import { Icon } from "@fluentui/react";
 import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import "./LabelList.scss";
 
 interface ILabelListProps {
     labels: Label[];
     canDelete?: boolean;
-}
-
-interface ILabelListState {
     focusLabel?: Label;
+    clickLabel?: (label: Label) => any;
+    deleteLabel?: (label: Label) => any;
 }
 
 @useSetting
-class LabelList extends Component<ILabelListProps & IMixinSettingProps, ILabelListState> {
-    
-    public state: Readonly<ILabelListState> = {
-        focusLabel: undefined
-    };
+class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
+
+    private isDeleteClick: boolean = false;
 
     private renderLabel(label: Label) {
 
         const theme = this.props.setting?.themes ?? Themes.dark;
-        const themeClassName = theme === Themes.dark ? "dark" : "light";
+        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");
+        }
         const colorCss = `rgb(${label.color.join(",")})`;
 
-        return <div className={`label ${themeClassName}`} key={label.id}>
+        return <div
+            className={classList.join(" ")}
+            key={label.id}
+            onClick={() => {
+                if (this.props.clickLabel && !this.isDeleteClick) {
+                    this.props.clickLabel(label);
+                }
+                this.isDeleteClick = false;
+            }}
+            style={{
+                borderColor: isFocus ? colorCss : undefined
+            }}
+        >
             <div className="label-color" style={{
-                backgroundColor: colorCss
+                backgroundColor: colorCss,
+                borderRadius: isFocus ? 0 : 3
             }}/>
             <div className="label-name">
                 {label.name}
             </div>
             {
                 this.props.canDelete ? 
-                <div className="delete-button">
+                <div
+                    className="delete-button"
+                    onClick={() => {
+                        this.isDeleteClick = true;
+                        if (this.props.deleteLabel) {
+                            this.props.deleteLabel(label);
+                        }
+                    }}
+                >
                     <Icon iconName="delete"></Icon>
                 </div> : null
             }
         </div>
     }
+
+    private renderAllLabels(labels: Label[]) {
+        return this.props.labels.map((label) => {
+            return this.renderLabel(label);
+        });
+    }
     
     public render() {
-        return <>
-            {
-                this.props.labels.map((label) => {
-                    return this.renderLabel(label);
-                })
-            }
-        </>
+        if (this.props.labels.length > 0) {
+            return this.renderAllLabels(this.props.labels);
+        } else {
+            return <ErrorMessage i18nKey="Panel.Info.Label.List.Error.Nodata"/>
+        }
     }
 }