Page MenuHomePhabricator
Files F3174740

D3669.id11226.diff
No OneTemporary
Actions

D3669.id11226.diff
View Options

diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -115,7 +115,7 @@
}
return (
- <Modal name="Sidebars" onClose={clearModals} fixedHeight={false}>
+ <Modal name="Sidebars" onClose={clearModals}>
<div
className={classNames(
globalCSS['modal-body'],
diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -1,75 +1,59 @@
-div.modal-overlay {
+div.modalOverlay {
position: fixed;
left: 0;
top: 0;
- bottom: 0;
+ height: 100%;
z-index: 4;
width: 100%;
- background-color: rgba(0, 0, 0, 0.4);
+ background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- overflow: auto;
-}
-div.resizable-modal-overlay {
- min-height: 60px;
}
-div.modal-container {
- background: var(--bg);
- background-size: 3000px 2000px;
- max-width: 330px;
+
+div.modalContainer {
border-radius: 15px;
display: flex;
- min-height: 0;
- max-height: 500px;
-}
-div.large-modal-container {
- max-width: 500px;
-}
-div.modal {
- position: relative;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
background-color: var(--modal-bg);
- border-radius: 15px;
- flex: 1;
- display: flex;
+ border-radius: 8px;
flex-direction: column;
+ margin: 20px;
+ overflow: hidden;
+}
+
+div.modalContainerSmall {
width: 330px;
+ min-height: 0;
+ max-height: 500px;
}
-div.large-modal-container div.modal {
+
+div.modalContainerLarge {
width: 500px;
+ min-height: 0;
+ max-height: 500px;
}
-div.fixed-height-modal {
- height: 100%;
-}
-span.modal-close {
- float: right;
- font-size: 32px;
- font-weight: 300;
- line-height: 30px;
- color: var(--fg);
+
+div.modalClose {
+ display: flex;
+ color: var(--modal-close-color);
}
-span.modal-close:hover {
- color: black;
+
+div.modalClose:hover {
cursor: pointer;
+ color: var(--modal-close-color-hover);
}
-div.modal-header {
- padding: 8px 15px;
-}
-div.modal-header > h2 {
- font-size: 22px;
- font-weight: 300;
- color: var(--fg);
+
+div.modalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 32px 32px 0px 32px;
}
-@media only screen and (-webkit-min-device-pixel-ratio: 2),
- only screen and (min--moz-device-pixel-ratio: 2),
- only screen and (-o-min-device-pixel-ratio: 2/1),
- only screen and (min-device-pixel-ratio: 2),
- only screen and (min-resolution: 320dpi),
- only screen and (min-resolution: 2dppx) {
- div.modal-container {
- background: var(--bg);
- }
+div.title {
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 26px;
+ color: var(--fg);
}
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
@@ -3,19 +3,18 @@
import classNames from 'classnames';
import * as React from 'react';
+import SWMansionIcon from '../SWMansionIcon.react';
import css from './modal.css';
-
-export type ModalSize = 'small' | 'large';
+export type ModalSize = 'small' | 'large' | 'fit-content';
type Props = {
- +name: string,
+ +name: React.Node,
+onClose: () => void,
+children?: React.Node,
+size?: ModalSize,
- +fixedHeight?: boolean,
};
function Modal(props: Props): React.Node {
- const { size = 'small', children, onClose, fixedHeight = true, name } = props;
+ const { size = 'small', children, onClose, name: title } = props;
const overlayRef = React.useRef();
const onBackgroundClick = React.useCallback(
@@ -42,45 +41,31 @@
}
}, []);
- const overlayClasses = React.useMemo(
- () =>
- classNames(css['modal-overlay'], {
- [css['resizable-modal-overlay']]: !fixedHeight,
- }),
- [fixedHeight],
- );
const modalContainerClasses = React.useMemo(
() =>
- classNames(css['modal-container'], {
- [css['large-modal-container']]: size === 'large',
+ classNames(css.modalContainer, {
+ [css.modalContainerLarge]: size === 'large',
+ [css.modalContainerSmall]: size === 'small',
}),
[size],
);
- const modalClasses = React.useMemo(
- () =>
- classNames(css['modal'], {
- [css['fixed-height-modal']]: fixedHeight,
- }),
- [fixedHeight],
- );
+
return (
<div
- className={overlayClasses}
+ className={css.modalOverlay}
ref={overlayRef}
onClick={onBackgroundClick}
tabIndex={0}
onKeyDown={onKeyDown}
>
<div className={modalContainerClasses}>
- <div className={modalClasses}>
- <div className={css['modal-header']}>
- <span className={css['modal-close']} onClick={onClose}>
- ×
- </span>
- <h2>{name}</h2>
+ <div className={css.modalHeader}>
+ <div className={css.title}>{title}</div>
+ <div className={css.modalClose} onClick={onClose}>
+ <SWMansionIcon icon="cross" size={24} />
</div>
- {children}
</div>
+ {children}
</div>
</div>
);
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -138,4 +138,6 @@
--label-default-color: var(--shades-white-80);
--subchannels-modal-color: var(--shades-black-60);
--subchannels-modal-color-hover: var(--shades-white-100);
+ --modal-close-color: var(--shades-black-60);
+ --modal-close-color-hover: var(--shades-white-100);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 8, 5:52 PM (19 h, 42 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2444846
Default Alt Text
D3669.id11226.diff (5 KB)

Event Timeline