Status bar nearly done, first pass on the split pane workign for edit page

client/homebrew/architecture (T440s-002's conflicted copy 2016-01-03).json

@@ -0,0 +1,51 @@
+{
+	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\editPage\\editPage.jsx": [
+		"react",
+		"lodash",
+		"classnames",
+		"superagent",
+		"../phb/phb.jsx",
+		"../editor/editor.jsx"
+	],
+	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\sharePage\\sharePage.jsx": [
+		"react",
+		"lodash",
+		"classnames",
+		"../phb/phb.jsx"
+	],
+	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\statusbar\\statusbar.jsx": [
+		"react",
+		"lodash",
+		"classnames"
+	],
+	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\phb\\phb.jsx": [
+		"react",
+		"lodash",
+		"classnames",
+		"marked"
+	],
+	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\editor\\snippets.js": [],
+	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\editor\\editor.jsx": [
+		"react",
+		"lodash",
+		"classnames",
+		"./snippets.js"
+	],
+	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\homePage\\homePage.jsx": [
+		"react",
+		"lodash",
+		"classnames",
+		"../statusbar/statusbar.jsx",
+		"../phb/phb.jsx",
+		"../editor/editor.jsx"
+	],
+	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\homebrew.jsx": [
+		"react",
+		"lodash",
+		"classnames",
+		"pico-router",
+		"./editPage/editPage.jsx",
+		"./sharePage/sharePage.jsx",
+		"./homePage/homePage.jsx"
+	]
+}

client/homebrew/editPage/editPage.jsx

@@ -33,48 +33,42 @@ var EditPage = React.createClass({
 
 	handleTextChange : function(text){
 		this.setState({
-			text : text
+			text : text,
+			pending : true
 		});
-
-		//Ajax time
+		this.save();
 	},
 
-	handleSave : function(){
-		this.setState({
-			pending : true
-		})
+	save : _.debounce(function(){
 		request
 			.put('/homebrew/update/' + this.props.id)
 			.send({text : this.state.text})
 			.end((err, res) => {
-
-				console.log('err', err);
 				this.setState({
 					pending : false
 				})
 			})
-	},
+	}, 1500),
 
 	render : function(){
 
-		console.log(this.props.entry);
-
-		var temp;
-		if(this.state.pending){
-			temp = <div>processing</div>
-		}
-
-
 		return <div className='editPage'>
-			<button onClick={this.handleSave}>save</button> {temp}
-
 			<Statusbar
 				editId={this.props.entry.editId}
 				shareId={this.props.entry.shareId}
 				isPending={this.state.pending} />
 
-			<Editor text={this.state.text} onChange={this.handleTextChange} />
-			<PHB text={this.state.text} />
+			<div className='paneSplit'>
+				<div className='leftPane'>
+					<Editor text={this.state.text} onChange={this.handleTextChange} />
+				</div>
+				<div className='rightPane'>
+					<PHB text={this.state.text} />
+				</div>
+			</div>
+
+
+
 		</div>
 	}
 });

client/homebrew/editPage/editPage.less

@@ -1,3 +1,24 @@
 .editPage{
 
+	.paneSplit{
+		width : 100%;
+		max-height: 100%;
+		.leftPane, .rightPane{
+			display: inline-block;
+			vertical-align: top;
+			position: relative;
+			min-height: 100%;
+		}
+
+		.leftPane{
+			width : 40%;
+		}
+		.rightPane{
+			width : 60%;
+
+			overflow-y: scroll;
+		}
+
+	}
+
 }

client/homebrew/editor/editor.less

