Skip to content

Commit

Permalink
Merge pull request #13 from kadirahq/change-styles
Browse files Browse the repository at this point in the history
Change styles a bit for much better look and feel.
  • Loading branch information
arunoda authored Sep 6, 2016
2 parents aa433e6 + 740d5d7 commit 07fbdca
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 7 deletions.
2 changes: 1 addition & 1 deletion .storybook/addons.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
require('../src').register();
import '@kadira/storybook/addons'
require('../src').register();
11 changes: 7 additions & 4 deletions src/components/Panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { js_beautify as beautify } from 'js-beautify'; // eslint-disable-line ca
const styles = {
panel: {
padding: '5px',
width: '100%',
width: 380,
position: 'relative',
},
noKnobs: {
Expand All @@ -22,7 +22,8 @@ const styles = {
},
resetButton: {
position: 'absolute',
bottom: 0, right: 0,
bottom: 11,
right: 10,
border: 'none',
borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
Expand Down Expand Up @@ -155,8 +156,10 @@ export default class Panel extends React.Component {
}

return (
<div style={styles.panel}>
<PropForm fields={fieldsArray} onFieldChange={this._handleChange} />
<div>
<div style={styles.panel}>
<PropForm fields={fieldsArray} onFieldChange={this._handleChange} />
</div>
<button style={styles.resetButton} onClick={this._reset}>RESET</button>
</div>
);
Expand Down
8 changes: 6 additions & 2 deletions src/components/PropField.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const stylesheet = {
height: '26px',
width: '100%',
outline: 'none',
border: '1px solid rgb(236, 236, 236)',
border: '1px solid #ececec',
fontSize: '12px',
padding: '5px',
color: 'rgb(130, 130, 130)',
Expand All @@ -31,6 +31,10 @@ const stylesheet = {
fontSize: '13px',
color: 'rgb(68, 68, 68)',
},
object: {
border: '1px solid #ececec',
padding: '5px'
}
};

stylesheet.textarea = {
Expand Down Expand Up @@ -86,7 +90,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={stylesheet.object}>
<AceEditor
mode="javascript"
theme="github"
Expand Down
8 changes: 8 additions & 0 deletions src/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@ storiesOf('Button', module)
{createKnob('children', 'Hello')}
</Button>
))
.add('another view', () => (
<Button
onClick={ action('button clicked') }
style={createKnob('style', { width: '70px' }, 'object')}
>
{createKnob('children', 'Hello')}
</Button>
))
.add('default view with different knobs', () => (
<Button
onClick={ action('button clicked') }
Expand Down

0 comments on commit 07fbdca

Please sign in to comment.