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

RTL styling for in place editable tooltip

    XMLWordPrintable

    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

        Attachments

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

          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