diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 74ca3bb..fe01782 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -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); diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index f10e646..9531205 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -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; } diff --git a/client/homebrew/editor/snippets/snippets.js b/client/homebrew/editor/snippets/snippets.js index f9addd7..7010660 100644 --- a/client/homebrew/editor/snippets/snippets.js +++ b/client/homebrew/editor/snippets/snippets.js @@ -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 "
\n\n"; - } - }, - { - tooltip : "Insert Image", - icon : 'fa-image', - snippet : function(){ - return ""; - } - }, - { - tooltip : "Page number & Footnote", - icon : 'fa-book', - snippet : function(){ - return "
1
\n
PART 1 | FANCINESS
\n\n"; - } - }, - - { - tooltip : "Ink Friendly", - icon : 'fa-print', - snippet : function(){ - return "\n\n"; - } - }, - - { - tooltip : "A4 Page Size", - icon : 'fa-file', - snippet : function(){ - return ''; - } - } - -] - - - - - -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 : "
\n\n" + }, + { + name : "Image", + icon : 'fa-image', + gen : [ + "", + "Credit: Kyounghwan Kim" + ].join('\n') + }, + { + name : "Background Image", + icon : 'fa-tree', + gen : [ + "" + ].join('\n') + }, + + { + name : "Page Number", + icon : 'fa-bookmark', + gen : "
1
\n
PART 1 | FANCINESS
\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 : ['' + ].join('\n') + }, + { + name : "Ink Friendly", + icon : 'fa-print', + gen : ['', + '' + ].join('\n') + }, + ] + }, + ] diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less index 231bd3f..bd6ea4b 100644 --- a/client/homebrew/homebrew.less +++ b/client/homebrew/homebrew.less @@ -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; } } - - - } \ No newline at end of file diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 0a8076a..f3fa1b4 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -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 saving... - - } + return saving... + } if(!this.state.isPending && !this.state.isSaving){ diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index 9355db0..a23d406 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -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 }; diff --git a/todo.md b/todo.md index 5db1c5b..4ece26e 100644 --- a/todo.md +++ b/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?