Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-58849

Block hide / show not using FontAwesome when set by the theme.

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Won't Do
    • Icon: Minor Minor
    • None
    • 3.3
    • Blocks, Themes
    • MOODLE_33_STABLE
    • Hide

      Override in a theme.  For example:

       
      // Replacement core JS for using FontAwesome icons instead.
      M.util.init_block_hider = function(Y, config) \{
       Y.use('base', 'node', function(Y) \{
       M.util.block_hider = M.util.block_hider || (function()\{
       var blockhider = function() \{
       blockhider.superclass.constructor.apply(this, arguments);
       };
       blockhider.prototype = \{
       initializer : function(config) \{
       this.set('block', '#' + this.get('id'));
       var b = this.get('block'),
       t = b.one('.title'),
       a = null,
       hide,
       show;
       if (t && (a = t.one('.block_action'))) \{
       hide = Y.Node.create('<i>');
       hide.addClass('block-hider-hide ' + this.get('iconVisible'));
       hide.setAttrs(\{
       'aria-hidden': true,
       'aria-label': config.tooltipVisible,
       tabIndex: 0,
       'title': config.tooltipVisible
       });
       hide.on('keypress', this.updateStateKey, this, true);
       hide.on('click', this.updateState, this, true);
       
      show = Y.Node.create('<i>');
       show.addClass('block-hider-show ' + this.get('iconHidden'));
       show.setAttrs(\{
       'aria-hidden': true,
       'aria-label': config.tooltipVisible,
       tabIndex: 0,
       'title': config.tooltipVisible
       });
       show.on('keypress', this.updateStateKey, this, false);
       show.on('click', this.updateState, this, false);
       
      a.insert(show, 0).insert(hide, 0);
       }
       },
       updateState : function(e, hide) \{
       M.util.set_user_preference(this.get('preference'), hide);
       if (hide) \{
       this.get('block').addClass('hidden');
       this.get('block').one('.block-hider-show').focus();
       } else \{
       this.get('block').removeClass('hidden');
       this.get('block').one('.block-hider-hide').focus();
       }
       },
       updateStateKey : function(e, hide) \{
       if (e.keyCode == 13) \{ // Allow hide/show via enter key.
       this.updateState(this, hide);
       }
       }
       };
       Y.extend(blockhider, Y.Base, blockhider.prototype, \{
       NAME : 'blockhider',
       ATTRS : \{
       id : \{},
       preference : \{},
       iconVisible : \{
       value : 'icon fa fa-plus-square-o fa-fw'
       },
       iconHidden : \{
       value : 'icon fa fa-minus-square-o fa-fw'
       },
       block : \{
       setter : function(node) \{
       return Y.one(node);
       }
       }
       }
       });
       return blockhider;
       })();
       new M.util.block_hider(config);
       });
      };
      
      

       

      Show
      Override in a theme.  For example:   // Replacement core JS for using FontAwesome icons instead. M.util.init_block_hider = function(Y, config) \{ Y.use('base', 'node', function(Y) \{ M.util.block_hider = M.util.block_hider || (function()\{ var blockhider = function() \{ blockhider.superclass.constructor.apply(this, arguments); }; blockhider.prototype = \{ initializer : function(config) \{ this.set('block', '#' + this.get('id')); var b = this.get('block'), t = b.one('.title'), a = null, hide, show; if (t && (a = t.one('.block_action'))) \{ hide = Y.Node.create('<i>'); hide.addClass('block-hider-hide ' + this.get('iconVisible')); hide.setAttrs(\{ 'aria-hidden': true, 'aria-label': config.tooltipVisible, tabIndex: 0, 'title': config.tooltipVisible }); hide.on('keypress', this.updateStateKey, this, true); hide.on('click', this.updateState, this, true);   show = Y.Node.create('<i>'); show.addClass('block-hider-show ' + this.get('iconHidden')); show.setAttrs(\{ 'aria-hidden': true, 'aria-label': config.tooltipVisible, tabIndex: 0, 'title': config.tooltipVisible }); show.on('keypress', this.updateStateKey, this, false); show.on('click', this.updateState, this, false);   a.insert(show, 0).insert(hide, 0); } }, updateState : function(e, hide) \{ M.util.set_user_preference(this.get('preference'), hide); if (hide) \{ this.get('block').addClass('hidden'); this.get('block').one('.block-hider-show').focus(); } else \{ this.get('block').removeClass('hidden'); this.get('block').one('.block-hider-hide').focus(); } }, updateStateKey : function(e, hide) \{ if (e.keyCode == 13) \{ // Allow hide/show via enter key. this.updateState(this, hide); } } }; Y.extend(blockhider, Y.Base, blockhider.prototype, \{ NAME : 'blockhider', ATTRS : \{ id : \{}, preference : \{}, iconVisible : \{ value : 'icon fa fa-plus-square-o fa-fw' }, iconHidden : \{ value : 'icon fa fa-minus-square-o fa-fw' }, block : \{ setter : function(node) \{ return Y.one(node); } } } }); return blockhider; })(); new M.util.block_hider(config); }); };  
    • Hide
      1. Edit the Clean theme config.php file and add '$THEME->iconsystem = \core\output\icon_system::FONTAWESOME;' at the bottom.
      2. Purge all caches.
      3. Login as an administrator.
      4. Navigate to the Dashboard.
      5. On the 'Administration' block observe the use of the FontAwesome fa-minus-square-o icon for block hiding.
      6. Repeat for block showing with fa-plus-square-o.
      Show
      Edit the Clean theme config.php file and add '$THEME->iconsystem = \core\output\icon_system::FONTAWESOME;' at the bottom. Purge all caches. Login as an administrator. Navigate to the Dashboard. On the 'Administration' block observe the use of the FontAwesome fa-minus-square-o icon for block hiding. Repeat for block showing with fa-plus-square-o.

      In MDL-40759 FontAwesome was added as an icon system to be used by a theme if desired. The title of the issue is 'Use the Font Awesome icon font for all icons in Moodle' however the function 'M.util.init_block_hider' in '/lib/javascript-static.js':

       
      M.util.init_block_hider = function(Y, config) \{
       Y.use('base', 'node', function(Y) \{
       M.util.block_hider = M.util.block_hider || (function()\{
       var blockhider = function() \{
       blockhider.superclass.constructor.apply(this, arguments);
       };
       blockhider.prototype = \{
       initializer : function(config) \{
       this.set('block', '#'+this.get('id'));
       var b = this.get('block'),
       t = b.one('.title'),
       a = null,
       hide,
       show;
       if (t && (a = t.one('.block_action'))) \{
       hide = Y.Node.create('<img />')
       .addClass('block-hider-hide')
       .setAttrs(\{
       alt: config.tooltipVisible,
       src: this.get('iconVisible'),
       tabIndex: 0,
       'title': config.tooltipVisible
       });
       hide.on('keypress', this.updateStateKey, this, true);
       hide.on('click', this.updateState, this, true);
       
      show = Y.Node.create('<img />')
       .addClass('block-hider-show')
       .setAttrs(\{
       alt: config.tooltipHidden,
       src: this.get('iconHidden'),
       tabIndex: 0,
       'title': config.tooltipHidden
       });
       show.on('keypress', this.updateStateKey, this, false);
       show.on('click', this.updateState, this, false);
       
      a.insert(show, 0).insert(hide, 0);
       }
       },
       updateState : function(e, hide) \{
       M.util.set_user_preference(this.get('preference'), hide);
       if (hide) \{
       this.get('block').addClass('hidden');
       this.get('block').one('.block-hider-show').focus();
       } else \{
       this.get('block').removeClass('hidden');
       this.get('block').one('.block-hider-hide').focus();
       }
       },
       updateStateKey : function(e, hide) \{
       if (e.keyCode == 13) \{ //allow hide/show via enter key
       this.updateState(this, hide);
       }
       }
       };
       Y.extend(blockhider, Y.Base, blockhider.prototype, \{
       NAME : 'blockhider',
       ATTRS : \{
       id : \{},
       preference : \{},
       iconVisible : \{
       value : M.util.image_url('t/switch_minus', 'moodle')
       },
       iconHidden : \{
       value : M.util.image_url('t/switch_plus', 'moodle')
       },
       block : \{
       setter : function(node) \{
       return Y.one(node);
       }
       }
       }
       });
       return blockhider;
       })();
       new M.util.block_hider(config);
       });
      };
       
      
      

      ignores this and injects an image directly rather than implementing the intent of the theme configuration setting: $THEME->iconsystem = \core\output\icon_system::FONTAWESOME;

      So that the block hide / show icon is not replaced by a FontAwesome one.

      Therefore 'Use the Font Awesome icon font for all icons in Moodle' is false and incomplete.

            Unassigned Unassigned
            gb2048 Gareth J Barnard
            Votes:
            1 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.