add media library
* rebase editorial workflow pull requests when behind * fix async/await transpilation * add media library pagination * switch media library to grid layout * ensure that only cms branches can be force updated
This commit is contained in:
52
src/components/UI/Dialog/Dialog.css
Normal file
52
src/components/UI/Dialog/Dialog.css
Normal file
@ -0,0 +1,52 @@
|
||||
.nc-dialog-wrapper {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.nc-dialog-root {
|
||||
height: 80%;
|
||||
text-align: center;
|
||||
max-width: 2200px;
|
||||
}
|
||||
|
||||
.nc-dialog-body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nc-dialog-contentWrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nc-dialog-footer {
|
||||
margin: 24px 0;
|
||||
width: calc(100% - 48px);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Progress Bar
|
||||
*/
|
||||
.nc-dialog-progressOverlay {
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nc-dialog-progressOverlay-active {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.nc-dialog-progressBarContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nc-dialog-progressBar-linear {
|
||||
width: 80%;
|
||||
}
|
||||
|
16
src/components/UI/Dialog/FocusTrap.js
Normal file
16
src/components/UI/Dialog/FocusTrap.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import FocusTrapReact from 'focus-trap-react';
|
||||
|
||||
/**
|
||||
* A wrapper for focus-trap-react, which we use to completely remove focus traps
|
||||
* from the DOM rather than using the library's own internal activation/pausing
|
||||
* mechanisms, which can manifest bugs when nested.
|
||||
*/
|
||||
const FocusTrap = props => {
|
||||
const { active, children, focusTrapOptions, className } = props;
|
||||
return active
|
||||
? <FocusTrapReact focusTrapOptions={focusTrapOptions} className={className}>{children}</FocusTrapReact>
|
||||
: <div className={className}>{children}</div>
|
||||
}
|
||||
|
||||
export default FocusTrap;
|
65
src/components/UI/Dialog/index.js
Normal file
65
src/components/UI/Dialog/index.js
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import RTDialog from 'react-toolbox/lib/dialog';
|
||||
import Overlay from 'react-toolbox/lib/overlay';
|
||||
import ProgressBar from 'react-toolbox/lib/progress_bar';
|
||||
import FocusTrap from './FocusTrap';
|
||||
|
||||
const dialogTheme = {
|
||||
wrapper: 'nc-dialog-wrapper',
|
||||
dialog: 'nc-dialog-root',
|
||||
body: 'nc-dialog-body',
|
||||
};
|
||||
|
||||
const progressOverlayTheme = {
|
||||
overlay: 'nc-dialog-progressOverlay',
|
||||
active: 'nc-dialog-progressOverlay-active',
|
||||
};
|
||||
|
||||
const progressBarTheme = {
|
||||
linear: 'nc-dialog-progressBar-linear',
|
||||
};
|
||||
|
||||
const Dialog = ({
|
||||
type,
|
||||
isVisible,
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
onClose,
|
||||
footer,
|
||||
className,
|
||||
children,
|
||||
}) =>
|
||||
<RTDialog
|
||||
type={type || 'large'}
|
||||
active={isVisible}
|
||||
onEscKeyDown={onClose}
|
||||
onOverlayClick={onClose}
|
||||
theme={dialogTheme}
|
||||
className={className}
|
||||
>
|
||||
<FocusTrap
|
||||
active={isVisible && !isLoading}
|
||||
focusTrapOptions={{ clickOutsideDeactivates: true, fallbackFocus: '.fallbackFocus' }}
|
||||
className="nc-dialog-contentWrapper"
|
||||
>
|
||||
<Overlay active={isLoading} theme={progressOverlayTheme}>
|
||||
<FocusTrap
|
||||
active={isVisible && isLoading}
|
||||
focusTrapOptions={{ clickOutsideDeactivates: true, initialFocus: 'h1' }}
|
||||
className="nc-dialog-progressBarContainer"
|
||||
>
|
||||
<h1 style={{ marginTop: '-40px' }} tabIndex="-1">{ loadingMessage }</h1>
|
||||
<ProgressBar type="linear" mode="indeterminate" theme={progressBarTheme}/>
|
||||
</FocusTrap>
|
||||
</Overlay>
|
||||
|
||||
<div className="fallbackFocus" className="nc-dialog-contentWrapper">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{ footer ? <div className="nc-dialog-footer">{footer}</div> : null }
|
||||
|
||||
</FocusTrap>
|
||||
</RTDialog>;
|
||||
|
||||
export default Dialog;
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import CSSTransition from 'react-transition-group/CSSTransition';
|
||||
import classnames from 'classnames';
|
||||
import c from 'classnames';
|
||||
|
||||
export default class Loader extends React.Component {
|
||||
|
||||
@ -50,8 +50,8 @@ export default class Loader extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { active } = this.props;
|
||||
const className = classnames('nc-loader-root', { 'nc-loader-active': active });
|
||||
return <div className={className}>{this.renderChild()}</div>;
|
||||
const { active, className } = this.props;
|
||||
const combinedClassName = c('nc-loader-root', { 'nc-loader-active': active }, className);
|
||||
return <div className={combinedClassName}>{this.renderChild()}</div>;
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
:root {
|
||||
--fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--fontFamilyPrimary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--fontFamilyMono: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
--defaultColor: #333;
|
||||
--defaultColorLight: #fff;
|
||||
@ -32,6 +32,27 @@
|
||||
--borderWidth: 2px;
|
||||
--border: solid var(--borderWidth) var(--secondaryColor);
|
||||
--textFieldBorder: var(--border);
|
||||
|
||||
--input: {
|
||||
font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
border: var(--textFieldBorder);
|
||||
border-radius: var(--borderRadius);
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
background-color: var(--controlBGColor);
|
||||
font-size: 16px;
|
||||
color: var(--textColor);
|
||||
transition: border-color .3s ease;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nc-theme-base {
|
||||
|
Reference in New Issue
Block a user