From 75fb606097b820e9a1e76d398061f7ffeea7bcec Mon Sep 17 00:00:00 2001 From: Scott Tolksdorf Date: Wed, 4 May 2016 01:19:33 -0400 Subject: [PATCH] Built a new pane split component --- client/homebrew/homePage/homePage.jsx | 53 ++++++++++--- client/homebrew/homePage/homePage.less | 2 + client/homebrew/homebrew.less | 52 ++++++++++++- client/homebrew/navbar/navbar.less | 4 +- .../homebrew/pageContainer/pageContainer.less | 6 +- client/homebrew/splitPane/splitPane.jsx | 76 +++++++++++++++++++ client/homebrew/splitPane/splitPane.less | 16 ++++ shared/naturalCrit/nav/nav.jsx | 4 +- shared/naturalCrit/nav/nav.less | 10 ++- 9 files changed, 204 insertions(+), 19 deletions(-) create mode 100644 client/homebrew/splitPane/splitPane.jsx create mode 100644 client/homebrew/splitPane/splitPane.less diff --git a/client/homebrew/homePage/homePage.jsx b/client/homebrew/homePage/homePage.jsx index 3cbb7adf8..946e0261c 100644 --- a/client/homebrew/homePage/homePage.jsx +++ b/client/homebrew/homePage/homePage.jsx @@ -9,7 +9,7 @@ var Editor = require('../editor/editor.jsx'); //var WelcomeText = require('./welcomeMessage.js'); - +var SplitPane = require('../splitPane/splitPane.jsx'); var Nav = require('naturalCrit/nav/nav.jsx'); @@ -58,7 +58,7 @@ var HomePage = React.createClass({ render : function(){ return( -
+
+
+ + +
+ one +
+ +
+ two +
+ + + + + -
-
- -
-
- -
+ + Create your own @@ -94,3 +104,28 @@ var HomePage = React.createClass({ }); module.exports = HomePage; + + +/* +
+ test + +
+ +
+*/ + + +/* + +
+
+ +
+
+ +
+
+ + +*/ \ No newline at end of file diff --git a/client/homebrew/homePage/homePage.less b/client/homebrew/homePage/homePage.less index 6f499341e..cf419abd2 100644 --- a/client/homebrew/homePage/homePage.less +++ b/client/homebrew/homePage/homePage.less @@ -1,5 +1,7 @@ .homePage{ + + position : relative; a.floatingNewButton{ .animate(background-color); diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less index f454f1bd9..bfd045d61 100644 --- a/client/homebrew/homebrew.less +++ b/client/homebrew/homebrew.less @@ -5,13 +5,61 @@ @import 'naturalCrit/styles/tooltip.less'; html,body, #reactContainer{ - min-height: 100%; + min-height: 100vh; + height: 100vh; + margin: 0; font-family : 'Open Sans', sans-serif; + //overflow: hidden; } .homebrew{ background-color: @steel; - height : 100%; + + height: 100%; + + .page{ + height : 100%; + display: flex; + flex-direction: column; + + + nav{ + //height : 22px; + } + + .content{ + background-color: red; + flex: auto; + //position: relative; + + + + .woo{ + background-color: @red; + } + .cool{ + background-color: @green; + height : 500px; + } + + + .temp{ + flex: auto; + overflow-y: scroll; + + .woo{ + width: 50px; + height : 2000px; + background-color: green; + + } + + } + } + } + + + .paneSplit{ width : 100%; diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less index 70f54163a..06b55bd98 100644 --- a/client/homebrew/navbar/navbar.less +++ b/client/homebrew/navbar/navbar.less @@ -6,8 +6,8 @@ font-size: 12px; div{ - margin-top: 3px; - margin-bottom: -3px; + margin-top: 2px; + margin-bottom: -2px; } color : white; diff --git a/client/homebrew/pageContainer/pageContainer.less b/client/homebrew/pageContainer/pageContainer.less index dbf8d297a..dd3cb5f19 100644 --- a/client/homebrew/pageContainer/pageContainer.less +++ b/client/homebrew/pageContainer/pageContainer.less @@ -2,9 +2,11 @@ .pageContainer{ background-color : @steel; - margin-top: 25px; overflow-y: scroll; - height : 100%; + +height :100%; + + .pages{ padding : 30px 0px; diff --git a/client/homebrew/splitPane/splitPane.jsx b/client/homebrew/splitPane/splitPane.jsx new file mode 100644 index 000000000..dee3feb12 --- /dev/null +++ b/client/homebrew/splitPane/splitPane.jsx @@ -0,0 +1,76 @@ +var React = require('react'); +var _ = require('lodash'); +var cx = require('classnames'); + +var SplitPane = React.createClass({ + + getInitialState: function() { + return { + storageKey : 'naturalcrit-pane-split-test', + size : null, + isDragging : false + }; + }, + + componentDidMount: function() { + var paneSize = window.localStorage.getItem(this.props.storageKey); + if(paneSize){ + this.setState({ + size : paneSize + }) + } + }, + + handleUp : function(){ + this.setState({ isDragging : false }) + }, + handleDown : function(){ + this.setState({ isDragging : true }) + }, + handleMove : function(e){ + if(!this.state.isDragging) return; + this.setState({ + size : e.pageX + }); + window.localStorage.setItem(this.props.storageKey, e.pageX); + }, + + renderDivider : function(){ + return
+ }, + + render : function(){ + return
+ {this.props.children[0]} + {this.renderDivider()} + {this.props.children[1]} +
+ } +}); + +var Pane = React.createClass({ + getDefaultProps: function() { + return { + width : null + }; + }, + render : function(){ + var styles = {}; + if(this.props.width){ + styles = { + flex : 'none', + width : this.props.width + 'px' + } + } + + return
+ {this.props.children} +
+ } +}); + + +module.exports = SplitPane; diff --git a/client/homebrew/splitPane/splitPane.less b/client/homebrew/splitPane/splitPane.less new file mode 100644 index 000000000..200c006da --- /dev/null +++ b/client/homebrew/splitPane/splitPane.less @@ -0,0 +1,16 @@ + +.splitPane{ + position : relative; + display : flex; + height : 100%; + outline : none; + flex-direction : row; + .pane{ + flex : 1; + } + .divider{ + width : 5px; + cursor : ew-resize; + background-color : black; + } +} \ No newline at end of file diff --git a/shared/naturalCrit/nav/nav.jsx b/shared/naturalCrit/nav/nav.jsx index ae03ab8b6..1b95c669e 100644 --- a/shared/naturalCrit/nav/nav.jsx +++ b/shared/naturalCrit/nav/nav.jsx @@ -6,7 +6,9 @@ var Nav = { base : React.createClass({ render : function(){ return } }), diff --git a/shared/naturalCrit/nav/nav.less b/shared/naturalCrit/nav/nav.less index b02c6031b..575cd4325 100644 --- a/shared/naturalCrit/nav/nav.less +++ b/shared/naturalCrit/nav/nav.less @@ -8,9 +8,13 @@ src : url('/assets/naturalCrit/logo/CODE Bold.otf'); } nav{ - display : flex; background-color : #333; - justify-content : space-between; + + .navContent{ + display : flex; + + justify-content : space-between; + } .navSection{ display : flex; align-items : center; @@ -51,7 +55,7 @@ nav{ } .navItem{ .animate(background-color); - padding : 5px 8px; + padding : 8px 12px; cursor : pointer; background-color : #333; font-size : 12px;