Details

    • Type: Sub-task Sub-task
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 2.3.2
    • Fix Version/s: 2.4
    • Component/s: Usability
    • Labels:
    • Testing Instructions:
      Hide

      Is important to test this issue in different browsers including (IE 8 and 10, Firefox and Chrome) in different OS (Windows, iOS and Linux) In browsers that supports SVG you can also try to zoom in and zoom out to check there is nothing strange.

      Browsers that does not supports SVG SHOULD display the .png icons, browsers that supports SVG SHOULD display the SVG icons

      The aim of this test is to check the section-related icons:

      • To move up/down, hide/show and mark/unmark sections
      • The "+" of the add activity
      • The question mark to add an activity when javascript is disabled
      Show
      Is important to test this issue in different browsers including (IE 8 and 10, Firefox and Chrome) in different OS (Windows, iOS and Linux) In browsers that supports SVG you can also try to zoom in and zoom out to check there is nothing strange. Browsers that does not supports SVG SHOULD display the .png icons, browsers that supports SVG SHOULD display the SVG icons The aim of this test is to check the section-related icons: To move up/down, hide/show and mark/unmark sections The "+" of the add activity The question mark to add an activity when javascript is disabled
    • Affected Branches:
      MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_24_STABLE
    • Pull Master Branch:
      wip-MDL-36342-master
    • Rank:
      45136

      Description

      Redesign section icons in svg and png formats

      1. Afterburner.png
        33 kB
      2. Assignment icon and spacing- Standard theme.png
        139 kB
      3. Serenity -SectioneditIcon.png
        27 kB
      4. Standard theme- editing off.png
        78 kB
      5. with-javascript.png
        13 kB
      6. without-javascript.png
        16 kB

        Issue Links

          Activity

          Hide
          Barbara Ramiro added a comment -

          Attached screenshots for the new section icons with javascript enabled and disabled

          Show
          Barbara Ramiro added a comment - Attached screenshots for the new section icons with javascript enabled and disabled
          Hide
          Dan Poltawski added a comment -

          Bringing straight into integration since nobody volunteeered to peer review.

          Show
          Dan Poltawski added a comment - Bringing straight into integration since nobody volunteeered to peer review.
          Hide
          Dan Poltawski added a comment -

          Integrated, thanks Barbara.

          Handing to David to flesh out testing instructions a little.

          Show
          Dan Poltawski added a comment - Integrated, thanks Barbara. Handing to David to flesh out testing instructions a little.
          Hide
          David Monllaó added a comment -

          Hi Raj,

          I'll be testing the issue in Android (2.3.x and 4.x) and i(Phone|Pad) devices.

          Show
          David Monllaó added a comment - Hi Raj, I'll be testing the issue in Android (2.3.x and 4.x) and i(Phone|Pad) devices.
          Hide
          Rajesh Taneja added a comment -

          Thanks Barbara, for improving icons. They look great
          svg icons are shown in browsers with svg support (FF) and png is viewing in non-svg supported browsers (ie8)

          Few things which you might want to consider:

          1. On standard theme:
            • Icons give a impression of misalignment, especially when (Assignment and forum activities are next to each other.)
            • Spacing in left and right blocks are comparatively less then the centre block.
            • When editing off, spacing is more prominent, text seems smaller then activity icon.
          2. Serenity theme
            • Section icon is not aligned well.
            • Spacing between activities is too small.

          Similarly icons are overlapping on Afterburner

          Show
          Rajesh Taneja added a comment - Thanks Barbara, for improving icons. They look great svg icons are shown in browsers with svg support (FF) and png is viewing in non-svg supported browsers (ie8) Few things which you might want to consider: On standard theme: Icons give a impression of misalignment, especially when (Assignment and forum activities are next to each other.) Spacing in left and right blocks are comparatively less then the centre block. When editing off, spacing is more prominent, text seems smaller then activity icon. Serenity theme Section icon is not aligned well. Spacing between activities is too small. Similarly icons are overlapping on Afterburner
          Hide
          David Monllaó added a comment - - edited

          Tested in:
          Android 4.x (Chrome, Firefox and built-in browser)
          Android 2.3 (Firefox and built-in browser)
          iPhone (Safari)
          iPad (Safari)

          Using the default standard theme and mymobile theme, only MDL-36290 problem detected in non-block contents, displaying .png instead of .svg in browsers that supports .svg

          Show
          David Monllaó added a comment - - edited Tested in: Android 4.x (Chrome, Firefox and built-in browser) Android 2.3 (Firefox and built-in browser) iPhone (Safari) iPad (Safari) Using the default standard theme and mymobile theme, only MDL-36290 problem detected in non-block contents, displaying .png instead of .svg in browsers that supports .svg
          Hide
          Barbara Ramiro added a comment -

          Thanks Raj for thoroughly looking into it.

          With regard to the icon misalignment, it is likely to happen as the icons come in different shapes and form. It is aligned based on a 24px grid and the optical illusion factor has also been considered.

          The spacing on the left and right blocks should be raised on a separate issue because only the section part is changed here. But i know what you mean, you want it to look balanced so yeah will do that on a separate issue.

          The activity text name has been resized based on the edit icons height considering ALL CAPS. To increase it more will look so big on 1028 resolution. While the activity icons and file type icons are designed to be 24px to make it work well on touch screen and higher resolution so reducing the size of it will have to discussed with Martin.

          For theme issues, please create a new issue and put them as subtasks under that icons issue as per Dan's instruction.

          Cheers =)

          Show
          Barbara Ramiro added a comment - Thanks Raj for thoroughly looking into it. With regard to the icon misalignment, it is likely to happen as the icons come in different shapes and form. It is aligned based on a 24px grid and the optical illusion factor has also been considered. The spacing on the left and right blocks should be raised on a separate issue because only the section part is changed here. But i know what you mean, you want it to look balanced so yeah will do that on a separate issue. The activity text name has been resized based on the edit icons height considering ALL CAPS. To increase it more will look so big on 1028 resolution. While the activity icons and file type icons are designed to be 24px to make it work well on touch screen and higher resolution so reducing the size of it will have to discussed with Martin. For theme issues, please create a new issue and put them as subtasks under that icons issue as per Dan's instruction. Cheers =)
          Hide
          Rajesh Taneja added a comment -

          Thanks David and Barbara,

          Passing this as discussed. David will create separate bugs for the concerns raised and will see how it goes.

          Show
          Rajesh Taneja added a comment - Thanks David and Barbara, Passing this as discussed. David will create separate bugs for the concerns raised and will see how it goes.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Amazed. Inspired. Grateful. That’s how your generosity makes me feel.

          (not really)

          Closing, thanks!

          Show
          Eloy Lafuente (stronk7) added a comment - Amazed. Inspired. Grateful. That’s how your generosity makes me feel. (not really) Closing, thanks!

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: