Add label list component

2022-03-09 17:23:57 +08:00
parent c86a856a32
commit 54a03181f1
13 changed files with 182 additions and 34 deletions
@@ -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;
+    }
+}
@@ -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 };