MDL-40759 atto: Use pix_icon renderer for atto buttons

This commit is contained in:
Damyon Wiese
2017-03-17 15:51:28 +08:00
parent ec7b552251
commit d3d2f09cef
9 changed files with 84 additions and 48 deletions
+6
View File
@@ -42,3 +42,9 @@ function atto_collapse_params_for_js($elementid, $options, $fpoptions) {
$params = array('showgroups' => get_config('atto_collapse', 'showgroups'));
return $params;
}
function atto_collapse_get_fontawesome_icon_map() {
return [
'atto_collapse:icon' => 'fa-level-down'
];
}
+4 -8
View File
@@ -68,13 +68,9 @@ div.editor_atto_toolbar button::-moz-focus-inner {
padding: 0;
}
div.editor_atto_toolbar button img.icon {
div.editor_atto_toolbar button .icon {
padding: 0;
margin: 2px 0;
/* The following is dedicated to the beloved IE8, clashing with Bootstrap. God bless you IE. */
vertical-align: text-bottom;
width: auto;
height: auto;
}
div.editor_atto_toolbar div.atto_group {
@@ -96,7 +92,7 @@ div.editor_atto_toolbar div.atto_group {
white-space: nowrap;
}
.atto_menuentry img {
.atto_menuentry .icon {
width: 16px;
height: 16px;
}
@@ -139,7 +135,7 @@ div.editor_atto_toolbar div.atto_group {
cursor: pointer;
}
.atto_control img {
.atto_control .icon {
background-color: white;
}
@@ -166,7 +162,7 @@ div.editor_atto_content:hover .atto_control {
}
.editor_atto_menu .dropdown-menu > li > a {
padding: 3px 14px;
margin: 3px 14px;
}
.editor_atto_menu .open ul.dropdown-menu {
@@ -183,10 +183,10 @@ var MENUTEMPLATE = '' +
'tabindex="-1" ' +
'type="button" ' +
'title="{{title}}">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
'style="background-color:{{config.menuColor}};" src="{{config.iconurl}}" />' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
'src="{{image_url "t/expanded" "moodle"}}"/>' +
// '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
// 'style="background-color:{{config.menuColor}};" src="{{config.iconurl}}" />' +
// '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
// 'src="{{image_url "t/expanded" "moodle"}}"/>' +
'</button>';
var DISABLED = 'disabled',
@@ -360,11 +360,12 @@ EditorPluginButtons.prototype = {
// Create the actual button.
button = Y.Node.create('<button type="button" class="' + buttonClass + '"' +
'tabindex="-1">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' +
config.iconurl + '"/>' +
'</button>');
'tabindex="-1"></button>');
button.setAttribute('title', title);
window.require(['core/templates'], function(Templates) {
var iconhtml = Templates.renderPix(config.icon, config.iconComponent, title);
button.append(iconhtml);
});
// Append it to the group.
group.append(button);
@@ -533,6 +534,14 @@ EditorPluginButtons.prototype = {
title: title
}));
window.require(['core/templates'], function(Templates) {
var iconhtml = Templates.renderPix(config.icon, config.iconComponent, title);
button.append(iconhtml);
iconhtml = Templates.renderPix('t/expanded', 'core', '');
button.append(iconhtml);
});
// Append it to the group.
group.append(button);
@@ -727,7 +736,7 @@ EditorPluginButtons.prototype = {
_normalizeIcon: function(config) {
if (!config.iconurl) {
// The default icon component.
if (!config.iconComponent) {
if (!config.iconComponent || config.iconComponent == 'moodle') {
config.iconComponent = 'core';
}
config.iconurl = M.util.image_url(config.icon, config.iconComponent);
File diff suppressed because one or more lines are too long
@@ -183,10 +183,10 @@ var MENUTEMPLATE = '' +
'tabindex="-1" ' +
'type="button" ' +
'title="{{title}}">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
'style="background-color:{{config.menuColor}};" src="{{config.iconurl}}" />' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
'src="{{image_url "t/expanded" "moodle"}}"/>' +
// '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
// 'style="background-color:{{config.menuColor}};" src="{{config.iconurl}}" />' +
// '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
// 'src="{{image_url "t/expanded" "moodle"}}"/>' +
'</button>';
var DISABLED = 'disabled',
@@ -360,11 +360,12 @@ EditorPluginButtons.prototype = {
// Create the actual button.
button = Y.Node.create('<button type="button" class="' + buttonClass + '"' +
'tabindex="-1">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' +
config.iconurl + '"/>' +
'</button>');
'tabindex="-1"></button>');
button.setAttribute('title', title);
window.require(['core/templates'], function(Templates) {
var iconhtml = Templates.renderPix(config.icon, config.iconComponent, title);
button.append(iconhtml);
});
// Append it to the group.
group.append(button);
@@ -531,6 +532,14 @@ EditorPluginButtons.prototype = {
title: title
}));
window.require(['core/templates'], function(Templates) {
var iconhtml = Templates.renderPix(config.icon, config.iconComponent, title);
button.append(iconhtml);
iconhtml = Templates.renderPix('t/expanded', 'core', '');
button.append(iconhtml);
});
// Append it to the group.
group.append(button);
@@ -725,7 +734,7 @@ EditorPluginButtons.prototype = {
_normalizeIcon: function(config) {
if (!config.iconurl) {
// The default icon component.
if (!config.iconComponent) {
if (!config.iconComponent || config.iconComponent == 'moodle') {
config.iconComponent = 'core';
}
config.iconurl = M.util.image_url(config.icon, config.iconComponent);
+18 -9
View File
@@ -33,10 +33,10 @@ var MENUTEMPLATE = '' +
'tabindex="-1" ' +
'type="button" ' +
'title="{{title}}">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
'style="background-color:{{config.menuColor}};" src="{{config.iconurl}}" />' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
'src="{{image_url "t/expanded" "moodle"}}"/>' +
// '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
// 'style="background-color:{{config.menuColor}};" src="{{config.iconurl}}" />' +
// '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" ' +
// 'src="{{image_url "t/expanded" "moodle"}}"/>' +
'</button>';
var DISABLED = 'disabled',
@@ -210,11 +210,12 @@ EditorPluginButtons.prototype = {
// Create the actual button.
button = Y.Node.create('<button type="button" class="' + buttonClass + '"' +
'tabindex="-1">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' +
config.iconurl + '"/>' +
'</button>');
'tabindex="-1"></button>');
button.setAttribute('title', title);
window.require(['core/templates'], function(Templates) {
var iconhtml = Templates.renderPix(config.icon, config.iconComponent, title);
button.append(iconhtml);
});
// Append it to the group.
group.append(button);
@@ -383,6 +384,14 @@ EditorPluginButtons.prototype = {
title: title
}));
window.require(['core/templates'], function(Templates) {
var iconhtml = Templates.renderPix(config.icon, config.iconComponent, title);
button.append(iconhtml);
iconhtml = Templates.renderPix('t/expanded', 'core', '');
button.append(iconhtml);
});
// Append it to the group.
group.append(button);
@@ -577,7 +586,7 @@ EditorPluginButtons.prototype = {
_normalizeIcon: function(config) {
if (!config.iconurl) {
// The default icon component.
if (!config.iconComponent) {
if (!config.iconComponent || config.iconComponent == 'moodle') {
config.iconComponent = 'core';
}
config.iconurl = M.util.image_url(config.icon, config.iconComponent);