Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-78284

Implement the new activity icons design

XMLWordPrintable

    • MOODLE_404_STABLE
    • MOODLE_404_STABLE
    • MDL-78284-main
    • Hide

      It's possible to manually apply the new icon design (outlined with a transparent background) using the Boost "Advanced settings":

      Raw initial 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-filters: () !default;
      $activity-icon-filters: map-merge(
          (
              "administration": invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%),
              "assessment": invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%),
              "collaboration": invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%),
              "communication": invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%),
              "content": invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%),
          ),
          $activity-icon-filters
      );
      

       

       

      Raw SCSS:

      @each $type, $value in $activity-icon-filters {
          .activityiconcontainer.#{$type} {
              filter: $value;
              background-color: inherit;
              .activityicon,
              .icon {
                  &:not(.nofilter) {
                      filter: brightness(0) invert(1);
                  }
              }
          }
      }
      .activityiconcontainer {
          background-color: unset;
      }

       

      Show
      It's possible to manually apply the new icon design (outlined with a transparent background) using the Boost "Advanced settings": Raw initial 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-filters: () ! default ; $activity-icon-filters: map-merge(     (         "administration" : invert( 45 %) sepia( 46 %) saturate( 3819 %) hue-rotate(260deg) brightness( 101 %) contrast( 87 %),         "assessment" : invert( 36 %) sepia( 98 %) saturate( 6969 %) hue-rotate(315deg) brightness( 90 %) contrast( 119 %),         "collaboration" : invert( 25 %) sepia( 54 %) saturate( 6226 %) hue-rotate(245deg) brightness( 100 %) contrast( 102 %),         "communication" : invert( 48 %) sepia( 74 %) saturate( 4887 %) hue-rotate(11deg) brightness( 102 %) contrast( 101 %),         "content" : invert( 49 %) sepia( 52 %) saturate( 4675 %) hue-rotate(156deg) brightness( 89 %) contrast( 102 %),     ),     $activity-icon-filters );     Raw SCSS : @each $type, $value in $activity-icon-filters {     .activityiconcontainer.#{$type} {         filter: $value;         background-color: inherit;         .activityicon,         .icon {             &:not(.nofilter) {                 filter: brightness( 0 ) invert( 1 );             }         }     } } .activityiconcontainer {     background-color: unset; }  
    • Hide

      Setup

      1. Install the following third-party plugins:
      2. Login as admin.
      3. Go to "Site administration > Plugins > External tool > Manage tools".
      4. Click the "configure a tool manually" link.
        1. Set a name (for instance, "Testing external tool 1").
        2. Set the Tool URL to https://saltire.lti.app/tool
        3. Set "Tool configuration usage" to "Show in activity chooser and as preconfigured tool".
      5. Save changes.
      6. Click the "configure a tool manually" link.
        1. Set a name (for instance, "Testing external tool 2").
        2. Set the Tool URL to https://saltire.lti.app/tool
        3. Set "Tool configuration usage" to "Show in activity chooser and as preconfigured tool".
        4. Click the Show more... link and set the Icon URL to https://upload.wikimedia.org/wikipedia/commons/d/da/Circle-icons-pencil.svg
      7. Save changes.
      8. Create a course and enrol, at least, one student.
      9. Add a few activities to the course. 
        • At least one of them should have a due date near to the current date (for instance, tomorrow).
      10. Access to any of the activities (to guarantee the Recently accessed items block is not empty).
      11. Add the following blocks to the course:
        • Activities
        • Calendar
        • Upcoming events
      12. Go to the Dashboard and add the following blocks:
        • Upcoming events
        • Recently accessed items

       

      Testing scenario 1. Course

      1. Login as admin.
      2. Go to "Site administration > Plugins > Activity modules > Manage activities".
      3. Check the icons are displayed in black and slightly bigger than before (approximately width: 24px and height: 24px).
      4. Go to the course.
      5. Enable edit mode.
      6. Click the "Add an activity or resource".
      7. Check all the icons are displayed without a background.
      8. Check all the icons are slightly bigger than before (in that case, 32x 32).
      9. Check the BigBlueButton and H5P activities are displayed using their logo with their original color (both are kind of blue).
      10. Check that "Testing external tool 1" is displayed using the default puzzle icon for external tools in black and that "Testing external tool 2" is using the pencil icon with its colors (instead of black).
      11. Access a few activities and check the icon is displayed using the same colors as it appears on the main course page.
      12. Go to "More > Course completion > Default activity completion".
      13. Check all the icons (except the "branded" ones, like BigBlueButton or H5P) are displayed in black (instead of blue). Check the branded icons keep their original colors.
      14. Go to "More > LTI External tools".
      15. Check the icons for the external tools are displayed in black or with the original icon (depending on whether they have a custom icon or not).
      16. Create a backup of the course. In the second step (2. Schema settings), check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px). Note: The external tool is displayed using the "puzzle" icon in all the cases (regardless of their custom icon).
      17. Go to "More > Reports > Activity completion".
      18. Check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px).
      19. Check the checkbox for the activities is displayed with the expected size (16px16px).
      20. Go to the Gradebook.
      21. Check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px).
      22. Go to the main course page and edit any of the existing activities.
      23. Check that the activity icon is only displayed once (in the header, near the activity name).

       

      Testing scenario 2. Course blocks

      1. Login as admin and go to the course.
      2. In the Activities block, check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px).
      3. In the Calendar block, click any of the days that have some activity with due dates and check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px).
      4. In the Upcoming events block, check the activity icons are displayed in black (except the branded ones).

       

      Testing scenario 3. Dashboard

      1. Login as admin.
      2. Go to the Dashboard.
      3. In the Timeline block, the Upcoming events and the Recently accessed items, check the activity icons are displayed in black (except the branded ones).

      Testing scenario 4. Component library

      1. Install grunt and run:

        grunt componentlibrary

      2. Go to "Site administration > Development > UI Component library" and load the "Activity icons page.
      3. Check the content is updated with the new icons and color styles.
      Show
      Setup Install the following third-party plugins: https://moodle.org/plugins/mod_attendance https://moodle.org/plugins/mod_groupmembers https://moodle.org/plugins/mod_pulse   Login as admin. Go to "Site administration > Plugins > External tool > Manage tools". Click the "configure a tool manually" link. Set a name (for instance, "Testing external tool 1"). Set the Tool URL to https://saltire.lti.app/tool Set "Tool configuration usage" to "Show in activity chooser and as preconfigured tool". Save changes. Click the "configure a tool manually" link. Set a name (for instance, "Testing external tool 2"). Set the Tool URL to https://saltire.lti.app/tool Set "Tool configuration usage" to "Show in activity chooser and as preconfigured tool". Click the Show more... link and set the Icon URL to https://upload.wikimedia.org/wikipedia/commons/d/da/Circle-icons-pencil.svg Save changes. Create a course and enrol, at least, one student. Add a few activities to the course.  At least one of them should have a due date near to the current date (for instance, tomorrow). Access to any of the activities (to guarantee the Recently accessed items block is not empty). Add the following blocks to the course: Activities Calendar Upcoming events Go to the Dashboard and add the following blocks: Upcoming events Recently accessed items   Testing scenario 1. Course Login as admin. Go to "Site administration > Plugins > Activity modules > Manage activities". Check the icons are displayed in black and slightly bigger than before (approximately width: 24px and height: 24px). Go to the course. Enable edit mode. Click the "Add an activity or resource". Check all the icons are displayed without a background. Check all the icons are slightly bigger than before (in that case, 32x 32). Check the BigBlueButton and H5P activities are displayed using their logo with their original color (both are kind of blue). Check that "Testing external tool 1" is displayed using the default puzzle icon for external tools in black and that "Testing external tool 2" is using the pencil icon with its colors (instead of black). Access a few activities and check the icon is displayed using the same colors as it appears on the main course page. Go to "More > Course completion > Default activity completion". Check all the icons (except the "branded" ones, like BigBlueButton or H5P) are displayed in black (instead of blue). Check the branded icons keep their original colors. Go to "More > LTI External tools". Check the icons for the external tools are displayed in black or with the original icon (depending on whether they have a custom icon or not). Create a backup of the course. In the second step (2. Schema settings), check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px). Note: The external tool is displayed using the "puzzle" icon in all the cases (regardless of their custom icon). Go to "More > Reports > Activity completion". Check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px). Check the checkbox for the activities is displayed with the expected size (16px16px). Go to the Gradebook. Check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px). Go to the main course page and edit any of the existing activities. Check that the activity icon is only displayed once (in the header, near the activity name).   Testing scenario 2. Course blocks Login as admin and go to the course. In the Activities block, c heck the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px). In the Calendar block, click any of the days that have some activity with due dates and check the activity icons are displayed in black (except the branded ones) and slightly bigger than before (around 24px). In the Upcoming events block, check the activity icons are displayed in black (except the branded ones).   Testing scenario 3. Dashboard Login as admin. Go to the Dashboard. In the Timeline block, the Upcoming events and the Recently accessed items, c heck the activity icons are displayed in black (except the branded ones). Testing scenario 4. Component library Install grunt and run: grunt componentlibrary Go to "Site administration > Development > UI Component library" and load the "Activity icons page. Check the content is updated with the new icons and color styles.
    • 2
    • HQ2024 Sprint I1.1 Moppies

      Moodle 4.3 featured revamped activity cards with a new and improved activity icons design. The updated designs prioritize readability and transform the existing filled square shapes with white icons into outlined colored icons against a transparent background. This modification ensures that the icons are not only more accessible but also easily distinguishable for users.

      🖥 Figma mockup link 

      ⬇️ Activity icons.zip

      🖼 New activity icons set

       

        1. (1) 11 Passed -- (Main)MDL-78284.png
          (1) 11 Passed -- (Main)MDL-78284.png
          16 kB
        2. (1) 13 Passed -- (Main)MDL-78284.png
          (1) 13 Passed -- (Main)MDL-78284.png
          51 kB
        3. (1) 15 Passed -- (Main)MDL-78284.png
          (1) 15 Passed -- (Main)MDL-78284.png
          46 kB
        4. (1) 16 Passed -- (Main)MDL-78284.png
          (1) 16 Passed -- (Main)MDL-78284.png
          42 kB
        5. (1) 18 Passed -- (Main)MDL-78284.png
          (1) 18 Passed -- (Main)MDL-78284.png
          61 kB
        6. (1) 19 Passed -- (Main)MDL-78284.png
          (1) 19 Passed -- (Main)MDL-78284.png
          53 kB
        7. (1) 21 Passed -- (Main)MDL-78284.png
          (1) 21 Passed -- (Main)MDL-78284.png
          54 kB
        8. (1) 23 Passed -- (Main)MDL-78284.png
          (1) 23 Passed -- (Main)MDL-78284.png
          34 kB
        9. (1) 3 Passed -- (Main)MDL-78284.png
          (1) 3 Passed -- (Main)MDL-78284.png
          60 kB
        10. (1) 7-10 Passed -- (Main)MDL-78284.png
          (1) 7-10 Passed -- (Main)MDL-78284.png
          171 kB
        11. (2) 2 Passed -- (Main)MDL-78284.png
          (2) 2 Passed -- (Main)MDL-78284.png
          30 kB
        12. (2) 3 Passed -- (Main)MDL-78284.png
          (2) 3 Passed -- (Main)MDL-78284.png
          51 kB
        13. (2) 4 Passed -- (Main)MDL-78284.png
          (2) 4 Passed -- (Main)MDL-78284.png
          20 kB
        14. (3) 3 Passed -- (Main)MDL-78284.png
          (3) 3 Passed -- (Main)MDL-78284.png
          57 kB
        15. (4) Passed -- (Main)MDL-78284.png
          (4) Passed -- (Main)MDL-78284.png
          51 kB
        16. actionmenugradebook.png
          actionmenugradebook.png
          54 kB
        17. Activity chooser · New icons & color palette.png
          Activity chooser · New icons & color palette.png
          82 kB
        18. Activity icons.zip
          365 kB
        19. activityreport_after.png
          activityreport_after.png
          7 kB
        20. activityreport_before.png
          activityreport_before.png
          6 kB
        21. Icon colors-HEX codes.png
          Icon colors-HEX codes.png
          78 kB
        22. image-2023-08-22-09-28-21-544.png
          image-2023-08-22-09-28-21-544.png
          32 kB
        23. image-2023-08-24-15-31-35-987.png
          image-2023-08-24-15-31-35-987.png
          77 kB
        24. image-2024-01-25-12-26-56-095.png
          image-2024-01-25-12-26-56-095.png
          9 kB
        25. image-2024-01-25-12-29-53-236.png
          image-2024-01-25-12-29-53-236.png
          18 kB
        26. image-2024-01-25-12-44-00-152.png
          image-2024-01-25-12-44-00-152.png
          10 kB
        27. image-2024-02-06-11-32-17-796.png
          image-2024-02-06-11-32-17-796.png
          11 kB
        28. image-2024-02-06-11-32-26-775.png
          image-2024-02-06-11-32-26-775.png
          17 kB
        29. image-2024-02-06-11-32-42-831.png
          image-2024-02-06-11-32-42-831.png
          62 kB

            sarjona Sara Arjona (@sarjona)
            tusefomal Ferran Recio
            Laurent David Laurent David
            Amaia Anabitarte Amaia Anabitarte
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            7 Vote for this issue
            Watchers:
            26 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 days, 5 hours, 15 minutes
                4d 5h 15m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.