Details

    • Type: Story
    • Status: Closed
    • Priority: Major
    • Resolution: Completed
    • Affects Version/s: None
    • Fix Version/s: Master
    • Component/s: DM
    • Labels:

      Description

      https://liferay.invisionapp.com/share/WFOEFQDSJ7G 

       Goal

      The goal of this story is to implement the component for viewing images based on the new mockups designed for this epic.

      The goal of this user story is to put emphasis on the content in the image preview.
      Keeping consistency preview in regardless size and ratio image and browser window size.
      Enable zoom in zoom out.

      Use Case  

      • As a user, I want to see the image displayed in its entirety in the window (no cropping.)
      • As a user, I want to see the actual size of the image, in the case image size doesn't fit the browser window.
      • As a user, I want to see what % percent image is displaying currently, (Image actual size may or may not already fit the browser window. An Image will be resized to fit the browser window, therefore users need to see what % image currently displaying)
      • As user I want zoom in and zoom out

       

      User Experience

      Summary

      • the image will dynamically be centered and resized to fit the window.
      • Add zoom toolbar with zoom in and zoom out functions
      • Add current preview % 

      Visual Design

       

      Image display / Container

      • The image is vertically and horizontally centered.
      • The image proportions must be conserved.
      • The image must be displayed in its entirety in the window (no cropping.)
      • No scrollbars to appear
      • The image/ Container automatically resizes when the window dimensions change, to occupy all the available space
      • The image won’t display larger than the original size
      • The container will have a set of margin to keep visual consistency
      • When an image is actual size is larger than browser size, the image will be resized to fit the screen.

      Zoom

      • Zoom bar will have 24 px margin to the bottom of the browser
      • Zoom bar will have a fixed location
      • Zoom bar will be always centered
      • Zoom bar will float above image when image zoomed in

      Height 40px 
       

       

      Interaction

       

      Image display / Container

       

      When user first lands on preview image we want to display the most optimal view, fitting the entire image in the browser window, horizontally vertically centered.
      Resize the image to fit the browser window (in a case actual size of the image is larger than the browser window browser, the image will be resized to fit our container size, )

      Zoom in

      In case image fits browser window 100% zoom function is disabled

      Can’t zoom in larger than 100%

      Zoom Out

      In case image fits browser window 100% zoom function is disabled
      Zoom out there is to undo Zoom in

       

       

       

        Attachments

          Activity

            People

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

              Dates

              • Created:
                Updated:
                Resolved:

                Packages

                Version Package
                Master