1
0
mirror of https://github.com/stolksdorf/homebrewery.git synced 2025-12-15 23:35:57 +00:00

Snippets done

This commit is contained in:
Scott Tolksdorf
2016-05-10 22:29:00 -04:00
parent c9bfd08bb3
commit 6f6f5649d4
7 changed files with 171 additions and 209 deletions

View File

@@ -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);

View File

@@ -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;
}

View File

@@ -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')
},
]
},
]

View File

@@ -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;
}
}
}

View File

@@ -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){

View File

@@ -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
};

View File

@@ -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?