From 58fa5da723b5e9bd16257466c6fde7d47a3ca628 Mon Sep 17 00:00:00 2001 From: Bas Brands Date: Thu, 3 Mar 2022 11:36:02 +0100 Subject: [PATCH] MDL-73704 tool_componentlibrary: activity icons --- .../content/library/adding-images.md | 4 +- .../content/library/getting-started.md | 2 +- .../moodle/components/activityicons.md | 138 ++++++++++++++++++ .../components/activityicons/choice/icon.svg | 14 ++ .../components/activityicons/lesson/icon.svg | 15 ++ .../components/activityicons/quiz/icon.svg | 11 ++ .../components/activityicons/wiki/icon.svg | 25 ++++ .../hugo/site/layouts/shortcodes/image.html | 2 +- 8 files changed, 207 insertions(+), 4 deletions(-) create mode 100644 admin/tool/componentlibrary/content/moodle/components/activityicons.md create mode 100644 admin/tool/componentlibrary/content/static/moodle/components/activityicons/choice/icon.svg create mode 100644 admin/tool/componentlibrary/content/static/moodle/components/activityicons/lesson/icon.svg create mode 100644 admin/tool/componentlibrary/content/static/moodle/components/activityicons/quiz/icon.svg create mode 100644 admin/tool/componentlibrary/content/static/moodle/components/activityicons/wiki/icon.svg diff --git a/admin/tool/componentlibrary/content/library/adding-images.md b/admin/tool/componentlibrary/content/library/adding-images.md index 9d6941b0215..8abb1b646f1 100644 --- a/admin/tool/componentlibrary/content/library/adding-images.md +++ b/admin/tool/componentlibrary/content/library/adding-images.md @@ -45,9 +45,9 @@ To use images use this syntax: Syntax for markdown (.md) files: ``` -{{}} +{{}} ``` Rendered result on this page: -{{< image "wildebeest-1200.jpg" "Image of a Wildebeest">}} +{{< image "wildebeest-1200.jpg" "Image of a Wildebeest" "img-fluid">}} diff --git a/admin/tool/componentlibrary/content/library/getting-started.md b/admin/tool/componentlibrary/content/library/getting-started.md index 8a14fdf73d5..6cccc1a655d 100644 --- a/admin/tool/componentlibrary/content/library/getting-started.md +++ b/admin/tool/componentlibrary/content/library/getting-started.md @@ -13,7 +13,7 @@ weight: 1
-{{< image "logo.png" "The Moodle logo">}} +{{< image "logo.png" "The Moodle logo" "img-fluid">}}
diff --git a/admin/tool/componentlibrary/content/moodle/components/activityicons.md b/admin/tool/componentlibrary/content/moodle/components/activityicons.md new file mode 100644 index 00000000000..2a3959aba92 --- /dev/null +++ b/admin/tool/componentlibrary/content/moodle/components/activityicons.md @@ -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. + +
+
+ {{< image "quiz/icon.svg" "Quiz icon" "icon">}} Multiple choice quiz 1 +
+
+ +### 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 >}} +
+
+ {{< image "quiz/icon.svg" "Quiz icon" "activityicon">}}
+
+
quiz
+
Multiple choice quiz 1
+
+
+{{< /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 +); +{{}} + +## Examples + +
+
+ {{< image "quiz/icon.svg" "Admin icon" "activityicon">}}
+
+
admin
+
Administration module
+
+
+ +
+
+ {{< image "quiz/icon.svg" "Quiz icon" "activityicon">}}
+
+
quiz
+
Assessment module
+
+
+ +
+
+ {{< image "wiki/icon.svg" "Wiki icon" "activityicon">}}
+
+
wiki
+
Collaboration module
+
+
+ +
+
+ {{< image "choice/icon.svg" "Choice icon" "activityicon">}}
+
+
choice
+
Learner type
+
+
+ +
+
+ {{< image "lesson/icon.svg" "Choice icon" "activityicon">}}
+
+
lesson
+
Content module
+
+
+ +
+
+ {{< image "quiz/icon.svg" "Interface icon" "activityicon">}}
+
+
interface
+
Interface module
+
+
diff --git a/admin/tool/componentlibrary/content/static/moodle/components/activityicons/choice/icon.svg b/admin/tool/componentlibrary/content/static/moodle/components/activityicons/choice/icon.svg new file mode 100644 index 00000000000..02905029cf4 --- /dev/null +++ b/admin/tool/componentlibrary/content/static/moodle/components/activityicons/choice/icon.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/admin/tool/componentlibrary/content/static/moodle/components/activityicons/lesson/icon.svg b/admin/tool/componentlibrary/content/static/moodle/components/activityicons/lesson/icon.svg new file mode 100644 index 00000000000..80ddee00bda --- /dev/null +++ b/admin/tool/componentlibrary/content/static/moodle/components/activityicons/lesson/icon.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/admin/tool/componentlibrary/content/static/moodle/components/activityicons/quiz/icon.svg b/admin/tool/componentlibrary/content/static/moodle/components/activityicons/quiz/icon.svg new file mode 100644 index 00000000000..26cb7dda712 --- /dev/null +++ b/admin/tool/componentlibrary/content/static/moodle/components/activityicons/quiz/icon.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/admin/tool/componentlibrary/content/static/moodle/components/activityicons/wiki/icon.svg b/admin/tool/componentlibrary/content/static/moodle/components/activityicons/wiki/icon.svg new file mode 100644 index 00000000000..ff8eddd323c --- /dev/null +++ b/admin/tool/componentlibrary/content/static/moodle/components/activityicons/wiki/icon.svg @@ -0,0 +1,25 @@ + + + + + diff --git a/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/image.html b/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/image.html index 0f50578983d..0d10d02d612 100644 --- a/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/image.html +++ b/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/image.html @@ -1,2 +1,2 @@ -{{ .Get 1 }} \ No newline at end of file +{{ .Get 1 }}