Add behavior list component style
This commit is contained in:
parent
cc07f6a03c
commit
cfbb52afa5
@ -73,7 +73,7 @@ div.behavior-list {
|
||||
}
|
||||
|
||||
div.behavior-action-button.hover-blue:hover i {
|
||||
color: $lt-blue;
|
||||
color: $lt-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
div.behavior-picker-list {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 8px 0;
|
||||
|
||||
div.behavior-picker-line {
|
||||
width: 100%;
|
||||
@ -22,5 +24,63 @@ div.behavior-picker-list {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
div.behavior-picker-line-icon-view {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
i.behavior-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
i.view-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.view-icon:hover {
|
||||
color: $lt-green;
|
||||
}
|
||||
}
|
||||
|
||||
div.behavior-picker-title {
|
||||
height: 100%;
|
||||
width: calc(100% - 60px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
div.behavior-picker-line-delete-view {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
i:hover {
|
||||
color: $lt-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.behavior-picker-line:hover {
|
||||
|
||||
div.behavior-picker-line-icon-view {
|
||||
|
||||
i.behavior-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.view-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,35 +1,63 @@
|
||||
import { DetailsList } from "@Component/DetailsList/DetailsList";
|
||||
import { Component, ReactNode } from "react";
|
||||
import { Behavior } from "@Model/Behavior";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import "./BehaviorPicker.scss";
|
||||
|
||||
interface IBehaviorPickerProps {
|
||||
behavior: Behavior[]
|
||||
behavior: Behavior[];
|
||||
delete?: (behavior: Behavior) => void;
|
||||
action?: (behavior: Behavior) => void;
|
||||
add?: () => void;
|
||||
}
|
||||
|
||||
class BehaviorPicker extends Component<IBehaviorPickerProps> {
|
||||
@useSettingWithEvent("language")
|
||||
class BehaviorPicker extends Component<IBehaviorPickerProps & IMixinSettingProps> {
|
||||
|
||||
private getData() {
|
||||
let data: Array<{key: string, behavior: Behavior}> = [];
|
||||
let data: Array<{key: string, behavior: Behavior | undefined}> = [];
|
||||
for (let i = 0; i < this.props.behavior.length; i++) {
|
||||
data.push({
|
||||
key: this.props.behavior[i].id,
|
||||
behavior: this.props.behavior[i]
|
||||
})
|
||||
}
|
||||
data.push({
|
||||
key: "@@AddButton_List_Key",
|
||||
behavior: undefined
|
||||
})
|
||||
return data;
|
||||
}
|
||||
|
||||
private renderColor(color: string): ReactNode {
|
||||
return <div className="behavior-picker-line-color-view">
|
||||
<div style={{ borderLeft: `10px solid ${color}` }}/>
|
||||
</div>
|
||||
}
|
||||
|
||||
private renderLine = (behavior: Behavior): ReactNode => {
|
||||
private renderLine = (behavior?: Behavior): ReactNode => {
|
||||
if (behavior) {
|
||||
return <>
|
||||
{this.renderColor(behavior.color)}
|
||||
<div className="behavior-picker-line-color-view">
|
||||
<div style={{ borderLeft: `10px solid ${behavior.color}` }}/>
|
||||
</div>
|
||||
<div className="behavior-picker-line-icon-view">
|
||||
<Icon iconName={behavior.iconName} className="behavior-icon"/>
|
||||
<Icon iconName="EditCreate" className="view-icon"/>
|
||||
</div>
|
||||
<div className={`behavior-picker-title ${this.props.setting?.language}`}>
|
||||
<div>{behavior.name}</div>
|
||||
</div>
|
||||
<div className="behavior-picker-line-delete-view">
|
||||
<Icon iconName="Delete"/>
|
||||
</div>
|
||||
</>;
|
||||
} else {
|
||||
return <>
|
||||
<div className="behavior-picker-line-icon-view">
|
||||
<Icon iconName="Add" className="add-icon"/>
|
||||
</div>
|
||||
<div className={`behavior-picker-title`}>
|
||||
<Localization i18nKey="Behavior.Picker.Add.Button"/>
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
span.ZH_CN {
|
||||
span.ZH_CN, div.span.ZH_CN {
|
||||
font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', Tahoma, Arial, sans-serif;
|
||||
}
|
||||
|
||||
span.EN_US {
|
||||
span.EN_US, div.span.EN_US {
|
||||
font-family: 'Segoe UI Web Regular', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
@import "@fluentui/react/dist/sass/References";
|
||||
|
||||
$lt-green: rgb(50, 237, 69);
|
||||
$lt-blue: rgb(81, 79, 235);
|
||||
$lt-red: rgb(240, 94, 94);
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ const EN_US = {
|
||||
"Object.List.New.Label": "Label {id}",
|
||||
"Object.List.No.Data": "There are no objects in the model, click the button to create it",
|
||||
"Object.Picker.List.No.Data": "There is no model in the model for this option",
|
||||
"Behavior.Picker.Add.Button": "Click here to assign behavior to this group",
|
||||
"Panel.Title.Notfound": "{id}",
|
||||
"Panel.Info.Notfound": "This panel with id {id} can not found!",
|
||||
"Panel.Title.Render.View": "Live preview",
|
||||
|
||||
@ -30,6 +30,7 @@ const ZH_CN = {
|
||||
"Object.List.New.Label": "标签 {id}",
|
||||
"Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
|
||||
"Object.Picker.List.No.Data": "模型中没有合适此选项的模型",
|
||||
"Behavior.Picker.Add.Button": "点击此处以赋予行为到此群",
|
||||
"Panel.Title.Notfound": "{id}",
|
||||
"Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
|
||||
"Panel.Title.Render.View": "实时预览",
|
||||
|
||||
@ -91,6 +91,7 @@ class SimulatorWeb extends Component {
|
||||
}, {
|
||||
panels: ["GroupDetails", "RangeDetails", "LabelDetails"]
|
||||
}],
|
||||
scale: 30,
|
||||
layout: LayoutDirection.Y
|
||||
}
|
||||
],
|
||||
|
||||
@ -20,6 +20,10 @@ div.object-list {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
i.checkbox-icon:hover {
|
||||
color: $lt-green;
|
||||
}
|
||||
|
||||
i.type-icon {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user