Merge branch 'react-pr' of https://github.com/netlify/netlify-cms into react-pr

This commit is contained in:
Cássio Zen
2016-09-19 15:31:12 -03:00
20 changed files with 355 additions and 175 deletions

View File

@ -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.');

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

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,3 +1,4 @@
import './Card';
import './Icon';
import './Toast';
import './FindBar';

View File

@ -1,3 +1,10 @@
.layout .navDrawer .drawerContent {
padding-top: 54px;
}
.nav {
display: block;
padding: 1rem;
}
.main {
padding-top: 54px;
}

View File

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

View File

@ -1 +0,0 @@
import './FindBar';

View File

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

View File

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