Page MenuHomePhabricator
Files F3369112

D8139.id27940.diff
No OneTemporary
Actions

D8139.id27940.diff
View Options

diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -12,6 +12,7 @@
import Button, { buttonThemes } from '../../../components/button.react.js';
import Dropdown from '../../../components/dropdown.react.js';
import Modal from '../../modal.react.js';
+import UnsavedChangesModal from '../../unsaved-changes-modal.react.js';
type ChangeMemberRoleModalProps = {
+memberInfo: RelativeMemberInfo,
@@ -20,7 +21,7 @@
function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
const { memberInfo, threadInfo } = props;
- const { popModal } = useModalContext();
+ const { pushModal, popModal } = useModalContext();
const roleOptions = React.useMemo(
() =>
@@ -36,6 +37,15 @@
const [selectedRole, setSelectedRole] = React.useState(initialSelectedRole);
+ const onBackClick = React.useCallback(() => {
+ if (selectedRole === initialSelectedRole) {
+ popModal();
+ return;
+ }
+
+ pushModal(<UnsavedChangesModal />);
+ }, [initialSelectedRole, popModal, pushModal, selectedRole]);
+
return (
<Modal name="Change Role" onClose={popModal} size="large">
<div className={css.roleModalDescription}>
@@ -56,7 +66,11 @@
/>
</div>
<div className={css.roleModalActionButtons}>
- <Button variant="outline" className={css.roleModalBackButton}>
+ <Button
+ variant="outline"
+ className={css.roleModalBackButton}
+ onClick={onBackClick}
+ >
Back
</Button>
<Button
diff --git a/web/modals/unsaved-changes-modal.css b/web/modals/unsaved-changes-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/unsaved-changes-modal.css
@@ -0,0 +1,27 @@
+.unsavedChangesModalText {
+ color: var(--unsaved-changes-modal-text-color);
+ font-size: var(--l-font-18);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 50px;
+}
+
+.unsavedChangesModalButtons {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-self: center;
+ align-items: stretch;
+ margin: 16px 64px 16px 0;
+}
+
+.unsavedChangesCloseModalButton {
+ margin-left: 8px;
+ padding: 10px 20px;
+}
+
+.unsavedChangesBackButton {
+ padding: 10px 20px;
+}
diff --git a/web/modals/unsaved-changes-modal.react.js b/web/modals/unsaved-changes-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/unsaved-changes-modal.react.js
@@ -0,0 +1,53 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import Modal from './modal.react.js';
+import css from './unsaved-changes-modal.css';
+import Button, { buttonThemes } from '../components/button.react.js';
+
+function UnsavedChangesModal(): React.Node {
+ const modalName = '';
+ const { popModal } = useModalContext();
+
+ const onCloseModalClick = React.useCallback(() => {
+ // Pop the unsaved changes modal and the modal that triggered it.
+ popModal();
+ popModal();
+ }, [popModal]);
+
+ return (
+ <Modal
+ name={modalName}
+ onClose={popModal}
+ withCloseButton={false}
+ size="large"
+ >
+ <div className={css.unsavedChangesModalText}>
+ You have unsaved changes, are you sure you want to close the modal? You
+ will lose all your progress.
+ </div>
+ <div className={css.unsavedChangesModalButtons}>
+ <Button
+ variant="outline"
+ className={css.unsavedChangesBackButton}
+ onClick={popModal}
+ >
+ Back
+ </Button>
+ <Button
+ variant="filled"
+ className={css.unsavedChangesCloseModalButton}
+ buttonColor={buttonThemes.danger}
+ onClick={onCloseModalClick}
+ >
+ Close Modal
+ </Button>
+ </div>
+ </Modal>
+ );
+}
+
+export default UnsavedChangesModal;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -235,4 +235,5 @@
--dropdown-disabled-color: var(--shades-black-60);
--change-member-role-modal-description-text: var(--shades-white-60);
--change-member-role-modal-generic-text: var(--shades-white-100);
+ --unsaved-changes-modal-text-color: var(--shades-white-60);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 9:52 PM (19 h, 14 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2586445
Default Alt Text
D8139.id27940.diff (4 KB)

Event Timeline