Page MenuHomePhabricator
Files F3521283

D9455.id32054.diff
No OneTemporary
Actions

D9455.id32054.diff
View Options

diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -15,11 +15,18 @@
width: 500px;
}
-.modalClose {
+.modalHeaderButtonsContainer {
+ margin-left: 24px;
+ display: flex;
+ column-gap: 8px;
+ align-items: center;
+}
+
+.modalButton {
color: var(--modal-close-color);
}
-.modalClose:hover {
+.modalButton:hover {
color: var(--modal-close-color-hover);
}
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -14,13 +14,14 @@
export type ModalSize = 'small' | 'large' | 'fit-content';
export type ModalOverridableProps = {
- +name: string,
+ +name?: string,
+subtitle?: string,
+icon?: Icon,
+onClose: () => void,
+withCloseButton?: boolean,
+size?: ModalSize,
+modalHeaderCentered?: boolean,
+ +secondaryHeaderButton?: React.Node,
};
type ModalProps = {
@@ -38,6 +39,7 @@
icon,
withCloseButton = true,
modalHeaderCentered = false,
+ secondaryHeaderButton,
} = props;
const modalContainerClasses = classNames(css.modalContainer, {
@@ -50,16 +52,27 @@
[css.modalHeaderCentered]: modalHeaderCentered,
});
- const cornerCloseButton = React.useMemo(() => {
- if (!withCloseButton) {
+ const headerButtons = React.useMemo(() => {
+ if (!withCloseButton && !secondaryHeaderButton) {
return null;
}
+
+ let closeButton;
+ if (withCloseButton) {
+ closeButton = (
+ <Button className={css.modalButton} onClick={onClose}>
+ <SWMansionIcon size={24} icon="cross" />
+ </Button>
+ );
+ }
+
return (
- <Button className={css.modalClose} onClick={onClose}>
- <SWMansionIcon size={24} icon="cross" />
- </Button>
+ <div className={css.modalHeaderButtonsContainer}>
+ <div className={css.modalButton}>{secondaryHeaderButton}</div>
+ {closeButton}
+ </div>
);
- }, [onClose, withCloseButton]);
+ }, [onClose, secondaryHeaderButton, withCloseButton]);
const headerIcon = React.useMemo(() => {
if (!icon) {
@@ -68,27 +81,44 @@
return <SWMansionIcon size={24} icon={icon} />;
}, [icon]);
- let subtitleNode;
- if (subtitle) {
- subtitleNode = <h2 className={css.subtitle}>{subtitle}</h2>;
- }
- return (
- <ModalOverlay onClose={onClose}>
- <div className={modalContainerClasses}>
- <div className={modalHeader}>
- <div className={css.modalHeaderTitle}>
- <h2 className={css.title}>
- {headerIcon}
- {name}
- </h2>
- {cornerCloseButton}
+ const subtitleNode = React.useMemo(() => {
+ if (!subtitle) {
+ return null;
+ }
+ return <h2 className={css.subtitle}>{subtitle}</h2>;
+ }, [subtitle]);
+
+ const modal = React.useMemo(
+ () => (
+ <ModalOverlay onClose={onClose}>
+ <div className={modalContainerClasses}>
+ <div className={modalHeader}>
+ <div className={css.modalHeaderTitle}>
+ <h2 className={css.title}>
+ {headerIcon}
+ {name}
+ </h2>
+ {headerButtons}
+ </div>
+ {subtitleNode}
</div>
- {subtitleNode}
+ {children}
</div>
- {children}
- </div>
- </ModalOverlay>
+ </ModalOverlay>
+ ),
+ [
+ children,
+ headerButtons,
+ headerIcon,
+ modalContainerClasses,
+ modalHeader,
+ name,
+ onClose,
+ subtitleNode,
+ ],
);
+
+ return modal;
}
export default Modal;
diff --git a/web/modals/user-profile/user-profile-modal.react.js b/web/modals/user-profile/user-profile-modal.react.js
--- a/web/modals/user-profile/user-profile-modal.react.js
+++ b/web/modals/user-profile/user-profile-modal.react.js
@@ -24,7 +24,7 @@
const userProfileModal = React.useMemo(
() => (
- <Modal size="fit-content" onClose={popModal} name="">
+ <Modal size="fit-content" onClose={popModal}>
<UserProfile userInfo={userInfo} />
</Modal>
),

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 2:47 AM (20 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2696947
Default Alt Text
D9455.id32054.diff (4 KB)

Event Timeline