Flow/Table of Contents spec

Draft spec for the new Table of Contents on a Flow board. Last updated Oct 3, 2014.

Please note: The drawings below are a mix of in-process draft mockups. They will be replaced with updated mockups soon.

Use case and rationale
The core use case for Table of Contents on a Flow board is:


 * A user comes to a Flow board, and wants to browse through the list of topics, to find an interesting discussion to read and/or participate in.


 * Related use case: A user is searching for a particular discussion that's on the board. The Table of Contents may help with this, if the user can find the discussion by browsing topic titles. A more specific Search feature will be added after the ToC is done.

Header bar with ToC dropdown



 * The header bar at the top of a Flow board will now include an icon and "Browse topics" area on the left side, and the sorting will move to the right side.


 * Note: The "collapse" icon will no longer appear on the board, and the collapse functionality will be retired.

Opening the ToC dropdown



 * Clicking on the "Browse topics" text opens the ToC dropdown panel.


 * The panel includes the list of topics on the board, in the order of the user's current sort.


 * The panel has a vertical scroll bar, and the user will be able to scroll through the list of topics.


 * If a topic is too long to fit in the panel, the text is cut off with an ellipsis after the last complete word.


 * At the bottom of the panel, a fixed box will display the number of conversations on this board, in the form "## conversations"


 * There is an X at the top right of the panel to dismiss the dropdown.


 * If the user clicks outside of the panel, the dropdown is dismissed.

Scrolling with the fixed header bar



 * As the user scrolls down the page, the header bar sticks at the top of the browser window.


 * The text "Browse topics" is replaced by the title of the topic currently being scrolled through. The topic title is in bold.


 * If the topic title is too long to fit horizontally on the header bar, the text is cut off with an ellipsis after the last complete word.


 * As the user scrolls down, the topic title displayed should change as the header bar touches the top of each topic titlebar.


 * As the user scrolls up, the topic title displayed should change as the header bar clears the top of each topic titlebar.


 * When the user scrolls to the top of the page and the header bar detaches from the top of the browser window, the text should revert back to "Browse topics".

Opening the contents dropdown from lower on the page



 * When the user clicks on the topic title displayed in the header bar, the ToC dropdown opens.


 * The panel should be the same horizontal size as it was above. It should still have the X to dismiss, the list of topics, the scroll bar and the fixed box at the bottom that says "## conversations".


 * The topic that the user is currently on is still rendered as bold and black, as it was before the panel was opened.


 * The user can scroll up or down to see more topic titles on the page. As the user scrolls, the topic that the user is currently on should stay rendered as bold and black, to indicate that that's where the user is currently located on the page.

Clicking on a topic title



 * When the user clicks on a topic title in the Table of Contents list, the user is scrolled to the appropriate spot on the board.


 * The ToC panel closes, and the user can read the discussion.


 * The appropriate topic title is displayed in the header bar, as before.

Clicking on a title that's within the next set of topics to load

 * When the user clicks on a topic title that's <10 topics below the currently displayed topics, the page loads the next 10 topics (as it would normally if the user scrolled to the bottom). The user is scrolled to the appropriate topic.

Clicking on a title that's beyond the next set of topics to load



 * When the user clicks on a topic title that's >10 topics below the currently displayed topics, the page loads the set of 10 topics that includes the selected topic, and scrolls the user to the appropriate topic.


 * In the space above the newly-loaded topics, there's a "condensed" box that indicates the number of topics skipped between the end of the previous display and the topic that the user has just loaded.


 * (Question: How do we express the number of topics that are condensed, and the number that will load if you click on it again?)


 * If the user opens the ToC again and chooses a topic that's within the condensed topics, then that group of 10 topics will load, possibly creating multiple condensed boxes on the page.