mirror of
https://github.com/moodle/moodle.git
synced 2025-03-14 04:30:15 +01:00
MDL-73704 tool_componentlibrary: activity icons
This commit is contained in:
Bas Brands
parent
9cd77c4130
commit
58fa5da723
@ -45,9 +45,9 @@ To use images use this syntax:
|
||||
Syntax for markdown (.md) files:
|
||||
|
||||
```
|
||||
{{</* image "wildebeest-1200.jpg" "Image of a Wildebeest" */>}}
|
||||
{{</* image "wildebeest-1200.jpg" "Image of a Wildebeest" "img-fluid" */>}}
|
||||
```
|
||||
|
||||
Rendered result on this page:
|
||||
|
||||
{{< image "wildebeest-1200.jpg" "Image of a Wildebeest">}}
|
||||
{{< image "wildebeest-1200.jpg" "Image of a Wildebeest" "img-fluid">}}
|
||||
|
||||
@ -13,7 +13,7 @@ weight: 1
|
||||
</style>
|
||||
<div class="d-flex">
|
||||
<div class="w-50 ml-auto mr-auto">
|
||||
{{< image "logo.png" "The Moodle logo">}}
|
||||
{{< image "logo.png" "The Moodle logo" "img-fluid">}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
layout: docs
|
||||
title: "Activity icons"
|
||||
description: "Activity icons are used to quickly identify the activty types"
|
||||
date: 2020-01-14T16:32:24+01:00
|
||||
draft: false
|
||||
weight: 5
|
||||
toc: true
|
||||
tags:
|
||||
- Available
|
||||
- '4.0'
|
||||
---
|
||||
|
||||
## Activity icon types
|
||||
|
||||
Moodle activity icons are single black svg icons that is stored in mod/PLUGINNAME/pix/icon.svg.
|
||||
|
||||
### 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. Note: the icon is using the ```.icon``` css class for sizing.
|
||||
|
||||
<div class="d-flex mb-3">
|
||||
<div class="d-flex border align-items-center p-1">
|
||||
{{< image "quiz/icon.svg" "Quiz icon" "icon">}} Multiple choice quiz 1
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Coloured activity icons
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
{{< example >}}
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer assessment mr-3">
|
||||
{{< image "quiz/icon.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>
|
||||
{{< /example >}}
|
||||
|
||||
### 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```.
|
||||
|
||||
{{< php >}}
|
||||
function quiz_supports($feature) {
|
||||
switch($feature) {
|
||||
..
|
||||
case FEATURE_PLAGIARISM: return true;
|
||||
case FEATURE_MOD_PURPOSE: return MOD_PURPOSE_ASSESSMENT;
|
||||
..
|
||||
}
|
||||
}
|
||||
{{< /php >}}
|
||||
|
||||
The available activity purposes are:
|
||||
|
||||
* Administration
|
||||
* Assessment
|
||||
* Collaboration
|
||||
* Communication
|
||||
* Content
|
||||
* Interface
|
||||
* Other
|
||||
|
||||
each defined as 'MOD_PURPOSE_X', so Assessment is MOD_PURPOSE_ASSESSMENT.
|
||||
|
||||
### Purpose colours
|
||||
|
||||
The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy this array of scss colours, customise the colours and done! There is no background colour for the 'Other' type purpose, it defaults to ```light-grey: #f8f9fa```.
|
||||
|
||||
{{< highlight scss >}}
|
||||
$activity-icon-colors: (
|
||||
"administration": #5d63f6,
|
||||
"assessment": #eb00a2,
|
||||
"collaboration": #f7634d,
|
||||
"communication": #11a676,
|
||||
"content": #399be2,
|
||||
"interface": #a378ff
|
||||
);
|
||||
{{</ highlight >}}
|
||||
|
||||
## Examples
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer administration mr-3">
|
||||
{{< image "quiz/icon.svg" "Admin icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">admin</div>
|
||||
<div class="activityname"><a href="#">Administration module</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer assessment mr-3">
|
||||
{{< image "quiz/icon.svg" "Quiz icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">quiz</div>
|
||||
<div class="activityname"><a href="#">Assessment module</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer collaboration mr-3">
|
||||
{{< image "wiki/icon.svg" "Wiki icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">wiki</div>
|
||||
<div class="activityname"><a href="#">Collaboration module</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer collaboration mr-3">
|
||||
{{< image "choice/icon.svg" "Choice icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">choice</div>
|
||||
<div class="activityname"><a href="#">Learner type</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer content mr-3">
|
||||
{{< image "lesson/icon.svg" "Choice icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">lesson</div>
|
||||
<div class="activityname"><a href="#">Content module</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media mb-3">
|
||||
<div class="activityiconcontainer interface mr-3">
|
||||
{{< image "quiz/icon.svg" "Interface icon" "activityicon">}} </div>
|
||||
<div class="media-body align-self-center">
|
||||
<div class="text-uppercase small">interface</div>
|
||||
<div class="activityname"><a href="#">Interface module</a></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg width="74.4px" height="74.4px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 74.4 74.4" style="enable-background:new 0 0 74.4 74.4;" xml:space="preserve" preserveAspectRatio="xMinYMid meet">
|
||||
<path d="M71.6,6.9L57,0.5c-3.8-1.8-7.7,2.3-6.1,6.1l1.4,3.4c-6.4,2.3-11.5,4.4-15.1,7.6c-3.7-3.2-8.8-5.1-15.1-7.3l1.4-3.7
|
||||
c1.6-3.8-2.3-7.9-6.1-6.1L2.8,6.9C0.5,8-0.6,10.7,0.4,13.1l6.2,15.1c0.9,2.3,3.6,3.6,5.9,2.7c1.3-0.5,2.2-1.4,2.7-2.7l1.4-3.6
|
||||
l8.6,3.8c2.7,1,4.4,3.6,4.2,6.4c0,4.1,0,34.3,0,36.3c0,1.9,1.5,3.4,3.4,3.5h0.9h7.9c1.9,0,3.5-1.6,3.5-3.4v-0.5c0-1.8,0-31.5,0-35.7
|
||||
c-0.2-2.8,0.5-5.4,3.2-6.4l9.5-3.8l1.4,3.6c0.9,2.3,3.6,3.6,5.9,2.7c1.2-0.4,2.2-1.4,2.6-2.6l6.2-15.1C75.1,10.6,74,7.9,71.6,6.9z
|
||||
M39.9,69.2h-5.3c0-2.1,0-36,0-36c-0.2-2.3-1-4.5-2.4-6.4c-1-1.3-2.7-2.4-3.8-2.9l-14.5-6.3L12,22.3c-0.2,0.5-1.1,0.9-1.6,0.7l0,0
|
||||
c0,0-0.4-0.3-0.5-0.6L5.6,12.3c-0.3-0.5,0-1.2,0.5-1.4c0.8-0.2,11.1-5,11.1-3.6c0.3,0.3,0.4,0.8,0.3,1.2l-1.9,4.7
|
||||
c7,3,16.9,5.8,19.7,9c0.8,0.8,1.7,1.6,2.3,2.5c2,2.8,2.6,5.4,2.6,8.7L39.9,69.2z M68.8,13.2l-3.9,9.2c-0.1,0.3-0.3,0.4-0.5,0.6
|
||||
c-0.5,0.2-1-0.1-1.2-0.6l0,0l-2.4-5l-13.6,5.9c-1.5,0.7-2.3,1.2-3.3,2.5c-0.7-2.7-1.2-2.5-2.9-4.7c4.4-3.7,11.1-5,18.2-8l-2-4.9
|
||||
C57,7.8,57.1,7.4,57.5,7c0-1.3,10.5,4.5,10.9,4.4c0.3,0.3,0.5,0.8,0.4,1.4V13.2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg width="74.4px" height="74.4px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 74.4 74.4" style="enable-background:new 0 0 74.4 74.4;" xml:space="preserve" preserveAspectRatio="xMinYMid meet">
|
||||
<path d="M68.2,26.6v-5.1l0,0c3.4,0,6.2-2.8,6.2-6.2V7.6c0-3.4-2.8-6.2-6.2-6.2h-7.7c-3.4,0-6.2,2.8-6.2,6.2v1.9H22.9
|
||||
C22.1,3.2,16.3-0.7,10,0.1C4.2,0.8,0,5.6,0,11.4l0,0c0,6.4,5.2,11.4,11.6,11.4l0,0l0,0c5.3,0,9.8-3.1,11.1-8.1h31.8v0.5
|
||||
c0,3.4,2.8,6.2,6.2,6.2H63v4.2c0,4.9-5.1,8.9-10.4,8.9H23.3c-8.6,0-15.7,6.4-15.7,14.3v4.4H7c-3.4,0-6.2,2.8-6.2,6.2v7.7
|
||||
c0,3.4,2.8,6.2,6.2,6.2h7.8c3.4,0,6.2-2.8,6.2-6.2v-1.2h30.7c1.2,6.1,7.1,9.5,13.2,8.3c5.2-1,8.6-5.7,8.6-10.9l0,0
|
||||
c0-6.2-4.6-11.2-10.8-11.2l0,0c-5.4,0-9.9,3.3-11,8.6H20.9v-1.2c0-3.4-2.8-6.2-6.2-6.2h-1.8v-3.9c0-4.9,5.1-9.6,10.3-9.6h29.3
|
||||
C61,39.9,68.2,34.5,68.2,26.6z M11.4,17.5c-3.4,0-6.2-2.8-6.2-6.1C5.2,8,8,5.2,11.3,5.2c3.4,0,6.2,2.8,6.2,6.1l0,0
|
||||
C17.6,14.9,14.8,17.5,11.4,17.5z M60.4,16.2c-0.6,0-0.9-0.4-0.9-0.9V7.6c0-0.6,0.4-0.9,0.9-0.9h7.8c0.6,0,0.9,0.4,0.9,0.9v7.7
|
||||
c0,0.6-0.4,0.9-0.9,0.9H60.4z M62.4,57.5L62.4,57.5c3.2,0,5.9,2.6,5.9,5.9c0,3.2-2.6,5.9-5.9,5.9s-5.9-2.6-5.9-5.9l0,0
|
||||
C56.5,60,59.1,57.5,62.4,57.5L62.4,57.5z M14.6,58.4c0.6,0,1,0.4,1,0.9v7.8c0,0.6-0.4,0.9-1,0.9H6.8c-0.6,0-1-0.4-1-0.9v-7.8
|
||||
c0-0.6,0.4-0.9,1-0.9H14.6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg width="74.4px" height="74.4px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 74.4 74.4" style="enable-background:new 0 0 74.4 74.4;" xml:space="preserve" preserveAspectRatio="xMinYMid meet">
|
||||
<g>
|
||||
<path d="M62.1,32.3c-1.7,0-2.6,1.4-2.6,3.1v22.8h-45V13.3h27.8c4.1,0.1,4.1-5.2,0-5.1H12.6c-1.7,0-3.1,1.4-3.1,3.1l0,0
|
||||
v49.1c0,1.7,1.3,3.1,3,3.1l0,0h49c1.7,0,3.1-1.4,3.1-3.1V35.5C64.7,33.7,63.8,32.3,62.1,32.3z"/>
|
||||
<path d="M28.4,30.9c-1.4-1-3.3-0.7-4.4,0.6c-1,1.4-0.7,3.4,0.6,4.5l9.5,7c1.1,0.8,2.2,1.1,3.4,0
|
||||
c4.4-4.7,22.1-24.8,26.4-29.4c0.9-1,1.1-2.4,0.6-3.6s-1.7-1.9-3-1.9c-0.8,0-1.6,0.4-2.1,1C55,13.8,39.7,31.5,35.6,36L28.4,30.9z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 873 B |
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg width="74.4px" height="74.4px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 74.4 74.4" style="enable-background:new 0 0 74.4 74.4;" xml:space="preserve" preserveAspectRatio="xMinYMid meet">
|
||||
<path d="M74.5,35.8c-0.4-1.8-1.4-3.4-2.8-4.5l0,0L71.3,31c-1-0.5-2-0.9-3.2-0.9c-0.5,0-1.1,0.1-1.5,0.2c-1.8,0.4-3.4,1.4-4.5,2.9
|
||||
c-0.4,0.5-0.7,0.9-0.9,1.5l-10.7,0.1c-0.2-1.1-0.5-1.9-1.1-2.9c-0.7-1.5-1.4-2.5-2.6-3.6l2.8-5c0.4,0.1,0.7,0.1,1.1,0.1
|
||||
c3.9,0,6.7-3.5,6.7-7.4s-3.2-7.1-7.1-7.1s-7.1,3.2-7.1,7.1c0,1.9,0.4,3.6,1.8,5l-2.7,4.7c-1.2-0.4-2.3-0.6-3.6-0.6
|
||||
c-1.4,0-2.6,0.3-3.9,0.7l-8.2-14.3c0.4-0.4,0.5-0.9,0.8-1.3l0,0l0.1-0.2c0.8-1.6,0.9-3.4,0.4-5.1S26.3,1.8,24.8,1l-0.4-0.2l0,0
|
||||
l-0.2-0.1c-0.9-0.4-2-0.7-2.9-0.7c-1.3,0-2.6,0.4-3.7,1.1c-1.2,0.7-2,1.7-2.7,2.9c-0.8,1.7-1,3.6-0.4,5.3s1.9,3.2,3.5,4
|
||||
c0.9,0.4,1.9,0.7,2.8,0.7c0.5,0,1,0.2,1.4,0.1l8.2,14.3c-1.7,1.4-2.9,3-3.6,5C26.3,35,26,36.3,26.1,38l-9.8,2.7
|
||||
c-2.2-4.2-7.4-5.5-11.6-3.3S-1.2,44.8,1,49c2.2,4.2,7.4,5.9,11.6,3.7c2.7-1.4,4.8-3.9,4.9-6.9L27.7,43l0.1,0.1
|
||||
c0.7,1.5,1.1,2.3,2.3,3.3l-5.6,9.8c-0.6-0.2-1.3-0.3-2-0.3c-4.6,0-7.9,3.9-7.9,8.6c0,0.7,0.1,1.3,0.3,2c1.1,4.3,5.4,6.9,9.7,5.8
|
||||
c0.7-0.2,1.4-0.4,2-0.9c1.2-0.7,2.3-1.8,3-3.1c0.9-1.6,1.2-3.4,1.1-5.2c-0.3-1.7-0.6-3.1-1.7-4.4l5.6-9.7c1.2,0.4,2.2,0.5,3.4,0.5
|
||||
c0.4,0,0.7,0,1.1,0l3.2,11.9c-1.2,0.9-2.2,2.1-2.7,3.6c-0.6,1.8-0.5,3.7,0.3,5.3c0.8,1.7,2.2,2.9,3.9,3.6l0,0
|
||||
c0.7,0.3,1.4,0.4,2.2,0.4c1.1,0,2.1-0.3,3-0.7c1.7-0.8,2.9-2.3,3.6-4l0,0c0.2-0.5,0.3-1,0.4-1.5c0.2-1.3-0.1-2.6-0.6-3.7
|
||||
c-0.8-1.7-2.1-2.9-3.8-3.6l0,0l0,0c-0.6-0.2-1.3-0.3-1.9-0.4l-3.2-11.9l0.2-0.1c1.4-0.7,2.7-1.7,3.7-2.8c1.1-1.2,1.9-2.5,2.4-4v-0.1
|
||||
c0.1-0.4,0.2-0.8,0.4-1.2v-0.2l0.1-0.1l10.8-0.1c0.4,1.4,1.3,2.3,2.6,3.2l0,0c1.2,0.8,2.6,1.2,3.9,1.2c2.3,0,4.5-1.2,5.8-3.1l0,0
|
||||
C74.4,39.5,74.9,37.5,74.5,35.8z M47.2,64.7c0.6,0.2,1.3,0.9,1.5,1.4c0.3,0.6,0.4,1.3,0.1,2l0,0c-0.3,0.6-0.7,1.2-1.3,1.4l0,0l0,0
|
||||
c-0.4,0.2-0.6,0.2-1,0.3c-0.3,0-0.6-0.1-0.9-0.2l0,0c-0.6-0.2-1.1-0.7-1.4-1.2c-0.3-0.6-0.4-1.3-0.1-2c0.4-1.1,1.2-1.8,2.4-1.8
|
||||
C46.8,64.6,46.9,64.6,47.2,64.7L47.2,64.7L47.2,64.7z M45,39.5L45,39.5c-0.5,1.8-1.8,3.2-3.4,4l0,0c-2.1,1.1-4.6,1-6.6-0.2
|
||||
c-1.2-0.7-2.2-1.8-2.7-3c-0.8-1.7-0.9-3.6-0.4-5.3c0.5-1.8,1.8-3.2,3.5-4l0,0c1-0.4,2-0.6,3.1-0.6c0.7,0,1.5,0.1,2.2,0.4
|
||||
c1.7,0.5,3.1,1.8,3.9,3.4l0,0C45.5,35.8,45.7,37.7,45,39.5z M12.4,45.2c0,2-1.6,3.6-3.6,3.6s-3.6-1.6-3.6-3.6s1.6-3.6,3.6-3.6l0,0
|
||||
l0,0C10.8,41.6,12.4,43.2,12.4,45.2L12.4,45.2L12.4,45.2z M50.3,14.1L50.3,14.1c1.1,0,1.9,0.9,1.9,1.9s-0.9,1.9-1.9,1.9
|
||||
S48.4,17,48.4,16S49.2,14.1,50.3,14.1L50.3,14.1L50.3,14.1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -1,2 +1,2 @@
|
||||
|
||||
<img src="MOODLEIMAGEDIR{{ .Page.RelPermalink }}{{ .Get 0 }}" class="img-fluid" alt="{{ .Get 1 }}">
|
||||
<img src="MOODLEIMAGEDIR{{ .Page.RelPermalink }}{{ .Get 0 }}" class="{{ .Get 2 }}" alt="{{ .Get 1 }}">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user