Optim behavior list style
This commit is contained in:
parent
b2ee80fe9b
commit
a40bbd7cf6
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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={() => {
|
||||
this.isActionClick = true;
|
||||
if (this.props.action) {
|
||||
this.props.action(behavior)
|
||||
}
|
||||
}}
|
||||
onClick={action}
|
||||
>
|
||||
<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>
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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, {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user