Revert "MDL-46531 Make atto foreground colors and background colors configurable"

This reverts commit cb6e1d5270.

This reverts commit 7a5e605424, reversing
changes made to 7b9fb265d2.

This reverts commit 06404b0118, reversing
changes made to 0f87473fed.

Conflicts:
	theme/bootstrapbase/style/moodle.css
This commit is contained in:
Dan Poltawski
2014-11-20 07:04:41 +00:00
parent 11b5e41b0c
commit 17d4ff23ee
13 changed files with 132 additions and 421 deletions
@@ -1,33 +1,3 @@
.atto_backcolor_button .dropdown-menu {
min-width: inherit;
}
.atto_backcolor_button .dropdown-menu .atto_menuentry div {
border: 1px solid #ccc;
width: 20px;
height: 20px;
}
.atto_backcolor_button .dropdown-menu .atto_menuentry .white {
background-color: #fff;
}
.atto_backcolor_button .dropdown-menu .atto_menuentry .red {
background-color: #ef4540;
}
.atto_backcolor_button .dropdown-menu .atto_menuentry .yellow {
background-color: #ffcf35;
}
.atto_backcolor_button .dropdown-menu .atto_menuentry .green {
background-color: #98ca3e;
}
.atto_backcolor_button .dropdown-menu .atto_menuentry .blue {
background-color: #7d9fd3;
}
.atto_backcolor_button .dropdown-menu .atto_menuentry .black {
background-color: #000;
}
@@ -35,17 +35,23 @@ YUI.add('moodle-atto_backcolor-button', function (Y, NAME) {
var colors = [
{
name: 'white'
name: 'white',
color: '#FFFFFF'
}, {
name: 'red'
name: 'red',
color: '#EF4540'
}, {
name: 'yellow'
name: 'yellow',
color: '#FFCF35'
}, {
name: 'green'
name: 'green',
color: '#98CA3E'
}, {
name: 'blue'
name: 'blue',
color: '#7D9FD3'
}, {
name: 'black'
name: 'black',
color: '#333333'
}
];
@@ -54,8 +60,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
var items = [];
Y.Array.each(colors, function(color) {
items.push({
text: '<div class="' + color.name + '"></div>',
callbackArgs: color.className || color.name
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
color.color +
'"></div>',
callbackArgs: color.color
});
});
@@ -74,40 +82,13 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
*
* @method _changeStyle
* @param {EventFacade} e
* @param {string} backColorClass The class for the new font
* @param {string} color The new background color
* @private
*/
_changeStyle: function(e, backColorClass) {
var host = this.get('host'),
classname = host.PLACEHOLDER_CLASS,
originalSelection = host.getSelection(),
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
cssApplier.applyToSelection();
if (!Y.one('.' + classname)) {
// The selection is likely empty. Create an empty span, and focus it.
var firstRange = originalSelection[0],
fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
newRange = rangy.createRange(),
selection;
firstRange.insertNode(fragment.lastChild);
firstRange.collapse();
// Update the originalSelection to point to the newly selected range.
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
selection = rangy.getSelection();
selection.setSingleRange(newRange);
originalSelection = selection.getAllRanges();
}
this.editor.all('.' + classname).each(function (node) {
node.setAttribute('class', 'backcolor ' + backColorClass);
}, this);
host.setSelection(originalSelection);
this.markUpdated();
_changeStyle: function(e, color) {
this.get('host').formatSelectionInlineStyle({
backgroundColor: color
});
}
});
@@ -1 +1 @@
YUI.add("moodle-atto_backcolor-button",function(e,t){var n=[{name:"white"},{name:"red"},{name:"yellow"},{name:"green"},{name:"blue"},{name:"black"}];e.namespace("M.atto_backcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div class="'+e.name+'"></div>',callbackArgs:e.className||e.name})}),this.addToolbarMenu({icon:"e/text_highlight",overlayWidth:"4",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(t,n){var r=this.get("host"),i=r.PLACEHOLDER_CLASS,s=r.getSelection(),o=rangy.createCssClassApplier(i,{normalize:!0});o.applyToSelection();if(!e.one("."+i)){var u=s[0],a=u.createContextualFragment('<span class="'+i+'">&nbsp;</span>'),f=rangy.createRange(),l;u.insertNode(a.lastChild),u.collapse(),f.selectNodeContents(e.one("."+i).getDOMNode()),l=rangy.getSelection(),l.setSingleRange(f),s=l.getAllRanges()}this.editor.all("."+i).each(function(e){e.setAttribute("class","backcolor "+n)},this),r.setSelection(s),this.markUpdated()}})},"@VERSION@");
YUI.add("moodle-atto_backcolor-button",function(e,t){var n=[{name:"white",color:"#FFFFFF"},{name:"red",color:"#EF4540"},{name:"yellow",color:"#FFCF35"},{name:"green",color:"#98CA3E"},{name:"blue",color:"#7D9FD3"},{name:"black",color:"#333333"}];e.namespace("M.atto_backcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: '+e.color+'"></div>',callbackArgs:e.color})}),this.addToolbarMenu({icon:"e/text_highlight",overlayWidth:"4",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(e,t){this.get("host").formatSelectionInlineStyle({backgroundColor:t})}})},"@VERSION@");
@@ -35,17 +35,23 @@ YUI.add('moodle-atto_backcolor-button', function (Y, NAME) {
var colors = [
{
name: 'white'
name: 'white',
color: '#FFFFFF'
}, {
name: 'red'
name: 'red',
color: '#EF4540'
}, {
name: 'yellow'
name: 'yellow',
color: '#FFCF35'
}, {
name: 'green'
name: 'green',
color: '#98CA3E'
}, {
name: 'blue'
name: 'blue',
color: '#7D9FD3'
}, {
name: 'black'
name: 'black',
color: '#333333'
}
];
@@ -54,8 +60,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
var items = [];
Y.Array.each(colors, function(color) {
items.push({
text: '<div class="' + color.name + '"></div>',
callbackArgs: color.className || color.name
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
color.color +
'"></div>',
callbackArgs: color.color
});
});
@@ -74,40 +82,13 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
*
* @method _changeStyle
* @param {EventFacade} e
* @param {string} backColorClass The class for the new font
* @param {string} color The new background color
* @private
*/
_changeStyle: function(e, backColorClass) {
var host = this.get('host'),
classname = host.PLACEHOLDER_CLASS,
originalSelection = host.getSelection(),
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
cssApplier.applyToSelection();
if (!Y.one('.' + classname)) {
// The selection is likely empty. Create an empty span, and focus it.
var firstRange = originalSelection[0],
fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
newRange = rangy.createRange(),
selection;
firstRange.insertNode(fragment.lastChild);
firstRange.collapse();
// Update the originalSelection to point to the newly selected range.
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
selection = rangy.getSelection();
selection.setSingleRange(newRange);
originalSelection = selection.getAllRanges();
}
this.editor.all('.' + classname).each(function (node) {
node.setAttribute('class', 'backcolor ' + backColorClass);
}, this);
host.setSelection(originalSelection);
this.markUpdated();
_changeStyle: function(e, color) {
this.get('host').formatSelectionInlineStyle({
backgroundColor: color
});
}
});
+21 -40
View File
@@ -33,17 +33,23 @@
var colors = [
{
name: 'white'
name: 'white',
color: '#FFFFFF'
}, {
name: 'red'
name: 'red',
color: '#EF4540'
}, {
name: 'yellow'
name: 'yellow',
color: '#FFCF35'
}, {
name: 'green'
name: 'green',
color: '#98CA3E'
}, {
name: 'blue'
name: 'blue',
color: '#7D9FD3'
}, {
name: 'black'
name: 'black',
color: '#333333'
}
];
@@ -52,8 +58,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
var items = [];
Y.Array.each(colors, function(color) {
items.push({
text: '<div class="' + color.name + '"></div>',
callbackArgs: color.className || color.name
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
color.color +
'"></div>',
callbackArgs: color.color
});
});
@@ -72,39 +80,12 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
*
* @method _changeStyle
* @param {EventFacade} e
* @param {string} backColorClass The class for the new font
* @param {string} color The new background color
* @private
*/
_changeStyle: function(e, backColorClass) {
var host = this.get('host'),
classname = host.PLACEHOLDER_CLASS,
originalSelection = host.getSelection(),
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
cssApplier.applyToSelection();
if (!Y.one('.' + classname)) {
// The selection is likely empty. Create an empty span, and focus it.
var firstRange = originalSelection[0],
fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
newRange = rangy.createRange(),
selection;
firstRange.insertNode(fragment.lastChild);
firstRange.collapse();
// Update the originalSelection to point to the newly selected range.
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
selection = rangy.getSelection();
selection.setSingleRange(newRange);
originalSelection = selection.getAllRanges();
}
this.editor.all('.' + classname).each(function (node) {
node.setAttribute('class', 'backcolor ' + backColorClass);
}, this);
host.setSelection(originalSelection);
this.markUpdated();
_changeStyle: function(e, color) {
this.get('host').formatSelectionInlineStyle({
backgroundColor: color
});
}
});
@@ -1,33 +1,3 @@
.atto_fontcolor_button .dropdown-menu {
min-width: inherit;
}
.atto_fontcolor_button .dropdown-menu .atto_menuentry div {
border: 1px solid #ccc;
width: 20px;
height: 20px;
}
.atto_fontcolor_button .dropdown-menu .atto_menuentry .white {
background-color: #fff;
}
.atto_fontcolor_button .dropdown-menu .atto_menuentry .red {
background-color: #ef4540;
}
.atto_fontcolor_button .dropdown-menu .atto_menuentry .yellow {
background-color: #ffcf35;
}
.atto_fontcolor_button .dropdown-menu .atto_menuentry .green {
background-color: #98ca3e;
}
.atto_fontcolor_button .dropdown-menu .atto_menuentry .blue {
background-color: #7d9fd3;
}
.atto_fontcolor_button .dropdown-menu .atto_menuentry .black {
background-color: #000;
}
@@ -35,17 +35,23 @@ YUI.add('moodle-atto_fontcolor-button', function (Y, NAME) {
var colors = [
{
name: 'white'
name: 'white',
color: '#FFFFFF'
}, {
name: 'red'
name: 'red',
color: '#EF4540'
}, {
name: 'yellow'
name: 'yellow',
color: '#FFCF35'
}, {
name: 'green'
name: 'green',
color: '#98CA3E'
}, {
name: 'blue'
name: 'blue',
color: '#7D9FD3'
}, {
name: 'black'
name: 'black',
color: '#333333'
}
];
@@ -54,8 +60,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
var items = [];
Y.Array.each(colors, function(color) {
items.push({
text: '<div class="' + color.name + '"></div>',
callbackArgs: color.className || color.name,
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
color.color +
'"></div>',
callbackArgs: color.color,
callback: this._changeStyle
});
});
@@ -72,44 +80,17 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
},
/**
* Change the font color using the specified class
* Change the font color to the specified color.
*
* @method _changeStyle
* @param {EventFacade} e
* @param {string} fontColorClass The class for the new font
* @param {string} color The new font color
* @private
*/
_changeStyle: function(e, fontColorClass) {
var host = this.get('host'),
classname = host.PLACEHOLDER_CLASS,
originalSelection = host.getSelection(),
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
cssApplier.applyToSelection();
if (!Y.one('.' + classname)) {
// The selection is likely empty. Create an empty span, and focus it.
var firstRange = originalSelection[0],
fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
newRange = rangy.createRange(),
selection;
firstRange.insertNode(fragment.lastChild);
firstRange.collapse();
// Update the originalSelection to point to the newly selected range.
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
selection = rangy.getSelection();
selection.setSingleRange(newRange);
originalSelection = selection.getAllRanges();
}
this.editor.all('.' + classname).each(function (node) {
node.setAttribute('class', 'fontcolor ' + fontColorClass);
}, this);
host.setSelection(originalSelection);
this.markUpdated();
_changeStyle: function(e, color) {
this.get('host').formatSelectionInlineStyle({
color: color
});
}
});
@@ -1 +1 @@
YUI.add("moodle-atto_fontcolor-button",function(e,t){var n=[{name:"white"},{name:"red"},{name:"yellow"},{name:"green"},{name:"blue"},{name:"black"}];e.namespace("M.atto_fontcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div class="'+e.name+'"></div>',callbackArgs:e.className||e.name,callback:this._changeStyle})}),this.addToolbarMenu({icon:"e/text_color",overlayWidth:"4",menuColor:"#333333",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(t,n){var r=this.get("host"),i=r.PLACEHOLDER_CLASS,s=r.getSelection(),o=rangy.createCssClassApplier(i,{normalize:!0});o.applyToSelection();if(!e.one("."+i)){var u=s[0],a=u.createContextualFragment('<span class="'+i+'">&nbsp;</span>'),f=rangy.createRange(),l;u.insertNode(a.lastChild),u.collapse(),f.selectNodeContents(e.one("."+i).getDOMNode()),l=rangy.getSelection(),l.setSingleRange(f),s=l.getAllRanges()}this.editor.all("."+i).each(function(e){e.setAttribute("class","fontcolor "+n)},this),r.setSelection(s),this.markUpdated()}})},"@VERSION@");
YUI.add("moodle-atto_fontcolor-button",function(e,t){var n=[{name:"white",color:"#FFFFFF"},{name:"red",color:"#EF4540"},{name:"yellow",color:"#FFCF35"},{name:"green",color:"#98CA3E"},{name:"blue",color:"#7D9FD3"},{name:"black",color:"#333333"}];e.namespace("M.atto_fontcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: '+e.color+'"></div>',callbackArgs:e.color,callback:this._changeStyle})}),this.addToolbarMenu({icon:"e/text_color",overlayWidth:"4",menuColor:"#333333",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(e,t){this.get("host").formatSelectionInlineStyle({color:t})}})},"@VERSION@");
@@ -35,17 +35,23 @@ YUI.add('moodle-atto_fontcolor-button', function (Y, NAME) {
var colors = [
{
name: 'white'
name: 'white',
color: '#FFFFFF'
}, {
name: 'red'
name: 'red',
color: '#EF4540'
}, {
name: 'yellow'
name: 'yellow',
color: '#FFCF35'
}, {
name: 'green'
name: 'green',
color: '#98CA3E'
}, {
name: 'blue'
name: 'blue',
color: '#7D9FD3'
}, {
name: 'black'
name: 'black',
color: '#333333'
}
];
@@ -54,8 +60,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
var items = [];
Y.Array.each(colors, function(color) {
items.push({
text: '<div class="' + color.name + '"></div>',
callbackArgs: color.className || color.name,
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
color.color +
'"></div>',
callbackArgs: color.color,
callback: this._changeStyle
});
});
@@ -72,44 +80,17 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
},
/**
* Change the font color using the specified class
* Change the font color to the specified color.
*
* @method _changeStyle
* @param {EventFacade} e
* @param {string} fontColorClass The class for the new font
* @param {string} color The new font color
* @private
*/
_changeStyle: function(e, fontColorClass) {
var host = this.get('host'),
classname = host.PLACEHOLDER_CLASS,
originalSelection = host.getSelection(),
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
cssApplier.applyToSelection();
if (!Y.one('.' + classname)) {
// The selection is likely empty. Create an empty span, and focus it.
var firstRange = originalSelection[0],
fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
newRange = rangy.createRange(),
selection;
firstRange.insertNode(fragment.lastChild);
firstRange.collapse();
// Update the originalSelection to point to the newly selected range.
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
selection = rangy.getSelection();
selection.setSingleRange(newRange);
originalSelection = selection.getAllRanges();
}
this.editor.all('.' + classname).each(function (node) {
node.setAttribute('class', 'fontcolor ' + fontColorClass);
}, this);
host.setSelection(originalSelection);
this.markUpdated();
_changeStyle: function(e, color) {
this.get('host').formatSelectionInlineStyle({
color: color
});
}
});
+22 -41
View File
@@ -33,17 +33,23 @@
var colors = [
{
name: 'white'
name: 'white',
color: '#FFFFFF'
}, {
name: 'red'
name: 'red',
color: '#EF4540'
}, {
name: 'yellow'
name: 'yellow',
color: '#FFCF35'
}, {
name: 'green'
name: 'green',
color: '#98CA3E'
}, {
name: 'blue'
name: 'blue',
color: '#7D9FD3'
}, {
name: 'black'
name: 'black',
color: '#333333'
}
];
@@ -52,8 +58,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
var items = [];
Y.Array.each(colors, function(color) {
items.push({
text: '<div class="' + color.name + '"></div>',
callbackArgs: color.className || color.name,
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
color.color +
'"></div>',
callbackArgs: color.color,
callback: this._changeStyle
});
});
@@ -70,43 +78,16 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
},
/**
* Change the font color using the specified class
* Change the font color to the specified color.
*
* @method _changeStyle
* @param {EventFacade} e
* @param {string} fontColorClass The class for the new font
* @param {string} color The new font color
* @private
*/
_changeStyle: function(e, fontColorClass) {
var host = this.get('host'),
classname = host.PLACEHOLDER_CLASS,
originalSelection = host.getSelection(),
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
cssApplier.applyToSelection();
if (!Y.one('.' + classname)) {
// The selection is likely empty. Create an empty span, and focus it.
var firstRange = originalSelection[0],
fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
newRange = rangy.createRange(),
selection;
firstRange.insertNode(fragment.lastChild);
firstRange.collapse();
// Update the originalSelection to point to the newly selected range.
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
selection = rangy.getSelection();
selection.setSingleRange(newRange);
originalSelection = selection.getAllRanges();
}
this.editor.all('.' + classname).each(function (node) {
node.setAttribute('class', 'fontcolor ' + fontColorClass);
}, this);
host.setSelection(originalSelection);
this.markUpdated();
_changeStyle: function(e, color) {
this.get('host').formatSelectionInlineStyle({
color: color
});
}
});
-52
View File
@@ -2301,58 +2301,6 @@ body.lockscroll {
border: inherit;
}
/* Core content colours - these are defined in Atto but can be overwritten
* by themes. This is an alternative to using fixed colours applied using
* the style attribute */
.fontcolor.white {
color: #fff;
}
.fontcolor.red {
color: #ef4540;
}
.fontcolor.yellow {
color: #ffcf35;
}
.fontcolor.green {
color: #98ca3e;
}
.fontcolor.blue {
color: #7d9fd3;
}
.fontcolor.black {
color: #000;
}
.backcolor.white {
background-color: #fff;
}
.backcolor.red {
background-color: #ef4540;
}
.backcolor.yellow {
background-color: #ffcf35;
}
.backcolor.green {
background-color: #98ca3e;
}
.backcolor.blue {
background-color: #7d9fd3;
}
.backcolor.black {
background-color: #000;
}
.well {
min-height: 20px;
padding: 19px;
-63
View File
@@ -1,68 +1,5 @@
/* core.less */
/* Core content colours - these are defined in Atto but can be overwritten
* by themes. This is an alternative to using fixed colours applied using
* the style attribute */
@contentColorWhite: #fff;
@contentColorRed: #ef4540;
@contentColorYellow: #ffcf35;
@contentColorGreen: #98ca3e;
@contentColorBlue: #7d9fd3;
@contentColorBlack: #000;
.fontcolor {
&.white {
color: @contentColorWhite;
}
&.red {
color: @contentColorRed
}
&.yellow {
color: @contentColorYellow;
}
&.green {
color: @contentColorGreen;
}
&.blue {
color: @contentColorBlue;
}
&.black {
color: @contentColorBlack;
}
}
.backcolor {
&.white {
background-color: @contentColorWhite;
}
&.red {
background-color: @contentColorRed
}
&.yellow {
background-color: @contentColorYellow;
}
&.green {
background-color: @contentColorGreen;
}
&.blue {
background-color: @contentColorBlue;
}
&.black {
background-color: @contentColorBlack;
}
}
/** Page layout CSS starts **/
.layout-option-noheader #page-header,
.layout-option-nonavbar #page-navbar,
File diff suppressed because one or more lines are too long