From 072b3682c954a52cb5421f1bb61561ef44137a68 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Mon, 28 Mar 2022 21:13:59 +0800 Subject: [PATCH] Add behavior select conter layout --- source/Behavior/Behavior.ts | 2 +- .../Component/BehaviorList/BehaviorList.scss | 1 + .../BehaviorPopup/BehaviorPopup.scss | 4 ++ .../Component/BehaviorPopup/BehaviorPopup.tsx | 42 ++++++++++++------- .../Component/ConfirmPopup/ConfirmPopup.scss | 10 +++++ .../Component/ConfirmPopup/ConfirmPopup.tsx | 11 +++-- source/Localization/EN-US.ts | 1 + source/Localization/ZH-CN.ts | 1 + 8 files changed, 54 insertions(+), 18 deletions(-) diff --git a/source/Behavior/Behavior.ts b/source/Behavior/Behavior.ts index 3a7c27c..6c0346a 100644 --- a/source/Behavior/Behavior.ts +++ b/source/Behavior/Behavior.ts @@ -1,7 +1,7 @@ import { BehaviorRecorder, IAnyBehaviorRecorder } from "@Model/Behavior"; import { Template } from "./Template"; -const AllBehaviors: IAnyBehaviorRecorder[] = new Array(20).fill(0).map((_, i) => { +const AllBehaviors: IAnyBehaviorRecorder[] = new Array(4).fill(0).map((_, i) => { let behavior = new BehaviorRecorder(Template); behavior.behaviorId = behavior.behaviorId + i; return behavior; diff --git a/source/Component/BehaviorList/BehaviorList.scss b/source/Component/BehaviorList/BehaviorList.scss index d1cdf0a..952ad08 100644 --- a/source/Component/BehaviorList/BehaviorList.scss +++ b/source/Component/BehaviorList/BehaviorList.scss @@ -10,6 +10,7 @@ div.behavior-list { div.behavior-item { margin: 5px; height: $behavior-item-height; + user-select: none; border-radius: 3px; cursor: pointer; display: flex; diff --git a/source/Component/BehaviorPopup/BehaviorPopup.scss b/source/Component/BehaviorPopup/BehaviorPopup.scss index 4adb767..8886442 100644 --- a/source/Component/BehaviorPopup/BehaviorPopup.scss +++ b/source/Component/BehaviorPopup/BehaviorPopup.scss @@ -5,6 +5,10 @@ div.behavior-popup { height: 100%; } +span.behavior-popup-select-counter { + opacity: .75; +} + div.behavior-popup-search-box { padding: 10px 0 10px 10px; width: calc(100% - 10px); diff --git a/source/Component/BehaviorPopup/BehaviorPopup.tsx b/source/Component/BehaviorPopup/BehaviorPopup.tsx index ad58909..b87154c 100644 --- a/source/Component/BehaviorPopup/BehaviorPopup.tsx +++ b/source/Component/BehaviorPopup/BehaviorPopup.tsx @@ -62,19 +62,46 @@ class BehaviorPopupComponent extends Component< ; } + private showBehaviorInfo = (behavior: IRenderBehavior) => { + if (this.props.status) { + const status = this.props.status; + status.popup.showPopup(ConfirmPopup, { + infoI18n: behavior.describe as any, + titleI18N: "Popup.Behavior.Info.Title", + titleI18NOption: { + behavior: I18N(this.props, behavior.behaviorName as any) + }, + yesI18n: "Popup.Behavior.Info.Confirm", + }) + } + } + + private renderActionBar = () => { + return + } + public render(): ReactNode { return { if (this.state.focusBehavior.has(behavior)) { this.state.focusBehavior.delete(behavior); @@ -83,19 +110,6 @@ class BehaviorPopupComponent extends Component< } this.forceUpdate(); }} - action={(behavior)=>{ - if (this.props.status) { - const status = this.props.status; - status.popup.showPopup(ConfirmPopup, { - infoI18n: behavior.describe as any, - titleI18N: "Popup.Behavior.Info.Title", - titleI18NOption: { - behavior: I18N(this.props, behavior.behaviorName as any) - }, - yesI18n: "Popup.Behavior.Info.Confirm", - }) - } - }} /> } diff --git a/source/Component/ConfirmPopup/ConfirmPopup.scss b/source/Component/ConfirmPopup/ConfirmPopup.scss index dacdaf1..bbf0309 100644 --- a/source/Component/ConfirmPopup/ConfirmPopup.scss +++ b/source/Component/ConfirmPopup/ConfirmPopup.scss @@ -47,7 +47,17 @@ div.confirm-root { justify-content: flex-end; align-items: center; + div.action-right-view { + width: 100%; + height: 100%; + flex-shrink: 1; + display: flex; + align-items: center; + padding-left: 10px; + } + div.action-button { + flex-shrink: 0; height: 26px; padding: 0 10px; border-radius: 3px; diff --git a/source/Component/ConfirmPopup/ConfirmPopup.tsx b/source/Component/ConfirmPopup/ConfirmPopup.tsx index 4cb4130..0fad186 100644 --- a/source/Component/ConfirmPopup/ConfirmPopup.tsx +++ b/source/Component/ConfirmPopup/ConfirmPopup.tsx @@ -68,6 +68,7 @@ interface IConfirmContentProps { hidePadding?: boolean; className?: string; actions: IActionButtonProps[]; + customFooter?: () => ReactNode; header?: () => ReactNode; headerHeight?: number; } @@ -154,10 +155,14 @@ class ConfirmContent extends Component {
+
+ {this.props.customFooter ? this.props.customFooter() : null} +
{ - this.props.actions.map((prop, index) => { - return this.renderActionButton(prop, index); - }) + this.props.actions ? + this.props.actions.map((prop, index) => { + return this.renderActionButton(prop, index); + }) : null }
; diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 9e858c0..124c4f1 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -54,6 +54,7 @@ const EN_US = { "Popup.Setting.Title": "Preferences setting", "Popup.Add.Behavior.Title": "Add behavior", "Popup.Add.Behavior.Action.Add": "Add all select behavior", + "Popup.Add.Behavior.Select.Counter": "Selected {count} behavior", "Popup.Behavior.Info.Title": "Behavior details: {behavior}", "Popup.Behavior.Info.Confirm": "OK, I know it", "Build.In.Label.Name.All.Group": "All group", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 1283176..3495892 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -54,6 +54,7 @@ const ZH_CN = { "Popup.Setting.Title": "首选项设置", "Popup.Add.Behavior.Title": "添加行为", "Popup.Add.Behavior.Action.Add": "添加全部选中行为", + "Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为", "Popup.Behavior.Info.Title": "行为详情: {behavior}", "Popup.Behavior.Info.Confirm": "好的, 我知道了", "Build.In.Label.Name.All.Group": "全部群",