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

Non-monologo icons are being rendered as whitened out

    XMLWordPrintable

Details

    • 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.

    Description

      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.

       

      Attachments

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

        Issue Links

          Activity

            People

              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

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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

                  Clockify

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