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

Non-monologo icons are being rendered as whitened out

XMLWordPrintable

    • MOODLE_401_STABLE
    • MOODLE_400_STABLE, MOODLE_401_STABLE
    • MDL-77105-401-4
    • MDL-77105-master-4
    • Hide

      Setup

      A course with a bunch of URLs
      1. Restore filelinks.mbz to a new course C1.
      2. Create another course C2 with an assignment with a due date.
      3. Entrol at least one student in C2.
      A third-party plugin without an SVG icon
      1. Clone a third-party activity plugin that doesn't have SVG icons yet. (e.g. mod_threesixo)

        cd [to your moodle root folder]
        git clone https://github.com/junpataleta/moodle-mod_threesixo.git mod/threesixo
        cd mod/threesixo
        # Delete the monologo icons so it will fall back to using the old pix/icon.
        rm mod/threesixo/monologo.*
        

      2. Run the upgrade process to install the plugin.
      LTI
      1. This requires ngrok so make sure your site is accessible over the internet via ngrok.
      2. Go to Site administration > Plugins > Activity modules > External tool > Manage tools
      3. Enter "https://robotest.theedtech.dev/register" for the Tool URL... field and press "Add LTI Advantage" and proceed with the rest of the tool registration process.
      4. Activate and rename this tool to "Robotest PNG"
      5. Edit this tool and make sure the following settings are set:
        • Tool configuration usage: Show in activity chooser and as a preconfigured tool
        • Supports Deep Linking (Content-Item Message): Ticked
      6. Go back to the Manage tools page and add another Robotest tool.
      7. Activate and rename this tool to "Robotest Default"
      8. Edit this tool and make sure the following settings are set:
        • Tool configuration usage: Show in activity chooser and as a preconfigured tool
        • Supports Deep Linking (Content-Item Message): (Ticked)
        • Icon URL: (Empty)

      Test

      Activity chooser
      1. Go to C2's course homepage
      2. Turn editing on
      3. Add an activity or resource
      4. Check the activity icons.
      5. Confirm that
        • Robotest PNG shows its icon properly (a rounded robot head's image)
        • Robotest Default shows a whitened icon and has the same icon for the External tool.
        • 360 feedback displays a 360 icon.
        • The other activity icons, except for the BigBlueButton, have whitened outline icons.
      Course homepage and activity view page
      LTI
      1. Continuing from the previous section, click on "Robotest PNG"
      2. On the "Adding a new External tool" form, click "Select content"
      3. On the "Select content" modal, click "Why choose? One of each please!"
      4. Confirm the LTI activities to be added and press "Save and return to course"
      5. Confirm that the icons of the added LTI activities are rendered properly.
      6. Click on the "Graded (IFrame)" LTI activity.
      7. Confirm that the robot head icon is rendered properly and not just a white image.
      Third-party plugin (360 feedback)
      1. Go back to the course homepage and add a 360-degree feedback activity.
      2. Set a value for "Allow answers to".
      3. Save and display.
      4. Confirm that the activity icon shows the logo of the 360 feedback activity, displayed with no whitening/filtering.
      5. Edit 360 feedback items.
      6. Pick a question from the question bank.
      7. Add a new question
      8. Enter any text and save the changes
      9. Select this question and save the changes.
      10. Go back to the 360 dashboard
      11. Press "Make available".
      12. Go back to the course homepage and also confirm that the icon for the 360 feedback activity is rendered properly (as above, no filters applied).
      mod_url
      1. Go to C1's course homepage.
      2. Confirm that the activity icons are rendered okay and not just as a white image.
      3. Go to one of the links (e.g., the "An Archive File link").
      4. Confirm that the activity icon is rendered okay and not just as a white image.
      5. Go back to the course homepage.
      6. Check the "A HTML File link" item.
      7. Confirm that it is being rendered as a white SVG globe icon.
      8. Click on it
      9. Confirm that the activity icon is in its whitened form.
      Recently accessed items block
      1. Go to the dashboard
      2. Add the Recently accessed items block (if it's not yet added).
      3. Check the activity icons.
      4. Confirm that they are rendered properly. (Default moodle activity plugins are rendered with their normal white outlined icons and the others like LTI, 360 feedback plugins, or URL resources with PNG icons are rendered properly and not just as a solid white image.)
      Timeline block
      1. Log in as a student and go to the dashboard
      2. On the Timeline block, open the filter selector and change it from "Next 7 days" to "All".
      3. Confirm that the icon for the assignment is rendered properly as a white outline icon.
      4. Confirm that the 360 feedback activity has its logo rendered properly.
      Show
      Setup A course with a bunch of URLs Restore filelinks.mbz to a new course C1. Create another course C2 with an assignment with a due date. Entrol at least one student in C2. A third-party plugin without an SVG icon Clone a third-party activity plugin that doesn't have SVG icons yet. (e.g. mod_threesixo) cd [to your moodle root folder] git clone https: //github .com /junpataleta/moodle-mod_threesixo .git mod /threesixo cd mod /threesixo # Delete the monologo icons so it will fall back to using the old pix/icon. rm mod /threesixo/monologo .* Run the upgrade process to install the plugin. LTI This requires ngrok so make sure your site is accessible over the internet via ngrok. Go to Site administration > Plugins > Activity modules > External tool > Manage tools Enter " https://robotest.theedtech.dev/register " for the Tool URL... field and press " Add LTI Advantage " and proceed with the rest of the tool registration process. Activate and rename this tool to " Robotest PNG " Edit this tool and make sure the following settings are set: Tool configuration usage: Show in activity chooser and as a preconfigured tool Supports Deep Linking (Content-Item Message): Ticked Go back to the Manage tools page and add another Robotest tool. Activate and rename this tool to " Robotest Default " Edit this tool and make sure the following settings are set: Tool configuration usage: Show in activity chooser and as a preconfigured tool Supports Deep Linking (Content-Item Message): (Ticked) Icon URL: (Empty) Test Activity chooser Go to C2's course homepage Turn editing on Add an activity or resource Check the activity icons. Confirm that Robotest PNG shows its icon properly (a rounded robot head's image) Robotest Default shows a whitened icon and has the same icon for the External tool. 360 feedback displays a 360 icon. The other activity icons, except for the BigBlueButton, have whitened outline icons. Course homepage and activity view page LTI Continuing from the previous section, click on " Robotest PNG " On the " Adding a new External tool " form, click " Select content " On the "Select content" modal, click "Why choose? One of each please!" Confirm the LTI activities to be added and press "Save and return to course" Confirm that the icons of the added LTI activities are rendered properly. Click on the " Graded (IFrame) " LTI activity. Confirm that the robot head icon is rendered properly and not just a white image. Third-party plugin (360 feedback) Go back to the course homepage and add a 360-degree feedback activity. Set a value for " Allow answers to ". Save and display. Confirm that the activity icon shows the logo of the 360 feedback activity, displayed with no whitening/filtering. Edit 360 feedback items. Pick a question from the question bank. Add a new question Enter any text and save the changes Select this question and save the changes. Go back to the 360 dashboard Press "Make available". Go back to the course homepage and also confirm that the icon for the 360 feedback activity is rendered properly (as above, no filters applied). mod_url Go to C1's course homepage. Confirm that the activity icons are rendered okay and not just as a white image. Go to one of the links (e.g., the "An Archive File link"). Confirm that the activity icon is rendered okay and not just as a white image. Go back to the course homepage. Check the "A HTML File link" item. Confirm that it is being rendered as a white SVG globe icon. Click on it Confirm that the activity icon is in its whitened form. Recently accessed items block Go to the dashboard Add the Recently accessed items block (if it's not yet added). Check the activity icons. Confirm that they are rendered properly. (Default moodle activity plugins are rendered with their normal white outlined icons and the others like LTI, 360 feedback plugins, or URL resources with PNG icons are rendered properly and not just as a solid white image.) Timeline block Log in as a student and go to the dashboard On the Timeline block, open the filter selector and change it from "Next 7 days" to "All". Confirm that the icon for the assignment is rendered properly as a white outline icon. Confirm that the 360 feedback activity has its logo rendered properly.

      While LTI icons are being shown in the Administrative view, they're turning completely white in the course view.

      See attached images below for a sample of it not working in the class course view, but working in the administrative set up view.

      This class - https://github.com/moodle/moodle/blob/master/theme/boost/scss/moodle/icons.scss#L150 - is adding a brightness of 0 and then inverting it, essentially making all images a white square or a white png. While this was presumably done for standard icons where the icons are known to be white and transparent, the icons can also be LTI tool icons that are added dynamically via external tools. When you do that, it makes the icons completely white, unlike the icon that shows up in the LTI administrative view.

      One could argue that providers of LTI should offer up a transparent PNG, but LTI tool endpoints are almost never unique to an LMS. So that would mean a white/blank image in other LMS's that aren't Moodle. Moodle should respect the logo as designated by LTI.

      You could add :not(.modicon_lti) like below to make this work correctly, or a new class to specify an LTI icon.

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

      Thanks.

       

        1. activity_chooser.png
          126 kB
          Ron Carl Alfon Yu
        2. activity-chooser.png
          194 kB
          Jun Pataleta
        3. activity-page-non-svg.png
          55 kB
          Jun Pataleta
        4. activity page svg.png
          15 kB
          Jun Pataleta
        5. coursehomepage.png
          52 kB
          Jun Pataleta
        6. Cursor_and_wayfinder__Wayfinder__1_1_1__Intro__Our_Adventure_Begins.png
          8 kB
          Jeremy L
        7. custom_icon_difference.jpg
          29 kB
          Jake Dallimore
        8. filelinks.mbz
          12 kB
          Jun Pataleta
        9. image-2023-02-09-19-11-28-514.png
          27 kB
          Jun Pataleta
        10. image-2023-02-09-19-12-26-237.png
          55 kB
          Jun Pataleta
        11. lti.png
          221 kB
          Ron Carl Alfon Yu
        12. mod_url.png
          311 kB
          Ron Carl Alfon Yu
        13. recently_accessed_items_block.png
          22 kB
          Ron Carl Alfon Yu
        14. recently accessed items block.png
          40 kB
          Jun Pataleta
        15. third_party_plugin.png
          127 kB
          Ron Carl Alfon Yu
        16. timeline_block.png
          75 kB
          Ron Carl Alfon Yu
        17. timeline block.png
          38 kB
          Jun Pataleta
        18. Wayfinder__External_tool_registration.png
          21 kB
          Jeremy L

            jpataleta Jun Pataleta
            jeremywayfinder Jeremy L
            Shamim Rezaie Shamim Rezaie
            Jake Dallimore Jake Dallimore
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            6 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 days, 40 minutes
                3d 40m

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