Skip to content

Commit 1cace1d

Browse files
committed
MDL-78284 componentlibrary: Update activity icons information
1 parent 8cdd62c commit 1cace1d

File tree

12 files changed

+120
-111
lines changed

12 files changed

+120
-111
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,52 @@
11
---
22
layout: docs
33
title: "Activity icons"
4-
description: "Activity icons are used to quickly identify the activty types"
5-
date: 2020-01-14T16:32:24+01:00
4+
description: "Activity icons are used to quickly identify the activity types"
65
draft: false
76
weight: 5
87
toc: true
98
tags:
109
- Available
1110
- '4.0'
11+
- Updated
12+
- '4.4'
1213
---
1314

1415
## Activity icon types
1516

16-
Moodle activity icons are single black svg icons that is stored in mod/PLUGINNAME/pix/icon.svg.
17+
Moodle activity icons are single black SVG icons that are stored in `mod/PLUGINNAME/pix/monologo.svg`.
1718

1819
### Minimal activity icons
19-
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. Note: the icon is using the ```.icon``` css class for sizing.
2020

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 >}}
2126
<div class="d-flex mb-3">
2227
<div class="d-flex border align-items-center p-1">
23-
{{< image "quiz/icon.svg" "Quiz icon" "icon">}} Multiple choice quiz 1
28+
{{< image "quiz/monologo.svg" "Quiz icon" "icon">}} Multiple choice quiz 1
2429
</div>
2530
</div>
31+
{{< /example >}}
2632

2733
### Coloured activity icons
28-
In places like the course page and the activity chooser icons have a more prominent role and they should be rendered on a coloured background in white.
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.
2936

3037
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.
3138

32-
{{< example >}}
3339
<div class="media mb-3">
3440
<div class="activityiconcontainer assessment mr-3">
35-
{{< image "quiz/icon.svg" "Quiz icon" "activityicon">}} </div>
41+
{{< image "quiz/monologo.svg" "Quiz icon" "activityicon">}} </div>
3642
<div class="media-body align-self-center">
3743
<div class="text-uppercase small">quiz</div>
3844
<div class="activityname"><a href="#">Multiple choice quiz 1</a></div>
3945
</div>
4046
</div>
41-
{{< /example >}}
4247

4348
### Activity purposes
49+
4450
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```.
4551

4652
{{< php >}}
@@ -54,34 +60,47 @@ function quiz_supports($feature) {
5460
}
5561
{{< /php >}}
5662

57-
The available activity purposes are:
63+
Since Moodle 4.4, the available activity purposes are:
5864

59-
* Administration
60-
* Assessment
61-
* Collaboration
62-
* Communication
63-
* Content
64-
* Interface
65-
* Other
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)
6672

67-
each defined as 'MOD_PURPOSE_X', so Assessment is MOD_PURPOSE_ASSESSMENT.
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.
6874
6975
### Purpose colours
7076

71-
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 and done! There is no background colour for the 'Other' type purpose, it defaults to ```light-grey: #f8f9fa```.
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.
7278

7379
{{< highlight scss >}}
74-
$activity-icon-administration-bg: #5d63f6;
75-
$activity-icon-assessment-bg: #eb66a2;
76-
$activity-icon-collaboration-bg: #f7634d;
77-
$activity-icon-communication-bg: #11a676;
78-
$activity-icon-content-bg: #399be2;
79-
$activity-icon-interface-bg: #a378ff;
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;
8099
{{</ highlight >}}
81100

82101
### Custom activity icons
83102

