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

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

XMLWordPrintable

    • MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_38_STABLE
    • MDL-66601-master
    • 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.
    • 3.9 release work board

      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)

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

            Geshoski Mihail Geshoski
            nadavkav Nadav Kavalerchik
            Mathew May Mathew May
            Adrian Greeve Adrian Greeve
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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