Fix styles

src/rich_text_editor/config/config.js

@@ -23,10 +23,10 @@ define(function () {
 	 	}/*,{
 	 		command: 	'fontSize',
 	 		options: [
-	 			{name: 'Huge', value: '100px'},
+	 			{name: 'Huge', value: '7'},
-	 			{name: 'Normal', value: '14px'},
+	 			{name: 'Normal', value: '5'},
-	 			{value: '5px'}
+	 			{value: '1'}
 	 		]
-	 }*/],
+	 	}*/],
 	};
 });

src/rich_text_editor/main.js

@@ -4,13 +4,11 @@
  * * [getAll](#getall)
  * * [remove](#remove)
  *
+ * This module allows to customize the toolbar of the Rich Text Editor and use commands from the HTML Editing APIs.
+ * For more info about HTML Editing APIs check here:
+ * https://developer.mozilla.org/it/docs/Web/API/Document/execCommand
  *
- * styleWithCSS
+ * It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize')
- * removeFormat
- *
- *
- * This module allows to customize the toolbar of the Rich Text Editor. It's highly recommended
- * to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize')
  * and leave this task to the Style Manager.
  *
  * Before using methods you should get first the module from the editor instance, in this way:
@@ -164,7 +162,7 @@ define(function(require) {
 			 * @private
 			 * */
 			show: function(){
-				toolbar.el.style.display = 'block';
+        toolbar.el.style.display = "block";
 			},
 
 			/**
@@ -172,7 +170,7 @@ define(function(require) {
 			 * @private
 			 * */
 			hide: function(){
-				toolbar.el.style.display = 'none';
+        toolbar.el.style.display = "none";
 			},
 
 			/**

src/rich_text_editor/view/CommandButtonSelectView.js

@@ -1,10 +1,9 @@
-define(['backbone'],
+define(['backbone', './CommandButtonView'],
-	function (Backbone) {
+	function (Backbone, CommandButtonView) {
-	return Backbone.View.extend({
+	return CommandButtonView.extend({
 
 		initialize: function(o, config){
-			this.config = config || {};
+			CommandButtonView.prototype.initialize.apply(this, arguments);
-			this.className = this.config.stylePrefix + 'btn ' + this.model.get('class');
 		},
 
 		getInput: function(){
@@ -13,6 +12,8 @@ define(['backbone'],
 				var cmd = m.get('command');
 				var input = '<select data-edit="' + cmd +'">';
 				var opts = m.get('options');
+				var label = m.get('title') || m.get('command');
+				input += '<option>' + label + '</option>';
 				for(var i = 0, len = opts.length; i < len; i++){
 					var opt = opts[i];
 					var value = opt.value;
@@ -25,9 +26,16 @@ define(['backbone'],
 			return this.input;
 		},
 
+		getInputCont: function() {
+			var input = this.getInput();
+			var pfx = this.ppfx;
+			var cont = $('<div class="'+pfx+'field '+pfx+'select"><div class="'+pfx+'sel-arrow"><div class="'+pfx+'d-s-arrow"></div></div></div>');
+			return cont.append(input);
+		},
+
 		render: function() {
-			this.$el.addClass(this.className);
+			CommandButtonView.prototype.render.apply(this, arguments);
-			this.$el.html(this.getInput());
+			this.$el.html(this.getInputCont());
 			return this;
 		}
 	});

src/rich_text_editor/view/CommandButtonView.js

@@ -6,6 +6,7 @@ define(['backbone'],
 
 		initialize: function(o, config){
 			this.config = config || {};
+			this.ppfx = this.config.pStylePrefix || '';
 			this.className = this.config.stylePrefix + 'btn ' + this.model.get('class');
 		},
 

styles/css/main.css

@@ -2699,6 +2699,9 @@ $fontColorActive: #4f8ef7;
 div.gjs-select {
   padding: 0; }
 
+.gjs-select select {
+  padding-right: 10px; }
+
 .gjs-select:-moz-focusring,
 .gjs-select select:-moz-focusring {
   color: transparent;
@@ -3103,8 +3106,6 @@ ol.example li.placeholder:before {
     position: relative;
     z-index: 1; }
   .gjs-field select {
-    color: transparent;
-    text-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
     height: 20px; }
   .gjs-field option {
     margin: 5px 0; }
@@ -3305,8 +3306,7 @@ ol.example li.placeholder:before {
         line-height: normal; }
     .gjs-sm-sector .gjs-sm-field.gjs-sm-integer select, .gjs-clm-tags .gjs-sm-field.gjs-sm-integer select, .gjs-sm-sector .gjs-sm-integer.gjs-clm-field select, .gjs-clm-tags .gjs-sm-integer.gjs-clm-field select, .gjs-clm-tags #gjs-clm-tags-field select {
       width: auto;
-      padding: 0;
+      padding: 0; }
-      color: transparent; }
   .gjs-sm-sector .gjs-sm-list .gjs-sm-el, .gjs-clm-tags .gjs-sm-list .gjs-sm-el {
     float: left;
     border-left: 1px solid rgba(0, 0, 0, 0.3); }
@@ -3562,6 +3562,7 @@ ol.example li.placeholder:before {
   background-color: #000;
   position: absolute;
   top: 0;
+  left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
@@ -3572,6 +3573,7 @@ ol.example li.placeholder:before {
   font-family: Helvetica, sans-serif;
   position: absolute;
   top: 0;
+  left: 0;
   z-index: 10;
   width: 100%;
   height: 100%; }
@@ -3739,13 +3741,14 @@ ol.example li.placeholder:before {
 
 /*************RTE****************/
 #gjs-rte-toolbar {
+  display: none;
   border: 1px solid rgba(0, 0, 0, 0.3);
   position: absolute;
   border-radius: 3px;
   overflow: hidden;
-  display: none;
   z-index: 5; }
   #gjs-rte-toolbar .gjs-rte-btn {
+    display: inline-block;
     padding: 5px;
     min-width: 25px;
     border-right: 1px solid rgba(0, 0, 0, 0.3);
@@ -3758,6 +3761,8 @@ ol.example li.placeholder:before {
       background-color: rgba(0, 0, 0, 0.3); }
     #gjs-rte-toolbar .gjs-rte-btn:hover {
       background-color: rgba(255, 255, 255, 0.1); }
+  #gjs-rte-toolbar select {
+    height: 16px; }
 
 /********* Spectrum **********/
 .sp-hue, .sp-slider {
@@ -3835,3 +3840,6 @@ ol.example li.placeholder:before {
 
 .sp-palette .sp-thumb-el, .sp-palette .sp-thumb-el:hover {
   border: 1px solid rgba(0, 0, 0, 0.8); }
+
+.gjs-hidden {
+  display: none; }

styles/scss/main.scss

@@ -76,8 +76,8 @@ $fontV: 5;//random(1000)
 	appearance: $v;
 }
 
-.#{$app-prefix}fonts{
+.#{$app-prefix}fonts{}
-}
+
 .#{$app-prefix}fonts:before{
   display: block;
   font: normal normal normal 14px font3336; // shortening font declaration
@@ -194,6 +194,9 @@ $fontV: 5;//random(1000)
 div.#{$app-prefix}select{
   padding: 0;
 }
