Merge pull request #10 from kadirahq/style-improvements

Style improvements
storybookjs · Aug 30, 2016 · bf31747 · bf31747
2 parents eb45329 + 0f160ee
commit bf31747
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/src/components/Panel.js b/src/components/Panel.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropForm from './PropForm';
 import tosource from 'tosource';
-import { js_beautify as beautify } from 'js-beautify';
+import { js_beautify as beautify } from 'js-beautify'; // eslint-disable-line camelcase
 
 const styles = {
   panel: {
     padding: '5px',
     width: '100%',
+    position: 'relative',
   },
   noKnobs: {
     fontFamily: `
@@ -20,10 +21,16 @@ const styles = {
     padding: '10px',
   },
   resetButton: {
-    color: 'rgb(130, 130, 130)',
-    float: 'right',
-    marginRight: '5px',
-    marginTop: '5px',
+    position: 'absolute',
+    bottom: 0, right: 0,
+    border: 'none',
+    borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
+    borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
+    background: 'rgba(255, 255, 255, 0.5)',
+    padding: '5px 10px',
+    borderRadius: '4px 0 0 0',
+    color: 'rgba(0, 0, 0, 0.5)',
+    outline: 'none',
   },
 };
 

diff --git a/src/components/PropField.js b/src/components/PropField.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import AceEditor from 'react-ace';
-import brace from 'brace';
 
 import 'brace/mode/javascript';
 import 'brace/theme/github';
@@ -44,6 +43,11 @@ stylesheet.checkbox = {
   width: 'auto',
 };
 
+stylesheet.objectInputLabel = {
+  ...stylesheet.label,
+  verticalAlign: 'top',
+};
+
 export default class PropField extends React.Component {
   constructor(props) {
     super(props);
@@ -82,7 +86,7 @@ export default class PropField extends React.Component {
 
     if (type === 'object') {
       inputElem = (
-        <div style={{border: '1px solid rgb(236, 236, 236)', padding: '5px'}}>
+        <div style={{ border: '1px solid rgb(236, 236, 236)', padding: '5px' }}>
           <AceEditor
             mode="javascript"
             theme="github"
@@ -91,8 +95,8 @@ export default class PropField extends React.Component {
             name={this.props.name}
             width="100%"
             height="120px"
-            editorProps={{$blockScrolling: true}}
-            setOptions={{showLineNumbers: false}}
+            editorProps={{ $blockScrolling: true }}
+            setOptions={{ showLineNumbers: false }}
             showPrintMargin={false}
             showGutter={false}
             highlightActiveLine={false}
@@ -126,9 +130,12 @@ export default class PropField extends React.Component {
       );
     }
 
+    const labelStyles =
+      type === 'object' ? stylesheet.objectInputLabel : stylesheet.label;
+
     return (
       <div style={stylesheet.field}>
-        <label htmlFor={this.props.name} style={stylesheet.label}>
+        <label htmlFor={this.props.name} style={labelStyles}>
           {`${this.props.name}`}
         </label>
         { inputElem }

diff --git a/src/components/PropForm.js b/src/components/PropForm.js
@@ -12,7 +12,6 @@ const stylesheet = {
     boxSizing: 'border-box',
     width: '100%',
     maxWidth: '500px',
-    margin: '0 auto',
     borderCollapse: 'separate',
     borderSpacing: '5px',
   },