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:
@@ -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}
|
||||||
|
|||||||
@@ -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(){
|
||||||
|
|||||||
44
shared/homebrewery/phb_style/phb.blocks.less
Normal file
44
shared/homebrewery/phb_style/phb.blocks.less
Normal 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{
|
||||||
|
|
||||||
|
}
|
||||||
@@ -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
|
||||||
// *****************************/
|
// *****************************/
|
||||||
|
|||||||
2
shared/homebrewery/snippets/brew/classTable.snippet.js
Normal file
2
shared/homebrewery/snippets/brew/classTable.snippet.js
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
const _ = require('lodash');
|
||||||
|
const Data = require('./random.data.js');
|
||||||
Reference in New Issue
Block a user