Adding in the print view button to the status bar

client/homebrew/editPage/editPage.jsx

@@ -67,6 +67,7 @@ var EditPage = React.createClass({
 			<Statusbar
 				editId={this.props.entry.editId}
 				shareId={this.props.entry.shareId}
+				printId={this.props.entry.shareId}
 				lastUpdated={this.state.lastUpdated}
 				isPending={this.state.pending} />
 

client/homebrew/sharePage/sharePage.jsx

@@ -27,6 +27,7 @@ var SharePage = React.createClass({
 				<Statusbar
 					lastUpdated={this.props.entry.updatedAt}
 					views={this.props.entry.views}
+					printId={this.props.entry.shareId}
 				/>
 
 				<PageContainer text={this.props.entry.text} />

client/homebrew/statusbar/statusbar.jsx

@@ -11,6 +11,7 @@ var Statusbar = React.createClass({
 		return {
 			//editId: null,
 			shareId : null,
+			printId : null,
 			isPending : false,
 			lastUpdated : null,
 			info : null,
@@ -62,6 +63,14 @@ var Statusbar = React.createClass({
 		</a>
 	},
 
+	renderPrintButton : function(){
+		if(!this.props.printId) return null;
+
+		return <a className='printField' key='print' href={'/homebrew/print/' + this.props.printId} target="_blank">
+			Print View <i className='fa fa-print' />
+		</a>
+	},
+
 	renderStatus : function(){
 		if(!this.props.editId) return null;
 
@@ -87,6 +96,7 @@ var Statusbar = React.createClass({
 			<div className='controls right'>
 				{this.renderStatus()}
 				{this.renderInfo()}
+				{this.renderPrintButton()}
 				{this.renderShare()}
 				{this.renderNewButton()}
 			</div>

client/homebrew/statusbar/statusbar.less

@@ -1,38 +1,38 @@
 
 .statusbar{
+	position         : fixed;
+	z-index          : 1000;
 	height           : 25px;
+	width            : 100%;
 	background-color : black;
 	font-size        : 24px;
-	position: fixed;
-	width :100%;
-	z-index : 1000;
 	color            : white;
 	line-height      : 1.0em;
 	border-bottom    : 1px solid @grey;
 	.logo{
 		display        : inline-block;
 		vertical-align : middle;
+		margin-top     : -5px;
 		margin-right   : 20px;
-		margin-top: -5px;
 		svg{
-			margin-top: -6px;
+			margin-top : -6px;
 		}
 	}
 	.left{
-		display : inline-block;
+		display        : inline-block;
-		vertical-align: top;
+		vertical-align : top;
 	}
 	.right{
 		float : right;
 	}
 	.toolName{
-		vertical-align : middle;
+		display         : block;
-		font-family    : CodeBold;
+		vertical-align  : middle;
-		text-decoration: none;
+		font-family     : CodeBold;
-		color: white;
+		font-size       : 16px;
-		display: block;
+		color           : white;
-		font-size      : 16px;
+		line-height     : 30px;
-		line-height    : 30px;
+		text-decoration : none;
 		small{
 			font-family : CodeBold;
 		}
@@ -59,19 +59,35 @@
 			}
 		}
 		.shareField{
+			.animate(background-color);
+			cursor          : pointer;
 			color           : white;
 			text-decoration : none;
-			cursor : pointer;
-			.animate(background-color);
 			&:hover{
 				background-color : fade(@teal, 70%);
 			}
 			span{
-				margin-right : 10px;
+				margin-right : 5px;
 			}
 			input{
-				width : 100px;
+				width     : 100px;
-				font-size: 12px;
+				font-size : 12px;
+			}
+		}
+		.printField{
+			.animate(background-color);
+			cursor          : pointer;
+			color           : white;
+			text-decoration : none;
+			&:hover{
+				background-color : fade(@orange, 70%);
+			}
+			span{
+				margin-right : 5px;
+			}
+			input{
+				width     : 100px;
+				font-size : 12px;
 			}
 		}
 	}