Details

    • Type: Spike
    • Status: Closed
    • Priority: Minor
    • Resolution: Completed
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Documents & Media
    • Labels:
      None
    • Spike Type:
      Non-Technical
    • Conclusion:
      Hide
      Conclusion

      There 5 main type of documents for preview

      Image
      Zip
      Document
      Video
      Audio
      Image
       


      The main idea was to remove clutters and focus on the content.

      Let's look at the canvas area it consists of the container for content & floating zoom bar
      *Container *

      Container( grey box in wireframe) size and the ratio will depend on browser display size
      The container will have a set of margin to keep visual consistency
      Content will be centered inside the container,
      This is an ideal view,( first view when a user lands to see image)
      in case content size exceeds container (for example when zoomed in) rule will change.
        

      (To discuss with front-end to define)

      2 Zoom floating bar

      floating zoom bar will be fixed to the center bottom screen and always maintain fixed location to (make sure it stays the same location while scrolling different size of images)
      Zoom functions:
      In this first iteration
      Zoom in Up to 100%
      Zoom out will only undo zoom in a state

      Permalink Edit Delete
      duuriimaa.bargaid Duuriimaa Bargaid added a comment - 21/Sep/18 4:51 AM - edited
      Zip type file

      There is 2 type of file
      1. A compressed file that can't be previewed
      ( In this case have empty state message, show file name with extension, size)

      2. Pdf or some other file that normally have a preview, but currently some reason can't show preview
      ( In this case have empty state message, show file name with extension, size)

      + offer open with another app ( this is currently not possible, but in the future should be an option)

      Permalink Edit Delete
      duuriimaa.bargaid Duuriimaa Bargaid added a comment - 21/Sep/18 5:16 AM
      Doc / Multiple pages document

      There 2 option to navigate between pages

      1.manually navigate between pages


      2.while scrolling page number will show,
      inline click on the page number to go directly to that page
      For example document of 300 pages, click on current page number & type the page number you want go to

      Please have at look Mockup: https://liferay.invisionapp.com/share/JDO0Q3W7ZW9#/screens
      Show
      Conclusion There 5 main type of documents for preview Image Zip Document Video Audio Image   The main idea was to remove clutters and focus on the content. Let's look at the canvas area it consists of the container for content & floating zoom bar *Container * Container( grey box in wireframe) size and the ratio will depend on browser display size The container will have a set of margin to keep visual consistency Content will be centered inside the container, This is an ideal view,( first view when a user lands to see image) in case content size exceeds container (for example when zoomed in) rule will change.    (To discuss with front-end to define) 2 Zoom floating bar floating zoom bar will be fixed to the center bottom screen and always maintain fixed location to (make sure it stays the same location while scrolling different size of images) Zoom functions: In this first iteration Zoom in Up to 100% Zoom out will only undo zoom in a state Permalink Edit Delete duuriimaa.bargaid Duuriimaa Bargaid added a comment - 21/Sep/18 4:51 AM - edited Zip type file There is 2 type of file 1. A compressed file that can't be previewed ( In this case have empty state message, show file name with extension, size) 2. Pdf or some other file that normally have a preview, but currently some reason can't show preview ( In this case have empty state message, show file name with extension, size) + offer open with another app ( this is currently not possible, but in the future should be an option) Permalink Edit Delete duuriimaa.bargaid Duuriimaa Bargaid added a comment - 21/Sep/18 5:16 AM Doc / Multiple pages document There 2 option to navigate between pages 1.manually navigate between pages 2.while scrolling page number will show, inline click on the page number to go directly to that page For example document of 300 pages, click on current page number & type the page number you want go to Please have at look Mockup: https://liferay.invisionapp.com/share/JDO0Q3W7ZW9#/screens
    • Sprint:
      7.2 - S1, September

      Description

      Our Documents and Media preview presents some visual challenges:

      • It does not manage well when we cannot preview a file
      • The top bar is clunky
      • The content does not take advantage of all the space
      • The content is not the main focus of the preview, there are a lot of things distracting the user
      • Some previews show a squared background
      • Quick actions are missing: download, sharing (this is a new feature coming)...
      • Comments positioning
      • Info panel should be different if it is in the list view or in the preview. Should we use the same component?
      • Information organization (title is repeated several times, the small preview appears several times...)

      And other more functional challenges:

      • There is no possibility of browsing quickly to the next or previous asset
      • There is no possibility of quickly editing some basic data (name, description, tags).

      The goal of this spike is to do a research on document&media preview and do a proposal of the new UI for our previsualization having in mind those funcional challenges but focusing mainly in visual challenges for now.

        Attachments

          Activity

            People

            Assignee:
            antonio.aragues Antonio Aragüés (Inactive)
            Reporter:
            antonio.aragues Antonio Aragüés (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Packages

                Version Package