1
0
mirror of https://github.com/stolksdorf/homebrewery.git synced 2025-12-15 17:15:58 +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 React = require('react');
var _ = require('lodash'); var _ = require('lodash');
var cx = require('classnames'); 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({ var Editor = React.createClass({
getDefaultProps: function() { getDefaultProps: function() {
return { return {
text : "", value : "",
onChange : function(){} onChange : function(){}
}; };
}, },
componentDidMount: function() {
this.refs.textarea.focus();
},
handleTextChange : function(e){ handleTextChange : function(text){
this.props.onChange(e.target.value); this.props.onChange(text);
}, },
iconClick : function(snippetFn){ iconClick : function(snippetFn){
@@ -28,7 +27,7 @@ var Editor = React.createClass({
}, },
renderTemplateIcons : function(){ renderTemplateIcons : function(){
return _.map(SnippetIcons, (t) => { return _.map(Snippets, (t) => {
return <div className='icon' key={t.icon} return <div className='icon' key={t.icon}
onClick={this.iconClick.bind(this, t.snippet)} onClick={this.iconClick.bind(this, t.snippet)}
data-tooltip={t.tooltip}> data-tooltip={t.tooltip}>
@@ -36,18 +35,20 @@ var Editor = React.createClass({
</div>; </div>;
}) })
}, },
renderSnippetBar : function(){
return <div className='snippetBar'>
Snippet bar yo
</div>
},
render : function(){ render : function(){
var self = this;
return( return(
<div className='editor'> <div className='editor'>
<div className='textIcons'>
{this.renderTemplateIcons()} {this.renderTemplateIcons()}
</div> {this.renderSnippetBar()}
<textarea <CodeEditor wrap={true} language='gfm' value={this.props.value} onChange={this.handleTextChange} />
ref='textarea'
value={this.props.text}
onChange={this.handleTextChange} />
</div> </div>
); );
} }

View File

@@ -6,6 +6,7 @@
width : 100%; width : 100%;
//display: flex; //display: flex;
//flex-direction: column; //flex-direction: column;
/*
.textIcons{ .textIcons{
display : inline-block; display : inline-block;
vertical-align : top; vertical-align : top;
@@ -36,5 +37,14 @@
padding : 10px; padding : 10px;
border : none; border : none;
outline: 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 ClassFeatureGen = require('./classfeature.gen.js');
var FullClassGen = require('./fullclass.gen.js'); var FullClassGen = require('./fullclass.gen.js');
/* Snippet Categories
- editor
- Tables
- PHB
- document
- print
*/
module.exports = [ 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( return(
<div className='homePage page'> <div className='homePage page'>
<Navbar> <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 <Nav.item
newTab={true} newTab={true}
href='https://github.com/stolksdorf/naturalcrit/issues' href='https://github.com/stolksdorf/naturalcrit/issues'
color='red' color='red'
icon='fa-bug'> icon='fa-bug'>
issue? report issue
</Nav.item> </Nav.item>
<Nav.item <Nav.item
href='/homebrew/changelog' href='/homebrew/changelog'
@@ -82,11 +90,12 @@ var HomePage = React.createClass({
icon='fa-external-link'> icon='fa-external-link'>
New Brew New Brew
</Nav.item> </Nav.item>
</Nav.section>
</Navbar> </Navbar>
<div className='content'> <div className='content'>
<SplitPane> <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> <div>{this.state.text}</div>
</SplitPane> </SplitPane>

View File

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

View File

@@ -15,7 +15,7 @@ var RedditShare = React.createClass({
getDefaultProps: function() { getDefaultProps: function() {
return { return {
brew : { brew : {
desc : '', title : '',
sharedId : '', sharedId : '',
text : '' text : ''
} }
@@ -30,7 +30,7 @@ var RedditShare = React.createClass({
handleClick : function(){ handleClick : function(){
var url = [ var url = [
MAIN_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) 'text=' + encodeURIComponent(this.props.brew.text)
@@ -42,7 +42,7 @@ var RedditShare = React.createClass({
render : function(){ 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 share on reddit
</Nav.item> </Nav.item>
}, },

View File

@@ -83,7 +83,7 @@ nav{
&.greyLight:hover{ background-color : @greyLight }; &.greyLight:hover{ background-color : @greyLight };
&.grey:hover{ background-color : @grey }; &.grey:hover{ background-color : @grey };
} }
.navSection + .navSection .navItem{ .navSection:last-child .navItem{
border-left : 1px solid #666; 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 - remove old status bar
X remove jsoneditor (if we don't need it) X remove jsoneditor (if we don't need it)
X Add in markdown editor X Add in markdown editor
- Add bleed snippet (bump)
- Add the '/new' page and force save to reduce database size - Add the '/new' page and force save to reduce database size
X Add pagniation and query to the homebrew api X Add pagniation and query to the homebrew api
X Update the admin page with pagnition and a query box 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 brew title, use for metadata?
- Add in specific entry point rendering in server.js - Add in specific entry point rendering in server.js
- Add in a tutorial page? - Add in a tutorial page?
- Add in a localstorage fallback on the `/new` page, clear it when they save
## v1.6 ## v1.6
- Add error handling to the saving wdiget in the status bar - Add error handling to the saving wdiget in the status bar