mirror of
https://github.com/stolksdorf/homebrewery.git
synced 2025-12-15 23:35:57 +00:00
Snippets done
This commit is contained in:
@@ -24,7 +24,10 @@ var Editor = React.createClass({
|
||||
};
|
||||
},
|
||||
|
||||
cursorPosition : null,
|
||||
cursorPosition : {
|
||||
line : 0,
|
||||
ch : 0
|
||||
},
|
||||
|
||||
|
||||
componentDidMount: function() {
|
||||
@@ -41,7 +44,6 @@ var Editor = React.createClass({
|
||||
},
|
||||
|
||||
handleSnippetClick : function(injectText){
|
||||
if(!this.cursorPosition) return;
|
||||
var lines = this.props.value.split('\n');
|
||||
lines[this.cursorPosition.line] = splice(lines[this.cursorPosition.line], this.cursorPosition.ch, injectText);
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
align-items : center;
|
||||
.snippetGroup{
|
||||
.animate(background-color);
|
||||
margin : 0px 10px;
|
||||
padding : 5px;
|
||||
font-size : 15px;
|
||||
margin : 0px 8px;
|
||||
padding : 3px;
|
||||
font-size : 13px;
|
||||
border-radius : 5px;
|
||||
&:hover, &.selected{
|
||||
background-color : #999;
|
||||
@@ -20,7 +20,7 @@
|
||||
line-height : 20px;
|
||||
.groupName{
|
||||
margin-left : 6px;
|
||||
font-size : 12px;
|
||||
font-size : 10px;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
@@ -39,6 +39,11 @@
|
||||
padding : 10px;
|
||||
cursor : pointer;
|
||||
font-size : 13px;
|
||||
//font-weight: 800;
|
||||
//text-transform: uppercase;
|
||||
i{
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover{
|
||||
background-color : #999;
|
||||
}
|
||||
|
||||
@@ -5,184 +5,61 @@ var ClassFeatureGen = require('./classfeature.gen.js');
|
||||
var FullClassGen = require('./fullclass.gen.js');
|
||||
|
||||
|
||||
/* Snippet Categories
|
||||
|
||||
- editor
|
||||
- Tables
|
||||
- PHB
|
||||
- document
|
||||
- print
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
module.exports = [
|
||||
/*
|
||||
{
|
||||
tooltip : 'Full Class',
|
||||
icon : 'fa-user',
|
||||
snippet : FullClassGen,
|
||||
},
|
||||
*/
|
||||
{
|
||||
tooltip : 'Spell',
|
||||
icon : 'fa-magic',
|
||||
snippet : SpellGen,
|
||||
},
|
||||
{
|
||||
tooltip : 'Class Feature',
|
||||
icon : 'fa-trophy',
|
||||
snippet : ClassFeatureGen,
|
||||
},
|
||||
{
|
||||
tooltip : 'Note',
|
||||
icon : 'fa-sticky-note',
|
||||
snippet : function(){
|
||||
return [
|
||||
"> ##### Time to Drop Knowledge",
|
||||
"> Use notes to point out some interesting information. ",
|
||||
"> ",
|
||||
"> **Tables and lists** both work within a note."
|
||||
].join('\n');
|
||||
},
|
||||
},
|
||||
{
|
||||
tooltip : 'Table',
|
||||
icon : 'fa-th-list',
|
||||
snippet : function(){
|
||||
return [
|
||||
"##### Cookie Tastiness",
|
||||
"| Tastiness | Cookie Type |",
|
||||
"|:----:|:-------------|",
|
||||
"| -5 | Raisin |",
|
||||
"| 8th | Chocolate Chip |",
|
||||
"| 11th | 2 or lower |",
|
||||
"| 14th | 3 or lower |",
|
||||
"| 17th | 4 or lower |\n\n",
|
||||
].join('\n');
|
||||
},
|
||||
},
|
||||
{
|
||||
tooltip : 'Monster Stat Block',
|
||||
icon : 'fa-bug',
|
||||
snippet : MonsterBlockGen.half,
|
||||
},
|
||||
{
|
||||
tooltip : 'Wide Monster Stat Block',
|
||||
icon : 'fa-bullseye',
|
||||
snippet : MonsterBlockGen.full,
|
||||
},
|
||||
{
|
||||
tooltip : "Class Table",
|
||||
icon : 'fa-table',
|
||||
snippet : ClassTableGen.full,
|
||||
},
|
||||
{
|
||||
tooltip : "Half Class Table",
|
||||
icon : 'fa-list-alt',
|
||||
snippet : ClassTableGen.half,
|
||||
},
|
||||
{
|
||||
tooltip : "Column Break",
|
||||
icon : 'fa-columns',
|
||||
snippet : function(){
|
||||
return "```\n```\n\n";
|
||||
}
|
||||
},
|
||||
{
|
||||
tooltip : "New Page",
|
||||
icon : 'fa-file-text',
|
||||
snippet : function(){
|
||||
return "\\page\n\n";
|
||||
}
|
||||
},
|
||||
{
|
||||
tooltip : "Vertical Spacing",
|
||||
icon : 'fa-arrows-v',
|
||||
snippet : function(){
|
||||
return "<div style='margin-top:140px'></div>\n\n";
|
||||
}
|
||||
},
|
||||
{
|
||||
tooltip : "Insert Image",
|
||||
icon : 'fa-image',
|
||||
snippet : function(){
|
||||
return "<img src='https://i.imgur.com/RJ6S6eY.gif' style='position:absolute;bottom:-10px;right:-60px;' />";
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
tooltip : "Page number & Footnote",
|
||||
icon : 'fa-book',
|
||||
snippet : function(){
|
||||
return "<div class='pageNumber'>1</div>\n<div class='footnote'>PART 1 | FANCINESS</div>\n\n";
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
tooltip : "Ink Friendly",
|
||||
icon : 'fa-print',
|
||||
snippet : function(){
|
||||
return "<style>\n .phb{ background : white;}\n .phb img{ display : none;}\n .phb hr+blockquote{background : white;}\n</style>\n\n";
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
tooltip : "A4 Page Size",
|
||||
icon : 'fa-file',
|
||||
snippet : function(){
|
||||
return '<style>\n.phb{\n width : 210mm;\n height : 297mm;\n}\n</style>';
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
groupName : 'Editor',
|
||||
icon : 'fa-pencil',
|
||||
snippets : [
|
||||
{
|
||||
name : 'Spell',
|
||||
icon : 'fa-magic',
|
||||
gen : SpellGen
|
||||
name : "Column Break",
|
||||
icon : 'fa-columns',
|
||||
gen : "```\n```\n\n"
|
||||
},
|
||||
{
|
||||
name : 'Test',
|
||||
icon : 'fa-rocket',
|
||||
gen : function(){ return "TEST"}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName : 'Tables',
|
||||
icon : 'fa-table',
|
||||
snippets : [
|
||||
name : "New Page",
|
||||
icon : 'fa-file-text',
|
||||
gen : "\\page\n\n"
|
||||
},
|
||||
{
|
||||
name : 'Spell',
|
||||
icon : 'fa-magic',
|
||||
gen : SpellGen
|
||||
}
|
||||
name : "Vertical Spacing",
|
||||
icon : 'fa-arrows-v',
|
||||
gen : "<div style='margin-top:140px'></div>\n\n"
|
||||
},
|
||||
{
|
||||
name : "Image",
|
||||
icon : 'fa-image',
|
||||
gen : [
|
||||
"<img ",
|
||||
" src='https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg' ",
|
||||
" style='width:325px' />",
|
||||
"Credit: Kyounghwan Kim"
|
||||
].join('\n')
|
||||
},
|
||||
{
|
||||
name : "Background Image",
|
||||
icon : 'fa-tree',
|
||||
gen : [
|
||||
"<img ",
|
||||
" src='http://i.imgur.com/hMna6G0.png' ",
|
||||
" style='position:absolute; top:50px; right:30px; width:280px' />"
|
||||
].join('\n')
|
||||
},
|
||||
|
||||
{
|
||||
name : "Page Number",
|
||||
icon : 'fa-bookmark',
|
||||
gen : "<div class='pageNumber'>1</div>\n<div class='footnote'>PART 1 | FANCINESS</div>\n\n"
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
/************************* PHB ********************/
|
||||
|
||||
{
|
||||
groupName : 'PHB',
|
||||
icon : 'fa-book',
|
||||
@@ -190,11 +67,109 @@ module.exports = [
|
||||
{
|
||||
name : 'Spell',
|
||||
icon : 'fa-magic',
|
||||
gen : SpellGen
|
||||
gen : SpellGen,
|
||||
},
|
||||
{
|
||||
name : 'Class Feature',
|
||||
icon : 'fa-trophy',
|
||||
gen : ClassFeatureGen,
|
||||
},
|
||||
{
|
||||
name : 'Note',
|
||||
icon : 'fa-sticky-note',
|
||||
gen : function(){
|
||||
return [
|
||||
"> ##### Time to Drop Knowledge",
|
||||
"> Use notes to point out some interesting information. ",
|
||||
"> ",
|
||||
"> **Tables and lists** both work within a note."
|
||||
].join('\n');
|
||||
},
|
||||
},
|
||||
{
|
||||
name : 'Monster Stat Block',
|
||||
icon : 'fa-bug',
|
||||
gen : MonsterBlockGen.half,
|
||||
},
|
||||
{
|
||||
name : 'Wide Monster Stat Block',
|
||||
icon : 'fa-paw',
|
||||
gen : MonsterBlockGen.full,
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
|
||||
/********************* TABLES *********************/
|
||||
|
||||
{
|
||||
groupName : 'Tables',
|
||||
icon : 'fa-table',
|
||||
snippets : [
|
||||
{
|
||||
name : "Class Table",
|
||||
icon : 'fa-table',
|
||||
gen : ClassTableGen.full,
|
||||
},
|
||||
{
|
||||
name : "Half Class Table",
|
||||
icon : 'fa-list-alt',
|
||||
gen : ClassTableGen.half,
|
||||
},
|
||||
{
|
||||
name : 'Table',
|
||||
icon : 'fa-th-list',
|
||||
gen : function(){
|
||||
return [
|
||||
"##### Cookie Tastiness",
|
||||
"| Tastiness | Cookie Type |",
|
||||
"|:----:|:-------------|",
|
||||
"| -5 | Raisin |",
|
||||
"| 8th | Chocolate Chip |",
|
||||
"| 11th | 2 or lower |",
|
||||
"| 14th | 3 or lower |",
|
||||
"| 17th | 4 or lower |\n\n",
|
||||
].join('\n');
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
/**************** PRINT *************/
|
||||
|
||||
{
|
||||
groupName : 'Print',
|
||||
icon : 'fa-print',
|
||||
snippets : [
|
||||
{
|
||||
name : "A4 PageSize",
|
||||
icon : 'fa-file',
|
||||
gen : ['<style>',
|
||||
' .phb{',
|
||||
' width : 210mm;',
|
||||
' height : 297mm;',
|
||||
' }',
|
||||
'</style>'
|
||||
].join('\n')
|
||||
},
|
||||
{
|
||||
name : "Ink Friendly",
|
||||
icon : 'fa-print',
|
||||
gen : ['<style>',
|
||||
' .phb{ background : white;}',
|
||||
' .phb img{ display : none;}',
|
||||
' .phb hr+blockquote{background : white;}',
|
||||
'</style>',
|
||||
''
|
||||
].join('\n')
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
@@ -1,34 +1,26 @@
|
||||
|
||||
@import 'naturalcrit/styles/reset.less';
|
||||
//@import 'naturalcrit/styles/elements.less';
|
||||
@import 'naturalcrit/styles/animations.less';
|
||||
@import 'naturalcrit/styles/colors.less';
|
||||
@import 'naturalcrit/styles/tooltip.less';
|
||||
|
||||
html,body, #reactContainer{
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
height : 100vh;
|
||||
min-height : 100vh;
|
||||
margin : 0;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.homebrew{
|
||||
background-color: @steel;
|
||||
|
||||
height: 100%;
|
||||
|
||||
height : 100%;
|
||||
background-color : @steel;
|
||||
.page{
|
||||
height : 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
display : flex;
|
||||
height : 100%;
|
||||
flex-direction : column;
|
||||
.content{
|
||||
flex: auto;
|
||||
position: relative;
|
||||
height: calc(~"100% - 29px"); //Navbar height
|
||||
position : relative;
|
||||
height : calc(~"100% - 29px"); //Navbar height
|
||||
flex : auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -3,7 +3,6 @@ var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
var request = require("superagent");
|
||||
|
||||
|
||||
var Nav = require('naturalcrit/nav/nav.jsx');
|
||||
var Navbar = require('../../navbar/navbar.jsx');
|
||||
|
||||
@@ -18,16 +17,6 @@ var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var Statusbar = require('../../statusbar/statusbar.jsx');
|
||||
var PageContainer = require('../../pageContainer/pageContainer.jsx');
|
||||
var Editor = require('../../editor/editor.jsx');
|
||||
|
||||
|
||||
|
||||
|
||||
const SAVE_TIMEOUT = 3000;
|
||||
|
||||
|
||||
@@ -146,10 +135,8 @@ var EditPage = React.createClass({
|
||||
renderSaveButton : function(){
|
||||
|
||||
if(this.state.isSaving){
|
||||
|
||||
return <Nav.item icon="fa-spinner fa-spin">saving...</Nav.item>
|
||||
|
||||
}
|
||||
return <Nav.item icon="fa-spinner fa-spin">saving...</Nav.item>
|
||||
}
|
||||
|
||||
|
||||
if(!this.state.isPending && !this.state.isSaving){
|
||||
|
||||
@@ -18,7 +18,7 @@ const KEY = 'naturalCrit-homebrew-new';
|
||||
var NewPage = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
title : 'EDIT ME',
|
||||
title : 'My Awesome Brew v99.99',
|
||||
text: '',
|
||||
isSaving : false
|
||||
};
|
||||
|
||||
1
todo.md
1
todo.md
@@ -19,6 +19,7 @@ X Add in a localstorage fallback on the `/new` page, clear it when they save
|
||||
X Rename `/client/naturalCrit` -> `/client/main`
|
||||
- Move snippets into their new groups
|
||||
- Replace pseudo-elements with encoded images
|
||||
- Make hybrid editor and brewRenderer (with resize listeners)
|
||||
|
||||
## v1.6
|
||||
- Add in brew title, use for metadata?
|
||||
|
||||
Reference in New Issue
Block a user