Affects Version/s: None
Fix Version/s: None
Sprint:7.2 - S2 - UX, Col | Sprint 6 | Dec17 - Jan18, Col | Sprint 7 | Jan22 - Feb1, Col | Sprint 9 | Feb18 - Mar5, Col | Sprint10 | Mar6 - Mar15, Col | Sprint 3 | Nov5 - Nov16
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.
- 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
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
- Vertical tab
- Panel ( info panel https://lexicondesign.io/docs/satellites/Sidebar/infopanel.html )
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.
When a user hover on the icon tooltip appears to orient the user.
Open close toggle interaction
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.
- 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 )
The panel will contain comments, info, versions
320 px wide
With 24 px gutter
( will follow current info bar size and structure link )
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.
The sidebar adjusts to the maximum height of the viewport: