1
0
mirror of https://github.com/stolksdorf/homebrewery.git synced 2025-12-15 18:25:56 +00:00

UPdating the homebrew editor with new snippet bar

This commit is contained in:
Scott Tolksdorf
2016-05-05 08:36:33 -04:00
parent 133dd7c144
commit 4139a8ee12
8 changed files with 137 additions and 46 deletions

View File

@@ -1,23 +1,22 @@
var React = require('react');
var _ = require('lodash');
var cx = require('classnames');
var SnippetIcons = require('./snippets/snippets.js');
var CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
var Snippets = require('./snippets/snippets.js');
var Editor = React.createClass({
getDefaultProps: function() {
return {
text : "",
value : "",
onChange : function(){}
};
},
componentDidMount: function() {
this.refs.textarea.focus();
},
handleTextChange : function(e){
this.props.onChange(e.target.value);
handleTextChange : function(text){
this.props.onChange(text);
},
iconClick : function(snippetFn){
@@ -28,7 +27,7 @@ var Editor = React.createClass({
},
renderTemplateIcons : function(){
return _.map(SnippetIcons, (t) => {
return _.map(Snippets, (t) => {
return <div className='icon' key={t.icon}
onClick={this.iconClick.bind(this, t.snippet)}
data-tooltip={t.tooltip}>
@@ -36,18 +35,20 @@ var Editor = React.createClass({
</div>;
})
},
renderSnippetBar : function(){
return <div className='snippetBar'>
Snippet bar yo
</div>
},
render : function(){
var self = this;
return(
<div className='editor'>
<div className='textIcons'>
{this.renderTemplateIcons()}
</div>
<textarea
ref='textarea'
value={this.props.text}
onChange={this.handleTextChange} />
{this.renderSnippetBar()}
<CodeEditor wrap={true} language='gfm' value={this.props.value} onChange={this.handleTextChange} />
</div>
);
}

View File

@@ -6,6 +6,7 @@
width : 100%;
//display: flex;
//flex-direction: column;
/*
.textIcons{
display : inline-block;
vertical-align : top;
@@ -36,5 +37,14 @@
padding : 10px;
border : none;
outline: none;
}
*/
.snippetBar{
background-color: #bbb;
}
}

View File

@@ -4,6 +4,32 @@ var MonsterBlockGen = require('./monsterblock.gen.js');
var ClassFeatureGen = require('./classfeature.gen.js');
var FullClassGen = require('./fullclass.gen.js');
/* Snippet Categories
- editor
- Tables
- PHB
- document
- print
*/
module.exports = [
/*
{
@@ -124,3 +150,46 @@ module.exports = [
}
]
module.exports = [
{
groupName : 'Editor',
icon : 'fa-pencil',
snippets : [
{
name : 'Spell',
icon : 'fa-magic',
snippet : SpellGen
}
]
},
{
groupName : 'Tables',
icon : 'fa-table',
snippets : [
{
name : 'Spell',
icon : 'fa-magic',
snippet : SpellGen
}
]
},
{
groupName : 'PHB',
icon : 'fa-book',
snippets : [
{
name : 'Spell',
icon : 'fa-magic',
snippet : SpellGen
}
]
},
]

View File

@@ -17,7 +17,9 @@ var SplitPane = require('../splitPane/splitPane.jsx');
var CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
//var CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
var Editor = require('../editor/editor.jsx');
@@ -61,14 +63,20 @@ var HomePage = React.createClass({
return(
<div className='homePage page'>
<Navbar>
<RedditShare brew={{text : this.state.text}}/>
<Nav.section>
<Nav.item>Bad Ass Brew</Nav.item>
</Nav.section>
<Nav.section>
<RedditShare brew={{text : this.state.text}}/>
<Nav.item
newTab={true}
href='https://github.com/stolksdorf/naturalcrit/issues'
color='red'
icon='fa-bug'>
issue?
report issue
</Nav.item>
<Nav.item
href='/homebrew/changelog'
@@ -82,11 +90,12 @@ var HomePage = React.createClass({
icon='fa-external-link'>
New Brew
</Nav.item>
</Nav.section>
</Navbar>
<div className='content'>
<SplitPane>
<CodeEditor wrap={true} language='gfm' value={this.state.text} onChange={this.handleTextChange} />
<Editor value={this.state.text} onChange={this.handleTextChange} />
<div>{this.state.text}</div>
</SplitPane>

View File

@@ -19,9 +19,11 @@ var Navbar = React.createClass({
<Nav.item>v1.5.0</Nav.item>
</Nav.section>
<Nav.section>
{this.props.children}
</Nav.section>
</Nav.base>
}
});

View File

@@ -15,7 +15,7 @@ var RedditShare = React.createClass({
getDefaultProps: function() {
return {
brew : {
desc : '',
title : '',
sharedId : '',
text : ''
}
@@ -30,7 +30,7 @@ var RedditShare = React.createClass({
handleClick : function(){
var url = [
MAIN_URL,
'title=' + encodeURIComponent(this.props.brew.desc ? this.props.brew.desc : 'Check out my brew!'),
'title=' + encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!'),
'text=' + encodeURIComponent(this.props.brew.text)
@@ -42,7 +42,7 @@ var RedditShare = React.createClass({
render : function(){
return <Nav.item icon='fa-reddit' color='red' onClick={this.handleClick}>
return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
share on reddit
</Nav.item>
},

View File

@@ -83,7 +83,7 @@ nav{
&.greyLight:hover{ background-color : @greyLight };
&.grey:hover{ background-color : @grey };
}
.navSection + .navSection .navItem{
.navSection:last-child .navItem{
border-left : 1px solid #666;
}
}

View File

@@ -8,7 +8,6 @@ X Simplify the panel css to remove the current issues
- remove old status bar
X remove jsoneditor (if we don't need it)
X Add in markdown editor
- Add bleed snippet (bump)
- Add the '/new' page and force save to reduce database size
X Add pagniation and query to the homebrew api
X Update the admin page with pagnition and a query box
@@ -18,6 +17,7 @@ X Test the old/small brew filtering for deleteion
- Add in brew title, use for metadata?
- Add in specific entry point rendering in server.js
- Add in a tutorial page?
- Add in a localstorage fallback on the `/new` page, clear it when they save
## v1.6
- Add error handling to the saving wdiget in the status bar