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:
Shawn Erquhart
2017-08-14 09:00:47 -04:00
parent 2a4af64a71
commit 6b45a46a39
43 changed files with 1662 additions and 362 deletions

View 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%;
}

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

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

View File

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

View File

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