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

      Description

      Redesign section icons in svg and png formats

        Gliffy Diagrams

        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: