Merge pull request #1572 from Gazook89/Style-Editor-Menu-and-comments

CSS Commenting + New "Style Editor" snippet menu

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -13,7 +13,7 @@ const watercolorGen = require('./watercolor.gen.js');
 module.exports = [
 
 	{
-		groupName : 'Editor',
+		groupName : 'Text Editor',
 		icon      : 'fas fa-pencil-alt',
 		view      : 'text',
 		snippets  : [
@@ -79,35 +79,41 @@ module.exports = [
 				icon : 'fas fa-book',
 				gen  : TableOfContentsGen
 			},
+			{
+				name : 'Add Comment',
+				icon : 'fas fa-code',
+				gen  : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
+			},
+		]
+	},
+	{
+		groupName : 'Style Editor',
+		icon      : 'fas fa-pencil-alt',
+		view      : 'style',
+		snippets  : [
 			{
 				name : 'Remove Drop Cap',
 				icon : 'fas fa-remove-format',
-				gen  : '<style>\n' +
+				gen  : dedent`/* Removes Drop Caps */
-						'  .phb3 h1+p:first-letter {\n' +
+						.page h1+p:first-letter {
-						'    all: unset;\n' +
+							all: unset;
-						'  }\n' +
+						}\n\n`
-						'</style>'
 			},
 			{
 				name : 'Tweak Drop Cap',
 				icon : 'fas fa-sliders-h',
-				gen  : '<style>\n' +
+				gen  : dedent`/* Drop Cap settings */
-						'  /* Drop Cap settings */\n' +
+						.page h1 + p::first-letter {
-						'  .phb3 h1 + p::first-letter {\n' +
+							font-family: SolberaImitationRemake;
-						'    float: left;\n' +
+							font-size: 3.5cm;
-						'    font-family: SolberaImitationRemake;\n' +
+							background-image: linear-gradient(-45deg, #322814, #998250, #322814);
-						'    font-size: 3.5cm;\n' +
+							line-height: 1em;
-						'    color: #222;\n' +
+						}\n\n`
-						'    line-height: .8em;\n' +
-						'  }\n' +
-						'</style>'
 			},
 			{
 				name : 'Add Comment',
-				icon : 'fas fa-code',  /* might need to be fa-solid fa-comment-code --not sure, Gazook */
+				icon : 'fas fa-code',
-				gen  : dedent`\n
+				gen  : '/* This is a comment that will not be rendered into your brew. */'
-					<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->
-					`
 			},
 		]
 	},
@@ -254,36 +260,6 @@ module.exports = [
 		icon      : 'fas fa-table',
 		view      : 'text',
 		snippets  : [
-			{
-				name : 'Class Table',
-				icon : 'fas fa-table',
-				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
-			},
-			{
-				name : 'Class Table (unframed)',
-				icon : 'fas fa-border-none',
-				gen  : ClassTableGen.full('classTable,wide'),
-			},
-			{
-				name : '1/2 Class Table',
-				icon : 'fas fa-list-alt',
-				gen  : ClassTableGen.half('classTable,decoration,frame'),
-			},
-			{
-				name : '1/2 Class Table (unframed)',
-				icon : 'fas fa-border-none',
-				gen  : ClassTableGen.half('classTable'),
-			},
-			{
-				name : '1/3 Class Table',
-				icon : 'fas fa-border-all',
-				gen  : ClassTableGen.third('classTable,frame'),
-			},
-			{
-				name : '1/3 Class Table (unframed)',
-				icon : 'fas fa-border-none',
-				gen  : ClassTableGen.third('classTable'),
-			},
 			{
 				name : 'Table',
 				icon : 'fas fa-th-list',
@@ -343,6 +319,36 @@ module.exports = [
 						}}
 						\n`;
 				}
+			},
+			{
+				name : 'Class Table',
+				icon : 'fas fa-table',
+				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
+			},
+			{
+				name : 'Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.full('classTable,wide'),
+			},
+			{
+				name : '1/2 Class Table',
+				icon : 'fas fa-list-alt',
+				gen  : ClassTableGen.half('classTable,decoration,frame'),
+			},
+			{
+				name : '1/2 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.half('classTable'),
+			},
+			{
+				name : '1/3 Class Table',
+				icon : 'fas fa-border-all',
+				gen  : ClassTableGen.third('classTable,frame'),
+			},
+			{
+				name : '1/3 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.third('classTable'),
 			}
 		]
 	},
@@ -360,44 +366,36 @@ module.exports = [
 			{
 				name : 'A4 Page Size',
 				icon : 'far fa-file',
-				gen  : ['/* A4 Page Size */',
+				gen  : dedent`/* A4 Page Size */
-					'.page{',
+					.page{
-					'	width  : 210mm;',
+						width  : 210mm;
-					'	height : 296.8mm;',
+						height : 296.8mm;
-					'}',
+					}\n\n`
-					''
-				].join('\n')
 			},
 			{
 				name : 'Square Page Size',
 				icon : 'far fa-file',
-				gen  : ['/* Square Page Size */',
+				gen  : dedent`/* Square Page Size */
-					'.page {',
+					.page {
-					'	width   : 125mm;',
+						width   : 125mm;
-					'	height  : 125mm;',
+						height  : 125mm;
-					'	padding : 12.5mm;',
+						padding : 12.5mm;
-					'	columns : unset;',
+						columns : unset;
-					'}',
+					}\n\n`
-					''
-				].join('\n')
 			},
 			{
 				name : 'Ink Friendly',
 				icon : 'fas fa-tint',
 				gen  : dedent`
 					/* Ink Friendly */
-					.pages *:is(.page,.monster,.note,.descriptive) {
+					*:is(.page,.monster,.note,.descriptive) {
 						background : white !important;
-						box-shadow : 0px 0px 3px !important;
+						filter : drop-shadow(0px 0px 3px #888) !important;
-					}
-
-					.page .note:before {
-						box-shadow : 0px 0px 3px;
 					}
 
 					.page img {
 						visibility : hidden;
-					}`
+					}\n\n`
 			},
 		]
 	},

client/homebrew/editor/snippetbar/snippetsLegacy/snippets.js

@@ -11,7 +11,7 @@ const dedent = require('dedent-tabs').default;
 module.exports = [
 
 	{
-		groupName : 'Editor',
+		groupName : 'Text Editor',
 		icon      : 'fas fa-pencil-alt',
 		view      : 'text',
 		snippets  : [
@@ -78,33 +78,44 @@ module.exports = [
 				icon : 'fas fa-book',
 				gen  : TableOfContentsGen
 			},
+			{
+				name : 'Add Comment',
+				icon : 'fas fa-code',
+				gen  : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
+			}
+		]
+	},
+
+
+	{
+		groupName : 'Style Editor',
+		icon      : 'fas fa-pencil-alt',
+		view      : 'style',
+		snippets  : [
 			{
 				name : 'Remove Drop Cap',
 				icon : 'fas fa-remove-format',
-				gen  : '<style>\n' +
+				gen  : dedent`/* Removes Drop Caps */
-						'  .phb h1+p:first-letter {\n' +
+						.phb h1+p:first-letter {
-						'    all: unset;\n' +
+							all: unset;
-						'  }\n' +
+						}\n\n`
-						'</style>'
 			},
 			{
 				name : 'Tweak Drop Cap',
 				icon : 'fas fa-sliders-h',
-				gen  : '<style>\n' +
+				gen  : dedent`/* Drop Cap Settings */
-						'  /* Drop Cap settings */\n' +
+						.phb h1 + p::first-letter {
-						'  .phb h1 + p::first-letter {\n' +
+							float: left;
-						'    float: left;\n' +
+							font-family: Solberry;
-						'    font-family: Solberry;\n' +
+							font-size: 10em;
-						'    font-size: 10em;\n' +
+							color: #222;
-						'    color: #222;\n' +
+							line-height: .8em;
-						'    line-height: .8em;\n' +
+						}\n\n`
-						'  }\n' +
-						'</style>'
 			},
 			{
 				name : 'Add Comment',
 				icon : 'fas fa-code',
-				gen  : `\n<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->\n\n`
+				gen  : '/* This is a comment that will not be rendered into your brew. */'
 			}
 		]
 	},

themes/5ePhb.style.less

@@ -146,9 +146,9 @@ body {
 			font-size               : 3.5cm;
 			padding-left            : 40px; //Allow background color to extend into margins
 			margin-left             : -40px;
-			margin-top              :-0.3cm;
+			margin-top              : -0.3cm;
-			padding-bottom          :2px;
+			padding-bottom          : 2px;
-			margin-bottom           :-20px;
+			margin-bottom           : -20px;
 			background-image        : linear-gradient(-45deg, #322814, #998250, #322814);
 	    background-clip         : text;
 	    -webkit-background-clip : text;