0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 19:32:45 +00:00

Creating new stlying for the snippet blocks

This commit is contained in:
Scott Tolksdorf
2017-02-26 13:01:48 -05:00
parent 9d4d337bb9
commit fbc18a017c
5 changed files with 74 additions and 11 deletions

View File

@@ -3,9 +3,7 @@ const _ = require('lodash');
const cx = require('classnames'); const cx = require('classnames');
const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx'); const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
const SnippetBar = require('./snippetbar/snippetbar.jsx');
const MetadataEditor = require('./metadataEditor/metadataEditor.jsx'); const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
const Menubar = require('./menubar/menubar.jsx'); const Menubar = require('./menubar/menubar.jsx');
const splice = function(str, index, inject){ const splice = function(str, index, inject){
@@ -152,13 +150,6 @@ const BrewEditor = React.createClass({
render : function(){ render : function(){
this.highlightPageLines(); this.highlightPageLines();
return <div className='brewEditor' ref='main'> return <div className='brewEditor' ref='main'>
{/*
<SnippetBar
brew={this.props.value}
onInject={this.handleInject}
onToggle={this.handgleToggle}
showmeta={this.state.showMetadataEditor} />
*/}
<Menubar <Menubar
view={this.state.view} view={this.state.view}
onViewChange={this.handleViewChange} onViewChange={this.handleViewChange}

View File

@@ -14,6 +14,28 @@ const Menubar = React.createClass({
onSnippetInject : ()=>{}, onSnippetInject : ()=>{},
}; };
}, },
//TODO: remove
renderDevGroup : function(){
const Snippets = require('homebrewery/snippets/brew');
const snippets = _.map(Snippets, (gen, name)=>{
return {
name,
gen,
icon : 'fa-question'
}
})
return <SnippetGroup
name='All'
icon='fa-rocket'
snippets={snippets}
onClick={this.props.onSnippetInject}
key='dev'
/>
},
renderSnippets : function(){ renderSnippets : function(){
if(this.props.view == 'meta') return ; if(this.props.view == 'meta') return ;
@@ -21,10 +43,12 @@ const Menubar = React.createClass({
if(this.props.view == 'code') mapping = SnippetMap.brew; if(this.props.view == 'code') mapping = SnippetMap.brew;
if(this.props.view == 'style') mapping = SnippetMap.style; if(this.props.view == 'style') mapping = SnippetMap.style;
const groups = _.map(mapping, (group)=>{ let groups = _.map(mapping, (group)=>{
return <SnippetGroup {...group} onClick={this.props.onSnippetInject} key={group.name} /> return <SnippetGroup {...group} onClick={this.props.onSnippetInject} key={group.name} />
}); });
groups = groups.concat(this.renderDevGroup());
return <div className='snippets'>{groups} </div> return <div className='snippets'>{groups} </div>
}, },
render: function(){ render: function(){

View File

@@ -0,0 +1,44 @@
.spell{
ul:first-of-type{
margin-top : -0.5em;
margin-bottom : 0.5em;
padding-left : 1em;
text-indent : -1em;
list-style-type : none;
&+p{
text-indent : 0em;
}
}
}
.monster{
}
.frame{
background-color : white;
border : initial;
border-style : solid;
border-image-outset : 25px 17px;
border-image-repeat : round;
border-image-slice : 150 200 150 200;
border-image-source : @frameBorder;
border-image-width : 47px;
margin-top : 30px;
margin-bottom : 37px;
box-sizing: border-box;
}
.wide{
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
}
.2column, .2col{
}

View File

@@ -12,6 +12,7 @@
@import './phb.fonts.less'; @import './phb.fonts.less';
@import './phb.colors.less'; @import './phb.colors.less';
@import './phb.img.less'; @import './phb.img.less';
@import './phb.blocks.less';
@page { margin: 0; } @page { margin: 0; }
@@ -387,11 +388,12 @@
//***************************** //*****************************
// * WIDE // * WIDE
// *****************************/ // *****************************/
/*
.wide{ .wide{
column-span : all; column-span : all;
-webkit-column-span : all; -webkit-column-span : all;
-moz-column-span : all; -moz-column-span : all;
} }*/
//***************************** //*****************************
// * CLASS TABLE // * CLASS TABLE
// *****************************/ // *****************************/

View File

@@ -0,0 +1,2 @@
const _ = require('lodash');
const Data = require('./random.data.js');