Optim object list checkout icon

This commit is contained in:
2022-03-17 22:47:33 +08:00
parent 63f13183d0
commit 851ca149b9
4 changed files with 90 additions and 26 deletions
+39 -8
View File
@@ -1,15 +1,46 @@
@import "../../Component/Theme/Theme.scss";
div.object-list-color-value {
height: calc( 100% - 6px);
margin: 3px 0;
margin-left: 3px;
border-radius: 1000px;
width: 3px;
}
div.object-list {
min-height: 100%;
div.object-list-color-value {
height: calc( 100% - 6px);
margin: 3px 0;
margin-left: 3px;
border-radius: 1000px;
width: 3px;
}
div.object-list-checkbox {
opacity: 1 !important;
padding-left: 2px;
i.checkbox-icon {
display: none;
opacity: 0;
}
i.type-icon {
display: inline-block;
opacity: 1;
}
}
div.details-list-item:hover {
div.object-list-checkbox {
i.checkbox-icon {
display: inline-block;
opacity: 1;
}
i.type-icon {
display: none;
opacity: 0;
}
}
}
}
div.object-list-command-bar {
+17
View File
@@ -4,6 +4,7 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { useSetting, IMixinSettingProps } from "@Context/Setting";
import { Localization } from "@Component/Localization/Localization";
import { ObjectID } from "@Model/Renderer";
import { Icon } from "@fluentui/react";
import "./ObjectList.scss";
@useSetting
@@ -71,6 +72,22 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
this.props.status.setFocusObject(new Set<ObjectID>());
}
}}
renderCheckbox={(item, click) => {
let icon = "CheckMark";
if (item.key.slice(0, 1) === "R") {
icon = "CubeShape";
}
if (item.key.slice(0, 1) === "G") {
icon = "WebAppBuilderFragment";
}
return <div
className="object-list-checkbox details-list-checkbox"
onClick={click}
>
<Icon className="checkbox-icon" iconName="CheckMark"></Icon>
<Icon className="type-icon" iconName={icon}></Icon>
</div>;
}}
columns={[
{
key: "color",