From a40bbd7cf694a8da19b56e3712d3be8dcdfa40e9 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Fri, 1 Apr 2022 15:22:17 +0800 Subject: [PATCH] Optim behavior list style --- .../Component/BehaviorList/BehaviorList.scss | 111 ++++++++++++------ .../Component/BehaviorList/BehaviorList.tsx | 59 +++++++--- .../Component/BehaviorPopup/BehaviorPopup.tsx | 19 --- source/Panel/BehaviorList/BehaviorList.tsx | 3 +- 4 files changed, 122 insertions(+), 70 deletions(-) diff --git a/source/Component/BehaviorList/BehaviorList.scss b/source/Component/BehaviorList/BehaviorList.scss index 364421b..e30b254 100644 --- a/source/Component/BehaviorList/BehaviorList.scss +++ b/source/Component/BehaviorList/BehaviorList.scss @@ -20,20 +20,67 @@ div.behavior-list { width: 100%; div { - // position: relative; - // top: 5px; - // left: 5px; width: 0; height: 0; - // border-left: 8px solid red; border-bottom: 12px solid transparent; - // border-radius: 8px; + position: relative; + z-index: 2; } } div.behavior-item-root { display: flex; + div.behavior-popup-menu { + width: 0; + max-width: 0; + height: $behavior-item-height; + min-height: $behavior-item-height; + position: relative; + z-index: 1; + + div.behavior-popup-layout { + transition: opacity 150ms cubic-bezier(0, 0, 1, 1), + width 220ms cubic-bezier(.1, .9, .2, 1); + width: 0; + opacity: 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + div.behavior-popup-action-view { + height: 15px; + min-height: 26px; + max-height: 26px; + width: 100%; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + + div.behavior-action-button { + height: 100%; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + align-items: center; + padding: 0 2px; + } + + div.behavior-action-button.hover-red:hover i { + color: $lt-red; + } + + div.behavior-action-button.hover-blue:hover i { + color: $lt-blue; + } + } + } + } + div.behavior-icon-view { height: $behavior-item-height; min-width: $behavior-item-height; @@ -73,38 +120,16 @@ div.behavior-list { opacity: .75; } } - - div.behavior-action-view { - height: $behavior-item-height; - min-width: 20px; - width: 20px; - flex-shrink: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-content: center; - align-items: center; - - div.behavior-action-button { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - user-select: none; - cursor: pointer; - } - - div.behavior-action-button.hover-red:hover i { - color: $lt-red; - } - - div.behavior-action-button.hover-blue:hover i { - color: $lt-blue; - } - } } } + + div.behavior-item:hover { + + div.behavior-popup-menu div.behavior-popup-layout { + width: $behavior-item-height !important; + opacity: 1 !important; + } + } div.add-button { width: 26px; @@ -124,11 +149,19 @@ div.dark.behavior-list { div.behavior-item:hover { color: $lt-font-color-lvl2-dark; background-color: $lt-bg-color-lvl2-dark; + + div.behavior-popup-menu div.behavior-popup-layout { + background-color: $lt-bg-color-lvl2-dark; + } } div.behavior-item.focus { color: $lt-font-color-lvl1-dark; background-color: $lt-bg-color-lvl1-dark; + + div.behavior-popup-menu div.behavior-popup-layout { + background-color: $lt-bg-color-lvl1-dark; + } } } @@ -141,10 +174,18 @@ div.light.behavior-list { div.behavior-item:hover { color: $lt-font-color-lvl2-light; background-color: $lt-bg-color-lvl2-light; + + div.behavior-popup-menu div.behavior-popup-layout { + background-color: $lt-bg-color-lvl2-light; + } } div.behavior-item.focus { color: $lt-font-color-lvl1-light; background-color: $lt-bg-color-lvl1-light; + + div.behavior-popup-menu div.behavior-popup-layout { + background-color: $lt-bg-color-lvl1-light; + } } } \ No newline at end of file diff --git a/source/Component/BehaviorList/BehaviorList.tsx b/source/Component/BehaviorList/BehaviorList.tsx index 46fdcdd..1e11a30 100644 --- a/source/Component/BehaviorList/BehaviorList.tsx +++ b/source/Component/BehaviorList/BehaviorList.tsx @@ -2,20 +2,23 @@ import { Theme } from "@Component/Theme/Theme"; import { Component, ReactNode } from "react"; import { IRenderBehavior, Behavior, BehaviorRecorder } from "@Model/Behavior"; import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting"; +import { useStatus, IMixinStatusProps } from "@Context/Status"; import { Icon } from "@fluentui/react"; +import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup"; +import { Message } from "@Component/Message/Message"; import "./BehaviorList.scss"; interface IBehaviorListProps { behaviors: IRenderBehavior[]; focusBehaviors?: IRenderBehavior[]; click?: (behavior: IRenderBehavior) => void; - action?: (behavior: IRenderBehavior) => void; + delete?: (behavior: IRenderBehavior) => void; onAdd?: () => void; - actionType?: "info" | "delete"; } +@useStatus @useSettingWithEvent("language") -class BehaviorList extends Component { +class BehaviorList extends Component { private isFocus(behavior: IRenderBehavior): boolean { if (this.props.focusBehaviors) { @@ -28,32 +31,55 @@ class BehaviorList extends Component { return false; } - private renderActionButton(behavior: IRenderBehavior) { + private renderActionButton(behavior: IRenderBehavior, actionType: "info" | "delete") { const classList: string[] = ["info-button", "behavior-action-button"]; let iconName = "Info"; + let action: () => void = () => {}; - switch (this.props.actionType) { + switch (actionType) { case "delete": classList.push("hover-red"); iconName = "Delete"; + action = () => { + this.isActionClick = true; + if (this.props.delete) { + this.props.delete(behavior) + } + } break; + case "info": classList.push("hover-blue"); iconName = "Info"; + action = () => { + this.isActionClick = true; + if (!this.props.status) { + return; + } + const status = this.props.status; + status.popup.showPopup(ConfirmPopup, { + renderInfo: () => { + return + }, + titleI18N: "Popup.Behavior.Info.Title", + yesI18n: "Popup.Behavior.Info.Confirm", + titleI18NOption: { + behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language) + } + }) + } break; + default: classList.push("hover-blue"); } return
{ - this.isActionClick = true; - if (this.props.action) { - this.props.action(behavior) - } - }} + onClick={action} >
@@ -116,6 +142,14 @@ class BehaviorList extends Component {
+
+
+
+ {this.props.delete ? this.renderActionButton(behavior, "delete") : null} + {this.renderActionButton(behavior, "info")} +
+
+
@@ -123,9 +157,6 @@ class BehaviorList extends Component { {this.renderTerm(behavior, name, "title-view", needLocal)} {this.renderTerm(behavior, info, "info-view", true)}
- {/*
- {this.renderActionButton(behavior)} -
*/} } diff --git a/source/Component/BehaviorPopup/BehaviorPopup.tsx b/source/Component/BehaviorPopup/BehaviorPopup.tsx index eb5691c..599aa31 100644 --- a/source/Component/BehaviorPopup/BehaviorPopup.tsx +++ b/source/Component/BehaviorPopup/BehaviorPopup.tsx @@ -64,24 +64,6 @@ class BehaviorPopupComponent extends Component< ; } - private showBehaviorInfo = (behavior: IRenderBehavior) => { - if (this.props.status) { - const status = this.props.status; - status.popup.showPopup(ConfirmPopup, { - renderInfo: () => { - return - }, - titleI18N: "Popup.Behavior.Info.Title", - titleI18NOption: { - behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language) - }, - yesI18n: "Popup.Behavior.Info.Confirm", - }) - } - } - private renderActionBar = () => { return { if (this.state.focusBehavior.has(behavior)) { this.state.focusBehavior.delete(behavior); diff --git a/source/Panel/BehaviorList/BehaviorList.tsx b/source/Panel/BehaviorList/BehaviorList.tsx index 780ffd8..cb3989b 100644 --- a/source/Panel/BehaviorList/BehaviorList.tsx +++ b/source/Panel/BehaviorList/BehaviorList.tsx @@ -36,7 +36,6 @@ class BehaviorList extends Component : null } { this.props.status?.popup.showPopup(BehaviorPopup, {}); }} - action={(behavior) => { + delete={(behavior) => { if (this.props.status && behavior instanceof Behavior) { const status = this.props.status; status.popup.showPopup(ConfirmPopup, {