Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add styles to the clear button #71

Closed
wants to merge 4 commits into from
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use resizable split panes
thani-sh committed Apr 7, 2016

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 72bdc26cddea958a40b4418ae0fe7b0d6a82f237
43 changes: 27 additions & 16 deletions dist/client/ui/action_logger.js
Original file line number Diff line number Diff line change
@@ -10,25 +10,36 @@ var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var h3Style = {
var preStyle = {
color: '#666',
overflowY: 'auto',
padding: '8px',
boxSizing: 'border-box',
border: '1px solid #ECECEC',
borderRadius: 4,
backgroundColor: '#FFF',
margin: '0',
position: 'absolute',
top: '30px',
right: 0,
bottom: 0,
left: 0
};

var wrapStyle = {
position: 'relative',
height: '100%'
};

var headStyle = {
fontFamily: '\n -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",\n "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif\n ',
color: '#444',
letterSpacing: '2px',
fontSize: 12,
margin: '12px 0 5px 0'
};

var preStyle = {
height: 105,
overflowY: 'auto',
backgroundColor: '#FFF',
borderRadius: 3,
padding: 8,
color: '#666',
border: '1px solid #EAEAEA'
margin: '0 0 0 5px'
};

var clearButtonStyle = {
var btnStyle = {
marginLeft: 5
};

@@ -37,14 +48,14 @@ var ActionLogger = function ActionLogger(_ref) {
var onClear = _ref.onClear;
return _react2.default.createElement(
'div',
null,
{ style: wrapStyle },
_react2.default.createElement(
'h3',
{ style: h3Style },
{ style: headStyle },
'ACTION LOGGER',
_react2.default.createElement(
'button',
{ style: clearButtonStyle, onClick: onClear },
{ style: btnStyle, onClick: onClear },
'CLEAR'
)
),
4 changes: 3 additions & 1 deletion dist/client/ui/admin.js
Original file line number Diff line number Diff line change
@@ -83,7 +83,9 @@ function getIframe(data) {
var iframeStyle = {
width: '100%',
height: '100%',
border: '0'
border: '1px solid #ECECEC',
borderRadius: 4,
backgroundColor: '#FFF'
};

// We need to send dataId via queryString
107 changes: 59 additions & 48 deletions dist/client/ui/layout.js
Original file line number Diff line number Diff line change
@@ -28,6 +28,18 @@ var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _layout_vsplit = require('./layout_vsplit');

var _layout_vsplit2 = _interopRequireDefault(_layout_vsplit);

var _layout_hsplit = require('./layout_hsplit');

var _layout_hsplit2 = _interopRequireDefault(_layout_hsplit);

var _reactSplitPane = require('@mnmtanish/react-split-pane');

var _reactSplitPane2 = _interopRequireDefault(_reactSplitPane);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Layout = function (_React$Component) {
@@ -39,79 +51,78 @@ var Layout = function (_React$Component) {
}

(0, _createClass3.default)(Layout, [{
key: 'componentWillMount',
value: function componentWillMount() {
this.updateHeight();
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
window.addEventListener('resize', this.updateHeight.bind(this));
}
}, {
key: 'updateHeight',
value: function updateHeight() {
var _document = document;
var documentElement = _document.documentElement;
var body = _document.body;

var height = documentElement.clientHeight || body.clientHeight;
height -= 20;
this.setState({ height: height });
}
}, {
key: 'render',
value: function render() {
var _props = this.props;
var controls = _props.controls;
var preview = _props.preview;
var actionLogger = _props.actionLogger;
var height = this.state.height;


var rootStyles = {
height: height,
padding: 8,
height: '100vh',
backgroundColor: '#F7F7F7'
};

var controlsStyle = {
width: 240,
float: 'left',
height: '100%',
overflowY: 'auto'
overflowY: 'auto',
padding: '5px 0 5px 10px',
boxSizing: 'border-box'
};

var actionStyle = {
height: 150,
marginLeft: 250
position: 'absolute',
width: '100%',
height: '100%',
padding: '5px 10px 10px 0',
boxSizing: 'border-box'
};

var previewStyle = {
height: height - actionStyle.height - 25,
marginLeft: 250,
border: '1px solid #ECECEC',
borderRadius: 4,
padding: 5,
backgroundColor: '#FFF'
position: 'absolute',
width: '100%',
height: '100%',
padding: '10px 10px 10px 0',
boxSizing: 'border-box'
};

var vsplit = _react2.default.createElement(_layout_vsplit2.default, null);
var hsplit = _react2.default.createElement(_layout_hsplit2.default, null);

var onDragStart = function onDragStart() {
document.body.classList.add('dragging');
};

var onDragEnd = function onDragEnd() {
document.body.classList.remove('dragging');
};

return _react2.default.createElement(
'div',
{ style: rootStyles },
_react2.default.createElement(
'div',
{ style: controlsStyle },
controls
),
_react2.default.createElement(
'div',
{ style: previewStyle },
preview
),
_react2.default.createElement(
'div',
{ style: actionStyle },
actionLogger
_reactSplitPane2.default,
{ split: 'vertical', minSize: 250, resizerChildren: vsplit, onDragStarted: onDragStart, onDragFinished: onDragEnd },
_react2.default.createElement(
'div',
{ style: controlsStyle },
controls
),
_react2.default.createElement(
_reactSplitPane2.default,
{ split: 'horizontal', primary: 'second', minSize: 100, defaultSize: 200, resizerChildren: hsplit, onDragStarted: onDragStart, onDragFinished: onDragEnd },
_react2.default.createElement(
'div',
{ style: previewStyle },
preview
),
_react2.default.createElement(
'div',
{ style: actionStyle },
actionLogger
)
)
)
);
}
2 changes: 1 addition & 1 deletion dist/server/index.html.js
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
});

exports.default = function () {
return '\n <!DOCTYPE html>\n <html>\n <head>\n <title>React Storybook</title>\n <script type="text/javascript">\n window.dataId = \'' + _uuid2.default.v4() + '\';\n </script>\n </head>\n <body style="margin: 0;">\n <div id="root" />\n <script src="/static/admin.bundle.js"></script>\n </body>\n </html>\n ';
return '\n <!DOCTYPE html>\n <html>\n <head>\n <title>React Storybook</title>\n <script type="text/javascript">\n window.dataId = \'' + _uuid2.default.v4() + '\';\n </script>\n <style>\n /*\n When resizing panels, the drag event breaks if the cursor\n moves over the iframe. Add the \'dragging\' class to the body\n at drag start and remove it when the drag ends.\n */\n .dragging iframe {\n pointer-events: none;\n }\n </style>\n </head>\n <body style="margin: 0;">\n <div id="root" />\n <script src="/static/admin.bundle.js"></script>\n </body>\n </html>\n ';
};

var _uuid = require('uuid');
43 changes: 27 additions & 16 deletions src/client/ui/action_logger.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,46 @@
import React from 'react';

const h3Style = {
const preStyle = {
color: '#666',
overflowY: 'auto',
padding: '8px',
boxSizing: 'border-box',
border: '1px solid #ECECEC',
borderRadius: 4,
backgroundColor: '#FFF',
margin: '0',
position: 'absolute',
top: '30px',
right: 0,
bottom: 0,
left: 0,
};

const wrapStyle = {
position: 'relative',
height: '100%',
};

const headStyle = {
fontFamily: `
-apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
"Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
`,
color: '#444',
letterSpacing: '2px',
fontSize: 12,
margin: '12px 0 5px 0',
};

const preStyle = {
height: 105,
overflowY: 'auto',
backgroundColor: '#FFF',
borderRadius: 3,
padding: 8,
color: '#666',
border: '1px solid #EAEAEA',
margin: '0 0 0 5px',
};

const clearButtonStyle = {
const btnStyle = {
marginLeft: 5,
};

const ActionLogger = ({ actionLog, onClear }) => (
<div>
<h3 style={h3Style}>
<div style={wrapStyle}>
<h3 style={headStyle}>
ACTION LOGGER
<button style={clearButtonStyle} onClick={onClear}>CLEAR</button>
<button style={btnStyle} onClick={onClear}>CLEAR</button>
</h3>
<pre style={preStyle}>{actionLog}</pre>
</div>
4 changes: 3 additions & 1 deletion src/client/ui/admin.js
Original file line number Diff line number Diff line change
@@ -48,7 +48,9 @@ export function getIframe(data) {
const iframeStyle = {
width: '100%',
height: '100%',
border: '0',
border: '1px solid #ECECEC',
borderRadius: 4,
backgroundColor: '#FFF',
};

// We need to send dataId via queryString
Loading