Merge branch 'react-pr' of https://github.com/netlify/netlify-cms into react-pr
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
import history from '../routing/history';
|
||||
import { SEARCH } from '../containers/FindBar';
|
||||
import { SEARCH } from '../components/UI/FindBar/FindBar';
|
||||
|
||||
export const RUN_COMMAND = 'RUN_COMMAND';
|
||||
export const SHOW_COLLECTION = 'SHOW_COLLECTION';
|
||||
@ -10,14 +10,22 @@ export function run(commandName, payload) {
|
||||
return { type: RUN_COMMAND, command: commandName, payload };
|
||||
}
|
||||
|
||||
export function navigateToCollection(collectionName) {
|
||||
return runCommand(SHOW_COLLECTION, { collectionName });
|
||||
}
|
||||
|
||||
export function createNewEntryInCollection(collectionName) {
|
||||
return runCommand(CREATE_COLLECTION, { collectionName });
|
||||
}
|
||||
|
||||
export function runCommand(commandName, payload) {
|
||||
return (dispatch, getState) => {
|
||||
return dispatch => {
|
||||
switch (commandName) {
|
||||
case SHOW_COLLECTION:
|
||||
history.push(`/collections/${payload.collectionName}`);
|
||||
break;
|
||||
case CREATE_COLLECTION:
|
||||
window.alert(`Create a new ${payload.collectionName} - not supported yet`);
|
||||
history.push(`/collections/${payload.collectionName}/entries/new`);
|
||||
break;
|
||||
case HELP:
|
||||
window.alert('Find Bar Help (PLACEHOLDER)\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.');
|
||||
|
17
src/components/UI/AppHeader/AppHeader.css
Normal file
17
src/components/UI/AppHeader/AppHeader.css
Normal file
@ -0,0 +1,17 @@
|
||||
:root {
|
||||
--foregroundColor: #fff;
|
||||
--backgroundColor: #272e30;
|
||||
--textFieldBorderColor: #e7e7e7;
|
||||
--highlightFGColor: #fff;
|
||||
--highlightBGColor: #3ab7a5;
|
||||
}
|
||||
|
||||
.appBar {
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
|
||||
.createBtn {
|
||||
position: fixed;
|
||||
right: 2rem;
|
||||
top: 3.5rem;
|
||||
}
|
90
src/components/UI/AppHeader/AppHeader.js
Normal file
90
src/components/UI/AppHeader/AppHeader.js
Normal file
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import pluralize from 'pluralize';
|
||||
import { IndexLink } from 'react-router';
|
||||
import { Menu, MenuItem, Button, IconButton } from 'react-toolbox';
|
||||
import AppBar from 'react-toolbox/lib/app_bar';
|
||||
import FindBar from '../FindBar/FindBar';
|
||||
import styles from './AppHeader.css';
|
||||
|
||||
export default class AppHeader extends React.Component {
|
||||
|
||||
state = {
|
||||
createMenuActive: false
|
||||
}
|
||||
|
||||
handleCreatePostClick = collectionName => {
|
||||
const { onCreateEntryClick } = this.props;
|
||||
if (onCreateEntryClick) {
|
||||
onCreateEntryClick(collectionName);
|
||||
}
|
||||
}
|
||||
|
||||
handleCreateButtonClick = () => {
|
||||
this.setState({
|
||||
createMenuActive: true
|
||||
});
|
||||
}
|
||||
|
||||
handleCreateMenuHide = () => {
|
||||
this.setState({
|
||||
createMenuActive: false
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
collections,
|
||||
commands,
|
||||
defaultCommands,
|
||||
runCommand,
|
||||
toggleNavDrawer
|
||||
} = this.props;
|
||||
const { createMenuActive } = this.state;
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
fixed
|
||||
theme={styles}
|
||||
>
|
||||
<IconButton
|
||||
icon="menu"
|
||||
inverse
|
||||
onClick={toggleNavDrawer}
|
||||
/>
|
||||
<IndexLink to="/">
|
||||
Dashboard
|
||||
</IndexLink>
|
||||
<FindBar
|
||||
commands={commands}
|
||||
defaultCommands={defaultCommands}
|
||||
runCommand={runCommand}
|
||||
/>
|
||||
<Button
|
||||
className={styles.createBtn}
|
||||
icon='add'
|
||||
floating
|
||||
accent
|
||||
onClick={this.handleCreateButtonClick}
|
||||
>
|
||||
<Menu
|
||||
active={createMenuActive}
|
||||
position="topRight"
|
||||
onHide={this.handleCreateMenuHide}
|
||||
>
|
||||
{
|
||||
collections.valueSeq().map(collection =>
|
||||
<MenuItem
|
||||
key={collection.get('name')}
|
||||
value={collection.get('name')}
|
||||
onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
|
||||
caption={pluralize(collection.get('label'), 1)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Menu>
|
||||
</Button>
|
||||
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
}
|
@ -7,15 +7,14 @@
|
||||
}
|
||||
|
||||
.root {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: var(--backgroundColor);
|
||||
padding: 1px 0;
|
||||
margin: 4px auto;
|
||||
padding: 5px;
|
||||
}
|
||||
.inputArea {
|
||||
display: table;
|
||||
width: calc(100% - 10px);
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
color: var(--foregroundColor);
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--textFieldBorderColor);
|
@ -1,9 +1,7 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import fuzzy from 'fuzzy';
|
||||
import _ from 'lodash';
|
||||
import { runCommand } from '../actions/findbar';
|
||||
import { connect } from 'react-redux';
|
||||
import { Icon } from '../components/UI';
|
||||
import { Icon } from '../index';
|
||||
import styles from './FindBar.css';
|
||||
|
||||
export const SEARCH = 'SEARCH';
|
||||
@ -102,13 +100,15 @@ class FindBar extends Component {
|
||||
const paramName = command && command.param ? command.param.name : null;
|
||||
const enteredParamValue = command && command.param && match[1] ? match[1].trim() : null;
|
||||
|
||||
console.log(this.props.runCommand);
|
||||
|
||||
if (command.search) {
|
||||
this.setState({
|
||||
activeScope: SEARCH,
|
||||
placeholder: ''
|
||||
});
|
||||
|
||||
enteredParamValue && this.props.dispatch(runCommand(SEARCH, { searchTerm: enteredParamValue }));
|
||||
enteredParamValue && this.props.runCommand(SEARCH, { searchTerm: enteredParamValue });
|
||||
} else if (command.param && !enteredParamValue) {
|
||||
// Partial Match
|
||||
// Command was partially matched: It requires a param, but param wasn't entered
|
||||
@ -133,7 +133,7 @@ class FindBar extends Component {
|
||||
if (paramName) {
|
||||
payload[paramName] = enteredParamValue;
|
||||
}
|
||||
this.props.dispatch(runCommand(command.type, payload));
|
||||
this.props.runCommand(command.type, payload);
|
||||
}
|
||||
}
|
||||
|
||||
@ -373,8 +373,7 @@ FindBar.propTypes = {
|
||||
pattern: PropTypes.string.isRequired
|
||||
})).isRequired,
|
||||
defaultCommands: PropTypes.arrayOf(PropTypes.string),
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
runCommand: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export { FindBar };
|
||||
export default connect()(FindBar);
|
||||
export default FindBar;
|
@ -2,3 +2,4 @@ export { default as Card } from './card/Card';
|
||||
export { default as Loader } from './loader/Loader';
|
||||
export { default as Icon } from './icon/Icon';
|
||||
export { default as Toast } from './toast/Toast';
|
||||
export { default as AppHeader } from './AppHeader/AppHeader';
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { storiesOf, action } from '@kadira/storybook';
|
||||
|
||||
import { FindBar } from '../FindBar';
|
||||
import FindBar from '../UI/FindBar/FindBar';
|
||||
|
||||
const CREATE_COLLECTION = 'CREATE_COLLECTION';
|
||||
const CREATE_POST = 'CREATE_POST';
|
||||
@ -30,15 +30,13 @@ const style = {
|
||||
margin: 20
|
||||
};
|
||||
|
||||
const dispatch = action('DISPATCH');
|
||||
|
||||
storiesOf('FindBar', module)
|
||||
.add('Default View', () => (
|
||||
<div style={style}>
|
||||
<FindBar
|
||||
commands={commands}
|
||||
defaultCommands={[CREATE_POST, CREATE_COLLECTION, OPEN_SETTINGS, HELP, MORE_COMMANDS]}
|
||||
dispatch={f => f(dispatch)}
|
||||
runCommand={action}
|
||||
/>
|
||||
</div>
|
||||
));
|
@ -1,3 +1,4 @@
|
||||
import './Card';
|
||||
import './Icon';
|
||||
import './Toast';
|
||||
import './FindBar';
|
||||
|
@ -1,3 +1,10 @@
|
||||
.layout .navDrawer .drawerContent {
|
||||
padding-top: 54px;
|
||||
}
|
||||
.nav {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
}
|
||||
.main {
|
||||
padding-top: 54px;
|
||||
}
|
||||
|
@ -1,15 +1,27 @@
|
||||
import React from 'react';
|
||||
import pluralize from 'pluralize';
|
||||
import { connect } from 'react-redux';
|
||||
import { Layout, Panel, NavDrawer, Navigation, Link } from 'react-toolbox';
|
||||
import { loadConfig } from '../actions/config';
|
||||
import { loginUser } from '../actions/auth';
|
||||
import { currentBackend } from '../backends/backend';
|
||||
import { Loader } from '../components/UI';
|
||||
import { SHOW_COLLECTION, CREATE_COLLECTION, HELP } from '../actions/findbar';
|
||||
import FindBar from './FindBar';
|
||||
import {
|
||||
SHOW_COLLECTION,
|
||||
CREATE_COLLECTION,
|
||||
HELP,
|
||||
runCommand,
|
||||
navigateToCollection,
|
||||
createNewEntryInCollection
|
||||
} from '../actions/findbar';
|
||||
import { AppHeader, Loader } from '../components/UI/index';
|
||||
import styles from './App.css';
|
||||
import pluralize from 'pluralize';
|
||||
|
||||
class App extends React.Component {
|
||||
|
||||
state = {
|
||||
navDrawerIsVisible: false
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch(loadConfig());
|
||||
}
|
||||
@ -62,7 +74,7 @@ class App extends React.Component {
|
||||
id: `show_${collection.get('name')}`,
|
||||
pattern: `Show ${pluralize(collection.get('label'))}`,
|
||||
type: SHOW_COLLECTION,
|
||||
payload: { collectionName:collection.get('name') }
|
||||
payload: { collectionName: collection.get('name') }
|
||||
});
|
||||
|
||||
if (defaultCommands.length < 5) defaultCommands.push(`show_${collection.get('name')}`);
|
||||
@ -72,7 +84,7 @@ class App extends React.Component {
|
||||
id: `create_${collection.get('name')}`,
|
||||
pattern: `Create new ${pluralize(collection.get('label'), 1)}(:itemName as ${pluralize(collection.get('label'), 1)} Name)`,
|
||||
type: CREATE_COLLECTION,
|
||||
payload: { collectionName:collection.get('name') }
|
||||
payload: { collectionName: collection.get('name') }
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -83,8 +95,23 @@ class App extends React.Component {
|
||||
return { commands, defaultCommands };
|
||||
}
|
||||
|
||||
toggleNavDrawer = () => {
|
||||
this.setState({
|
||||
navDrawerIsVisible: !this.state.navDrawerIsVisible
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { user, config, children } = this.props;
|
||||
const { navDrawerIsVisible } = this.state;
|
||||
const {
|
||||
user,
|
||||
config,
|
||||
children,
|
||||
collections,
|
||||
runCommand,
|
||||
navigateToCollection,
|
||||
createNewEntryInCollection
|
||||
} = this.props;
|
||||
|
||||
if (config === null) {
|
||||
return null;
|
||||
@ -105,19 +132,42 @@ class App extends React.Component {
|
||||
const { commands, defaultCommands } = this.generateFindBarCommands();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<header>
|
||||
<div className={styles.alignable}>
|
||||
<FindBar
|
||||
commands={commands}
|
||||
defaultCommands={defaultCommands}
|
||||
/>
|
||||
<Layout theme={styles}>
|
||||
<NavDrawer
|
||||
active={navDrawerIsVisible}
|
||||
scrollY
|
||||
permanentAt="md"
|
||||
>
|
||||
<nav className={styles.nav}>
|
||||
<h1>Collections</h1>
|
||||
<Navigation type='vertical'>
|
||||
{
|
||||
collections.valueSeq().map(collection =>
|
||||
<Link
|
||||
key={collection.get('name')}
|
||||
onClick={navigateToCollection.bind(this, collection.get('name'))}
|
||||
>
|
||||
{collection.get('label')}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
</Navigation>
|
||||
</nav>
|
||||
</NavDrawer>
|
||||
<Panel scrollY>
|
||||
<AppHeader
|
||||
collections={collections}
|
||||
commands={commands}
|
||||
defaultCommands={defaultCommands}
|
||||
runCommand={runCommand}
|
||||
onCreateEntryClick={createNewEntryInCollection}
|
||||
toggleNavDrawer={this.toggleNavDrawer}
|
||||
/>
|
||||
<div className={`${styles.alignable} ${styles.main}`}>
|
||||
{children}
|
||||
</div>
|
||||
</header>
|
||||
<div className={`${styles.alignable} ${styles.main}`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -129,4 +179,19 @@ function mapStateToProps(state) {
|
||||
return { auth, config, collections, user };
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(App);
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
dispatch,
|
||||
runCommand: (type, payload) => {
|
||||
dispatch(runCommand(type, payload));
|
||||
},
|
||||
navigateToCollection: (collection) => {
|
||||
dispatch(navigateToCollection(collection));
|
||||
},
|
||||
createNewEntryInCollection: (collectionName) => {
|
||||
dispatch(createNewEntryInCollection(collectionName));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(App);
|
||||
|
@ -1 +0,0 @@
|
||||
import './FindBar';
|
@ -1,3 +1,5 @@
|
||||
@import "material-icons.css";
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
-ms-text-size-adjust: 100%;
|
||||
@ -18,16 +20,6 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #272e30;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
|
||||
height: 54px;
|
||||
border-bottom: 2px solid #3ab7a5;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
:global #root, :global #root > * {
|
||||
height: 100%;
|
||||
}
|
||||
@ -44,19 +36,6 @@ h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
header input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #3ab7a5;
|
||||
padding: 3px 20px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:global {
|
||||
& .cms-widget {
|
||||
border-bottom: 1px solid #e8eae8;
|
||||
|
@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { AppContainer } from 'react-hot-loader'
|
||||
import Root from './root'
|
||||
import { AppContainer } from 'react-hot-loader';
|
||||
import Root from './root';
|
||||
import registry from './lib/registry';
|
||||
import 'file?name=index.html!../example/index.html';
|
||||
import 'react-toolbox/lib/commons.scss';
|
||||
import './index.css';
|
||||
|
||||
// Create mount element dynamically
|
||||
|
35
src/material-icons.css
Normal file
35
src/material-icons.css
Normal file
@ -0,0 +1,35 @@
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url('material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
|
||||
url('material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
|
||||
url('material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
:global .material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
Reference in New Issue
Block a user