From ae60722b14af0dbd664f5ef8ac1e4aa8ddbb72c3 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Mon, 8 May 2017 09:49:34 +0800 Subject: [PATCH] MDL-58808 fontawesome: nav and settings blocks --- .../amd/build/ajax_response_renderer.min.js | 2 +- .../amd/src/ajax_response_renderer.js | 57 ++++++++++--------- blocks/navigation/styles.css | 2 +- blocks/settings/styles.css | 2 +- .../output/icon_system_fontawesome.php | 4 +- theme/boost/scss/moodle/blocks.scss | 42 ++++++++++++++ 6 files changed, 78 insertions(+), 31 deletions(-) diff --git a/blocks/navigation/amd/build/ajax_response_renderer.min.js b/blocks/navigation/amd/build/ajax_response_renderer.min.js index 4c6949207c8..02578ec2d3c 100644 --- a/blocks/navigation/amd/build/ajax_response_renderer.min.js +++ b/blocks/navigation/amd/build/ajax_response_renderer.min.js @@ -1 +1 @@ -define(["jquery"],function(a){function b(d,e){var f=a("");f.attr("role","group"),f.attr("aria-hidden",!0),a.each(e,function(d,e){if("object"==typeof e){var g=a("
  • "),h=a("

    "),i=e.id||e.key+"_tree_item",j=null,k=!(!e.expandable&&!e.haschildren);if(h.addClass("tree_item"),h.attr("id",i),h.attr("role","treeitem"),h.attr("tabindex","-1"),e.requiresajaxloading&&(h.attr("data-requires-ajax",!0),h.attr("data-node-id",e.id),h.attr("data-node-key",e.key),h.attr("data-node-type",e.type)),k&&(g.addClass("collapsed contains_branch"),h.attr("aria-expanded",!1),h.addClass("branch")),!e.icon||k&&e.type!==c.ACTIVITY&&e.type!==c.RESOURCE||(g.addClass("item_with_icon"),h.addClass("hasicon"),j=a(""),j.attr("alt",e.icon.alt),j.attr("title",e.icon.title),j.attr("src",M.util.image_url(e.icon.pix,e.icon.component)),a.each(e.icon.classes,function(a,b){j.addClass(b)})),e.link){var l=a('');j?(l.append(j),l.append(''+e.name+"")):l.append(e.name),e.hidden&&l.addClass("dimmed"),h.append(l)}else{var m=a("");j?(m.append(j),m.append(''+e.name+"")):m.append(e.name),e.hidden&&m.addClass("dimmed"),h.append(m)}g.append(h),f.append(g),e.children&&e.children.length?b(h,e.children):k&&!e.requiresajaxloading&&(g.removeClass("contains_branch"),h.addClass("emptybranch"))}}),d.parent().append(f);var g=d.attr("id")+"_group";f.attr("id",g),d.attr("aria-owns",g),d.attr("role","treeitem")}var c={ACTIVITY:40,RESOURCE:50};return{render:function(a,c){if(c.children&&c.children.length){b(a,c.children);var d=a.children("[role='treeitem']").first(),e=a.find("#"+d.attr("aria-owns"));d.attr("aria-expanded",!0),e.attr("aria-hidden",!1)}else a.parent().hasClass("contains_branch")&&(a.parent().removeClass("contains_branch"),a.addClass("emptybranch"))}}}); \ No newline at end of file +define(["jquery","core/templates","core/notification","core/url"],function(a,b,c,d){function e(g,h){var i=a("");i.attr("role","group"),i.attr("aria-hidden",!0),a.each(h,function(g,h){if("object"==typeof h){var j=a("
  • "),k=a("

    "),l=h.id||h.key+"_tree_item",m=null,n=!(!h.expandable&&!h.haschildren);k.addClass("tree_item"),k.attr("id",l),k.attr("role","treeitem"),k.attr("tabindex","-1"),h.requiresajaxloading&&(k.attr("data-requires-ajax",!0),k.attr("data-node-id",h.id),k.attr("data-node-key",h.key),k.attr("data-node-type",h.type)),n&&(j.addClass("collapsed contains_branch"),k.attr("aria-expanded",!1),k.addClass("branch"));var o=null;if(h.link){var p=a('');o=p,p.append(''+h.name+""),h.hidden&&p.addClass("dimmed"),k.append(p)}else{var q=a("");o=q,q.append(''+h.name+""),h.hidden&&q.addClass("dimmed"),k.append(q)}!h.icon||n&&h.type!==f.ACTIVITY&&h.type!==f.RESOURCE||(j.addClass("item_with_icon"),k.addClass("hasicon"),h.type===f.ACTIVITY||h.type===f.RESOURCE?(m=a(""),m.attr("alt",h.icon.alt),m.attr("title",h.icon.title),m.attr("src",d.imageUrl(h.icon.pix,h.icon.component)),a.each(h.icon.classes,function(a,b){m.addClass(b)}),o.prepend(m)):("moodle"==h.icon.component&&(h.icon.component="core"),b.renderPix(h.icon.pix,h.icon.component,h.icon.title).then(function(a){o.prepend(a)})["catch"](c.exception))),j.append(k),i.append(j),h.children&&h.children.length?e(k,h.children):n&&!h.requiresajaxloading&&(j.removeClass("contains_branch"),k.addClass("emptybranch"))}}),g.parent().append(i);var j=g.attr("id")+"_group";i.attr("id",j),g.attr("aria-owns",j),g.attr("role","treeitem")}var f={ACTIVITY:40,RESOURCE:50};return{render:function(a,b){if(b.children&&b.children.length){e(a,b.children);var c=a.children("[role='treeitem']").first(),d=a.find("#"+c.attr("aria-owns"));c.attr("aria-expanded",!0),d.attr("aria-hidden",!1)}else a.parent().hasClass("contains_branch")&&(a.parent().removeClass("contains_branch"),a.addClass("emptybranch"))}}}); \ No newline at end of file diff --git a/blocks/navigation/amd/src/ajax_response_renderer.js b/blocks/navigation/amd/src/ajax_response_renderer.js index d9357424d1f..99f2e28f1fe 100644 --- a/blocks/navigation/amd/src/ajax_response_renderer.js +++ b/blocks/navigation/amd/src/ajax_response_renderer.js @@ -22,7 +22,7 @@ * @copyright 2015 John Okely * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -define(['jquery'], function($) { +define(['jquery', 'core/templates', 'core/notification', 'core/url'], function($, Templates, Notification, Url) { // Mappings for the different types of nodes coming from the navigation. // Copied from lib/navigationlib.php navigation_node constants. @@ -75,28 +75,12 @@ define(['jquery'], function($) { p.addClass('branch'); } - if (node.icon && (!isBranch || node.type === NODETYPE.ACTIVITY || node.type === NODETYPE.RESOURCE)) { - li.addClass('item_with_icon'); - p.addClass('hasicon'); - - icon = $(''); - icon.attr('alt', node.icon.alt); - icon.attr('title', node.icon.title); - icon.attr('src', M.util.image_url(node.icon.pix, node.icon.component)); - $.each(node.icon.classes, function(index, className) { - icon.addClass(className); - }); - } - + var eleToAddIcon = null; if (node.link) { var link = $(''); - if (icon) { - link.append(icon); - link.append('' + node.name + ''); - } else { - link.append(node.name); - } + eleToAddIcon = link; + link.append('' + node.name + ''); if (node.hidden) { link.addClass('dimmed'); @@ -106,12 +90,8 @@ define(['jquery'], function($) { } else { var span = $(''); - if (icon) { - span.append(icon); - span.append('' + node.name + ''); - } else { - span.append(node.name); - } + eleToAddIcon = span; + span.append('' + node.name + ''); if (node.hidden) { span.addClass('dimmed'); @@ -120,6 +100,31 @@ define(['jquery'], function($) { p.append(span); } + if (node.icon && (!isBranch || node.type === NODETYPE.ACTIVITY || node.type === NODETYPE.RESOURCE)) { + li.addClass('item_with_icon'); + p.addClass('hasicon'); + + if (node.type === NODETYPE.ACTIVITY || node.type === NODETYPE.RESOURCE) { + icon = $(''); + icon.attr('alt', node.icon.alt); + icon.attr('title', node.icon.title); + icon.attr('src', Url.imageUrl(node.icon.pix, node.icon.component)); + $.each(node.icon.classes, function(index, className) { + icon.addClass(className); + }); + eleToAddIcon.prepend(icon); + } else { + if (node.icon.component == 'moodle') { + node.icon.component = 'core'; + } + Templates.renderPix(node.icon.pix, node.icon.component, node.icon.title).then(function(html) { + // Prepend. + eleToAddIcon.prepend(html); + return; + }).catch(Notification.exception); + } + } + li.append(p); ul.append(li); diff --git a/blocks/navigation/styles.css b/blocks/navigation/styles.css index bb541f55926..2369c1af0d6 100644 --- a/blocks/navigation/styles.css +++ b/blocks/navigation/styles.css @@ -71,6 +71,6 @@ display: block; } -.block_navigation .block_tree [aria-hidden="true"] { +.block_navigation .block_tree [aria-hidden="true"]:not(.icon) { display: none; } diff --git a/blocks/settings/styles.css b/blocks/settings/styles.css index e0c94b2bad6..3d7e1d1a3e2 100644 --- a/blocks/settings/styles.css +++ b/blocks/settings/styles.css @@ -58,7 +58,7 @@ display: block; } -.block_settings .block_tree [aria-hidden="true"] { +.block_settings .block_tree [aria-hidden="true"]:not(.icon) { display: none; } diff --git a/lib/classes/output/icon_system_fontawesome.php b/lib/classes/output/icon_system_fontawesome.php index b047d63c47f..3d9593a1abb 100644 --- a/lib/classes/output/icon_system_fontawesome.php +++ b/lib/classes/output/icon_system_fontawesome.php @@ -247,7 +247,7 @@ class icon_system_fontawesome extends icon_system_font { 'core:i/mnethost' => 'fa-external-link', 'core:i/moodle_host' => 'fa-graduation-cap', 'core:i/move_2d' => 'fa-arrows', - 'core:i/navigationitem' => 'fa-angle-right', + 'core:i/navigationitem' => 'fa-fw', 'core:i/ne_red_mark' => 'fa-remove', 'core:i/new' => 'fa-plus', 'core:i/news' => 'fa-newspaper-o', @@ -280,7 +280,7 @@ class icon_system_fontawesome extends icon_system_font { 'core:i/scales' => 'fa-balance-scale', 'core:i/scheduled' => 'fa-calendar-check-o', 'core:i/search' => 'fa-search', - 'core:i/settings' => 'fa-cogs', + 'core:i/settings' => 'fa-cog', 'core:i/show' => 'fa-eye-slash', 'core:i/siteevent' => 'fa-share-alt', 'core:i/star-rating' => 'fa-star', diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss index bfa78154978..c5df38a326e 100644 --- a/theme/boost/scss/moodle/blocks.scss +++ b/theme/boost/scss/moodle/blocks.scss @@ -206,3 +206,45 @@ $doughnut-fill-colour: $brand-warning; } } } + +// Show expand collapse with font-awesome. +.block_settings .block_tree [aria-expanded="true"], +.block_settings .block_tree [aria-expanded="true"].emptybranch, +.block_settings .block_tree [aria-expanded="false"], +.block_navigation .block_tree [aria-expanded="true"], +.block_navigation .block_tree [aria-expanded="true"].emptybranch, +.block_navigation .block_tree [aria-expanded="false"] { + background-image: none; +} +.block_settings .block_tree [aria-expanded="true"]:before, +.block_navigation .block_tree [aria-expanded="true"]:before { + content: $fa-var-angle-down; + margin-right: 0; + font-size: 16px; + @extend .fa; + width: 16px; +} + +.block_settings .block_tree [aria-expanded="false"]:before, +.block_navigation .block_tree [aria-expanded="false"]:before { + content: $fa-var-angle-right; + font-size: 16px; + margin-right: 0; + @extend .fa; + width: 16px; +} +.dir-rtl { + .block_settings .block_tree [aria-expanded="false"]:before, + .block_navigation .block_tree [aria-expanded="false"]:before { + content: $fa-var-angle-left; + } +} + +.block_navigation .block_tree p.hasicon, +.block_settings .block_tree p.hasicon { + text-indent: -3px; + + .icon { + margin-right: 2px; + } +}