L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-84555 core_course: new activity_icon output class

Browse Source
This commit is contained in:
ferran
2025-03-24 16:49:53 +01:00
parent 8f89677192
commit 9b5018b4a3
8 changed files with 452 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.upgradenotes/MDL-84555-2025031404100029.yml
+14
View File
@@ -0,0 +1,14 @@
issueNumber: MDL-84555
notes:
core_course:
- message: >-
New core_course\output\activity_icon class to render activity icons with
or without purpose color. This output will centralize the way Moodle
renders activity icons
type: improved
core:
- message: >-
The new PHP enum core\output\local\properties\iconsize can be used to limit
the amount of icons sizes an output component can use. The enum has the
same values available in the theme_boost scss.
type: improved
admin/tool/componentlibrary/content/moodle/components/activityicons.md
+115 -50
View File
@@ -9,43 +9,100 @@ tags:
- Available
- '4.0'
- Updated
- '4.4'
- '5.0'
---
## Activity icon types
Moodle activity icons are single black SVG icons that are stored in `mod/PLUGINNAME/pix/monologo.svg`.
### Minimal activity icons
## Rendering activity icons
The `core_course\output\activity_icon` class is used to render activity icons. It can be used in several ways depending on the context. Also, there is the `core_course\activity_icon` template that can be included directly from mustache templates.
### Rendering the activity plugin icon
The following example shows how to render the default activity icon:
{{< php >}}
use core_course\output\activity_icon;
$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
$icon = activity_icon::from_modname('quiz');
echo $renderer->render($icon);
{{< /php >}}
By default, the activity icon will be rendered colored with the activity purpose color (see below).
### Rendering the activity icon from a cm_info object
Specific activity instances can have their own custom icons. For example, the `mod_resource` displays the MIME type icon for the resource. To render the activity icon from a `cm_info` object, use the static constructor `from_cm_info`. The method will return an instance of `activity_icon` with the icon URL set to the custom icon if necessary.
It is possible to render the activity icon from a `cm_info` object:
{{< php >}}
use core_course\output\activity_icon;
$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
$cminfo = get_fast_modinfo($courseid)->get_cm($cmid);
$icon = activity_icon::from_cm_info($cminfo);
echo $renderer->render($icon);
{{< /php >}}
### Rendering the activity icon in dark color
There are pages like the gradebook where the activity icons must be rendered in black color for accessibility or usability reasons. The `core_course\output\activity_icon` class has a `set_colourize` method to define if the icon must be colorized or not.
The following example shows how to render the default activity icon in black:
{{< php >}}
use core_course\output\activity_icon;
$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
$icon = activity_icon::from_modname('quiz')
->set_colourize(false);
echo $renderer->render($icon);
{{< /php >}}
### Set the activity icon size
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 which limits the maximum width and height. It's recommended to define width and height into the SVG.
The `core_course\output\activity_icon` class has a `set_icon_size` method to define the icon size. The method accepts any value from `core\output\local\properties\iconsize` enum.
{{< example >}}
<div class="d-flex mb-3">
<div class="d-flex border align-items-center p-1">
{{< image "quiz/monologo.svg" "Quiz icon" "icon">}} Multiple choice quiz 1
</div>
</div>
{{< /example >}}
The following example shows how to render the default activity icon with a custom size:
### Coloured activity icons
{{< php >}}
use core_course\output\activity_icon;
use core\output\local\properties\iconsize;
$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
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.
$icon = activity_icon::from_modname('quiz')
->set_icon_size(iconsize::SIZE4);
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.
echo $renderer->render($icon);
{{< /php >}}
<div class="media mb-3">
<div class="activityiconcontainer assessment me-3">
{{< image "quiz/monologo.svg" "Quiz icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="text-uppercase small">quiz</div>
<div class="activityname"><a href="#">Multiple choice quiz 1</a></div>
</div>
</div>
### Add extra classes to the activity icon
### Activity purposes
The `core_course\output\activity_icon` class has a `set_extra_classes` method to add extra classes to the icon container.
The following example shows how to render the default activity icon with extra classes:
{{< php >}}
use core_course\output\activity_icon;
$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
$icon = activity_icon::from_modname('quiz')
->set_extra_classes(['my-extra-class']);
echo $renderer->render($icon);
{{< /php >}}
## Activity purposes
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```.
@@ -94,16 +151,24 @@ $info = new cached_cm_info();
$info->iconurl = new moodle_url('https://moodle.org/theme/moodleorg/pix/moodle_logo_small.svg');
{{< /php >}}
To get this customised icon, use:
To get this customised icon url, use:
{{< php >}}
$iconurl = get_fast_modinfo($courseid)->get_cm($cmid)->get_icon_url()->out(false);
{{< /php >}}
<div class="media mb-3">
<div class="activityiconcontainer lti me-3">
And to render the custom icon:
{{< php >}}
use core_course\output\activity_icon;
echo $OUTPUT->render(activity_icon::from_cm_info($cminfo));
{{< /php >}}
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer lti me-3">
<img alt="lti icon" title="lti icon" src="https://moodle.org/theme/moodleorg/pix/moodle_logo_small.svg" class="activityicon "> </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">external</div>
<div class="activityname"><a href="#">External tool module</a></div>
</div>
@@ -125,10 +190,10 @@ function h5pactivity_is_branded(): bool {
}
{{< /php >}}
<div class="media mb-3">
<div class="activityiconcontainer me-3">
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer me-3">
{{< image "h5pactivity/monologo.svg" "H5P activity icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">h5pactivity</div>
<div class="activityname"><a href="#">H5P module</a></div>
</div>
@@ -136,64 +201,64 @@ function h5pactivity_is_branded(): bool {
## Examples
<div class="media mb-3">
<div class="activityiconcontainer administration me-3">
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer administration me-3">
{{< image "quiz/monologo.svg" "Admin icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">Administration</div>
<div class="activityname"><a href="#">Module name</a></div>
</div>
</div>
<div class="media mb-3">
<div class="activityiconcontainer assessment me-3">
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer assessment me-3">
{{< image "quiz/monologo.svg" "Assessment icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">Assessment</div>
<div class="activityname"><a href="#">Module name</a></div>
</div>
</div>
<div class="media mb-3">
<div class="activityiconcontainer collaboration me-3">
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer collaboration me-3">
{{< image "wiki/monologo.svg" "Collaboration icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">Collaboration</div>
<div class="activityname"><a href="#">Module name</a></div>
</div>
</div>
<div class="media mb-3">
<div class="activityiconcontainer communication me-3">
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer communication me-3">
{{< image "choice/monologo.svg" "Communication icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">Communication</div>
<div class="activityname"><a href="#">Module name</a></div>
</div>
</div>
<div class="media mb-3">
<div class="activityiconcontainer interactivecontent me-3">
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer interactivecontent me-3">
{{< image "lesson/monologo.svg" "Interactive content icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">Interactive content</div>
<div class="activityname"><a href="#">Module name</a></div>
</div>
</div>
<div class="media mb-3">
<div class="activityiconcontainer content me-3">
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer content me-3">
{{< image "book/monologo.svg" "Resource icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">Resource</div>
<div class="activityname"><a href="#">Module name</a></div>
</div>
</div>
<div class="media mb-3">
<div class="activityiconcontainer me-3">
<div class="d-flex mb-3">
<div class="flex-shrink-0 activityiconcontainer me-3">
{{< image "lti/monologo.svg" "Other icon" "activityicon">}} </div>
<div class="media-body align-self-center">
<div class="flex-grow-1 align-self-center">
<div class="text-uppercase small">Other</div>
<div class="activityname"><a href="#">Module name</a></div>
</div>
course/classes/output/activity_icon.php
+233
View File
@@ -0,0 +1,233 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
namespace core_course\output;
use core\component;
use core\output\local\properties\iconsize;
use core\output\renderable;
use core\output\renderer_base;
use core\output\templatable;
use core\url;
use cm_info;
/**
* Class activity_icon
*
* @package core_course
* @copyright 2025 Ferran Recio <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class activity_icon implements renderable, templatable {
/** @var string optional text title */
protected string $title = '';
/** @var string Extra container classes. */
protected string $extraclasses = '';
/** @var bool Determine if the icon must be colored or not. */
protected bool $colourize = true;
/** @var iconsize set the icon size */
protected iconsize $iconsize = iconsize::UNDEFINED;
/** @var url The icon URL. */
protected url $iconurl;
/** @var string The module purpose */
protected string $purpose;
/** @var bool is branded */
protected bool $isbranded;
/**
* Constructor.
*
* @param string $modname the module name
*/
protected function __construct(
/** @var string the module name */
protected string $modname,
) {
$this->isbranded = component_callback('mod_' . $this->modname, 'is_branded', [], false) ? true : false;
$this->purpose = plugin_supports('mod', $this->modname, FEATURE_MOD_PURPOSE, MOD_PURPOSE_OTHER);
}
/**
* Create an activity icon from a cm_info object.
*
* @param cm_info $cm
* @return self
*/
public static function from_cm_info(cm_info $cm): self {
$result = new self($cm->modname);
$result->iconurl = $cm->get_icon_url();
return $result;
}
/**
* Create an activity icon from a module name.
*
* @param string $modname
* @return self
*/
public static function from_modname(string $modname): self {
return new self($modname);
}
/**
* Set the title.
*
* @param string $title
* @return self
*/
public function set_title(string $title): self {
$this->title = $title;
return $this;
}
/**
* Set the colourize icon value.
*
* @param bool $colourize
* @return self
*/
public function set_colourize(bool $colourize): self {
$this->colourize = $colourize;
return $this;
}
/**
* Set the extra classes.
*
* @param string $extraclasses
* @return self
*/
public function set_extra_classes(string $extraclasses): self {
$this->extraclasses = $extraclasses;
return $this;
}
/**
* Set the icon size.
*
* @param iconsize $iconsize
* @return self
*/
public function set_icon_size(iconsize $iconsize): self {
$this->iconsize = $iconsize;
return $this;
}
#[\Override]
public function export_for_template(renderer_base $output): array {
if (!isset($this->iconurl)) {
$this->iconurl = $this->get_icon_url($output);
}
$needfiltering = $this->colourize && $this->iconurl->get_param('filtericon');
$iconclass = $needfiltering ? '' : 'nofilter';
$data = [
'icon' => $this->iconurl,
'iconclass' => $iconclass,
'modname' => $this->modname,
'pluginname' => get_string('pluginname', 'mod_' . $this->modname),
'purpose' => $this->purpose,
'branded' => $this->isbranded,
'extraclasses' => $this->extraclasses . $this->iconsize->classes(),
];
if (!empty($this->title)) {
$data['title'] = $this->title;
}
return $data;
}
/**
* Get the icon URL.
*
* @param renderer_base $output
* @return url
*/
public function get_icon_url(renderer_base $output): url {
$icon = $output->image_url('monologo', $this->modname);
// Legacy activity modules may only have an `icon` icon instead of a `monologo` icon.
$ismonologo = component::has_monologo_icon('mod', $this->modname);
if ($ismonologo) {
// The filtericon param is used to determine if the icon should be colored or not.
// The name of the param is not colorize to preserve backward compatibility.
$icon->param('filtericon', 1);
}
return $icon;
}
/**
* Check if the module is branded.
*
* @return bool
*/
public function is_branded(): bool {
return $this->isbranded;
}
/**
* Get the colourize icon value.
*
* @return bool
*/
public function get_colourize(): bool {
return $this->colourize;
}
/**
* Get the title text.
*
* @return string
*/
public function get_title(): string {
return $this->title;
}
/**
* Get the extra classes.
*
* @return string
*/
public function get_extra_classes(): string {
return $this->extraclasses;
}
/**
* Get the icon size.
*
* @return iconsize
*/
public function get_icon_size(): iconsize {
return $this->iconsize;
}
/**
* Get the activity purpose.
*
* @return string
*/
public function get_purpose(): string {
return $this->purpose;
}
}
course/templates/activity_icon.mustache
+44
View File
@@ -0,0 +1,44 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core_course/activity_icon
Displays an activity plugin icon.
Example context (json):
{
"icon": "../../../pix/help.svg",
"iconclass": "",
"purpose": "content",
"branded": 0,
"pluginname": "File",
"title": "File",
"extraclasses": "mycustomclass"
}
}}
<div
class="activity-icon activityiconcontainer {{!
}}{{purpose}} {{#branded}}isbranded{{/branded}} {{extraclasses}}"
>
<img
src="{{{icon}}}"
class="activityicon icon {{iconclass}}"
data-region="activity-icon"
alt="{{#title}}{{#cleanstr}} activityicon, moodle, {{{pluginname}}} {{/cleanstr}}{{/title}}"
{{#title}}title="{{{title}}}"{{/title}}
>
</div>
lib/classes/output/local/properties/iconsize.php
+46
View File
@@ -0,0 +1,46 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
namespace core\output\local\properties;
/**
* Icon sizes property enum.
*
* @package core
* @copyright 2024 Ferran Recio <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
enum iconsize: string {
case UNDEFINED = '';
case SIZE0 = 'icon-size-0';
case SIZE1 = 'icon-size-1';
case SIZE2 = 'icon-size-2';
case SIZE3 = 'icon-size-3';
case SIZE4 = 'icon-size-4';
case SIZE5 = 'icon-size-5';
case SIZE6 = 'icon-size-6';
case SIZE7 = 'icon-size-7';
/**
* Returns the CSS classes for the property based on its type.
*
* @return string The CSS classes.
*/
public function classes(): string {
return ' ' . $this->value;
}
}
theme/boost/scss/moodle/icons.scss
-3
View File
@@ -195,13 +195,10 @@ img.icon {
// Revisit these styles when MDL-78284 lands with new icons.
// Icon container will be removed and icons will be used directly.
.activityiconcontainer {
width: $activity-iconcontainer-width;
height: $activity-iconcontainer-height;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
padding: 0.7rem;
.activityicon,
.icon {
margin: 0;
theme/boost/style/moodle.css
-3
View File
@@ -28838,13 +28838,10 @@ img.icon {
}
.activityiconcontainer {
width: 52px;
height: 52px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
padding: 0.7rem;
}
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
theme/classic/style/moodle.css
-3
View File
@@ -28838,13 +28838,10 @@ img.icon {
}
.activityiconcontainer {
width: 52px;
height: 52px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
padding: 0.7rem;
}
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {