Flow/Interactive prototype/Archive 1

To better help people understand how Flow will work, we have built an interactive prototype out of Javascript and HTML. This prototype is not the final product and nothing will be saved.

Open the Flow Prototype

Giving Feedback

Please give feedback about the prototype on this page's talk page.

Using the Prototype

First, understand that nothing will be saved. If you reload the prototype, the state of everything is reset (within certain random variances).

Upon first loading the prototype, you will be presented with a dialog asking for a user name to use. Enter your user name (or any name, really) and the prototype will then see you as that user. Once you've done that, you will be presented with your "Feed" view (see below).

For ease of use, this user name will be saved for 7 days in a cookie so that you don't have to continually enter it every time you come back.

(You can always clear the cookies by clicking the "Clear Saved User Name" link in the sidebar, under the "Toolbox".)

What You Can Do in the Prototype

The prototype is fairly interactive.

Some simple interactions are:

• Topics may be opened or closed by clicking on the chevron to the left or the topic title text itself.
• Hovering your mouse over a datestamp ("About X time ago") will change the text to show the actual date of the event. Clicking on this opens a "permanent link" dialog.
• If you see a "Show X read messages" banner, that means that there are additional posts that you've already seen. Click the banner to reveal them in order to show context. (This only appears if you have toggled "Collapse Read" to "on")

Your Board

In the top, next to your user name, you will see a link, "Board". Clicking this will bring you to your personal board, which is analogous to your current User Talk page. Your Board is where people go to start conversations with you or learn about what you've been doing.

Clicking your Board link will take you to a pre-populated Board. Note that this is not a version of your talk page; it is a faked up version (that is mostly taken from w:en:User:Jorm (WMF)).

Add Topics

At the top of board is a text box that begins with "Click here to start a new discussion..". Clicking inside of this will open the "New Discussion" dialog box. Fill out the subject and text and click "Add Message".

The new message will be automatically inserted at the top of the Board.

Reply to Posts

You can reply to any post in a topic. Replies will use the user name you have provided and will move to the location within the thread that they are intended to go to (not always directly beneath the post being replied to).

Search

The search box will filter all posts in the board based on the text provided. You have to click the "Go" button for it to work right now, unfortunately.

Searching works against topic titles, tags, post texts, and author names. It will hide all topics that do not match the criteria.

Please note that the search functionality is a bit clunky - it has to be, since it does not have access to string tokenizers or a "real" backend.

Visit Echo Notifications

Clicking the Echo notifications badge (the red thing at the top, next to your username) will show you some notifications. All have been read except for two (one indicating a user mention and one concerning a reply by Writ Keeper). Clicking one or the other will bring you to a "single topic" view: this is just one conversation.

Single topics will have unique URLs and can be referenced that way.

There are controls that will bring you back to your board from there.

Moderation Functionality

• Topics may be deleted, restored, closed, and renamed. With admin functionality active, they may also be suppressed. Each action will cause a line in the topic's history to be created.
• Posts may be deleted and restored by default. You may edit your own comments. If you have the admin functionality toggled, you may edit other people's comments. Editing a comment will create a "comment was edited" line to appear. Any of these actions create an entry in the comment and topic histories.

Other

• Mark All Read - This will grind through all topics, marking all posts as read.

Sidebar Links

There are three sidebar sections of interest: Toolbox, Examples, and Back and Forths.

Toolbox

• Leave Feedback - This will take to a Wiki page where you can leave feedback.
• Clear Saved Data - This will clear your saved user name and delete all cookies.
• Toggle Admin - This will grant your account "admin" privileges. This includes "oversight". When active, you may edit comments left by others and suppress topics.
• Collapse Read - This is a toggle that will cause "read" topics and posts to collapse. This is probably not the optimal behavior.
• Toggle Paragraphs - This will hide all paragraph content. This is useful for seeing how topics "nest".
• Indent++ - This increases the indent depth of all posts by 5 pixels.
• Indent-- - This decreases the indent depth of all posts by 5 pixels

Examples

• Jimmy Wales - This is a version of Jimmy Wales' talk page (which is an extreme example of activity).
• Maggie Dennis - This is a version of Moonriddengirl's talk page (which also has a lot of activity).
• One Topic - This shows a "single topic" conversation, such as what you would get from clicking an Echo notification or a single-topic URL. (You can also get this by clicking the unread notification from "Writ Keeper" in the Echo flyout)

Back and Forths

This section shows three views of a single topic that has been left on your board (a conversation involving you, Ryan Vesey, and Writ Keeper). Each link provides a view of that topic (in "single topic mode") as if you were the person in the link.

If you click either Ryan Vesey or Writ Keeper, your "logged in" user will temporarily switch to them. Click any other view to reset your username back to your original choice.

• Your View - What you see
• Ryan Vesey's View - What Ryan Vesey sees.
• Writ Keeper's View - What Writ Keeper sees.

Awaiting Implementation/TODO

Functionality

• Really distinguish board from feed
• Add a faked-up user page
• Search tokenizing
• Make tagbox work
• Fake up "new responses to this post" scenario
• Keyboard accellerators
• Add permalink to history view
• Suppress post
• Protection actions

Use Cases/Scripts

• Specific use cases (block notices, etc)

Bugs/Known Issues

• The new message dialog obscures content when opened and it is not immediately obvious that a new topic has been posted (due to scrolling).

Visual Design

Iteration 1

Iteration 2

Release Notes

July 13, 2013

Many, many changes. Nearly everything is functional (in some manner).

TL;DR Changes

• Many elements removed (author metadata, post counts, "collapse all" button)
• New topic dialog is single element
• Fixed header on scroll
• Many visual changes to conform to new version of Agora styling
• Posted replies should now go to correct position (with animation)
• All dates now have hover change instead of tipsy; clicking produces permanent link dialog
• Removed "chaos" modes
• Added "admin" toggle (turns user into admin)
• Added many moderation functions: edit/delete/restore post, delete/restore/close/supress topic, edit topic title
• Added "history" functionality for topics and posts
• Read posts are now open by default (experimental)
• Killed several features not in the minimum viable product.
• Fake-up a VisualEditor toolbar in textareas (non-functional)

Full Release Notes

Functional:

• Removed "Collapse All" button as it was confusing people
• Removed author metadata lines
• Modified "new topic" dialog form to appear as a single input
• "Add message" button is now a constructive button
• Flow search now activates on hitting enter (no need to press the "go" button)
• Go button on Flow search is now disabled until text is input.
• Removed "hide author metadata" function
• Removed all "chaos" content generation mechanisms
• Reply-to-post mechanism is now "inline" and expands upon interaction, reducing clutter.
• Rebuilt JSON files to have parent/child relationships.
  • Refactored a lot of code because of this.
• Posted replies are now correctly placed within a thread at correct position
  • Simulate a server round-trip for posting new replies.
  • There's an animation of post movement into its correct place. It's a bit choppy (for me); this is due to it being a prototype
• Changed "add new topic" from modal dialog to inline "click here to start a new discussion" control, which expands upon interaction.
  • Control references whose board it is
• Removed tipsy hovers for datestamps; UTC dates now appear on hover.
• "Board" mode now tracks and collapses "read" messages.
  • This should probably show some in context, not just collapse all.
• Removed post count and unread posts badge. It didn't make a lot of sense.
• Moved topic actions from a gear icon to an "actions" pulldown link, below "subscribe" icon
• Removed tag manipulation icon
• Board controls (add new discussion and search functionality) now remain fixed upon scroll.
• Topic search form is now hidden until called for.
• Functionality for Editing Comments
• There is a new toggle, "Admin"
  • Users are assumed on load to NOT be administrators. Clicking "Toggle Admin" in the sidebar will enable that flag. The board will be reloaded, and new functionality will be apparent.
  • Comment editing is restricted to your own posts (unless you toggle admin "on")
  • Your posts are ringed in blue. If you can't find one, create a new topic.
  • The "actions" link in the lower right corner will open a menu; one entry is "edit"
    • The hover functionality is goofy here.
    • Click edit, and the system changes in place. Cancel reverts to the original comment.
• Comments may now be deleted.
  • This functionality is available to all users
  • A confirmation dialog is required.
  • A marker is left in place where the offending comment was, with controls to review or undelete
