diff --git a/source/Component/BehaviorList/BehaviorList.scss b/source/Component/BehaviorList/BehaviorList.scss index f6af527..0de9edc 100644 --- a/source/Component/BehaviorList/BehaviorList.scss +++ b/source/Component/BehaviorList/BehaviorList.scss @@ -73,7 +73,7 @@ div.behavior-list { } div.behavior-action-button.hover-blue:hover i { - color: $lt-blue; + color: $lt-green; } } } diff --git a/source/Component/BehaviorPicker/BehaviorPicker.scss b/source/Component/BehaviorPicker/BehaviorPicker.scss index 90ac004..7e0889a 100644 --- a/source/Component/BehaviorPicker/BehaviorPicker.scss +++ b/source/Component/BehaviorPicker/BehaviorPicker.scss @@ -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; + } + } } } \ No newline at end of file diff --git a/source/Component/BehaviorPicker/BehaviorPicker.tsx b/source/Component/BehaviorPicker/BehaviorPicker.tsx index a83bd01..92813d5 100644 --- a/source/Component/BehaviorPicker/BehaviorPicker.tsx +++ b/source/Component/BehaviorPicker/BehaviorPicker.tsx @@ -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 { +@useSettingWithEvent("language") +class BehaviorPicker extends Component { 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
-
-
- } - - private renderLine = (behavior: Behavior): ReactNode => { - return <> - {this.renderColor(behavior.color)} - ; + private renderLine = (behavior?: Behavior): ReactNode => { + if (behavior) { + return <> +
+
+
+
+ + +
+
+
{behavior.name}
+
+
+ +
+ ; + } else { + return <> +
+ +
+
+ +
+ ; + } } public render(): ReactNode { diff --git a/source/Component/Localization/Localization.scss b/source/Component/Localization/Localization.scss index f16e746..aad22d9 100644 --- a/source/Component/Localization/Localization.scss +++ b/source/Component/Localization/Localization.scss @@ -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; } \ No newline at end of file diff --git a/source/Component/Theme/Theme.scss b/source/Component/Theme/Theme.scss index 8069a6d..967ae65 100644 --- a/source/Component/Theme/Theme.scss +++ b/source/Component/Theme/Theme.scss @@ -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); diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index bc6a981..ba2cfe8 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -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", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index f8e3755..8cbe5bb 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -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": "实时预览", diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 7ad6144..462c9bd 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -91,6 +91,7 @@ class SimulatorWeb extends Component { }, { panels: ["GroupDetails", "RangeDetails", "LabelDetails"] }], + scale: 30, layout: LayoutDirection.Y } ], diff --git a/source/Panel/ObjectList/ObjectList.scss b/source/Panel/ObjectList/ObjectList.scss index e0e197a..6b4a749 100644 --- a/source/Panel/ObjectList/ObjectList.scss +++ b/source/Panel/ObjectList/ObjectList.scss @@ -20,6 +20,10 @@ div.object-list { opacity: 0; } + i.checkbox-icon:hover { + color: $lt-green; + } + i.type-icon { display: inline-block; opacity: 1;