Moodle
  1. Moodle
  2. MDL-33130

Dialogue unification project for 2.3

    Details

    • Type: Task Task
    • Status: Closed
    • Priority: Critical Critical
    • Resolution: Fixed
    • Affects Version/s: 2.3
    • Fix Version/s: 2.3
    • Component/s: Usability
    • Labels:
      None
    • Testing Instructions:
      Hide

      Add a folder in filemanager(.jpg):
      1. go to my profile > my private files
      2. click "create folder"
      2. "add a folder dialogue" shows up
      3. check that it is showing default buttons (<button>) instead of custom buttons (<a>)

      Folder context menu(.png):
      1. go to my profile > my private files
      2. click a folder
      3. check that it is showing default buttons (<button>) instead of custom buttons (<a>)

      File info in fielmanager(.jpg):
      1. go to my profile > my private files
      2. click a file
      3. check that it is showing default buttons (<button>) instead of custom buttons (<a>)

      Filepicker select a file(.png):
      1. go to my profile > my private files
      2. click "add..."
      3. filepicker shows up
      4. click any file from private files
      5. check that it is showing default buttons (<button>) instead of custom buttons (<a>)
      6. check also that the buttons are floated to the right beneath the license select

      Activity chooser(.png):
      1. go to a course page
      2. turn editing on
      3. click "add an activity or resource"
      4. "activity chooser" dialogue shows up
      5. check that the surrounding padding on the right column is not too wide

      Adding a question to a quiz(.jpg):
      1. go to a course page
      2. turn editing on
      3. click "add an activitity or resource" and select "quiz"
      4. click the quiz
      5. click "edit quiz"
      6. click "add a question"
      7. check that the "choose a question type to add dialogue" is somewhat similar to the restyled "activity chooser"

      Show
      Add a folder in filemanager(.jpg): 1. go to my profile > my private files 2. click "create folder" 2. "add a folder dialogue" shows up 3. check that it is showing default buttons (<button>) instead of custom buttons (<a>) Folder context menu(.png): 1. go to my profile > my private files 2. click a folder 3. check that it is showing default buttons (<button>) instead of custom buttons (<a>) File info in fielmanager(.jpg): 1. go to my profile > my private files 2. click a file 3. check that it is showing default buttons (<button>) instead of custom buttons (<a>) Filepicker select a file(.png): 1. go to my profile > my private files 2. click "add..." 3. filepicker shows up 4. click any file from private files 5. check that it is showing default buttons (<button>) instead of custom buttons (<a>) 6. check also that the buttons are floated to the right beneath the license select Activity chooser(.png): 1. go to a course page 2. turn editing on 3. click "add an activity or resource" 4. "activity chooser" dialogue shows up 5. check that the surrounding padding on the right column is not too wide Adding a question to a quiz(.jpg): 1. go to a course page 2. turn editing on 3. click "add an activitity or resource" and select "quiz" 4. click the quiz 5. click "edit quiz" 6. click "add a question" 7. check that the "choose a question type to add dialogue" is somewhat similar to the restyled "activity chooser"
    • Affected Branches:
      MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_23_STABLE
    • Pull Master Branch:
      wip-MDL-33130-master
    • Rank:
      40991

      Description

      We have lots of different dialogues created by different people all over Moodle, such as TinyMCE, filepicker, filemanager, activity chooser, quiz selector, etc etc. They all have different styles!

      We need to:

      1. Put screenshots of them all here side-by-side.
      2. Do as much as possible to unify them for 2.3 release.

      Areas that should be looked at:

      • Submit buttons - order and style
      • Look and feel of the frame
      • Shadows
      • Close buttons
      1. activity chooser.png
        44 kB
      2. Add a folder in filemanager.jpg
        14 kB
      3. Adding a question to a quiz.jpg
        171 kB
      4. Editing a Folder.jpg
        66 kB
      5. enrol.png
        38 kB
      6. File info in filemanager.jpg
        47 kB
      7. filepicker select a file.png
        46 kB
      8. Folder Context Menu.png
        30 kB
      9. Insert image in tinymce.jpg
        53 kB
      10. message.png
        4 kB

        Issue Links

          Activity

          Hide
          Helen Foster added a comment -

          Attaching activity chooser

          Show
          Helen Foster added a comment - Attaching activity chooser
          Hide
          Rex Lorenzo added a comment -

          Please read Petr's comment in MDL-33457 (http://tracker.moodle.org/browse/MDL-33457?focusedCommentId=161037&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-161037).

          Having cancel as the first button has some accessibility issues, because when you hit "Enter" using the keyboard it is mapped to the first submit button, which would be canceled in this case, not "Add".

          Also, without change your OS settings, it might not always be possible to tab to every element on the page. So currently for me using default Mac OSX 10.7.3, I cannot tab to the add button in the activity chooser. Meaning I cannot select an activity without having to involve the mouse at some point.

          Show
          Rex Lorenzo added a comment - Please read Petr's comment in MDL-33457 ( http://tracker.moodle.org/browse/MDL-33457?focusedCommentId=161037&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-161037 ). Having cancel as the first button has some accessibility issues, because when you hit "Enter" using the keyboard it is mapped to the first submit button, which would be canceled in this case, not "Add". Also, without change your OS settings, it might not always be possible to tab to every element on the page. So currently for me using default Mac OSX 10.7.3, I cannot tab to the add button in the activity chooser. Meaning I cannot select an activity without having to involve the mouse at some point.
          Hide
          Martin Dougiamas added a comment -

          Copying my comment from there (because it's more applicable here I think:

          1) OS X, Windows and Ubuntu ALL put the "Cancel" button on the left and the action button on the right.

          2) This makes sense to me because dialogs are like a step in a process/story, and we are used to moving left to right in those situations (is probably reversed for RTL speakers). "Cancel" is like going BACK while "Save" or 'Add" in this case is like going FORWARD. This is one of the main things I would still like to fix for 2.3 in MDL-33130.

          3) Accessibility is a separate matter and ABSOLUTELY the action button should be default, should be highlighted and should be "first" in the tab order and possibly even HTML order. It's not really that tricky to do though, is it? Let's look into it.

          Show
          Martin Dougiamas added a comment - Copying my comment from there (because it's more applicable here I think: 1) OS X, Windows and Ubuntu ALL put the "Cancel" button on the left and the action button on the right. 2) This makes sense to me because dialogs are like a step in a process/story, and we are used to moving left to right in those situations (is probably reversed for RTL speakers). "Cancel" is like going BACK while "Save" or 'Add" in this case is like going FORWARD. This is one of the main things I would still like to fix for 2.3 in MDL-33130 . 3) Accessibility is a separate matter and ABSOLUTELY the action button should be default, should be highlighted and should be "first" in the tab order and possibly even HTML order. It's not really that tricky to do though, is it? Let's look into it.
          Hide
          Martin Dougiamas added a comment -

          At this point my #1 goal is internal consistency.

          My current impression on what we can do now, in order, is:

          1. For 2.3 it might be simpler to standardise on [ACTION] [CANCEL] in that order (and swap them to match operating systems in a future release). It matches our forms too.
          2. Add some constant CSS class onto all the main "action" submit buttons. Add some CSS to make them consistently stand out more (a simple colour? more?)
          3. Nudge all the styles to try and make dialogs more consistent-looking.
          Show
          Martin Dougiamas added a comment - At this point my #1 goal is internal consistency. My current impression on what we can do now, in order, is: For 2.3 it might be simpler to standardise on [ACTION] [CANCEL] in that order (and swap them to match operating systems in a future release). It matches our forms too. Add some constant CSS class onto all the main "action" submit buttons. Add some CSS to make them consistently stand out more (a simple colour? more?) Nudge all the styles to try and make dialogs more consistent-looking.
          Hide
          Dan Poltawski added a comment -

          Linking vaguely related issue MDL-29007

          Show
          Dan Poltawski added a comment - Linking vaguely related issue MDL-29007
          Hide
          Andrew Nicols added a comment -

          Some comments on the CSS relating to the module chooser:

          • the modchooser class is specific to courses, but you've added the .modchooser element to core.css rather than course.css
            • I can add a generic class such as chooserdialogue if that helps - this would help with styling of future chooser dialogues
          • I've noticed that we need to change #choosercontainer to .choosercontainer (and use a class instead of an id) to help meet standards correctly when we have multiple choosers on the same page (e.g. block chooser)
            • I can update this now to prevent issues for theme designers in the future

          Let me know if you want me to make these changes

          Show
          Andrew Nicols added a comment - Some comments on the CSS relating to the module chooser: the modchooser class is specific to courses, but you've added the .modchooser element to core.css rather than course.css I can add a generic class such as chooserdialogue if that helps - this would help with styling of future chooser dialogues I've noticed that we need to change #choosercontainer to .choosercontainer (and use a class instead of an id) to help meet standards correctly when we have multiple choosers on the same page (e.g. block chooser) I can update this now to prevent issues for theme designers in the future Let me know if you want me to make these changes
          Hide
          Martin Dougiamas added a comment -

          Sure Andrew that would be helpful, thanks! I like the design work though, Barbara, thanks!

          Show
          Martin Dougiamas added a comment - Sure Andrew that would be helpful, thanks! I like the design work though, Barbara, thanks!
          Hide
          Andrew Nicols added a comment -

          The changes look really good on the whole some points:

          1. As discussed above, I'll make the suggested changes to add CSS selectors.
          2. The CSS in several places doesn't meet the CSS guidelines - property-value pairs should be on their own line

          Otherwise it all looks good to me.

          Show
          Andrew Nicols added a comment - The changes look really good on the whole some points: 1. As discussed above, I'll make the suggested changes to add CSS selectors. 2. The CSS in several places doesn't meet the CSS guidelines - property-value pairs should be on their own line Otherwise it all looks good to me.
          Hide
          Andrew Nicols added a comment -

          I've added a commit before Barbara's commit which makes the required changes. I've then modified the relevant bits of Barbara's commit to match.

          Visually, there should be no differences.

          Show
          Andrew Nicols added a comment - I've added a commit before Barbara's commit which makes the required changes. I've then modified the relevant bits of Barbara's commit to match. Visually, there should be no differences.
          Hide
          Martin Dougiamas added a comment -

          Looks fine to me +1!

          I've made a subtask to this bug and moved the git links there... : MDL-33482

          Show
          Martin Dougiamas added a comment - Looks fine to me +1! I've made a subtask to this bug and moved the git links there... : MDL-33482
          Hide
          Martin Dougiamas added a comment - - edited

          OK, so after some looking at this we're going to do this to make things more consistentastic in 2.3.

          1. Convert all action/cancel buttons to be in the dominant order: action/cancel. Currently this means fixing only the activity chooser.
          2. Change new dialogs to use real buttons from links
            1. filemanager folder create,
            2. filemanager folder info,
            3. delete file confirmation (also fix labels on buttons to delete/cancel)
            4. file info download / delete / mainfile / update / cancel,
            5. filepicker select dialog
            6. filepicker overwrite confirmation
          3. In filepicker select dialogue, the action/cancel buttons should really be under the form fields (they can be above the file info)

          (In 2.4 I would like to reverse ALL of them the other way to match operating systems, and also dim ALL the cancel buttons.)

          Show
          Martin Dougiamas added a comment - - edited OK, so after some looking at this we're going to do this to make things more consistentastic in 2.3. Convert all action/cancel buttons to be in the dominant order: action/cancel. Currently this means fixing only the activity chooser. Change new dialogs to use real buttons from links filemanager folder create, filemanager folder info, delete file confirmation (also fix labels on buttons to delete/cancel) file info download / delete / mainfile / update / cancel, filepicker select dialog filepicker overwrite confirmation In filepicker select dialogue, the action/cancel buttons should really be under the form fields (they can be above the file info) (In 2.4 I would like to reverse ALL of them the other way to match operating systems, and also dim ALL the cancel buttons.)
          Hide
          Martin Dougiamas added a comment -

          Note that fixing the order of the buttons in the activity chooser will also fix the current bug that "Cancel" is the default action.

          Show
          Martin Dougiamas added a comment - Note that fixing the order of the buttons in the activity chooser will also fix the current bug that "Cancel" is the default action.
          Hide
          Martin Dougiamas added a comment -

          I just had a look at these and the restyled buttons/dialogues look absolutely terrific. My +10 to land this baby.

          Show
          Martin Dougiamas added a comment - I just had a look at these and the restyled buttons/dialogues look absolutely terrific. My +10 to land this baby.
          Hide
          Aparup Banerjee added a comment -

          has conflicts, resolving together with Barbara

          Show
          Aparup Banerjee added a comment - has conflicts, resolving together with Barbara
          Hide
          Aparup Banerjee added a comment -

          ok, i've integrated that into master now.
          fixed up some conflicts and whitespace.

          Barbara is adding a test to this right now so this should be ready for testing anytime soon.

          Show
          Aparup Banerjee added a comment - ok, i've integrated that into master now. fixed up some conflicts and whitespace. Barbara is adding a test to this right now so this should be ready for testing anytime soon.
          Hide
          Adrian Greeve added a comment -

          I tested the elements mentioned in the test and the style of the elements looks more unified. All the other areas still look the same i.e. Message notification, inserting an image with tinymce, enrolment picker.
          No problems found.
          Thanks.

          Show
          Adrian Greeve added a comment - I tested the elements mentioned in the test and the style of the elements looks more unified. All the other areas still look the same i.e. Message notification, inserting an image with tinymce, enrolment picker. No problems found. Thanks.
          Hide
          Barbara Ramiro added a comment -

          Thanks Adrian, those three you mentioned will be done later on

          Show
          Barbara Ramiro added a comment - Thanks Adrian, those three you mentioned will be done later on
          Hide
          Frédéric Massart added a comment -

          About "Note that fixing the order of the buttons in the activity chooser will also fix the current bug that "Cancel" is the default action.", there are forms (like the one when we create a new activity) where a submit button is inserted within the form, which cause neither of the 'Cancel' or 'Save and [...]' to be used.

          For example, when creating a new Choice activity, the button 'Add 3 fields to form' is the default action. When access restriction on, any new activity form will have the default action as 'Add 2 grade conditions to form'.

          Show
          Frédéric Massart added a comment - About "Note that fixing the order of the buttons in the activity chooser will also fix the current bug that "Cancel" is the default action." , there are forms (like the one when we create a new activity) where a submit button is inserted within the form, which cause neither of the 'Cancel' or 'Save and [...] ' to be used. For example, when creating a new Choice activity, the button 'Add 3 fields to form' is the default action. When access restriction on, any new activity form will have the default action as 'Add 2 grade conditions to form'.
          Hide
          Martin Dougiamas added a comment -

          yes, that's pretty crappy. All of that, though, is part of the moodleforms replacement at some point in the future.

          Show
          Martin Dougiamas added a comment - yes, that's pretty crappy. All of that, though, is part of the moodleforms replacement at some point in the future.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          And this has been incorporated to all the weekly builds and also, to Moodle 2.3 Release Candidate 1, yay!

          Many, many thanks for your hard work!

          Ciao

          Show
          Eloy Lafuente (stronk7) added a comment - And this has been incorporated to all the weekly builds and also, to Moodle 2.3 Release Candidate 1, yay! Many, many thanks for your hard work! Ciao
          Hide
          Dan Poltawski added a comment -

          Note, there was a regression with the delete dialogue spotted in MDL-33999

          So we probably still need to sort out the ok/cancel dialogues properly.

          Show
          Dan Poltawski added a comment - Note, there was a regression with the delete dialogue spotted in MDL-33999 So we probably still need to sort out the ok/cancel dialogues properly.

            People

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

              Dates

              • Created:
                Updated:
                Resolved: