MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show confim popup when delete objects

Browse Source
This commit is contained in:
MrKBear 2022-03-24 17:23:01 +08:00
parent 1f4c6feafa
commit 50f1cb0562
14 changed files with 129 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/Component/CommandBar/CommandBar.tsx
View File

@ -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>

2
source/Component/ConfirmPopup/ConfirmPopup.scss
View File

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

40
source/Component/ConfirmPopup/ConfirmPopup.tsx
View File

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

1
source/Component/Popup/Popup.scss
View File

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

4
source/Component/TogglesInput/TogglesInput.scss
View File

@ -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 {

3
source/Component/TogglesInput/TogglesInput.tsx
View File

@ -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"
}}

6
source/Localization/EN-US.ts
View File

@ -45,6 +45,12 @@ const EN_US = {
"Panel.Title.Group.Details.View": "Group",
"Panel.Info.Group.Details.View": "Edit view group attributes",
"Popup.Title.Unnamed": "Popup message",
"Popup.Title.Confirm": "Confirm message",
"Popup.Action.Yes": "Confirm",
"Popup.Action.No": "Cancel",
"Popup.Action.Objects.Confirm.Title": "Confirm Delete",
"Popup.Action.Objects.Confirm.Delete": "Delete",
"Popup.Delete.Objects.Confirm": "Are you sure you want to delete this object(s)? The object is deleted and cannot be recalled.",
"Build.In.Label.Name.All.Group": "All group",
"Build.In.Label.Name.All.Range": "All range",
"Common.No.Data": "No Data",

6
source/Localization/ZH-CN.ts
View File

@ -45,6 +45,12 @@ const ZH_CN = {
"Panel.Title.Group.Details.View": "群",
"Panel.Info.Group.Details.View": "编辑查看群属性",
"Popup.Title.Unnamed": "弹窗消息",
"Popup.Title.Confirm": "确认消息",
"Popup.Action.Yes": "确定",
"Popup.Action.No": "取消",
"Popup.Action.Objects.Confirm.Title": "删除确认",
"Popup.Action.Objects.Confirm.Delete": "删除",
"Popup.Delete.Objects.Confirm": "你确定要删除这个(些)对象吗？对象被删除将无法撤回。",
"Build.In.Label.Name.All.Group": "全部群",
"Build.In.Label.Name.All.Range": "全部范围",
"Common.No.Data": "暂无数据",

18
source/Panel/GroupDetails/GroupDetails.tsx
View File

@ -10,6 +10,7 @@ import { Group, GenMod } from "@Model/Group";
import { AllI18nKeys } from "@Component/Localization/Localization";
import { ComboInput, IDisplayItem } from "@Component/ComboInput/ComboInput";
import { ObjectPicker } from "@Component/ObjectPicker/ObjectPicker";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import "./GroupDetails.scss";
interface IGroupDetailsProps {}
@ -88,12 +89,21 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
/>
<TogglesInput
keyI18n="Common.Attr.Key.Delete"
keyI18n="Common.Attr.Key.Delete" red
onIconName="delete" offIconName="delete"
valueChange={() => {
if (this.props.status) {
this.props.status.model.deleteObject([group]);
this.props.status.setFocusObject(new Set());
const status = this.props.status;
status.popup.showPopup(ConfirmPopup, {
infoI18n: "Popup.Delete.Objects.Confirm",
titleI18N: "Popup.Action.Objects.Confirm.Title",
yesI18n: "Popup.Action.Objects.Confirm.Delete",
red: "yes",
yes: () => {
status.model.deleteObject([group]);
status.setFocusObject(new Set());
}
})
}
}}
/>
@ -147,7 +157,7 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
/>
<TogglesInput
keyI18n="Common.Attr.Key.Generation"
keyI18n="Common.Attr.Key.Kill.Random"
onIconName="RemoveFilter" offIconName="RemoveFilter"
valueChange={() => {
group.killIndividuals()

18
source/Panel/LabelDetails/LabelDetails.tsx
View File

@ -5,6 +5,7 @@ import { Message } from "@Component/Message/Message";
import { ColorInput } from "@Component/ColorInput/ColorInput";
import { Label } from "@Model/Label";
import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import "./LabelDetails.scss";
@useStatusWithEvent("focusLabelChange", "labelAttrChange", "labelChange")
@ -27,10 +28,21 @@ class LabelDetails extends Component<IMixinStatusProps> {
}
}}/>
<TogglesInput keyI18n="Common.Attr.Key.Delete" onIconName="delete" offIconName="delete" valueChange={() => {
<TogglesInput
keyI18n="Common.Attr.Key.Delete" onIconName="delete" red
offIconName="delete" valueChange={() => {
if (this.props.status) {
this.props.status.model.deleteLabel(label);
this.props.status.setLabelObject();
const status = this.props.status;
status.popup.showPopup(ConfirmPopup, {
infoI18n: "Popup.Delete.Objects.Confirm",
titleI18N: "Popup.Action.Objects.Confirm.Title",
yesI18n: "Popup.Action.Objects.Confirm.Delete",
red: "yes",
yes: () => {
status.model.deleteLabel(label);
status.setLabelObject();
}
})
}
}}/>

14
source/Panel/LabelList/LabelList.tsx
View File

@ -4,6 +4,7 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { useSetting, IMixinSettingProps } from "@Context/Setting";
import { Label } from "@Model/Label";
import { Message } from "@Component/Message/Message";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import "./LabelList.scss";
interface ILabelListProps {
@ -47,8 +48,17 @@ class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSe
}}
deleteLabel={(label) => {
if (this.props.status) {
this.props.status.model.deleteLabel(label);
this.props.status.setLabelObject();
const status = this.props.status;
status.popup.showPopup(ConfirmPopup, {
infoI18n: "Popup.Delete.Objects.Confirm",
titleI18N: "Popup.Action.Objects.Confirm.Title",
yesI18n: "Popup.Action.Objects.Confirm.Delete",
red: "yes",
yes: () => {
status.model.deleteLabel(label);
status.setLabelObject();
}
})
}
this.labelInnerClick = true;
}}

24
source/Panel/ObjectList/ObjectCommand.tsx
View File

@ -1,5 +1,6 @@
import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
import { useStatus, IMixinStatusProps } from "../../Context/Status";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import { Icon } from "@fluentui/react";
import { Component, ReactNode } from "react";
import { ObjectID } from "@Model/Renderer";
@ -54,15 +55,24 @@ class ObjectCommand extends Component<IMixinStatusProps> {
<Icon iconName="CubeShape"></Icon>
</div>
<div
className="command-item"
className="command-item red"
onClick={() => {
if (this.props.status) {
let deleteId: ObjectID[] = [];
this.props.status.focusObject.forEach((obj) => {
deleteId.push(obj);
if (this.props.status && this.props.status.focusObject.size > 0) {
const status = this.props.status;
status.popup.showPopup(ConfirmPopup, {
infoI18n: "Popup.Delete.Objects.Confirm",
titleI18N: "Popup.Action.Objects.Confirm.Title",
yesI18n: "Popup.Action.Objects.Confirm.Delete",
red: "yes",
yes: () => {
let deleteId: ObjectID[] = [];
status.focusObject.forEach((obj) => {
deleteId.push(obj);
})
status.model.deleteObject(deleteId);
status.setFocusObject(new Set<ObjectID>());
}
})
this.props.status.model.deleteObject(deleteId);
this.props.status.setFocusObject(new Set<ObjectID>());
}
}}
>

4
source/Panel/ObjectList/ObjectList.scss
View File

@ -59,6 +59,10 @@ div.object-list-command-bar {
user-select: none;
cursor: pointer;
}
div.command-item.red:hover {
color: $lt-red;
}
}
div.dark.object-list-command-bar {

19
source/Panel/RangeDetails/RangeDetails.tsx
View File

@ -1,13 +1,13 @@
import { Component, ReactNode } from "react";
import { AttrInput } from "@Component/AttrInput/AttrInput";
import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
import { AllI18nKeys } from "@Component/Localization/Localization";
import { Message } from "@Component/Message/Message";
import { Range } from "@Model/Range";
import { ObjectID } from "@Model/Renderer";
import { ColorInput } from "@Component/ColorInput/ColorInput";
import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import "./RangeDetails.scss";
@useStatusWithEvent("rangeAttrChange", "focusObjectChange", "rangeLabelChange")
@ -53,12 +53,21 @@ class RangeDetails extends Component<IMixinStatusProps> {
/>
<TogglesInput
keyI18n="Common.Attr.Key.Delete"
keyI18n="Common.Attr.Key.Delete" red
onIconName="delete" offIconName="delete"
valueChange={() => {
if (this.props.status) {
this.props.status.model.deleteObject([range]);
this.props.status.setFocusObject(new Set());
if (this.props.status) {
const status = this.props.status;
status.popup.showPopup(ConfirmPopup, {
infoI18n: "Popup.Delete.Objects.Confirm",
titleI18N: "Popup.Action.Objects.Confirm.Title",
yesI18n: "Popup.Action.Objects.Confirm.Delete",
red: "yes",
yes: () => {
status.model.deleteObject([range]);
status.setFocusObject(new Set());
}
})
}
}}
/>