User Collapsable Menu & Status Bar

[VillageHubertChen]

• [x] HC: Test if this will help → I demoed the mobile size to various users and they preferred it over the desktop size.
• [x] HC, LC: Initial brainstorming if we try this feature → Yes
• [x] HC: Find Icon: → https://materialdesignicons.com/ search for "compress"
• [x] HC: Write User Story
• [x] HC: Write Features, Behaviors
• [x] LC: Implement → Status Bar
• [x] LC: Implement. Then trigger HC for testing
• [x] HC: Get community feedback

  Why adding Collapsible Menus

All reviewers consistently complaint that our navigation looks borderline too complex. At the same time they had no idea on how to simplify the complexity and still provide the 5 level navigation that we need. All reviewers agreed the Library Book Shelf Metaphor works well. The Collapsible Menu Feature is our attempt to solve the conundrum to offer 5 Level Navigation and still offer a modern and clean UI.

Features & Behaviors

• List of Menus supporting collapsing feature:
  • Article-Bar
  • Contents-Bar
• Add a collapse Icon to each Menu
  • Use the collapse Icon of the column on the waffle board
  • Clicking the Icon will collapse the Menu to the Collapsed Menu Icon state
  • When collapsed we show Off Canvas Menu Icon. Function accordingly
• Off Canvas Menu function, features and behaviors is not affected / changed

  How this improves User Experience

• Users who feel our UI is too crowded can simplify it
• Users who want more space for reading the Article can get it
• Different users have different UI preferences.
  • Now they can customize the UI to their need if they want to
  • This function is transparent to not demanding users, they can ignore it

    FAQ

    How investing time in great UI helps funding

User Story: I found V²Site on google when researching on a topic and landed on a V² Know How Page The Know How was helpful. I then found their ViCase Ad on their page. It promised a new PC experience. I normally would have ignored it, but this time I spent the time to explore ViPC on V²Shop. I was thinking that people who can build a site that delivers a much better experience probably also can build a PC that delivers a much better experience.

Reference

• → User Collapsable Menu #110
• → Automatic Table of Contents Generation #130
• → Increase Container Width on V² #140
• Compress Icon: https://materialdesignicons.com/ search for "compress"

[LukasChen]

@VillageHubertChen Please Review

[VillageHubertChen]

Bug Report

→ https://github.com/V-Squared/V-Squared.github.io/issues/140#issuecomment-224593423

[VillageHubertChen]

Introducing the Status-Bar

What is in it

Listed in the order from left to right:

1. Toggle Article-Bar Icon Set
2. Clipboard 1 Icon (Copies Article Path to Clipboard)
3. Clipboard 2 Icon (Create a markdown link to Article and copies it to Clipboard)
4. Readiness-Bar
5. License Icon (we are not using it yet, but it is coming)
6. Help Icon
7. FAB (Floating Action Button)
8. Toggle Contents-Bar Icon Set

Tooltips (numbers line up)

1. Toggle Article-Bar: Fold to reduce clutter. Unfold to select Article.
2. Copy Article Path: Press button and then paste Article-Path into your writing.
3. Link to Article: Press button and then paste the markdown link into your writing.
4. Shows Readiness of this Article. See Tooltip for each Segment → below
5. Article License: This article is licensed under → Creative-Commons-By
6. V²-Flow-Button: Get involved: edit Article, report issues and ideas, see what we are working on in GitHub. Read → More.
7. Toggle Contents-Bar: Fold to reduce clutter. Unfold it to navigate Table of Contents.

Tooltips to Readiness-Bar Stages

• Create: Creating concepts and specs while getting community feedback. Use the V²-Flow-Button to contribute. Or post ideas / bugs in Article-Issue. (Orange = work ongoing | Blue = done)
• Develop: Develop to the point that the team of author and editors believe it is done. (Orange = work ongoing | Blue = done). Use the V²-Flow-Button to get involved.
• Beta: Beta testing. (Orange = by Core Team | Blue = by Community). Use the V²-Flow-Button to report an Issue or create a Pull Request.
• Make: In Production. (Blue = One time production effort like publishing Article | Orange = Ongoing production effort like manufacturing products. Use the V²-Flow-Button to give feedback or get involved in development of next version.)

Help within FAB Menu

V²-Flow-Button:

Get involved: edit Article, report issues and ideas, see what we are working on in GitHub. Read → More.

Why we need it

We simply need all the stuff listed above and we need to find a place to put it. This way it is not too distracting, placed where one would expect it. Currently we have all items spread around. And they look like that. The Status-Bar will bind them into an intentional design, which is easy to refer to in documentation.

Placement

• Under Book-Bar
• Under the Article Image
  • This will work better once we reduced the height of the Article Images via 3:1 Ratio
  • Removed clutter in the Book-Bar region
• Special Treatment Edit Icon
  • It's center is in the Status-Bar. Due to its large diameter it is bleeding over.
  • Horizontal placement same as before
  • Give enough clearance between edit and icon for collapse Contents-Bar

Look and Feel

• Material Design Metaphor
• It belongs to the Paper that the Article is
  • Book-Bar is casting shadow to it
  • Status-Bar is not casting a shadow to Article, as it is a part of it
• Height: 30 px
• Color: Article Jumbotron Color
• Color of Collapse Icons: Blue-300 (low contrast to not distract too much)
  • Try to reduce contrast of Readiness-Bar progress box color for is-complete same way
• All Icons will use the same color, so to unify the design. We can try blue-300 and go from there.

Content on Mobile

1. Readiness-Bar
2. License Icon (we are not using it yet, but it is coming)
3. FAB (Floating Action Button)

[bcaswelch]

Like it, lots of sites use collapsible menus. Looking forward to seeing how it looks.

[VillageHubertChen]

@bcaswelch We plan to finish all features today if nothing goes wrong. We will show a demo in today's Stand Up Meeting.

[VillageHubertChen]

Review Result / To Do List

(by Georg via Skype Conference)

General Feedback

• Looks very nice
• Good functionality
• Tooltips are very clear
• Idea of V²Flow works

To Do

• [x] Clipboard Buttons do not work in Firefox
• [x] Help text within FAB Menu missing
• [x] Clicking on the License Button opens the same page as in Tooltip in a new tab
• [x] Store user preferences for Show Article-Bar and Show Contents-Bar in Local Storage
  • meaning you go to a different page on V²Site and your side bar preferences are kept
  • Values: true and false

[bcaswelch]

Changes look good, like how they are implemented.

[VillageHubertChen]

Thanks. I passed it on to Lukas. He very cares to build a site people likes. Comments like these make him very happy :-)

[VillageHubertChen]

Review Report

• [x] Make the $watcher work -> Understanding How To Use $scope.$watch() With Controller-As In AngularJS
• [x] Toggle Bar Buttons need to be removed < 1280 px width
• [x] Following buttons need to disappear on mobile: Copy Article Path and Link to Article
• [x] Must work in Firefox and Chrome

[VillageHubertChen]

Technical Debt

Currently LC can not find a way to provide functionality for the collapse side bar icon to change depending on the state is-collapsed or is-visible. To close this issue for now we remove this feature. That is the same icon is shown no matter of the side bar is collapsed or visible. We still keep the feature to hide this icon if its function is not available.