Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-85936

Sidepanel tab-bar vertical for the DM Preview

    Details

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

      Description

      Goal

      The goal of this story is to implement the new side panel for the new DM Document View based on this epic mockups. This side panel will contain comments, info and more items could be added in future. 

      Invision interactive mockup   

      Figma upto date mockup

      Use Cases

      • As a user, I want to see what sections available for me
      • As a user, I want to navigate between the different section inside side panel

      User Experience

      Summary

      Give visibility to sections that exist inside panel such as comment, versions.
      Allow simple navigation between the sections such as a comment or info while browsing doc

      The side panel consists of  2 main components

      • Vertical tab

      1.Vertical tab

      Vertical iconic tab allows the user to navigate through different elements that are placed right next to it.

      It hosts a series of icons and separators between them. Separators allow to visually group elements. 

      Visual Design

      https://www.figma.com/file/TuioXFKS9gSxdHjdgQBTpG/tab-bar-iconic-vertical?node-id=1%3A59

      Metrics

      Interaction

      Behavior

      When a user hover on the icon tooltip appears to orient the user.

      Open/close

      Open close toggle interaction

      open

      close

       

       

      Navigation

      Example: When a user clicks the comment icon in the vertical-tab comment panel opens  When the user clicks versions icon, content will change to version.

       

      Interaction (Vertical tab)

      • will be always visible, always available, giving control to the user
      • Hover on tabs to see a tooltip with more details of sections
      • click the icon to open 
      • click the icon to close ( in case panel is already open )

      2. Panel 

      ( info panel  https://lexicondesign.io/docs/satellites/Sidebar/infopanel.html )

      Visual design

      The panel will contain comments, info, versions

       

      Metrics

      320 px wide
      With 24 px gutter
      ( will follow current info bar size and structure link )

       

       

      Lexicon guide

      "https://lexicondesign.io/docs/satellites/Sidebar/infopanel.html"

      Info Panel Opened

      When side panel slides over the container, instead of pushing it

      This sidebar always enters the screen from the right side of the viewport. It pushes the container in large viewports and on viewport sizes less than 768px in width.

       

      Sidebar Height

      The sidebar adjusts to the maximum height of the viewport:

       

       

       

       

        Attachments

        1. Captura de pantalla 2018-11-16 11.28.50.png
          Captura de pantalla 2018-11-16 11.28.50.png
          130 kB
        2. close_02.png
          close_02.png
          47 kB
        3. close_03.png
          close_03.png
          39 kB
        4. nav_02.png
          nav_02.png
          67 kB
        5. nav_03.png
          nav_03.png
          41 kB
        6. open_02.png
          open_02.png
          41 kB
        7. open_03.png
          open_03.png
          46 kB
        8. sidepanel_open_full_03.png
          sidepanel_open_full_03.png
          582 kB
        9. sidepanel_openfull_00.png
          sidepanel_openfull_00.png
          66 kB
        10. tools_02.png
          tools_02.png
          42 kB
        11. tools_03.png
          tools_03.png
          40 kB
        12. tools_04.png
          tools_04.png
          41 kB

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Packages

                  Version Package