Optim behavior list style

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,36 +120,14 @@ 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;
         }
     }
 
@@ -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;
+        }
 	}
 }

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<IBehaviorListProps & IMixinSettingProps> {
+class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps & IMixinStatusProps> {
 
 	private isFocus(behavior: IRenderBehavior): boolean {
 		if (this.props.focusBehaviors) {
@@ -28,32 +31,55 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
 		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 <Message
+                                text={behavior.getTerms(behavior.describe, this.props.setting?.language)}
+                            />
+                        },
+                        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 <div
 			className={classList.join(" ")}
-			onClick={() => {
+			onClick={action}
-				this.isActionClick = true;
-				if (this.props.action) {
-					this.props.action(behavior)
-				}
-			}}
 		>
 			<Icon iconName={iconName}/>
 		</div>
@@ -116,6 +142,14 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
                 <div style={{ borderLeft: `12px solid ${color}` }}/>
             </div>
             <div className="behavior-item-root">
+                <div className="behavior-popup-menu">
+                    <div className="behavior-popup-layout">
+                        <div className="behavior-popup-action-view">
+                            {this.props.delete ? this.renderActionButton(behavior, "delete") : null}
+                            {this.renderActionButton(behavior, "info")}
+                        </div>
+                    </div>
+                </div>
                 <div className="behavior-icon-view">
                     <Icon iconName={icon}/>
                 </div>
@@ -123,9 +157,6 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
                     {this.renderTerm(behavior, name, "title-view", needLocal)}
                     {this.renderTerm(behavior, info, "info-view", true)}
                 </div>
-                {/* <div className="behavior-action-view">
-                    {this.renderActionButton(behavior)}
-                </div> */}
             </div>
 		</div>
 	}

source/Component/BehaviorPopup/BehaviorPopup.tsx

@@ -64,24 +64,6 @@ class BehaviorPopupComponent extends Component<
 		</div>;
 	}
 
-	private showBehaviorInfo = (behavior: IRenderBehavior) => {
-		if (this.props.status) {
-			const status = this.props.status;
-			status.popup.showPopup(ConfirmPopup, {
-                renderInfo: () => {
-                    return <Message
-                        text={behavior.getTerms(behavior.describe, this.props.setting?.language)}
-                    />
-                },
-				titleI18N: "Popup.Behavior.Info.Title",
-				titleI18NOption: {
-					behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language)
-				},
-				yesI18n: "Popup.Behavior.Info.Confirm",
-			})
-		}
-	}
-
 	private renderActionBar = () => {
 		return <Localization
 			className="behavior-popup-select-counter"
@@ -114,7 +96,6 @@ class BehaviorPopupComponent extends Component<
 			<BehaviorList
 				focusBehaviors={Array.from(this.state.focusBehavior)}
 				behaviors={filterItem}
-				action={this.showBehaviorInfo}
 				click={(behavior) => {
 					if (this.state.focusBehavior.has(behavior)) {
 						this.state.focusBehavior.delete(behavior);

source/Panel/BehaviorList/BehaviorList.tsx

@@ -36,7 +36,6 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinStatusProps & IM
                 <Message i18nKey="Panel.Info.Label.List.Error.Nodata"/> : null
             }
             <BehaviorListComponent
-                actionType="delete"
                 behaviors={behaviors}
                 focusBehaviors={
                     this.props.status?.focusBehavior ? 
@@ -54,7 +53,7 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinStatusProps & IM
                 onAdd={() => {
                     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, {