MDL-40759 atto: Use pix_icon renderer for atto buttons

robjoyce · Mar 17, 2017 · d3d2f09 · d3d2f09
1 parent ec7b552
commit d3d2f09
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 48 deletions.
diff --git a/blog/rsslib.php b/blog/rsslib.php
@@ -82,8 +82,8 @@ function blog_rss_print_link($context, $filtertype, $filterselect = 0, $tagid =
     }
 
     $url = blog_rss_get_url($context->id, $userid, $filtertype, $filterselect, $tagid);
-    $rsspix = $OUTPUT->pix_url('i/rss');
-    print '<div class="pull-xs-right"><a href="'. $url .'"><img src="'. $rsspix .'" title="'. strip_tags($tooltiptext) .'" alt="'.get_string('rss').'" /></a></div>';
+    $rsspix = $OUTPUT->pix_icon('i/rss', get_string('rss'), 'core', array('title' => $tooltiptext));
+    print '<div class="pull-xs-right"><a href="'. $url .'">' . $rsspix . '</a></div>';
 }
 
 /**

diff --git a/lib/editor/atto/plugins/collapse/lib.php b/lib/editor/atto/plugins/collapse/lib.php
@@ -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'
+    ];
+}
diff --git a/lib/editor/atto/styles.css b/lib/editor/atto/styles.css
@@ -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 {

diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-debug.js b/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-debug.js
@@ -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);

diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-min.js b/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-min.js
diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin.js b/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin.js
@@ -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);

diff --git a/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js b/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js
@@ -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);

diff --git a/lib/outputlib.php b/lib/outputlib.php
@@ -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',

diff --git a/theme/boost/scss/moodle/icons.scss b/theme/boost/scss/moodle/icons.scss
@@ -11,8 +11,14 @@
     margin-right: 0.5rem;
 }
 
+$icon-color: $body-color !default;
+
 a .icon {
-    color: $body-color ! important;
+    color: $icon-color ! important;
+}
+
+.navbar-dark a .icon {
+    color: $navbar-dark-color ! important;
 }
 
 a:first-of-type > .icon,