f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-12 13:12:46 +00:00
Code Wiki Activity

Getting splatsheet rolling

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-03-31 22:03:34 -04:00
parent 6f4d71083c
commit 312167d96b
17 changed files with 396 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/homebrew/homebrew.less
View File

@@ -1,18 +1,16 @@
@import 'naturalCrit/styles/reset.less';
//@import 'naturalCrit/styles/elements.less';
@import 'naturalCrit/styles/animations.less';
@import 'naturalCrit/styles/colors.less';
@import 'naturalCrit/styles/tooltip.less';
html,body, #reactContainer{
min-height: 100%;
font-family : 'Open Sans', sans-serif;
min-height : 100%;
font-family : 'Open Sans', sans-serif;
}
.homebrew{
background-color: @steel;
height : 100%;
height : 100%;
background-color : @steel;
.paneSplit{
width : 100%;
height: 100vh;
@@ -29,7 +27,6 @@ html,body, #reactContainer{
min-height: 100%;
//margin-top: 25px;
}
.leftPane{
width : 40%;
}
@@ -40,6 +37,5 @@ html,body, #reactContainer{
overflow: hidden;
}
}
}

14
client/splatsheet/codeEditor/codeEditor.jsx Normal file
View File

@@ -0,0 +1,14 @@
var React = require('react');
var _ = require('lodash');
var cx = require('classnames');
var SheetEditor = React.createClass({
render : function(){
return <div className='sheetEditor'>
SheetEditor Ready!
</div>
}
});
module.exports = SheetEditor;

3
client/splatsheet/codeEditor/codeEditor.less Normal file
View File

@@ -0,0 +1,3 @@
.COM{
}

27
client/splatsheet/sheetEditor/sheetEditor.jsx Normal file
View File

@@ -0,0 +1,27 @@
var React = require('react');
var _ = require('lodash');
var cx = require('classnames');
var SheetEditor = React.createClass({
getDefaultProps: function() {
return {
code : '',
onChange : function(){}
};
},
handleCodeChange : function(e){
this.props.onChange(e.target.value);
},
render : function(){
return <div className='sheetEditor'>
SheetEditor Ready!
<textarea value={this.props.code} onChange={this.handleCodeChange} />
</div>
}
});
module.exports = SheetEditor;

8
client/splatsheet/sheetEditor/sheetEditor.less Normal file
View File

@@ -0,0 +1,8 @@
.sheetEditor{
textarea{
margin-top: 50px;
height : 500px
}
}

49
client/splatsheet/sheetRenderer/sheetRenderer.jsx Normal file
View File

@@ -0,0 +1,49 @@
var React = require('react');
var _ = require('lodash');
var cx = require('classnames');
var babel = require('babel-core')
var SheetRenderer = React.createClass({
getDefaultProps: function() {
return {
code : '',
characterData : {},
onChange : function(){},
};
},
componentWillReceiveProps: function(nextProps) {
},
renderSheet : function(){
// var render = jsx.transform(this.props.code);
// return eval(render);
},
render : function(){
console.log(babel);
return <div className='SheetRenderer'>
<div className='sheetContainer' ref='sheetContainer'>
{this.renderSheet()}
</div>
</div>
}
});
module.exports = SheetRenderer;

3
client/splatsheet/sheetRenderer/sheetRenderer.less Normal file
View File

@@ -0,0 +1,3 @@
.COM{
}

49
client/splatsheet/splatsheet.jsx Normal file
View File

@@ -0,0 +1,49 @@
var React = require('react');
var _ = require('lodash');
var cx = require('classnames');
var StatusBar = require('./statusBar/statusBar.jsx');
var SheetEditor = require('./sheetEditor/sheetEditor.jsx');
var SheetRenderer = require('./sheetRenderer/sheetRenderer.jsx');
var SplatSheet = React.createClass({
getInitialState: function() {
return {
sheetCode: '<div>yo test</div>',
characterData : {}
};
},
handleCodeChange : function(text){
this.setState({
sheetCode : text,
});
},
handeCharacterChange : function(data){
},
render : function(){
return <div className='splatSheet'>
<StatusBar />
<div className='paneSplit'>
<div className='leftPane'>
<SheetEditor code={this.state.sheetCode} onChange={this.handleCodeChange} />
</div>
<div className='rightPane'>
<SheetRenderer
code={this.state.sheetCode}
characterData={this.state.characterData}
onChange={this.handeCharacterChange} />
</div>
</div>
</div>
}
});
module.exports = SplatSheet;

36
client/splatsheet/splatsheet.less Normal file
View File

@@ -0,0 +1,36 @@
@import 'naturalCrit/styles/reset.less';
//@import 'naturalCrit/styles/elements.less';
@import 'naturalCrit/styles/animations.less';
@import 'naturalCrit/styles/colors.less';
@import 'naturalCrit/styles/tooltip.less';
html,body, #reactContainer{
min-height : 100%;
font-family : 'Open Sans', sans-serif;
}
.splatsheet{
height : 100%;
background-color : @steel;
.paneSplit{
position : relative;
box-sizing : border-box;
height : 100vh;
width : 100%;
padding-top : 25px;
.leftPane, .rightPane{
position : relative;
display : inline-block;
vertical-align : top;
height : 100%;
min-height : 100%;
}
.leftPane{
width : 40%;
}
.rightPane{
overflow-y : scroll;
height : 100%;
width : 60%;
}
}
}

30
client/splatsheet/statusbar/statusbar.jsx Normal file
View File

@@ -0,0 +1,30 @@
var React = require('react');
var _ = require('lodash');
var cx = require('classnames');
var Logo = require('naturalCrit/logo/logo.jsx');
var Statusbar = React.createClass({
getDefaultProps: function() {
return {
};
},
render : function(){
return <div className='statusbar'>
<Logo
hoverSlide={true}
/>
<div className='left'>
<a href='/splatsheet' className='toolName'>
The SplatSheet
</a>
</div>
<div className='controls right'>
</div>
</div>
}
});
module.exports = Statusbar;

135
client/splatsheet/statusbar/statusbar.less Normal file
View File

@@ -0,0 +1,135 @@
.statusbar{
position : fixed;
z-index : 1000;
height : 25px;
width : 100%;
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-top : -5px;
margin-right : 20px;
svg{
margin-top : -6px;
}
}
.left{
display : inline-block;
vertical-align : top;
}
.right{
float : right;
}
.toolName{
display : block;
vertical-align : middle;
font-family : CodeBold;
font-size : 16px;
color : white;
line-height : 30px;
text-decoration : none;
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 : fade(@green, 70%);
}
}
.chromeField{
background-color: @orange;
color : white;
text-decoration : none;
i{
margin-right: 10px;
}
}
.changelogButton{
.animate(background-color);
color : white;
text-decoration : none;
&:hover{
background-color : fade(@purple, 70%);
}
}
.deleteButton{
.animate(background-color);
color : white;
text-decoration : none;
cursor: pointer;
&:hover{
background-color : fade(@red, 70%);
}
}
.shareField{
.animate(background-color);
cursor : pointer;
color : white;
text-decoration : none;
&:hover{
background-color : fade(@teal, 70%);
}
span{
margin-right : 5px;
}
input{
width : 100px;
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;
}
}
.sourceField{
.animate(background-color);
cursor : pointer;
color : white;
text-decoration : none;
&:hover{
background-color : fade(@teal, 70%);
}
span{
margin-right : 5px;
}
input{
width : 100px;
font-size : 12px;
}
}
}
}