WebSVN – Moodle – Diff – /admin/tool/componentlibrary/content/moodle/components/activityicons.md

 toc: true
 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`.
+## 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);
-Moodle activity icons are single black SVG icons that are stored in `mod/PLUGINNAME/pix/monologo.svg`.
+{{< /php >}}
-### Minimal activity icons
-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.
+### Set the activity icon size
-> 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.
-{{< example >}}
-<div class="d-flex mb-3">
+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.
+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.
-    <div class="d-flex border align-items-center p-1">
+The following example shows how to render the default activity icon with a custom size:
-        {{< image "quiz/monologo.svg" "Quiz icon" "icon">}} Multiple choice quiz 1
+{{< php >}}
-    </div>
+use core_course\output\activity_icon;
+use core\output\local\properties\iconsize;
-</div>
+$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
-{{< /example  >}}
+$icon = activity_icon::from_modname('quiz')
-### Coloured activity icons
-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.
+    ->set_icon_size(iconsize::SIZE4);
+echo $renderer->render($icon);
+{{< /php >}}
+### Add extra classes to the activity icon
+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:
-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.
 {{< php >}}
-<div class="media mb-3">
+use core_course\output\activity_icon;
-    <div class="activityiconcontainer assessment mr-3">
+$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
 > 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.
 ### Purpose colours
-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.
+The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. The following variables are available:
 {{< highlight scss >}}
 $activity-icon-administration-bg:     #da58ef !default;
 $activity-icon-assessment-bg:         #f90086 !default;
-$activity-icon-collaboration-bg:      #5b40ff !default;
-$activity-icon-communication-bg:      #eb6200 !default;
-$activity-icon-content-bg:            #0099ad !default;
-$activity-icon-interactivecontent-bg: #8d3d1b !default;
-$activity-icon-administration-filter:
-    invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%) !default;
-$activity-icon-assessment-filter:
-    invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%) !default;
-$activity-icon-collaboration-filter:
-    invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%) !default;
-$activity-icon-communication-filter:
-    invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%) !default;
-$activity-icon-content-filter:
+$activity-icon-collaboration-bg:      #5b40ff !default;
-    invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%) !default;
+$activity-icon-communication-bg:      #eb6200 !default;
-$activity-icon-interactivecontent-filter:
+$activity-icon-content-bg:            #0099ad !default;
 {{< php >}}
 $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 >}}
+And to render the custom icon:
+{{< php >}}
+use core_course\output\activity_icon;
-$iconurl = get_fast_modinfo($courseid)->get_cm($cmid)->get_icon_url()->out(false);
+echo $OUTPUT->render(activity_icon::from_cm_info($cminfo));
 {{< /php >}}
-<div class="media mb-3">
+<div class="d-flex mb-3">
-    <div class="activityiconcontainer lti mr-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>
 function h5pactivity_is_branded(): bool {
     return true;
+}
 {{< /php >}}
-<div class="media mb-3">
+<div class="d-flex mb-3">
-    <div class="activityiconcontainer mr-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>
 </div>
 ## Examples
-<div class="media mb-3">
+<div class="d-flex mb-3">
-    <div class="activityiconcontainer administration mr-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="d-flex mb-3">
-    <div class="activityiconcontainer assessment mr-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="d-flex mb-3">
-    <div class="activityiconcontainer collaboration mr-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="d-flex mb-3">
-    <div class="activityiconcontainer communication mr-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="d-flex mb-3">
-    <div class="activityiconcontainer interactivecontent mr-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="d-flex mb-3">
-    <div class="activityiconcontainer content mr-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>

Proyectos de Subversion Moodle

(root)/admin/tool/componentlibrary/content/moodle/components/activityicons.md – Rev 1 → 1441