admin/tool/componentlibrary/content/moodle/components/activityicons.md

   1 ---
   2 layout: docs
   3 title: "Activity icons"
   4 description: "Activity icons are used to quickly identify the activity types"
   5 draft: false
   6 weight: 5
   7 toc: true
   8 tags:
   9 - Available
  10 - '4.0'
  11 - Updated
  12 - '4.4'
  13 ---
  14
  15 ## Activity icon types
  16
  17 Moodle activity icons are single black SVG icons that are stored in `mod/PLUGINNAME/pix/monologo.svg`.
  18
  19 ### Minimal activity icons
  20
  21 When rendered in a page with limited space the icons will be shown in their original design, for example on the course gradebook where activity show in the grade table header.
  22
  23 > NOTE: The icon is using the ```.icon``` CSS class which limits the maximum width and height. It's recommended to define width and height into the SVG.
  24
  25 {{< example >}}
  26 <div class="d-flex mb-3">
  27     <div class="d-flex border align-items-center p-1">
  28         {{< image "quiz/monologo.svg" "Quiz icon" "icon">}} Multiple choice quiz 1
  29     </div>
  30 </div>
  31 {{< /example  >}}
  32
  33 ### Coloured activity icons
  34
  35 In places like the course page and the activity chooser icons have a more prominent role and they should be rendered outlined colored against a transparent background.
  36
  37 The CSS classes for these icons are ```activityiconcontainer``` wrapper class with the added activity name. And the ```activityicon``` class for the image. See the template ```course/format/templates/local/content/cm/title.mustache``` for more info.
  38
  39 <div class="media mb-3">
  40     <div class="activityiconcontainer assessment mr-3">
  41         {{< image "quiz/monologo.svg" "Quiz icon" "activityicon">}}    </div>
  42     <div class="media-body align-self-center">
  43         <div class="text-uppercase small">quiz</div>
  44         <div class="activityname"><a href="#">Multiple choice quiz 1</a></div>
  45     </div>
  46 </div>
  47
  48 ### Activity purposes
  49
  50 In the HTML for the example above you might notice the ```assessment``` css class after ```.activityiconcontainer```. This class is the result of assigning a *purpose* to the quiz activity in ```/mod/quiz/lib.php```.
  51
  52 {{< php >}}
  53 function quiz_supports($feature) {
  54     switch($feature) {
  55         ..
  56         case FEATURE_PLAGIARISM: return true;
  57         case FEATURE_MOD_PURPOSE: return MOD_PURPOSE_ASSESSMENT;
  58         ..
  59     }
  60 }
  61 {{< /php >}}
  62
  63 Since Moodle 4.4, the available activity purposes are:
  64
  65 * Administration (MOD_PURPOSE_ADMINISTRATION)
  66 * Assessment (MOD_PURPOSE_ASSESSMENT)
  67 * Collaboration (MOD_PURPOSE_COLLABORATION)
  68 * Communication (MOD_PURPOSE_COMMUNICATION)
  69 * Interactive content (MOD_PURPOSE_INTERACTIVECONTENT)
  70 * Resource (MOD_PURPOSE_CONTENT)
  71 * Other (MOD_PURPOSE_OTHER)
  72
  73 > NOTE: On Moodle 4.3 downwards, MOD_PURPOSE_INTERFACE was also available, but it has been deprecated, so it's not recommended to use it.
  74
  75 ### Purpose colours
  76
  77 The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy any of these scss variables that you want to customize, change the colour value, generate the filter using, for instance https://codepen.io/sosuke/pen/Pjoqqp and done! There is no background colour or filter for the 'Other' or the 'Interface' purposes.
  78
  79 {{< highlight scss >}}
  80 $activity-icon-administration-bg:     #da58ef !default;
  81 $activity-icon-assessment-bg:         #f90086 !default;
  82 $activity-icon-collaboration-bg:      #5b40ff !default;
  83 $activity-icon-communication-bg:      #eb6200 !default;
  84 $activity-icon-content-bg:            #0099ad !default;
  85 $activity-icon-interactivecontent-bg: #8d3d1b !default;
  86
  87 $activity-icon-administration-filter:
  88     invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%) !default;
  89 $activity-icon-assessment-filter:
  90     invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%) !default;
  91 $activity-icon-collaboration-filter:
  92     invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%) !default;
  93 $activity-icon-communication-filter:
  94     invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%) !default;
  95 $activity-icon-content-filter:
  96     invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%) !default;
  97 $activity-icon-interactivecontent-filter:
  98     invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%) !default;
  99 {{</ highlight >}}
 100
 101 ### Custom activity icons
 102
 103 Some activities allow icons to be customised. This can be done by implementing callback `XXX_get_coursemodule_info()` returning instance of object (for instance, `mod/lti/lib.php`).
 104
 105 {{< php >}}
 106 $info = new cached_cm_info();
 107 $info->iconurl = new moodle_url('https://moodle.org/theme/moodleorg/pix/moodle_logo_small.svg');
 108 {{< /php >}}
 109
 110 To get this customised icon, use:
 111
 112 {{< php >}}
 113 $iconurl = get_fast_modinfo($courseid)->get_cm($cmid)->get_icon_url()->out(false);
 114 {{< /php >}}
 115
 116 <div class="media mb-3">
 117     <div class="activityiconcontainer lti mr-3">
 118         <img alt="lti icon" title="lti icon" src="https://moodle.org/theme/moodleorg/pix/moodle_logo_small.svg" class="activityicon ">    </div>
 119     <div class="media-body align-self-center">
 120         <div class="text-uppercase small">external</div>
 121         <div class="activityname"><a href="#">External tool module</a></div>
 122     </div>
 123 </div>
 124
 125 ### Branded icons
 126
 127 Since Moodle 4.4, a new callback has been added to the modules. Branded icons are displayed with their original colours and they are not affected by the activity purpose colours.
 128
 129 {{< php >}}
 130 /**
 131  * Whether the activity is branded.
 132  * This information is used, for instance, to decide if a filter should be applied to the icon or not.
 133  *
 134  * @return bool True if the activity is branded, false otherwise.
 135  */
 136 function h5pactivity_is_branded(): bool {
 137     return true;
 138 }
 139 {{< /php >}}
 140
 141 <div class="media mb-3">
 142     <div class="activityiconcontainer mr-3">
 143         {{< image "h5pactivity/monologo.svg" "H5P activity icon" "activityicon">}}    </div>
 144     <div class="media-body align-self-center">
 145         <div class="text-uppercase small">h5pactivity</div>
 146         <div class="activityname"><a href="#">H5P module</a></div>
 147     </div>
 148 </div>
 149
 150 ## Examples
 151
 152 <div class="media mb-3">
 153     <div class="activityiconcontainer administration mr-3">
 154         {{< image "quiz/monologo.svg" "Admin icon" "activityicon">}}    </div>
 155     <div class="media-body align-self-center">
 156         <div class="text-uppercase small">Administration</div>
 157         <div class="activityname"><a href="#">Module name</a></div>
 158     </div>
 159 </div>
 160
 161 <div class="media mb-3">
 162     <div class="activityiconcontainer assessment mr-3">
 163         {{< image "quiz/monologo.svg" "Assessment icon" "activityicon">}}    </div>
 164     <div class="media-body align-self-center">
 165         <div class="text-uppercase small">Assessment</div>
 166         <div class="activityname"><a href="#">Module name</a></div>
 167     </div>
 168 </div>
 169
 170 <div class="media mb-3">
 171     <div class="activityiconcontainer collaboration mr-3">
 172         {{< image "wiki/monologo.svg" "Collaboration icon" "activityicon">}}    </div>
 173     <div class="media-body align-self-center">
 174         <div class="text-uppercase small">Collaboration</div>
 175         <div class="activityname"><a href="#">Module name</a></div>
 176     </div>
 177 </div>
 178
 179 <div class="media mb-3">
 180     <div class="activityiconcontainer communication mr-3">
 181         {{< image "choice/monologo.svg" "Communication icon" "activityicon">}}    </div>
 182     <div class="media-body align-self-center">
 183         <div class="text-uppercase small">Communication</div>
 184         <div class="activityname"><a href="#">Module name</a></div>
 185     </div>
 186 </div>
 187
 188 <div class="media mb-3">
 189     <div class="activityiconcontainer interactivecontent mr-3">
 190         {{< image "lesson/monologo.svg" "Interactive content icon" "activityicon">}}    </div>
 191     <div class="media-body align-self-center">
 192         <div class="text-uppercase small">Interactive content</div>
 193         <div class="activityname"><a href="#">Module name</a></div>
 194     </div>
 195 </div>
 196
 197 <div class="media mb-3">
 198     <div class="activityiconcontainer content mr-3">
 199         {{< image "book/monologo.svg" "Resource icon" "activityicon">}}    </div>
 200     <div class="media-body align-self-center">
 201         <div class="text-uppercase small">Resource</div>
 202         <div class="activityname"><a href="#">Module name</a></div>
 203     </div>
 204 </div>
 205
 206 <div class="media mb-3">
 207     <div class="activityiconcontainer mr-3">
 208         {{< image "lti/monologo.svg" "Other icon" "activityicon">}}    </div>
 209     <div class="media-body align-self-center">
 210         <div class="text-uppercase small">Other</div>
 211         <div class="activityname"><a href="#">Module name</a></div>
 212     </div>
 213 </div>