tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix styles

pull/36/head
Artur Arseniev 10 years ago
parent
17e2932fb7
commit
bd33adc590
6 changed files with 58 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/rich_text_editor/config/config.js
  2. 14
      src/rich_text_editor/main.js
  3. 22
      src/rich_text_editor/view/CommandButtonSelectView.js
  4. 1
      src/rich_text_editor/view/CommandButtonView.js
  5. 18
      styles/css/main.css
  6. 28
      styles/scss/main.scss

8
src/rich_text_editor/config/config.js
View File

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

14
src/rich_text_editor/main.js
View File

@ -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
* 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')
* 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";
},
/**

22
src/rich_text_editor/view/CommandButtonSelectView.js
View File

@ -1,10 +1,9 @@
define(['backbone'],
function (Backbone) {
return Backbone.View.extend({
define(['backbone', './CommandButtonView'],
function (Backbone, CommandButtonView) {
return CommandButtonView.extend({
initialize: function(o, config){
this.config = config || {};
this.className = this.config.stylePrefix + 'btn ' + this.model.get('class');
CommandButtonView.prototype.initialize.apply(this, arguments);
},
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);
this.$el.html(this.getInput());
CommandButtonView.prototype.render.apply(this, arguments);
this.$el.html(this.getInputCont());
return this;
}
});

1
src/rich_text_editor/view/CommandButtonView.js
View File

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

18
styles/css/main.css
View File

@ -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;
color: transparent; }
padding: 0; }
.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; }

28
styles/scss/main.scss
View File

@ -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; }
Write Preview
Loading…
Cancel
Save