Add behavior select conter layout

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;

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;

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);

source/Component/BehaviorPopup/BehaviorPopup.tsx

@@ -62,28 +62,7 @@ class BehaviorPopupComponent extends Component<
 		</div>;
 	}
 
-	public render(): ReactNode {
+	private showBehaviorInfo = (behavior: IRenderBehavior) => {
-		return <ConfirmContent
-			className="behavior-popup"
-			actions={[{
-				i18nKey: "Popup.Add.Behavior.Action.Add"
-			}]}
-			header={this.renderHeader}
-			headerHeight={46}
-		>
-			<Message i18nKey="ZH_CN" isTitle first/>
-			<BehaviorList
-				focusBehaviors={Array.from(this.state.focusBehavior)}
-				behaviors={AllBehaviors}
-				click={(behavior) => {
-					if (this.state.focusBehavior.has(behavior)) {
-						this.state.focusBehavior.delete(behavior);
-					} else {
-						this.state.focusBehavior.add(behavior);
-					}
-					this.forceUpdate();
-				}}
-				action={(behavior)=>{
 		if (this.props.status) {
 			const status = this.props.status;
 			status.popup.showPopup(ConfirmPopup, {
@@ -95,6 +74,41 @@ class BehaviorPopupComponent extends Component<
 				yesI18n: "Popup.Behavior.Info.Confirm",
 			})
 		}
+	}
+
+	private renderActionBar = () => {
+		return <Localization
+			className="behavior-popup-select-counter"
+			i18nKey="Popup.Add.Behavior.Select.Counter"
+			options={{
+				count: this.state.focusBehavior.size.toString()
+			}}
+		/>
+	}
+
+	public render(): ReactNode {
+		return <ConfirmContent
+			className="behavior-popup"
+			actions={[{
+				i18nKey: "Popup.Add.Behavior.Action.Add",
+				disable: this.state.focusBehavior.size <= 0
+			}]}
+			header={this.renderHeader}
+			customFooter={this.renderActionBar}
+			headerHeight={46}
+		>
+			<Message i18nKey="ZH_CN" isTitle first/>
+			<BehaviorList
+				focusBehaviors={Array.from(this.state.focusBehavior)}
+				behaviors={AllBehaviors}
+				action={this.showBehaviorInfo}
+				click={(behavior) => {
+					if (this.state.focusBehavior.has(behavior)) {
+						this.state.focusBehavior.delete(behavior);
+					} else {
+						this.state.focusBehavior.add(behavior);
+					}
+					this.forceUpdate();
 				}}
 			/>
 		</ConfirmContent>

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;

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<IConfirmContentProps> {
 			</div>
 			
 			<div className="action-view">
+				<div className="action-right-view">
+					{this.props.customFooter ? this.props.customFooter() : null}
+				</div>
 				{
+					this.props.actions ? 
 						this.props.actions.map((prop, index) => {
 							return this.renderActionButton(prop, index);
-					})
+						}) : null
 				}
 			</div>
 		</Theme>;

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",

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": "全部群",