diff --git a/source/Component/DetailsList/DetailsList.tsx b/source/Component/DetailsList/DetailsList.tsx index f565fe6..a40eb0d 100644 --- a/source/Component/DetailsList/DetailsList.tsx +++ b/source/Component/DetailsList/DetailsList.tsx @@ -8,6 +8,7 @@ type IItems = Record & {key: string, select?: boolean}; interface IColumns { key: K; className?: string; + noDefaultStyle?: boolean; beforeCheckbox?: boolean; render: (data: D[K]) => ReactNode, click?: (data: D[K]) => any, @@ -23,8 +24,15 @@ interface IDetailsListProps { class DetailsList extends Component { private renderValue(item: IItems, column: IColumns) { + const classList: string[] = []; + if (!column.noDefaultStyle) { + classList.push("details-list-value"); + } + if (column.className) { + classList.push(column.className); + } return
{column.render(item[column.key as any])} diff --git a/source/Context/Status.tsx b/source/Context/Status.tsx index 0e51c25..0920a22 100644 --- a/source/Context/Status.tsx +++ b/source/Context/Status.tsx @@ -8,7 +8,11 @@ import { Setting } from "./Setting"; import { I18N } from "@Component/Localization/Localization"; function randomColor() { - return [Math.random(), Math.random(), Math.random(), 1] + return [ + Math.random() * .8 + .2, + Math.random() * .8 + .2, + Math.random() * .8 + .2, 1 + ] } class Status extends Emitter<{ diff --git a/source/Panel/ObjectList/ObjectList.scss b/source/Panel/ObjectList/ObjectList.scss index e69de29..9879ba3 100644 --- a/source/Panel/ObjectList/ObjectList.scss +++ b/source/Panel/ObjectList/ObjectList.scss @@ -0,0 +1,7 @@ +div.object-list-color-value { + height: calc( 100% - 6px); + margin: 3px 0; + margin-left: 3px; + border-radius: 1000px; + width: 3px; +} \ No newline at end of file diff --git a/source/Panel/ObjectList/ObjectList.tsx b/source/Panel/ObjectList/ObjectList.tsx index 761950d..aa0bd8b 100644 --- a/source/Panel/ObjectList/ObjectList.tsx +++ b/source/Panel/ObjectList/ObjectList.tsx @@ -2,6 +2,7 @@ import { Component, ReactNode } from "react"; import { DetailsList } from "@Component/DetailsList/DetailsList"; import { useStatus, IMixinStatusProps } from "@Context/Status"; import { Localization } from "@Component/Localization/Localization"; +import "./ObjectList.scss"; @useStatus class ObjectList extends Component { @@ -44,14 +45,24 @@ class ObjectList extends Component { }))} columns={[ { + key: "color", + noDefaultStyle: true, + beforeCheckbox: true, + render: (color) =>
+ }, { key: "name", render: (name) => {name} - // }, { - // key: "behaviors", - // render: (behaviors) => {(behaviors as Record<"name", string>[]).map(r => r.name).join(", ")} - // }, { - // key: "label", - // render: (label) => {(label as Record<"name", string>[]).map(r => r.name).join(", ")} } ]} />