+.#{$app-prefix}select select{
+  padding-right: 10px
+}
 .#{$app-prefix}select:-moz-focusring,
 .#{$app-prefix}select select:-moz-focusring{
   color: transparent;
@@ -632,8 +635,6 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
   }
 
   select{
-    color: transparent;
-    text-shadow: 0 0 0 $inputFontColor;
     height: 20px;
   }
 
@@ -856,7 +857,7 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
 			}
 		}
 
-		&.#{$sm-prefix}integer select{ width:auto; padding: 0; color: transparent;}
+		&.#{$sm-prefix}integer select{ width:auto; padding: 0;}
 
 	}
 	/*------------------END Field--------------------*/
@@ -1185,7 +1186,8 @@ $paddElClm: 5px 6px;
 .#{$mdl-prefix}backlayer {
 	background-color: #000;
   	position: absolute;
-  	top: 0; z-index: 1;
+  	top: 0; left: 0;
+    z-index: 1;
   	width:100%; height:100%;
   	@include opacity(0.5);
 }
@@ -1193,7 +1195,8 @@ $paddElClm: 5px 6px;
 .#{$mdl-prefix}container {
 		font-family: $mainFont;
   	position: absolute;
-  	top: 0; z-index: 10;
+  	top: 0; left: 0;
+    z-index: 10;
   	width:100%; height:100%;
 }
 
@@ -1406,15 +1409,16 @@ $uploadPadding:	150px 10px;
 
 ##{$rte-prefix}toolbar {
   @extend .#{$app-prefix}bg-main;
+  display: none;
   border: 1px solid $mainDkColor;
   position: absolute;
   border-radius: 3px;
   overflow: hidden;
-  display: none;
   z-index: 5;
 
   .#{$rte-prefix}btn {
   	@extend .#{$app-prefix}color-main;
+    display: inline-block;
 		padding: 5px;
 		min-width:	25px;
 		border-right: 1px solid $mainDkColor;
@@ -1426,6 +1430,10 @@ $uploadPadding:	150px 10px;
 	  	&.btn-info{ background-color: $mainDkColor;}
 	  	&:hover {  background-color: $mainLhColor;}
 	}
+
+  select{
+    height: 16px;
+  }
 }
 
 /********* Spectrum **********/
@@ -1487,4 +1495,6 @@ $uploadPadding:	150px 10px;
 }
 .sp-palette .sp-thumb-el, .sp-palette .sp-thumb-el:hover{
   border: 1px solid rgba(0, 0, 0, 0.8);
-}
+}
+
+.#{$app-prefix}hidden{ display: none; }