• Once deleted, a comment may be "restored"
• Threads may now be "suppressed" or "deleted".
  • The difference is that deleted topics may be restored (suppressed may not, in the prototype (in the real world, this will follow standard oversight conventions)
  • Suppression functionality is available only to admins (Toggle Admin "on")
  • A confirmation dialog is required.
  • A marker is left in the topic area indicating that it was redacted.
• Threads may now be "closed" and "re-opened" (anyone can do this)
  • Requires a summary reason, which will be displayed
  • Topic cannot be replied to if the topic is closed.
• Comment histories now work.
  • Editing, deleting, or restoring a comment now adds lines to the comment history.
  • Please note that there is no way to parse through revisions as these are not stored (prototype only)
• Removed links from topic titles
• A warning is now shown when users attempt to reply within topics that are "stale" (have not been modified in over 30 days). It's pretty obnoxious, though.
• The topic permalink dialog is now functional
  • Permalink dialogs are availble from most timestamps (should be all, but I can't guarantee I got all of them)
• Topic titles may now be edited.
  • This retains any foreign board designations
  • This creates a history entry
• "Mention" threads - threads where the user has been "mentioned" - are now called out with an '@' icon.
• Added toggle for auto-collapsing read posts vs. not auto-collapsing them (sidebar)
  • Default is currently set to not collapse
• Include a small editor toolbar. This is non-functional and only intended for illustrative purposes.

Visual:

• Applied newer version of Agora styles to various elements
• Reduced vertical padding all over the place
• Reduced indentation depth padding
• Moved buttons to the right side in forms
• Minor color fixes to match Agora
• Unbold datestamps
• Lighten color of datestamps
• Change visual style of "collapsed/read" message sections
• Topics with unread posts now have a green dot indicator within the "open affordance" chevron
• Left aligned topic datestamp to avoid confusion with post datestamp
• Added icons to user actions in board top (heart, pencil, etc.)

May 9, 2013

• Read posts are now only collapsed in the Feed views
• The "+Topic" button now reads "+New Message"
• Hide the "New message" button when in feed view
• Tag actions no longer work on unsubscribed topics
• Author metadata (edit count, etc.) can now be hidden from a tool in the sidebar
• Posts by yourself now have a blue border instead of grey (h/t to theDJ)
• Added in a "mention" example to the Echo flyout.
• Cleaned up the json file for Jimmy Wales' board with regard to post depths.
• "Reply" buttons changed to mw-ui-constructive (green)
• Changed the green color of unread posts to match the reply button color (avoid clashing)
• Going to a "Feed" view now removes any tabs. Returning to a board shows the tabs again.
• Taglist section no longer displays if there are no tags
• In Feed view, topics on own board no longer include your username
• In Feed view, the sort of topics is NOT based on "last update time". Instead:
  • Topics that you are subscribed to are sorted by last update time;
  • Topics that you are not subscribed to are sorted by create time.
    • This more accurately reflects the behavior when you are subscribed to a user but not every topic on their board
• Added a new sidebar section, "Back and Forths"
  • This gives you a "masquerade" view, so that you can see what the same topic will look like from the viewpoints of different users.
    • The first is your view.
    • The second and third are the views of two other participants.
• In Board view, all topics are expanded by default (for easier fast-scanning)
• Individual posts can be flagged as "abusive". This is the beginnings of a workflow; actual anti-vandalism functionality will require more work.
• Removed the "Jorm Board" - it was a redundant view
• Added in a couple use cases to the Board/Feed views:
  • A "you blocked someone" notice
  • A Barnstar
  • A Mention

May 4, 2013

• Read posts in any thread are collapsed by default, with an indicator to open all of them up.
  • Posts are not collapsed if the thread is collapsed
  • Collapse sections is an all-or-nothing deal
  • You cannot "re-collapse" read posts. Adding a control to every post is too heavy
  • Collapsing a thread will uncollapse all posts inside of it and remove the indicator
    • Reopening the thread will expand all posts
• On start up, a modal appears asking you for your user name.
  • The form saves it and operates as "that person" from then on.
  • This is saved to a cookie, which prevents the modal from opening in the future
  • There is a "clear saved username" link on the side.
• The feed link now treats itself as if it were the "logged in" user and does some replacing on text to imply that the conversations are happening with them (and not the original owner of the posts)

May 1, 2013

• Posts are automatically marked read as you scroll through them.
• Unread posts are significantly called out (green headers, experimental)
• Topic titles are now hot
• Rudimentary search functionality
  • Loading throbber
  • case insensitive
  • DOES NOT tokenize
  • searches titles, authornames, tags, postcontent
• Clicking the gear icon now brings up a menu
• Clicking the subscribe/unsubscribe stars now do things
• Clicking the tag icon now opens a small dialog (that doesn't work yet);
• Reply form auto-focuses to the textarea now.

April 30, 2013

• First version
• Different views load different json representations of various talk pages.
• Sidebar links exist for various Board examples:
  • Fully Chaos (everything is generated randomly.)
  • Jimmy Wales
  • Maggie Dennis (Moonriddengirl)
  • Brandon Harris (Jorm)
  • A single topic (this is what you get to if you get an echo notification)
• "Echo" badge brings user to a single topic (click on the entry by Writ Keeper)
• Clicking on the "Feed" link in the header brings you to your feed. The "feed" view is different from the "Board" view. The feed is private - it's all the conversations that you may be interested in or are subscribed to (have a solid star). You also see activity from the boards of *people* you're subscribed to as well, but it floats away fairly quickly if you don't subscribe to it.