Moodle

Redesign section icons in svg and png formats

Details

  • Type: Sub-task Sub-task
  • Status: Closed 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 from Repository:
  • Pull Master Branch:
    wip-MDL-36342-master
  • Pull Master Diff URL:

Description

Redesign section icons in svg and png formats

  1. Afterburner.png
    33 kB
    07/Nov/12 2:45 PM
  2. Assignment icon and spacing- Standard theme.png
    139 kB
    07/Nov/12 2:45 PM
  3. Serenity -SectioneditIcon.png
    27 kB
    07/Nov/12 2:45 PM
  4. Standard theme- editing off.png
    78 kB
    07/Nov/12 2:45 PM
  5. with-javascript.png
    13 kB
    06/Nov/12 12:38 PM
  6. without-javascript.png
    16 kB
    06/Nov/12 12:42 PM

Issue Links

testing discovered

Sub-task - Issues are sometimes broken into multiple sub-tasks. MDL-36443 Consistency across icons when themes override some, but not all, standard icons

  • Minor - Minor loss of function where workaround is possible
  • Open - The issue is open and ready for the assignee to start work on it.

Sub-task - Issues are sometimes broken into multiple sub-tasks. MDL-36440 Padding between activites with new SVG & PNG icons

  • Minor - Minor loss of function where workaround is possible
  • Closed - The issue is considered finished, the resolution is correct. Issues which are closed should not be reopened.

Sub-task - Issues are sometimes broken into multiple sub-tasks. MDL-36441 No gap between the edit section icon and the section activities in some themes

  • Minor - Minor loss of function where workaround is possible
  • Closed - The issue is considered finished, the resolution is correct. Issues which are closed should not be reopened.

Sub-task - Issues are sometimes broken into multiple sub-tasks. MDL-36444 Spacing in left and right is less than the centre block

  • Minor - Minor loss of function where workaround is possible
  • Closed - The issue is considered finished, the resolution is correct. Issues which are closed should not be reopened.

Sub-task - Issues are sometimes broken into multiple sub-tasks. MDL-36450 Create new SVG/PNG icons for Filters and revise Outcomes and Help icons

  • Minor - Minor loss of function where workaround is possible
  • Closed - The issue is considered finished, the resolution is correct. Issues which are closed should not be reopened.

Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-36290 Outputlib post_process does not revert $usesvg

  • Blocker - Blocks development and/or testing, prevents Moodle from running (applicable to bugs only)
  • Closed - The issue is considered finished, the resolution is correct. Issues which are closed should not be reopened.

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
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
Permalink
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
Permalink
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
Permalink
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
Permalink
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
Permalink
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
Permalink
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
Permalink
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
Permalink
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

Vote (0)
Watch (1)

Dates

  • Created:
    Updated:
    Resolved: