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);
+9 -8
View File
@@ -131,6 +131,7 @@ function theme_get_fontawesome_icon_map() {
static $map = [
'core:docs' => 'fa-info-circle',
'core:help' => 'fa-question-circle',
'core:req' => 'fa-exclamation-circle',
'core:a/add_file' => 'fa-file-o',
'core:a/create_folder' => 'fa-folder-o',
'core:a/download_all' => 'fa-download',
@@ -172,7 +173,7 @@ function theme_get_fontawesome_icon_map() {
'core:e/delete' => 'fa-minus',
'core:e/delete_table' => 'fa-minus',
'core:e/document_properties' => 'fa-info',
'core:e/emoticons' => 'fa-meh',
'core:e/emoticons' => 'fa-meh-o',
'core:e/find_replace' => 'fa-search-plus',
'core:e/forward' => 'fa-arrow-right',
'core:e/fullpage' => 'fa-arrows-alt',
@@ -198,7 +199,7 @@ function theme_get_fontawesome_icon_map() {
'core:e/layers_over' => 'fa-level-up',
'core:e/layers' => 'fa-window-restore',
'core:e/layers_under' => 'fa-level-down',
'core:e/left_to_right' => 'fa-language',
'core:e/left_to_right' => 'fa-chevron-right',
'core:e/manage_files' => 'fa-files-o',
'core:e/math' => 'fa-calculator',
'core:e/merge_cells' => 'fa-compress',
@@ -218,7 +219,7 @@ function theme_get_fontawesome_icon_map() {
'core:e/resize' => 'fa-expand',
'core:e/restore_draft' => 'fa-undo',
'core:e/restore_last_draft' => 'fa-undo',
'core:e/right_to_left' => 'fa-language',
'core:e/right_to_left' => 'fa-chevron-left',
'core:e/row_props' => 'fa-info',
'core:e/save' => 'fa-floppy-o',
'core:e/screenreader_helper' => 'fa-braille',
@@ -236,10 +237,10 @@ function theme_get_fontawesome_icon_map() {
'core:e/table_props' => 'fa-table',
'core:e/table' => 'fa-table',
'core:e/template' => 'fa-sticky-note',
'core:e/text_color_picker' => 'fa-hand-pointer-o',
'core:e/text_color' => 'fa-hand-pointer-o',
'core:e/text_highlight_picker' => 'fa-hand-pointer-o',
'core:e/text_highlight' => 'fa-hand-pointer-o',
'core:e/text_color_picker' => 'fa-paint-brush',
'core:e/text_color' => 'fa-paint-brush',
'core:e/text_highlight_picker' => 'fa-lightbulb-o',
'core:e/text_highlight' => 'fa-lightbulb-o',
'core:e/tick' => 'fa-check',
'core:e/toggle_blockquote' => 'fa-quote-left',
'core:e/underline' => 'fa-underline',
@@ -835,7 +836,7 @@ function theme_get_fontawesome_icon_map() {
'core:t/emailno' => 'fa-envelope-o',
'core:t/email' => 'fa-envelope',
'core:t/enrolusers' => 'fa-user-plus',
'core:t/expanded' => 'fa-minus-square',
'core:t/expanded' => 'fa-caret-down',
'core:t/go' => 'fa-arrow-right',
'core:t/grades' => 'fa-graduation-cap',
'core:t/groupn' => 'fa-users',