gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fold ToolbarPlugins into Toolbar

Browse Source
This commit is contained in:
Shawn Erquhart 2017-04-18 12:30:38 -04:00
parent b8dce2fb4b
commit 86b7b84637
14 changed files with 105 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Widgets/MarkdownControlElements/RawEditor/index.js
View File

@ -5,8 +5,7 @@ import htmlSyntax from 'markup-it/syntaxes/html';
import CaretPosition from 'textarea-caret-position';
import registry from '../../../../lib/registry';
import { createAssetProxy } from '../../../../valueObjects/AssetProxy';
import Toolbar from '../Toolbar';
import ToolbarPlugins from '../ToolbarPlugins';
import Toolbar from '../Toolbar/Toolbar';
import { Sticky } from '../../../UI/Sticky/Sticky';
import styles from './index.css';
@ -330,9 +329,6 @@ export default class RawEditor extends React.Component {
onLink={this.handleLink}
onToggleMode={this.handleToggle}
rawMode={rawMode}
/>
<ToolbarPlugins
selectionPosition={selectionPosition}
plugins={plugins}
onSubmit={this.handlePluginSubmit}
onAddAsset={onAddAsset}

33
src/components/Widgets/MarkdownControlElements/Toolbar.js
View File

@ -1,33 +0,0 @@
import React, { PropTypes } from 'react';
import { List } from 'immutable';
import ToolbarButton from './ToolbarButton';
import { Icon } from '../../UI';
import styles from './Toolbar.css';
function Toolbar(props) {
const { onH1, onH2, onBold, onItalic, onLink, onToggleMode, rawMode } = props;
return (
<div className={styles.Toolbar}>
<ToolbarButton label="Header 1" icon="h1" action={onH1}/>
<ToolbarButton label="Header 2" icon="h2" action={onH2}/>
<ToolbarButton label="Bold" icon="bold" action={onBold}/>
<ToolbarButton label="Italic" icon="italic" action={onItalic}/>
<ToolbarButton label="Link" icon="link" action={onLink}/>
<div className={styles.Toggle}>
<ToolbarButton label="Toggle Markdown" action={onToggleMode} active={rawMode}/>
</div>
</div>
);
}
Toolbar.propTypes = {
onH1: PropTypes.func.isRequired,
onH2: PropTypes.func.isRequired,
onBold: PropTypes.func.isRequired,
onItalic: PropTypes.func.isRequired,
onLink: PropTypes.func.isRequired,
onToggleMode: PropTypes.func.isRequired,
rawMode: PropTypes.bool,
};
export default Toolbar;

2
src/components/Widgets/MarkdownControlElements/Toolbar.css → src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.css
View File

@ -1,4 +1,4 @@
@import "../../UI/theme";
@import "../../../UI/theme";
.Toolbar {
z-index: 1000;

90
src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js Normal file
View File

@ -0,0 +1,90 @@
import React, { PropTypes } from 'react';
import { List } from 'immutable';
import ToolbarButton from './ToolbarButton';
import ToolbarPluginForm from './ToolbarPluginForm';
import { Icon } from '../../../UI';
import styles from './Toolbar.css';
export default class Toolbar extends React.Component {
static propTypes = {
onH1: PropTypes.func.isRequired,
onH2: PropTypes.func.isRequired,
onBold: PropTypes.func.isRequired,
onItalic: PropTypes.func.isRequired,
onLink: PropTypes.func.isRequired,
onToggleMode: PropTypes.func.isRequired,
rawMode: PropTypes.bool,
};
constructor(props) {
super(props);
this.state = {
openPlugin: null,
};
}
handlePlugin(plugin) {
return (e) => {
e.preventDefault();
this.setState({ openPlugin: plugin });
};
}
handleSubmit = (plugin, pluginData) => {
this.props.onSubmit(plugin, pluginData);
this.setState({ openPlugin: null });
};
handleCancel = (e) => {
this.setState({ openPlugin: null });
};
render() {
const {
onH1,
onH2,
onBold,
onItalic,
onLink,
onToggleMode,
rawMode,
plugins,
onAddAsset,
onRemoveAsset,
getAsset,
} = this.props;
const { openPlugin } = this.state;
return (
<div className={styles.Toolbar}>
<ToolbarButton label="Header 1" icon="h1" action={onH1}/>
<ToolbarButton label="Header 2" icon="h2" action={onH2}/>
<ToolbarButton label="Bold" icon="bold" action={onBold}/>
<ToolbarButton label="Italic" icon="italic" action={onItalic}/>
<ToolbarButton label="Link" icon="link" action={onLink}/>
<div className={styles.Toggle}>
<ToolbarButton label="Toggle Markdown" action={onToggleMode} active={rawMode}/>
</div>
{plugins.map(plugin => (
<ToolbarButton
key={`plugin-${plugin.get('id')}`}
label={plugin.get('label')}
icon={plugin.get('icon')}
action={this.handlePlugin(plugin)}
/>
))}
{openPlugin &&
<ToolbarPluginForm
plugin={openPlugin}
onSubmit={this.handleSubmit}
onCancel={this.handleCancel}
onAddAsset={onAddAsset}
onRemoveAsset={onRemoveAsset}
getAsset={getAsset}
/>
}
</div>
);
}
}

2
src/components/Widgets/MarkdownControlElements/ToolbarButton.css → src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarButton.css
View File

@ -1,4 +1,4 @@
@import "../../UI/theme";
@import "../../../UI/theme";
.button {
display: inline-block;

2
src/components/Widgets/MarkdownControlElements/ToolbarButton.js → src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarButton.js
View File

@ -1,6 +1,6 @@
import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { Icon } from '../../UI';
import { Icon } from '../../../UI';
import styles from './ToolbarButton.css';
const ToolbarButton = ({ label, icon, action, active }) => (

25
src/components/Widgets/MarkdownControlElements/ToolbarPlugins.css → src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarPluginForm.css
View File

@ -1,18 +1,4 @@
@import "../../UI/theme";
.root {
z-index: 1000;
display: inline-block;
}
.button {
width: 15px;
height: 15px;
border: 1px solid #444;
border-radius: 100%;
background: transparent;
line-height: 13px;
}
@import "../../../UI/theme";
.pluginForm {
position: absolute;
@ -34,19 +20,10 @@
}
}
.body {
padding: 0 12px 16px;
}
.menu {
list-style: none;
}
.menuItem {
display: inline-block;
}
.footer {
background-color: var(--backgroundColor);
padding: 10px 20px;

2
src/components/Widgets/MarkdownControlElements/ToolbarPluginForm.js → src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarPluginForm.js
View File

@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
import { Map } from 'immutable';
import { Button } from 'react-toolbox/lib/button';
import ToolbarPluginFormControl from './ToolbarPluginFormControl';
import styles from './ToolbarPlugins.css';
import styles from './ToolbarPluginForm.css';
export default class ToolbarPluginForm extends React.Component {
constructor(props) {

7
src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarPluginFormControl.css Normal file
View File

@ -0,0 +1,7 @@
.control {
composes: control from "../../../ControlPanel/ControlPane.css"
}
.label {
composes: label from "../../../ControlPanel/ControlPane.css";
}

2
src/components/Widgets/MarkdownControlElements/ToolbarPluginFormControl.js → src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarPluginFormControl.js
View File

@ -1,5 +1,5 @@
import React, { PropTypes } from 'react';
import { resolveWidget } from '../../Widgets';
import { resolveWidget } from '../../../Widgets';
import styles from './ToolbarPluginFormControl.css';
const ToolbarPluginFormControl = ({

7
src/components/Widgets/MarkdownControlElements/ToolbarPluginFormControl.css
View File

@ -1,7 +0,0 @@
.control {
composes: control from "../../ControlPanel/ControlPane.css"
}
.label {
composes: label from "../../ControlPanel/ControlPane.css";
}

73
src/components/Widgets/MarkdownControlElements/ToolbarPlugins.js
View File

@ -1,73 +0,0 @@
import React, { Component, PropTypes } from 'react';
import { fromJS } from 'immutable';
import { Button } from 'react-toolbox/lib/button';
import { Icon } from '../../UI';
import ToolbarButton from './ToolbarButton';
import ToolbarPluginForm from './ToolbarPluginForm';
import ToolbarPluginFormControl from './ToolbarPluginFormControl';
import toolbarStyles from './Toolbar.css';
import styles from './ToolbarPlugins.css';
export default class ToolbarPlugins extends Component {
static propTypes = {
plugins: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
onAddAsset: PropTypes.func.isRequired,
onRemoveAsset: PropTypes.func.isRequired,
getAsset: PropTypes.func.isRequired,
};
constructor(props) {
super(props);
this.state = {
openPlugin: null,
};
}
handlePlugin(plugin) {
return (e) => {
e.preventDefault();
this.setState({ openPlugin: plugin });
};
}
handleSubmit = (plugin, pluginData) => {
this.props.onSubmit(plugin, pluginData);
this.setState({ openPlugin: null });
};
handleCancel = (e) => {
this.setState({ openPlugin: null });
};
render() {
const { plugins, onAddAsset, onRemoveAsset, getAsset } = this.props;
const { openPlugin, pluginData } = this.state;
const classNames = [styles.root];
if (openPlugin) {
classNames.push(styles.openPlugin);
}
return (<div className={classNames.join(' ')}>
{plugins.map(plugin => (
<ToolbarButton
key={`plugin-${plugin.get('id')}`}
label={plugin.get('label')}
icon={plugin.get('icon')}
action={this.handlePlugin(plugin)}
/>
))}
{openPlugin &&
<ToolbarPluginForm
plugin={openPlugin}
onSubmit={this.handleSubmit}
onCancel={this.handleCancel}
onAddAsset={onAddAsset}
onRemoveAsset={onRemoveAsset}
getAsset={getAsset}
/>
}
</div>);
}
}

6
src/components/Widgets/MarkdownControlElements/VisualEditor/index.js
View File

@ -15,8 +15,7 @@ import registry from '../../../../lib/registry';
import { createAssetProxy } from '../../../../valueObjects/AssetProxy';
import { buildKeymap } from './keymap';
import createMarkdownParser from './parser';
import Toolbar from '../Toolbar';
import ToolbarPlugins from '../ToolbarPlugins';
import Toolbar from '../Toolbar/Toolbar';
import { Sticky } from '../../../UI/Sticky/Sticky';
import styles from './index.css';
@ -285,9 +284,6 @@ export default class Editor extends Component {
onItalic={this.handleItalic}
onLink={this.handleLink}
onToggleMode={this.handleToggle}
/>
<ToolbarPlugins
selectionPosition={selectionPosition}
plugins={plugins}
onSubmit={this.handlePluginSubmit}
onAddAsset={onAddAsset}

28
src/components/Widgets/MarkdownControlElements/constants.js
View File

@ -1,28 +0,0 @@
export const emptyParagraphBlock = {
nodes: [
{
kind: 'block',
type: 'paragraph',
nodes: [{
kind: 'text',
ranges: [{
text: '',
}],
}],
},
],
};
export const mediaproxyBlock = mediaproxy => ({
kind: 'block',
type: 'paragraph',
nodes: [{
kind: 'inline',
type: 'mediaproxy',
isVoid: true,
data: {
alt: mediaproxy.name,
src: mediaproxy.public_path,
},
}],
});