Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-62234

Review atto dialogs for better Boost display

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.5.1
    • 3.5
    • Themes
    • MOODLE_35_STABLE
    • MOODLE_35_STABLE
    • MDL-62234-master
    • Hide

      For these tests please look at the positioning of form fields in atto dialogues. It should be easy to understand which labels applies to which form filed based on margins below form fields. Form fields should be styled like standard Moodle form fields.

       

      Tests need to be done in Both theme boost and theme clean.

      1. Install patch and purge caches
      2. Login as admin.
      3. Navigate to Site Administration > Plugins > Atto HTML editor.
      4. Scroll down to Table, click settings.
      5. Check all options, allow border styling, allow background colour, allow width.
      6. On Toolbar config add “, emoticon” after “insert = equation, charmap, table, clear”
      7. Save changes.
      8. Navigate to any course and turn editing on.
      9. Add a resource type Label.

      Test Links

      1. Click the insert link button.
      2. Test form fields and check for styles.
      3. Add a link or browse the repository.
      4. Save link.

      Test Images

      1. Click the insert or edit image button.
      2. Add an image.
      3. Test form fields and check for styles.
      4. Do not add a description and save image.
      5. Check if the warning message “Images must have a…” displays and is styled in a warning alert box.

       

      Test Media

      1. Click the insert media button.
      2. Add a test video.
      3. Try various form fields.

      Test Tables

      1. Click the add table button.
      2. Test form fields and check for styles.
      3. Create a new table with a border and background colour.
      4. Check to see if the created table matches your chosen settings.

      Test the Equation editor

      1. Click the Equation editor button.
      2. Check if tabs match bootstrap styles for tabs.
      3. Test tabs functionality.
      4. Add some symbols to your equation.
      5. Check if the Equation is visible after saving your label.

      Test the Insert character dialogue

      1. Click the Insert character button.
      2. There should be a list of characters styled like bootstrap buttons.
      3. Click on one of the characters.
      4. The character should be displayed in the atto editor content.
      Show
      For these tests please look at the positioning of form fields in atto dialogues. It should be easy to understand which labels applies to which form filed based on margins below form fields. Form fields should be styled like standard Moodle form fields.   Tests need to be done in Both theme boost and theme clean. Install patch and purge caches Login as admin. Navigate to Site Administration > Plugins > Atto HTML editor. Scroll down to Table, click settings. Check all options, allow border styling, allow background colour, allow width. On Toolbar config add “, emoticon” after “insert = equation, charmap, table, clear” Save changes. Navigate to any course and turn editing on. Add a resource type Label. Test Links Click the insert link button. Test form fields and check for styles. Add a link or browse the repository. Save link. Test Images Click the insert or edit image button. Add an image. Test form fields and check for styles. Do not add a description and save image. Check if the warning message “Images must have a…” displays and is styled in a warning alert box.   Test Media Click the insert media button. Add a test video. Try various form fields. Test Tables Click the add table button. Test form fields and check for styles. Create a new table with a border and background colour. Check to see if the created table matches your chosen settings. Test the Equation editor Click the Equation editor button. Check if tabs match bootstrap styles for tabs. Test tabs functionality. Add some symbols to your equation. Check if the Equation is visible after saving your label. Test the Insert character dialogue Click the Insert character button. There should be a list of characters styled like bootstrap buttons. Click on one of the characters. The character should be displayed in the atto editor content.

      While reviewing MDL-62189, I visited some of the atto dialogs (image properties, media...). And it seems that they have a number of things to make them better Boost compliant.

      • spacing between elements.
      • not using boost buttons, but sort of gradient ones.
      • ...

      So this issue is about to review those dialogs and try to get them better looking with Boost.

      Ciao

        1. 1.PNG
          1.PNG
          118 kB
        2. 2.PNG
          2.PNG
          69 kB
        3. 3.PNG
          3.PNG
          163 kB
        4. MDL-62234-1.png
          MDL-62234-1.png
          70 kB
        5. MDL-62234-2.png
          MDL-62234-2.png
          28 kB
        6. MDL-62234-3.png
          MDL-62234-3.png
          103 kB

            basbrands Bas Brands
            stronk7 Eloy Lafuente (stronk7)
            Andrew Lyons Andrew Lyons
            Janelle Barcega Janelle Barcega
            Votes:
            1 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour
                1h

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.