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.

Sign up for GitHub

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

Use resizable panes #70

Merged
merged 4 commits into from
Apr 7, 2016
Merged

Use resizable panes #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f4ddb2
Add forked react-split-pane
thani-sh Apr 7, 2016
9001f7c
Add custom split components
thani-sh Apr 7, 2016
72bdc26
Use resizable split panes
thani-sh Apr 7, 2016
33e0a85
Fix stories scroll
thani-sh Apr 7, 2016
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
43 changes: 27 additions & 16 deletions dist/client/ui/action_logger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
};

Expand All @@ -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'
)
),
Expand Down
4 changes: 3 additions & 1 deletion dist/client/ui/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
36 changes: 29 additions & 7 deletions dist/client/ui/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,10 +154,19 @@ var StorybookControls = function (_React$Component) {
var kindNames = this.getKindNames();
var mainStyle = {
fontFamily: '\n -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",\n "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif\n ',
padding: '20px 10px 10px 10px',
color: '#444'
};

var h1WrapStyle = {
background: '#F7F7F7',
borderBottom: '1px solid #EEE',
paddingBottom: '20px',
position: 'absolute',
top: '20px',
right: '10px',
left: '20px'
};

var h1Style = {
textTransform: 'uppercase',
letterSpacing: '3.5px',
Expand All @@ -168,21 +177,34 @@ var StorybookControls = function (_React$Component) {
textAlign: 'center',
borderRadius: '2px',
padding: '5px',
margin: '0 0 20px 0',
cursor: 'default'
cursor: 'default',
margin: 0
};

var listStyle = {
overflowY: 'auto',
position: 'absolute',
top: '68px',
right: '10px',
bottom: 0,
left: '20px'
};

return _react2.default.createElement(
'div',
{ style: mainStyle },
_react2.default.createElement(
'h3',
{ style: h1Style },
'React Storybook'
'div',
{ style: h1WrapStyle },
_react2.default.createElement(
'h3',
{ style: h1Style },
'React Storybook'
)
),
_react2.default.createElement(
'div',
null,
{ style: listStyle },
kindNames.map(this.renderKind.bind(this))
)
);
Expand Down
108 changes: 59 additions & 49 deletions dist/client/ui/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -39,79 +51,77 @@ 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'
position: 'absolute',
width: '100%',
height: '100%'
};

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
)
)
)
);
}
Expand Down
84 changes: 84 additions & 0 deletions dist/client/ui/layout_hsplit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
'use strict';

Object.defineProperty(exports, "__esModule", {
value: true
});

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var HSplit = function (_Component) {
(0, _inherits3.default)(HSplit, _Component);

function HSplit() {
var _Object$getPrototypeO;

(0, _classCallCheck3.default)(this, HSplit);

for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

var _this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(HSplit)).call.apply(_Object$getPrototypeO, [this].concat(args)));

_this.state = {};
return _this;
}

(0, _createClass3.default)(HSplit, [{
key: 'render',
value: function render() {
var wrapStyle = {
cursor: 'row-resize',
width: '100%',
height: '10px',
marginTop: '-10px',
marginBottom: '-10px',
position: 'relative'
};

var spanStyle = {
height: '1px',
width: '20px',
top: '5px',
left: '50%',
marginLeft: '-10px',
position: 'absolute',
borderTop: 'solid 1px rgba(0,0,0,0.1)',
borderBottom: 'solid 1px rgba(0,0,0,0.1)'
};

return _react2.default.createElement(
'div',
{ style: wrapStyle },
_react2.default.createElement('span', { style: spanStyle })
);
}
}]);
return HSplit;
}(_react.Component);

exports.default = HSplit;
Loading