Show confim popup when delete objects

source/Component/CommandBar/CommandBar.tsx

@@ -73,7 +73,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
                     iconName: "Settings",
                     i18NKey: "Command.Bar.Setting.Info",
                     click: () => {
-                        this.props.status?.popup.showPopup(ConfirmPopup, {});
+                        // this.props.status?.popup.showPopup(ConfirmPopup, {});
                     }
                 })}
             </div>

source/Component/ConfirmPopup/ConfirmPopup.scss

@@ -32,7 +32,7 @@ div.confirm-root {
 			user-select: none;
 		}
 
-		div.action-button.yes-button:hover {
+		div.action-button.red {
 			color: $lt-red;
 		}
 	}

source/Component/ConfirmPopup/ConfirmPopup.tsx

@@ -2,11 +2,17 @@ import { Popup } from "@Context/Popups";
 import { ReactNode } from "react";
 import { Message } from "@Component/Message/Message";
 import { Theme } from "@Component/Theme/Theme";
-import { Localization } from "@Component/Localization/Localization";
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
 import "./ConfirmPopup.scss";
 
 interface IConfirmPopupProps {
-	
+	titleI18N?: AllI18nKeys;
+	infoI18n: AllI18nKeys;
+	yesI18n?: AllI18nKeys;
+	noI18n?: AllI18nKeys;
+	yes?: () => any;
+	no?: () => any;
+	red?: "yes" | "no";
 }
 class ConfirmPopup extends Popup<IConfirmPopupProps> {
 
@@ -14,17 +20,37 @@ class ConfirmPopup extends Popup<IConfirmPopupProps> {
 
 	public height: number = 180;
 
+	public onRenderHeader(): ReactNode {
+		return <Localization i18nKey={this.props.titleI18N ?? "Popup.Title.Confirm"}/>
+	}
+
 	public render(): ReactNode {
+
+		const yesClassList: string[] = ["action-button", "yes-button"];
+		const noClassList: string[] = ["action-button", "no-button"];
+		if (this.props.red === "no") {
+			noClassList.push("red");
+		}
+		if (this.props.red === "yes") {
+			yesClassList.push("red");
+		}
+
 		return <Theme className="confirm-root">
 			<div className="content-views">
-				<Message i18nKey="ZH_CN"/>
+				<Message i18nKey={this.props.infoI18n}/>
 			</div>
 			<div className="action-view">
-				<div className="yes-button action-button">
-					<Localization i18nKey="Panel.Title.Group.Details.View"/>
+				<div className={yesClassList.join(" ")} onClick={() => {
+					this.props.yes ? this.props.yes() : null;
+					this.close();
+				}}>
+					<Localization i18nKey={this.props.yesI18n ?? "Popup.Action.Yes"}/>
 				</div>
-				<div className="no-button action-button">
-					<Localization i18nKey="Panel.Title.Group.Details.View"/>
+				<div className={noClassList.join(" ")} onClick={() => {
+					this.props.no ? this.props.no() : null;
+					this.close();
+				}}>
+					<Localization i18nKey={this.props.noI18n ?? "Popup.Action.No"}/>
 				</div>
 			</div>
 		</Theme>;

source/Component/Popup/Popup.scss

@@ -34,7 +34,6 @@ div.popup-layer.show-scale {
 
 div.popup-mask {
     position: absolute;
-    cursor: pointer;
     width: 100%;
     height: 100%;
 }

source/Component/TogglesInput/TogglesInput.scss

@@ -15,6 +15,10 @@ div.toggles-input {
         cursor: pointer;
         user-select: none;
     }
+
+    div.checkbox.red:hover {
+        color: $lt-red !important;
+    }
 }
 
 div.dark.text-field-root {

source/Component/TogglesInput/TogglesInput.tsx

@@ -8,6 +8,7 @@ interface ITogglesInputProps extends ITextFieldProps {
     onIconName?: string;
     offIconName?: string;
     valueChange?: (value: boolean) => any;
+    red?: boolean;
 }
 
 class TogglesInput extends Component<ITogglesInputProps> {
@@ -20,7 +21,7 @@ class TogglesInput extends Component<ITogglesInputProps> {
             customStyle
         >
             <div
-                className="checkbox"
+                className={"checkbox" + (this.props.red ? " red" : "")}
                 style={{
                     cursor: this.props.disableI18n ? "not-allowed" : "pointer"
                 }}