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

RTL styling for in place editable tooltip

XMLWordPrintable

    • MOODLE_30_STABLE
    • MOODLE_30_STABLE
    • MDL-52800-master
    • 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)

      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

        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

            nadavkav Nadav Kavalerchik
            gb2048 Gareth J Barnard
            Ryan Wyllie Ryan Wyllie
            Andrew Lyons Andrew Lyons
            Adrian Greeve Adrian Greeve
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

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