@@ -1,17 +1,20 @@
-.editor{
-	position : fixed;
-	height : 100%;
-	.textIcons{
-		display: inline-block;
-		vertical-align: top;
-		.icon{
-			cursor: pointer;
-			width : 30px;
-			height : 30px;
-			text-align: center;
-			line-height: 30px;
-			font-size: 1.5em;
 
+.editor{
+	position   : relative;
+	height     : 100%;
+	min-height : 100%;
+	width      : 100%;
+	.textIcons{
+		position       : absolute;
+		display        : inline-block;
+		vertical-align : top;
+		.icon{
+			height      : 30px;
+			width       : 30px;
+			cursor      : pointer;
+			font-size   : 1.5em;
+			line-height : 30px;
+			text-align  : center;
 			&:nth-child(8n + 1){ background-color: @blue; }
 			&:nth-child(8n + 2){ background-color: @orange; }
 			&:nth-child(8n + 3){ background-color: @teal; }
@@ -20,13 +23,13 @@
 			&:nth-child(8n + 6){ background-color: @silver; }
 			&:nth-child(8n + 7){ background-color: @yellow; }
 			&:nth-child(8n + 8){ background-color: @green; }
-
 		}
 	}
 	textarea{
-		display: inline-block;
-		height : 100%;
-		overflow-y: scroll;
-		width : 300px;
+		display    : inline-block;
+		resize     : none;
+		overflow-y : scroll;
+		height     : 100%;
+		width      : 100%;
 	}
 }

client/homebrew/homebrew.less

@@ -6,6 +6,7 @@
 
 html,body, #reactContainer{
 	min-height: 100%;
+	font-family      : 'Open Sans', sans-serif;
 }
 
 .homebrew{

client/homebrew/phb/phb.less

@@ -1,11 +1,11 @@
 
 .pbhPages{
+	background-color: @steel;
+	padding : 40px 0px;
 	&>.phb{
-		margin-bottom : 40px;
-		margin-top : 40px;
-		margin-left   : 400px;
 		box-shadow       : 1px 4px 14px #000;
-
+		margin-left: auto;
+		margin-right: auto;
 	}
 }
 @font-face {

client/homebrew/sharePage/sharePage.jsx

@@ -2,6 +2,8 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
+var Statusbar = require('../statusbar/statusbar.jsx');
+
 var PHB = require('../phb/phb.jsx');
 
 var SharePage = React.createClass({
@@ -19,9 +21,13 @@ var SharePage = React.createClass({
 	},
 
 	render : function(){
-		console.log(this.props.entry);
 		return(
 			<div className='sharePage'>
+				<Statusbar
+					shareId={this.props.entry.shareId}
+					/>
+
+
 				<PHB text={this.props.entry.text} />
 			</div>
 		);

client/homebrew/statusbar/statusbar.jsx

@@ -4,6 +4,8 @@ var cx = require('classnames');
 
 var Logo = require('naturalCrit/logo/logo.jsx');
 
+
+
 var Statusbar = React.createClass({
 
 	getDefaultProps: function() {
@@ -16,33 +18,39 @@ var Statusbar = React.createClass({
 		};
 	},
 
+	selectInputText : function(refName){
+		this.refs[refName].select();
+	},
+
 	renderInfo : function(){
 		//render last update?
 		//number of times viewed?
 	},
 
 	renderNewButton  : function(){
-		if(this.props.editId) return null;
+		if(this.props.editId || this.props.shareId) return null;
 
 		return <a className='newButton' target='_blank' href='/homebrew/new'>
-			<i className='fa fa-new' />
-			New
+			New <i className='fa fa-plus' />
 		</a>
 	},
 
-	renderLinks : function(){
+	renderEdit : function(){
 		if(!this.props.editId) return null;
 
-		return [
-			<div className='' key='edit'>
-				<span>Edit Link</span>
-				<input type='text' readOnly value={this.props.editId} />
-			</div>,
-			<div className='' key='share'>
-				<a herf={'/share/' + this.props.shareId}>Share Link</a>
-				<input type='text' readOnly value={this.props.shareId} />
-			</div>
-		]
+		return <div className='editField' key='edit' onClick={this.selectInputText.bind(this, 'edit')}>
+			<span>Edit Link</span>
+			<input type='text' readOnly value={'/homebrew/edit/' + this.props.editId} ref='edit' />
+		</div>
+	},
+
+	renderShare : function(){
+		if(!this.props.shareId) return null;
+
+		return <div className='shareField' key='share' onClick={this.selectInputText.bind(this, 'share')}>
+			<span>Share Link</span>
+			<input type='text' readOnly value={'/homebrew/share/' + this.props.shareId} ref='share'/>
+		</div>
 	},
 
 	renderStatus : function(){
@@ -58,14 +66,22 @@ var Statusbar = React.createClass({
 	},
 
 	render : function(){
-		console.log(this.props);
 		return <div className='statusbar'>
-			<Logo />
-			Statusbar Ready!
 
-			<div className='controls'>
-				{this.renderLinks()}
+			<Logo />
+
+			<div className='left'>
+				<div className='toolName'>
+					Home<i className='fa fa-beer' /><small>rewery</small>
+				</div>
+
+			</div>
+
+			<div className='controls right'>
 				{this.renderStatus()}
+				{this.renderEdit()}
+				{this.renderShare()}
+
 				{this.renderNewButton()}
 			</div>
 		</div>

client/homebrew/statusbar/statusbar.less

@@ -1,12 +1,60 @@
-.statusbar{
-	font-size        : 1.8em;
-			color            : white;
-	svg{
-		vertical-align : middle;
-		height         : 1em;
-		margin-right   : 0.2em;
-		cursor         : pointer;
-		fill           : white;
-	}
 
+.statusbar{
+	height           : 1.0em;
+	background-color : black;
+	font-size        : 24px;
+	color            : white;
+	line-height      : 1.0em;
+	border-bottom    : 1px solid @grey;
+	.logo{
+		display        : inline-block;
+		vertical-align : middle;
+		margin-right   : 40px;
+	}
+	.left{
+		display : inline-block;
+	}
+	.right{
+		float : right;
+	}
+	.toolName{
+		vertical-align : middle;
+		font-family    : CodeBold;
+		font-size      : 16px;
+		line-height    : 100%;
+		small{
+			font-family : CodeBold;
+		}
+	}
+	.controls{
+		font-size : 12px;
+		>*{
+			display     : inline-block;
+			height      : 100%;
+			padding     : 0px 10px;
+			border-left : 1px solid @grey;
+		}
+		.savingStatus{
+			width      : 56px;
+			color      : @grey;
+			text-align : center;
+		}
+		.newButton{
+			.animate(background-color);
+			color           : white;
+			text-decoration : none;
+			&:hover{
+				background-color : rgba(255,0,0,0.4);
+			}
+		}
+		.editField, .shareField{
+			span{
+				margin-right : 10px;
+			}
+			input{
+				width : 100px;
+				font-size: 12px;
+			}
+		}
+	}
 }