f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 22:52:39 +00:00
Code Wiki Activity

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

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-01-03 04:39:56 -05:00
parent 29d03c8263
commit 4ff1f3dc37
13 changed files with 255 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
client/homebrew/statusbar/statusbar.jsx
View File

@@ -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>

68
client/homebrew/statusbar/statusbar.less
View File

@@ -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;
}
}
}
}