Moodle
  1. Moodle
  2. MDL-28301

Completion icons ugly and sometimes invisible

    Details

    • Testing Instructions:
      Hide

      0a. Ensure that completion is enabled at site and course level.
      0b. Use 'Purge caches' link at bottom of a page - this will not be necessary with a real version update because the version number will have increased.
      0c. You might also need to clear browser cache (not sure why).

      1. Add an activity on the course, such as a forum, set to 'manual' completion.
      2. Add another activity, such as a forum, set to 'automatic' completion when users view the activity.

      • With editing still on, verify that new prettier icons are in use for the editing-on state of the two icons.

      3. Turn editing off.

      • Verify that new prettier icons are in use for the editing-off, not-ticked state of the two icons.
      • Verify that the 'automatic, not ticked' icon is now actually visible (previously it was blank).

      4. Tick the manual-completion icon.

      • Verify that matching 'ticked' icon is used.

      5. Visit the forum and return to main page so that the automatic icon becomes ticked.

      • Verify that matching 'ticked' icon is used.
      Show
      0a. Ensure that completion is enabled at site and course level. 0b. Use 'Purge caches' link at bottom of a page - this will not be necessary with a real version update because the version number will have increased. 0c. You might also need to clear browser cache (not sure why). 1. Add an activity on the course, such as a forum, set to 'manual' completion. 2. Add another activity, such as a forum, set to 'automatic' completion when users view the activity. With editing still on, verify that new prettier icons are in use for the editing-on state of the two icons. 3. Turn editing off. Verify that new prettier icons are in use for the editing-off, not-ticked state of the two icons. Verify that the 'automatic, not ticked' icon is now actually visible (previously it was blank). 4. Tick the manual-completion icon. Verify that matching 'ticked' icon is used. 5. Visit the forum and return to main page so that the automatic icon becomes ticked. Verify that matching 'ticked' icon is used.
    • Workaround:
      Hide

      Use a theme that does not use a white background, at least partially ("Binarius" or "Serenity", i.e).
      Replace activity completion icons for a set visible over a white/most backgrounds (hope to get a set of new icons and the location of activity completion icons as a comment to this issue to use this workaround while it is not resolved in trunk)

      Show
      Use a theme that does not use a white background, at least partially ("Binarius" or "Serenity", i.e). Replace activity completion icons for a set visible over a white/most backgrounds (hope to get a set of new icons and the location of activity completion icons as a comment to this issue to use this workaround while it is not resolved in trunk)
    • Affected Branches:
      MOODLE_20_STABLE, MOODLE_21_STABLE, MOODLE_22_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE
    • Pull Master Branch:
      MDL-28301-master
    • Rank:
      17942

      Description

      There is an activity completion box (inside it is the tick if/when the activity is completed) next to any completion-tracked activity, but the box is invisible over the usual white background (if you use, i.e. the "Binarius" or "Serenity" themes you can see them partially over the gray right column).
      It is important for the students to know which activities are completion-tracked, in order to know the recommended activities, and as a first step (or last, if all completion-tracked activities are required) to identify the required ones for course completion (see related issue #MDL-26193).
      The fact that there are icons for uncompleted activities with automatic completion, reflects that they are intended to be visually identifiable, so it is a bug that they are not under the default theme and most of the others.

        Issue Links

          Activity

          Hide
          Sam Marshall added a comment -

          Thanks. I have attached a zip file containing some new, prettier icons which aren't invisible against a white background. These were drawn by professional graphic designers here.

          Because they look a little different I think it's probably more appropriate to wait for a full release (2.2) before changing them, although it could go into 2.1 if somebody from core agrees.

          To make these icons work, either put theme into a theme (in core_pix/i folder) or replace the main icons of the same names.

          I would welcome opinions here (or just votes if you agree with the change; please look at the icons first to make sure you think they're nicer). Will post in completion forum.

          Show
          Sam Marshall added a comment - Thanks. I have attached a zip file containing some new, prettier icons which aren't invisible against a white background. These were drawn by professional graphic designers here. Because they look a little different I think it's probably more appropriate to wait for a full release (2.2) before changing them, although it could go into 2.1 if somebody from core agrees. To make these icons work, either put theme into a theme (in core_pix/i folder) or replace the main icons of the same names. I would welcome opinions here (or just votes if you agree with the change; please look at the icons first to make sure you think they're nicer). Will post in completion forum.
          Hide
          Michael de Raadt added a comment -

          Hi, Sam.

          I agree. These icons are an improvement. I'll draw Patrick into this so he can give his opinion, and perhaps integrate them into the Standard them, and possibly others.

          Show
          Michael de Raadt added a comment - Hi, Sam. I agree. These icons are an improvement. I'll draw Patrick into this so he can give his opinion, and perhaps integrate them into the Standard them, and possibly others.
          Hide
          Michael de Raadt added a comment -

          Hi, Patrick.

          What do you think of the attached icons. Could they be integrated into core themes?

          Michael;

          Show
          Michael de Raadt added a comment - Hi, Patrick. What do you think of the attached icons. Could they be integrated into core themes? Michael;
          Hide
          Andre Kruger added a comment -

          I think these icons will make much more sense and looks a lot better.

          Show
          Andre Kruger added a comment - I think these icons will make much more sense and looks a lot better.
          Hide
          Sam Marshall added a comment -

          Btw, I think we can probably just stick these icons in the root 'pix/i' folder to replace existing ones in all themes (as part of 2.2) unless somebody objects.

          Show
          Sam Marshall added a comment - Btw, I think we can probably just stick these icons in the root 'pix/i' folder to replace existing ones in all themes (as part of 2.2) unless somebody objects.
          Hide
          Patrick Malley added a comment -

          Sam, you may want to run this by Martin. I see no issues with such an improvement.

          Show
          Patrick Malley added a comment - Sam, you may want to run this by Martin. I see no issues with such an improvement.
          Hide
          Sam Marshall added a comment -

          As noted I am submitting this only for 2.2 because I don't think it's appropriate to make this kind of UI mid-release in 2.1.

          Show
          Sam Marshall added a comment - As noted I am submitting this only for 2.2 because I don't think it's appropriate to make this kind of UI mid-release in 2.1.
          Hide
          Alejo Becerra Díaz added a comment -

          Ok with the submission for 2.2 (it is trivial to manual patch 2.1), but I suggest that you really consider solving #MDL-26193 at the same time using more icons and an additional check, as I explained there.

          Show
          Alejo Becerra Díaz added a comment - Ok with the submission for 2.2 (it is trivial to manual patch 2.1), but I suggest that you really consider solving # MDL-26193 at the same time using more icons and an additional check, as I explained there.
          Hide
          Sam Marshall added a comment -

          Alejo: That work would be part of the course completion system rather than activity completion, so I'm leaving it to the course completion maintainer. I don't actually know how course completion works, or whether it is possible to efficiently (i.e. without making any database queries on view requests) obtain this information with the current system.

          I notice I failed to reassign that bug before, have reassigned it now.

          If that is implemented it might be appropriate to add yet more activity completion icons or possibly instead to add a single new 'required for course completion' icon that gets added in addition. Something like that.

          Show
          Sam Marshall added a comment - Alejo: That work would be part of the course completion system rather than activity completion, so I'm leaving it to the course completion maintainer. I don't actually know how course completion works, or whether it is possible to efficiently (i.e. without making any database queries on view requests) obtain this information with the current system. I notice I failed to reassign that bug before, have reassigned it now. If that is implemented it might be appropriate to add yet more activity completion icons or possibly instead to add a single new 'required for course completion' icon that gets added in addition. Something like that.
          Hide
          Martin Dougiamas added a comment -

          Screenshots would be good for a bug like this.

          Show
          Martin Dougiamas added a comment - Screenshots would be good for a bug like this.
          Hide
          Martin Dougiamas added a comment -

          Sam H showed me the patch in operation ... I think it's a good idea to fix the visibility problem, but why did you remove the dotted/faint tick from the incomplete box? I'm not sure the completely plain box is always so obvious in function, then again you probably use it a lot so happy to listen to experience.

          Show
          Martin Dougiamas added a comment - Sam H showed me the patch in operation ... I think it's a good idea to fix the visibility problem, but why did you remove the dotted/faint tick from the incomplete box? I'm not sure the completely plain box is always so obvious in function, then again you probably use it a lot so happy to listen to experience.
          Hide
          Sam Marshall added a comment -

          The graphic designer who produced the new icons didn't like the dotted/faint tick which I used in my original version. She pointed out that ordinary operating system checkboxes don't do that, but you can still click them. Also faint tickmarks sometimes looked a bit like a disabled checkbox, which is not too helpful either.

          (For info, there is a tool-tip if you mouseover the icon that says 'Click to mark complete' or something - so if you think 'hm what's that box for?' then you are well on the way to finding out.)

          I think it may be slightly less obvious initially but on the other hand as soon as you click it once or see somebody else doing it or somebody tells you, it should be fine from then on. This is distinct from the invisible checkboxes problem, in that they were always invisible however much you used the system. So it may not be perfect but I think the new icon set is better.

          We do use it a lot but this new design hasn't actually gone live here yet as it's part of our Moodle 2.1-based system which is launching to a limited number of students next month (er, maybe). But there have been lots of design reviews etc. I wanted to put the new iconset in core because people were complaining about the problem with the old one and we already had a new version designed here so...

          After going live if we get student/tutor complaints about this, we'll consider changing that particular icon to add back in a faint/faded tick or something; there's time to update that for Moodle 2.2 also. I don't think it's too likely that will have to happen though.

          Agree screenshot would be a good idea, I'll try to remember to do screenshots in future where relevant.

          Show
          Sam Marshall added a comment - The graphic designer who produced the new icons didn't like the dotted/faint tick which I used in my original version. She pointed out that ordinary operating system checkboxes don't do that, but you can still click them. Also faint tickmarks sometimes looked a bit like a disabled checkbox, which is not too helpful either. (For info, there is a tool-tip if you mouseover the icon that says 'Click to mark complete' or something - so if you think 'hm what's that box for?' then you are well on the way to finding out.) I think it may be slightly less obvious initially but on the other hand as soon as you click it once or see somebody else doing it or somebody tells you, it should be fine from then on. This is distinct from the invisible checkboxes problem, in that they were always invisible however much you used the system. So it may not be perfect but I think the new icon set is better. We do use it a lot but this new design hasn't actually gone live here yet as it's part of our Moodle 2.1-based system which is launching to a limited number of students next month (er, maybe). But there have been lots of design reviews etc. I wanted to put the new iconset in core because people were complaining about the problem with the old one and we already had a new version designed here so... After going live if we get student/tutor complaints about this, we'll consider changing that particular icon to add back in a faint/faded tick or something; there's time to update that for Moodle 2.2 also. I don't think it's too likely that will have to happen though. Agree screenshot would be a good idea, I'll try to remember to do screenshots in future where relevant.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          The integration of this issue has been delayed to next week due to time constraints. Thanks for your support and patience!

          Sorry and ciao

          Show
          Eloy Lafuente (stronk7) added a comment - The integration of this issue has been delayed to next week due to time constraints. Thanks for your support and patience! Sorry and ciao
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Artwok landed. Thanks!

          Show
          Eloy Lafuente (stronk7) added a comment - Artwok landed. Thanks!
          Hide
          Rajesh Taneja added a comment -

          tick icons looks Good

          Thanks for fixing this Sam.

          Show
          Rajesh Taneja added a comment - tick icons looks Good Thanks for fixing this Sam.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Closing, this is now part of Moodle. Big thanks!

          Show
          Eloy Lafuente (stronk7) added a comment - Closing, this is now part of Moodle. Big thanks!
          Hide
          Helen Foster added a comment -

          Nice icons, thanks Sam and OU graphic designer

          Show
          Helen Foster added a comment - Nice icons, thanks Sam and OU graphic designer

            People

            • Votes:
              6 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: