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

Usability issue trying to uploading images wider than browser width, in RTL mode

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Please test this in multiple browsers, with LTR and RTL language (Enabled RTL mode) 

      1. Login as Admin
      2. Setup and enable a Flickr public repository (https://docs.moodle.org/38/en/Flickr_public_repository).
      3. Create a Course.
      4. In the Course create a Forum activity.
      5. Go to the Forum.
      6. Click on "Add new discussion topic" button.
      7. Click on the "Insert or edit image" button in the "Message" rich text editor.
      8. Click on "Browse repositories..." button in the "Image properties" dialog.
      9. In the filepicker select the Flickr public repository
      10. In the "Full text" search field enter "Etruria, Stoke-on-Trent - park tree"
        (this is a name of an existing photo on Flickr with width > 3000px, you can use another photo as long as it's original width is larger than the screen width)
      11. Select to use the returned photo file.
      12. In the "Image properties" dialog
        • make sure the dialog width does NOT extend beyond the screen width
        • make sure the size of the image preview is the same as the photo's original size (or the one defined in the size inputs) but displayed within the size range of the dialog with scrollbars to preview the entire photo content.
      Show
      Please test this in multiple browsers, with LTR and RTL language (Enabled RTL mode)  Login as Admin Setup and enable a Flickr public repository ( https://docs.moodle.org/38/en/Flickr_public_repository ). Create a Course. In the Course create a Forum activity. Go to the Forum. Click on "Add new discussion topic" button. Click on the "Insert or edit image" button in the "Message" rich text editor. Click on "Browse repositories..." button in the "Image properties" dialog. In the filepicker select the Flickr public repository In the "Full text" search field enter "Etruria, Stoke-on-Trent - park tree" (this is a name of an existing photo on Flickr with width > 3000px, you can use another photo as long as it's original width is larger than the screen width) Select to use the returned photo file. In the "Image properties" dialog make sure the dialog width does NOT extend beyond the screen width make sure the size of the image preview is the same as the photo's original size (or the one defined in the size inputs) but displayed within the size range of the dialog with scrollbars to preview the entire photo content.
    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_38_STABLE
    • Pull 3.8 Branch:
    • Pull Master Branch:
      MDL-66601-master
    • Sprint:
      3.9 release work board

      Description

      Uploading images wider than browser width, does not show the "Save image" button on the screen, and the user has to drag/scroll the browser window to the right to find that button.

      It seems like a regression, as it used to show the uploaded preview image inside an IFrame (I think) or virtually "resize" them to fit width=100%

      And when in RTL mode, we do not see any of the image properties, as it all "hidden" off screen on the far right side off the screen.

      And if the ALT is not filled... the user can not save the image. (At least, the "Close" ("X") icon is on the left side of the dialog title bar, so the user can close the dialog, resize the image and upload it again)

        Attachments

        1. image-2020-06-11-11-12-47-626.png
          image-2020-06-11-11-12-47-626.png
          210 kB
        2. ltr-old.png
          ltr-old.png
          212 kB
        3. ltr-patch.png
          ltr-patch.png
          202 kB
        4. no save image button.png
          no save image button.png
          384 kB
        5. rtl-old.png
          rtl-old.png
          133 kB
        6. rtl-patch.png
          rtl-patch.png
          206 kB

          Issue Links

            Activity

              People

              Assignee:
              Geshoski Mihail Geshoski
              Reporter:
              nadavkav Nadav Kavalerchik
              Peer reviewer:
              Mathew May
              Integrator:
              Adrian Greeve
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                13/Jul/20

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 hours, 31 minutes
                  4h 31m