84-
Some activities allow icons to be customised. This can be done by implementing callback XXX_get_coursemodule_info() returning instance of object e.g. mod/lti/lib.php
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`).
85104

86105
{{< php >}}
87106
$info = new cached_cm_info();
@@ -103,58 +122,92 @@ $iconurl = get_fast_modinfo($courseid)->get_cm($cmid)->get_icon_url()->out(false
103122
</div>
104123
</div>
105124

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+
106150
## Examples
107151

108152
<div class="media mb-3">
109153
<div class="activityiconcontainer administration mr-3">
110-
{{< image "quiz/icon.svg" "Admin icon" "activityicon">}} </div>
154+
{{< image "quiz/monologo.svg" "Admin icon" "activityicon">}} </div>
111155
<div class="media-body align-self-center">
112-
<div class="text-uppercase small">admin</div>
113-
<div class="activityname"><a href="#">Administration module</a></div>
156+
<div class="text-uppercase small">Administration</div>
157+
<div class="activityname"><a href="#">Module name</a></div>
114158
</div>
115159
</div>
116160

117161
<div class="media mb-3">
118162
<div class="activityiconcontainer assessment mr-3">
119-
{{< image "quiz/icon.svg" "Quiz icon" "activityicon">}} </div>
163+
{{< image "quiz/monologo.svg" "Assessment icon" "activityicon">}} </div>
120164
<div class="media-body align-self-center">
121-
<div class="text-uppercase small">quiz</div>
122-
<div class="activityname"><a href="#">Assessment module</a></div>
165+
<div class="text-uppercase small">Assessment</div>
166+
<div class="activityname"><a href="#">Module name</a></div>
123167
</div>
124168
</div>
125169

126170
<div class="media mb-3">
127171
<div class="activityiconcontainer collaboration mr-3">
128-
{{< image "wiki/icon.svg" "Wiki icon" "activityicon">}} </div>
172+
{{< image "wiki/monologo.svg" "Collaboration icon" "activityicon">}} </div>
129173
<div class="media-body align-self-center">
130-
<div class="text-uppercase small">wiki</div>
131-
<div class="activityname"><a href="#">Collaboration module</a></div>
174+
<div class="text-uppercase small">Collaboration</div>
175+
<div class="activityname"><a href="#">Module name</a></div>
132176
</div>
133177
</div>
134178

135179
<div class="media mb-3">
136-
<div class="activityiconcontainer collaboration mr-3">
137-
{{< image "choice/icon.svg" "Choice icon" "activityicon">}} </div>
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>
138191
<div class="media-body align-self-center">
139-
<div class="text-uppercase small">choice</div>
140-
<div class="activityname"><a href="#">Learner type</a></div>
192+
<div class="text-uppercase small">Interactive content</div>
193+
<div class="activityname"><a href="#">Module name</a></div>
141194
</div>
142195
</div>
143196

144197
<div class="media mb-3">
145198
<div class="activityiconcontainer content mr-3">
146-
{{< image "lesson/icon.svg" "Choice icon" "activityicon">}} </div>
199+
{{< image "book/monologo.svg" "Resource icon" "activityicon">}} </div>
147200
<div class="media-body align-self-center">
148-
<div class="text-uppercase small">lesson</div>
149-
<div class="activityname"><a href="#">Content module</a></div>
201+
<div class="text-uppercase small">Resource</div>
202+
<div class="activityname"><a href="#">Module name</a></div>
150203
</div>
151204
</div>
152205

153206
<div class="media mb-3">
154-
<div class="activityiconcontainer interface mr-3">
155-
{{< image "quiz/icon.svg" "Interface icon" "activityicon">}} </div>
207+
<div class="activityiconcontainer mr-3">
208+
{{< image "lti/monologo.svg" "Other icon" "activityicon">}} </div>
156209
<div class="media-body align-self-center">
157-
<div class="text-uppercase small">interface</div>
158-
<div class="activityname"><a href="#">Interface module</a></div>
210+
<div class="text-uppercase small">Other</div>
211+
<div class="activityname"><a href="#">Module name</a></div>
159212
</div>
160213
</div>

admin/tool/componentlibrary/content/static/moodle/components/activityicons/choice/icon.svg

-14
This file was deleted.

0 commit comments

Comments
 (0)