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

Better looking tinymce editor: toggle toolbars between 1 and 3 lines

    Details

    • Testing Instructions:
      Hide

      Test 1

      1. Start with an unpatched clean install
      2. Apply the patch and upgrade
      3. Ensure the toolbar config has been changed from the original default

      Test 2

      1. Open a page with 1 or more text editors
      2. Notice the changed layout of the toolbars
      3. Toggle it open (to multiple toolbars)
      4. Refresh the page
      5. Ensure the state of the toolbars is remembered
      6. Toggle it closed (to a single toolbar)
      7. Ensure the state of the toolbars is remembered

      Test 3

      1. Try changing the TinyMCE buttons to have only one row or more than 3 rows (Site Administration > Text Editors > TinyMCE HTML editor > General settings)
      2. Make sure the toggle icon is absent if there is only 1 row and toggles all rows except first otherwise
      Show
      Test 1 Start with an unpatched clean install Apply the patch and upgrade Ensure the toolbar config has been changed from the original default Test 2 Open a page with 1 or more text editors Notice the changed layout of the toolbars Toggle it open (to multiple toolbars) Refresh the page Ensure the state of the toolbars is remembered Toggle it closed (to a single toolbar) Ensure the state of the toolbars is remembered Test 3 Try changing the TinyMCE buttons to have only one row or more than 3 rows (Site Administration > Text Editors > TinyMCE HTML editor > General settings) Make sure the toggle icon is absent if there is only 1 row and toggles all rows except first otherwise
    • Affected Branches:
      MOODLE_25_STABLE
    • Fixed Branches:
      MOODLE_26_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      wip-MDL-37565-master
    • Story Points (Obsolete):
      20
    • Sprint:
      FRONTEND Sprint 1

      Description

      I suggest few changes to make tinymce editor look better:

      • "Advanced" button that show all hidden button. Hopefully tinymce support this feature.
      • Display the essential buttons in one line only. My preferences are: Bold/Italic/link/Images/heading/lists
      • tweak the CSS to match our current standard theme in a better way than current tinymce theme.

      I'm attaching a picture of Wordpress as example. It is pleasant to look, not overwhelming and show off the media button which is actually the essential one in my opinion => it would show off the pretty Moodle file picker.

      If the advanced button feature exist in tinymce, then I don't think the issue is too hard to implement. Otherwise it may require to change Tinymce and then this improvement would not be great for maintainability.

        Gliffy Diagrams

          Attachments

          1. collapsed editor.png
            collapsed editor.png
            32 kB
          2. editor_1lin.png
            editor_1lin.png
            77 kB
          3. editor_3lines.png
            editor_3lines.png
            120 kB
          4. Screenshot_15_04_13_5_41_PM.png
            Screenshot_15_04_13_5_41_PM.png
            927 kB
          5. wordpress-editor.png
            wordpress-editor.png
            41 kB

            Issue Links

              Activity

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    18/Nov/13