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:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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>
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
2
todo.md
2
todo.md
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user