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

RTL styling for in place editable tooltip

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 3.0.1, 3.0.2
    • Fix Version/s: 3.0.5
    • Component/s: Course, Themes
    • Labels:
    • Testing Instructions:
      Hide

      Note

      Please test on multiple different browsers (IE, Firefox, Chrome, Safari)

      Test v3.0

      1. Use Clean theme (or More)
      2. Navigate into any course that has at least one activity
      3. Switch between LTR and RTL language (Hebrew or Arabic) and test each of the following pages in both modes.
      4. Switch to "Edit mode"
      5. Click the "pencil" quick edit icon near the activity's title to edit it.
      6. Make sure the new blue floating instruction tooltip is displayed directly above the edit input field and not over the activity's icon. (click Esc to cancel editing)
      7. Navigate into a quiz activity that has at least one question and go to its quiz edit page where you can edit the quiz' questions
      8. Click the "pencil" quick edit icon near the question's points to edit it.
      9. Make sure the new blue floating instruction tooltip is displayed above and aligned to the left of the question's entry. (click Esc to cancel editing)
      10. Now, click the "pencil" quick edit icon above the question and next to the header to edit it. (If no header is present, click the edit menu to add one)
      11. Make sure the new blue floating instruction tooltip is displayed above and aligned to the right of the header. (click Esc to cancel editing)
      12. Navigate into Site administration > Appearance > Manage tags
      13. Click the "pencil" quick edit icon near the collections name to edit it.
      14. Make sure the new blue floating instruction tooltip is displayed above and aligned to the right of the collection's name. (click Esc to cancel editing)
      15. Navigate into Site administration > Appearance > Manage tags > Default collection
      16. Click the "pencil" quick edit icon near the tag's name to edit it.
      17. Make sure the new blue floating instruction tooltip is displayed above and aligned to the right of the tags's name. (click Esc to cancel editing)

      Test master

      For each of the inline editing places below confirm that the tooltip appears above the input element when editing is on, the alignment of the tooltip is flipped when changed to RTL mode and that the tooltip text appears on a single line (doesn't wrap).

      1. Use Clean theme (or More)
      2. Navigate into any course that has at least one activity
      3. Switch between LTR and RTL language (Hebrew or Arabic) and test each of the following pages in both modes.
      4. Switch to "Edit mode"
      5. Click the "pencil" quick edit icon near the activity's title to edit it.
      6. Check tooltip (see above)
      7. Navigate into a quiz activity that has at least one question and go to its quiz edit page where you can edit the quiz' questions
      8. Click the "pencil" quick edit icon near the question's points to edit it.
      9. Check tooltip (see above)
      10. Now, click the "pencil" quick edit icon above the question and next to the header to edit it. (If no header is present, click the edit menu to add one)
      11. Check tooltip (see above)
      12. Navigate into Site administration > Appearance > Manage tags
      13. Click the "pencil" quick edit icon near the collections name to edit it (add one if needed).
      14. Check tooltip (see above)
      15. Navigate into the collection by clicking on it's name
      16. Click the "pencil" quick edit icon near the tag's name to edit it.
      17. Check tooltip (see above)
      18. Create a course in topics format that displays one section per page
      19. Go to the section page and turn editing mode on
      20. Remove all blocks from the right hand side (either move them to the left block region or remove them). There should only be a block region to the left and the page content should expand right to fill the space where the blocks used to be
      21. Edit section name with inline editing
      22. Check tooltip (see above)
      Show
      Note Please test on multiple different browsers (IE, Firefox, Chrome, Safari) Test v3.0 Use Clean theme (or More) Navigate into any course that has at least one activity Switch between LTR and RTL language (Hebrew or Arabic) and test each of the following pages in both modes. Switch to "Edit mode" Click the "pencil" quick edit icon near the activity's title to edit it. Make sure the new blue floating instruction tooltip is displayed directly above the edit input field and not over the activity's icon. (click Esc to cancel editing) Navigate into a quiz activity that has at least one question and go to its quiz edit page where you can edit the quiz' questions Click the "pencil" quick edit icon near the question's points to edit it. Make sure the new blue floating instruction tooltip is displayed above and aligned to the left of the question's entry. (click Esc to cancel editing) Now, click the "pencil" quick edit icon above the question and next to the header to edit it. (If no header is present, click the edit menu to add one) Make sure the new blue floating instruction tooltip is displayed above and aligned to the right of the header. (click Esc to cancel editing) Navigate into Site administration > Appearance > Manage tags Click the "pencil" quick edit icon near the collections name to edit it. Make sure the new blue floating instruction tooltip is displayed above and aligned to the right of the collection's name. (click Esc to cancel editing) Navigate into Site administration > Appearance > Manage tags > Default collection Click the "pencil" quick edit icon near the tag's name to edit it. Make sure the new blue floating instruction tooltip is displayed above and aligned to the right of the tags's name. (click Esc to cancel editing) Test master For each of the inline editing places below confirm that the tooltip appears above the input element when editing is on, the alignment of the tooltip is flipped when changed to RTL mode and that the tooltip text appears on a single line (doesn't wrap). Use Clean theme (or More) Navigate into any course that has at least one activity Switch between LTR and RTL language (Hebrew or Arabic) and test each of the following pages in both modes. Switch to "Edit mode" Click the "pencil" quick edit icon near the activity's title to edit it. Check tooltip (see above) Navigate into a quiz activity that has at least one question and go to its quiz edit page where you can edit the quiz' questions Click the "pencil" quick edit icon near the question's points to edit it. Check tooltip (see above) Now, click the "pencil" quick edit icon above the question and next to the header to edit it. (If no header is present, click the edit menu to add one) Check tooltip (see above) Navigate into Site administration > Appearance > Manage tags Click the "pencil" quick edit icon near the collections name to edit it (add one if needed). Check tooltip (see above) Navigate into the collection by clicking on it's name Click the "pencil" quick edit icon near the tag's name to edit it. Check tooltip (see above) Create a course in topics format that displays one section per page Go to the section page and turn editing mode on Remove all blocks from the right hand side (either move them to the left block region or remove them). There should only be a block region to the left and the page content should expand right to fill the space where the blocks used to be Edit section name with inline editing Check tooltip (see above)
    • Affected Branches:
      MOODLE_30_STABLE
    • Fixed Branches:
      MOODLE_30_STABLE
    • Pull Master Branch:
      MDL-52800-master

      Description

      The styling for the inline editing tooltip is currently using a negative margin hack to stop the inner text from wrapping and allow the element to exceed the width of the parent element. It is also using the margins for positioning. It is causing problems with editing the topic name for example. There are also no RTL styles.

      I've provided a patch for master (which has the inline editing framework) and 30 (which has custom inline editing implemented per section):

      Master patch

      Element LTR before patch LTR after patch RTL before patch RTL after patch
      Course name
      Quiz header
      Quiz mark
      Tag collection
      Tag name
      Course topic name

      30 patch

      Element LTR before patch LTR after patch RTL before patch RTL after patch
      Course name
      Quiz header
      Quiz mark
      Tag name

        Gliffy Diagrams

          Attachments

          1. 30_course_ltr_fix.png
            30_course_ltr_fix.png
            17 kB
          2. 30_course_ltr.png
            30_course_ltr.png
            17 kB
          3. 30_course_rtl_fix.png
            30_course_rtl_fix.png
            17 kB
          4. 30_course_rtl.png
            30_course_rtl.png
            17 kB
          5. 30_quiz_header_ltr_fix.png
            30_quiz_header_ltr_fix.png
            17 kB
          6. 30_quiz_header_ltr.png
            30_quiz_header_ltr.png
            17 kB
          7. 30_quiz_header_rtl_fix.png
            30_quiz_header_rtl_fix.png
            18 kB
          8. 30_quiz_header_rtl.png
            30_quiz_header_rtl.png
            16 kB
          9. 30_quiz_mark_ltr_fix.png
            30_quiz_mark_ltr_fix.png
            14 kB
          10. 30_quiz_mark_ltr.png
            30_quiz_mark_ltr.png
            17 kB
          11. 30_quiz_mark_rtl_fix.png
            30_quiz_mark_rtl_fix.png
            15 kB
          12. 30_quiz_mark_rtl.png
            30_quiz_mark_rtl.png
            15 kB
          13. 30_tag_name_ltr_fix.png
            30_tag_name_ltr_fix.png
            14 kB
          14. 30_tag_name_ltr.png
            30_tag_name_ltr.png
            14 kB
          15. 30_tag_name_rtl_fix.png
            30_tag_name_rtl_fix.png
            15 kB
          16. 30_tag_name_rtl.png
            30_tag_name_rtl.png
            18 kB
          17. m_course_ltr_fix.png
            m_course_ltr_fix.png
            19 kB
          18. m_course_ltr.png
            m_course_ltr.png
            19 kB
          19. m_course_rtl_fix.png
            m_course_rtl_fix.png
            19 kB
          20. m_course_rtl.png
            m_course_rtl.png
            24 kB
          21. m_quiz_header_ltr_fix.png
            m_quiz_header_ltr_fix.png
            19 kB
          22. m_quiz_header_ltr.png
            m_quiz_header_ltr.png
            29 kB
          23. m_quiz_header_rtl_fix.png
            m_quiz_header_rtl_fix.png
            19 kB
          24. m_quiz_header_rtl.png
            m_quiz_header_rtl.png
            14 kB
          25. m_quiz_mark_ltr_fix.png
            m_quiz_mark_ltr_fix.png
            16 kB
          26. m_quiz_mark_ltr.png
            m_quiz_mark_ltr.png
            16 kB
          27. m_quiz_mark_rtl_fix.png
            m_quiz_mark_rtl_fix.png
            16 kB
          28. m_quiz_mark_rtl.png
            m_quiz_mark_rtl.png
            16 kB
          29. m_tag_collection_ltr_fix.png
            m_tag_collection_ltr_fix.png
            14 kB
          30. m_tag_collection_ltr.png
            m_tag_collection_ltr.png
            19 kB
          31. m_tag_collection_rtl_fix.png
            m_tag_collection_rtl_fix.png
            14 kB
          32. m_tag_collection_rtl.png
            m_tag_collection_rtl.png
            41 kB
          33. m_tag_name_ltr_fix.png
            m_tag_name_ltr_fix.png
            15 kB
          34. m_tag_name_ltr.png
            m_tag_name_ltr.png
            17 kB
          35. m_tag_name_rtl_fix.png
            m_tag_name_rtl_fix.png
            15 kB
          36. m_tag_name_rtl.png
            m_tag_name_rtl.png
            28 kB
          37. m_topic_ltr_fix.png
            m_topic_ltr_fix.png
            15 kB
          38. m_topic_ltr.png
            m_topic_ltr.png
            14 kB
          39. m_topic_rtl_fix.png
            m_topic_rtl_fix.png
            15 kB
          40. m_topic_rtl.png
            m_topic_rtl.png
            11 kB
          41. snapshot28.png
            snapshot28.png
            20 kB
          42. snapshot29.png
            snapshot29.png
            20 kB
          43. snapshot30.png
            snapshot30.png
            14 kB
          44. snapshot31.png
            snapshot31.png
            13 kB
          45. snapshot44.png
            snapshot44.png
            51 kB

            Issue Links

              Activity

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    11/Jul/16