Skip to content

Commit

Permalink
Update Home and Editor styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@arisgk
arisgk committed Sep 16, 2017
1 parent 1ea98ac commit 8864f25
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 22 deletions.
32 changes: 32 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"history": "^4.7.2",
"material-ui": "^0.19.1",
"prop-types": "^15.5.10",
"radium": "^0.19.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
Expand Down
8 changes: 5 additions & 3 deletions src/components/Home/AutocompleteEditor/AutocompleteEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createAutocompletePlugin from 'draft-js-mention-plugin';
import * as schemas from '../../../schemas/propTypes';
import './styles/editor.css';
import './styles/autocomplete.css';

const mentionPlugin = createAutocompletePlugin({
Expand Down Expand Up @@ -31,14 +32,14 @@ const plugins = [mentionPlugin, hashtagPlugin, relationPlugin];

const styles = {
root: {
padding: 20,
width: 600,
width: '96%',
maxWidth: 800,
},
editor: {
border: '1px solid #ddd',
cursor: 'text',
fontSize: 16,
minHeight: 40,
minHeight: 120,
padding: 10,
},
};
Expand Down Expand Up @@ -90,6 +91,7 @@ class AutocompleteEditor extends Component {
onChange={this.handleEditorChange}
ref={(editor) => { this.editor = editor; }}
plugins={plugins}
placeholder="You can add @persons, #hashtags or <>relations"
spellCheck
/>
<MentionSuggestions
Expand Down
42 changes: 24 additions & 18 deletions src/components/Home/AutocompleteEditor/__snapshots__/AutocompleteEditor.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ exports[`AutocompleteEditor renders correctly 1`] = `
<div
style={
Object {
"padding": 20,
"width": 600,
"maxWidth": 800,
"width": "96%",
}
}
>
Expand All @@ -16,7 +16,7 @@ exports[`AutocompleteEditor renders correctly 1`] = `
"border": "1px solid #ddd",
"cursor": "text",
"fontSize": 16,
"minHeight": 40,
"minHeight": 120,
"padding": 10,
}
}
Expand Down Expand Up @@ -110,6 +110,7 @@ exports[`AutocompleteEditor renders correctly 1`] = `
}
}
onChange={[Function]}
placeholder="You can add @persons, #hashtags or <>relations"
plugins={
Array [
Object {
Expand Down Expand Up @@ -199,8 +200,8 @@ exports[`AutocompleteEditor renders correctly 2`] = `
<div
style={
Object {
"padding": 20,
"width": 600,
"maxWidth": 800,
"width": "96%",
}
}
>
Expand All @@ -211,7 +212,7 @@ exports[`AutocompleteEditor renders correctly 2`] = `
"border": "1px solid #ddd",
"cursor": "text",
"fontSize": 16,
"minHeight": 40,
"minHeight": 120,
"padding": 10,
}
}
Expand Down Expand Up @@ -305,6 +306,7 @@ exports[`AutocompleteEditor renders correctly 2`] = `
}
}
onChange={[Function]}
placeholder="You can add @persons, #hashtags or <>relations"
plugins={
Array [
Object {
Expand Down Expand Up @@ -407,8 +409,8 @@ exports[`AutocompleteEditor renders correctly 3`] = `
<div
style={
Object {
"padding": 20,
"width": 600,
"maxWidth": 800,
"width": "96%",
}
}
>
Expand All @@ -419,7 +421,7 @@ exports[`AutocompleteEditor renders correctly 3`] = `
"border": "1px solid #ddd",
"cursor": "text",
"fontSize": 16,
"minHeight": 40,
"minHeight": 120,
"padding": 10,
}
}
Expand Down Expand Up @@ -513,6 +515,7 @@ exports[`AutocompleteEditor renders correctly 3`] = `
}
}
onChange={[Function]}
placeholder="You can add @persons, #hashtags or <>relations"
plugins={
Array [
Object {
Expand Down Expand Up @@ -602,8 +605,8 @@ exports[`AutocompleteEditor renders correctly 4`] = `
<div
style={
Object {
"padding": 20,
"width": 600,
"maxWidth": 800,
"width": "96%",
}
}
>
Expand All @@ -614,7 +617,7 @@ exports[`AutocompleteEditor renders correctly 4`] = `
"border": "1px solid #ddd",
"cursor": "text",
"fontSize": 16,
"minHeight": 40,
"minHeight": 120,
"padding": 10,
}
}
Expand Down Expand Up @@ -708,6 +711,7 @@ exports[`AutocompleteEditor renders correctly 4`] = `
}
}
onChange={[Function]}
placeholder="You can add @persons, #hashtags or <>relations"
plugins={
Array [
Object {
Expand Down Expand Up @@ -806,8 +810,8 @@ exports[`AutocompleteEditor renders correctly 5`] = `
<div
style={
Object {
"padding": 20,
"width": 600,
"maxWidth": 800,
"width": "96%",
}
}
>
Expand All @@ -818,7 +822,7 @@ exports[`AutocompleteEditor renders correctly 5`] = `
"border": "1px solid #ddd",
"cursor": "text",
"fontSize": 16,
"minHeight": 40,
"minHeight": 120,
"padding": 10,
}
}
Expand Down Expand Up @@ -912,6 +916,7 @@ exports[`AutocompleteEditor renders correctly 5`] = `
}
}
onChange={[Function]}
placeholder="You can add @persons, #hashtags or <>relations"
plugins={
Array [
Object {
Expand Down Expand Up @@ -1019,8 +1024,8 @@ exports[`AutocompleteEditor renders correctly 6`] = `
<div
style={
Object {
"padding": 20,
"width": 600,
"maxWidth": 800,
"width": "96%",
}
}
>
Expand All @@ -1031,7 +1036,7 @@ exports[`AutocompleteEditor renders correctly 6`] = `
"border": "1px solid #ddd",
"cursor": "text",
"fontSize": 16,
"minHeight": 40,
"minHeight": 120,
"padding": 10,
}
}
Expand Down Expand Up @@ -1125,6 +1130,7 @@ exports[`AutocompleteEditor renders correctly 6`] = `
}
}
onChange={[Function]}
placeholder="You can add @persons, #hashtags or <>relations"
plugins={
Array [
Object {
Expand Down
3 changes: 3 additions & 0 deletions src/components/Home/AutocompleteEditor/styles/editor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.public-DraftEditorPlaceholder-root {
opacity: 0.54;
}
16 changes: 15 additions & 1 deletion src/components/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import Radium from 'radium';
import AppBar from 'material-ui/AppBar';
import AutocompleteEditorContainer from '../../containers/AutocompleteEditorContainer';

Expand All @@ -11,16 +12,29 @@ const styles = {
main: {
flex: 'auto',
display: 'flex',
WebkitAlignItems: 'center',
AlignItems: 'center',
WebkitJustifyContent: 'center',
JustifyContent: 'center',
WebkitFlexDirection: 'column',
flexDirection: 'column',
paddingBottom: '10%',
},
h1: {
fontSize: '140%',
color: 'rgba(0,0,0,0.87)',
marginBottom: 24,
},
};

const Home = () => (
<div style={styles.container}>
<AppBar title="Autocomplete" />
<div style={styles.main}>
<h1 style={styles.h1}>Editor</h1>
<AutocompleteEditorContainer />
</div>
</div>
);

export default Home;
export default Radium(Home);
21 changes: 21 additions & 0 deletions src/components/Home/__snapshots__/Home.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`Home renders correctly 1`] = `
<div
data-radium={true}
style={
Object {
"display": "flex",
Expand All @@ -16,13 +17,33 @@ exports[`Home renders correctly 1`] = `
zDepth={1}
/>
<div
data-radium={true}
style={
Object {
"AlignItems": "center",
"JustifyContent": "center",
"WebkitAlignItems": "center",
"WebkitFlexDirection": "column",
"WebkitJustifyContent": "center",
"display": "flex",
"flex": "auto",
"flexDirection": "column",
"paddingBottom": "10%",
}
}
>
<h1
data-radium={true}
style={
Object {
"color": "rgba(0,0,0,0.87)",
"fontSize": "140%",
"marginBottom": 24,
}
}
>
Editor
</h1>
<Connect(AutocompleteEditor) />
</div>
</div>
Expand Down

0 comments on commit 8864f25

Please sign in to comment.