B4. Update existing TOC to use OOJS-UI
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	• Mattflaschen-WMF
	Apr 22 2015, 6:29 PM

Referenced Files

	F189409: toc spacing.jpg
	Jul 6 2015, 10:09 PM

	F188590: Screen Shot 2015-07-03 at 5.36.04 PM.png
	Jul 4 2015, 12:42 AM

	F188572: Screen Shot 2015-07-03 at 3.44.58 PM.png
	Jul 4 2015, 12:42 AM

	F188574: Screen Shot 2015-07-03 at 4.54.34 PM.png
	Jul 4 2015, 12:42 AM

	F188576: Screen Shot 2015-07-03 at 3.45.11 PM.png
	Jul 4 2015, 12:42 AM

	F188588: Screen Shot 2015-07-03 at 5.35.38 PM.png
	Jul 4 2015, 12:42 AM

	F188566: Screen Shot 2015-07-03 at 4.34.05 PM.png
	Jul 4 2015, 12:42 AM

	F188570: Screen Shot 2015-07-03 at 3.50.56 PM.png
	Jul 4 2015, 12:42 AM

Subscribers

Description

Since this is JS-only functionality (and most of it will have to be, especially once search is added), it's a good use case for OOJS-UI. First we need to port over the existing functionality.

Details

Subject	Repo	Branch	Lines +/-
Correct placement of the scroll when we scroll to topic	mediawiki/extensions/Flow	master	+3 -2
Follow-up a16357b8c5: fix order icons	mediawiki/extensions/Flow	master	+4 -2
Create an OOUI ToC widget	mediawiki/extensions/Flow	master	+887 -818

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	• DannyH	T171977 Annual Plan 2017-2018, Audiences 5: Increase current editor retention and engagement
Resolved	• DannyH	T171982 Annual Plan 2017-2018, Audiences 5, Goal 3: Provide better workflow and communication experiences
Open	None	T167928 Improve structured discussion features for the communities that use them, based on user feedback and prioritising technical debt
Open	None	T170530 Reconsider how to navigate on a Flow board
Invalid	None	T104631 [DO NOT USE] Search in Flow boards (tracking)
Open	None	T76823 Basic search on Flow board (tracking)
Open	None	T89785 Highlight search results on the current Flow board (Search)
Resolved	matthiasmullie	T104443 Add list of highlighted words and total term frequency to search API output
Open	None	T89422 Turn Flow ToC bar into a Search/ToC bar (Search)
Open	None	T89786 Clear search box (Search)
Open	None	T89787 "No results found" error handling for Flow search
Duplicate	None	T89861 Move sorting options to ellipsis menu next to Search/ToC bar (Search)
Open	None	T99782 Navigate through results when searching a Flow board
Open	None	T99786 Show matching topics when searching a Flow board
Open	None	T99791 Show an overview of all matches found in a Flow board
Open	None	T99881 Loading indicator for search in Flow boards
Open	None	T78796 Figure out how to deploy Flow search
Resolved	matthiasmullie	T78787 U8. Make ES configuration management maintenance script
Resolved	matthiasmullie	T78786 Make CirrusSearch updateOneSearchIndexConfig.php code reusable
Open	None	T106551 Open search results in a new view
Open	None	T106665 Stop relying on ElasticSearch script.disable_dynamic: false
Resolved	matthiasmullie	T86257 Bring Special:FlowSearch back to life
Declined	None	T95908 Automatically keep search index updated as new posts and edits are made
Open	None	T172369 Error when run maintenance/FlowSearchConfig.php
Open	None	T183241 Add a time-range filter for comments done on a Structured discussions page
Open	None	T49145 Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core
Open	None	T100270 Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core
Open	None	T100269 Flow OOUI + Data Model tickets (tracking)
Resolved	Mooeypoo	T96890 B4. Update existing TOC to use OOJS-UI
Resolved	Mooeypoo	T98368 B3. Flow DM: Create a basic flow.dm.Board and flow.dm.Topic objects and populate them

Event Timeline

• Mattflaschen-WMF created this task.Apr 22 2015, 6:29 PM

• Mattflaschen-WMF raised the priority of this task from to Medium.

• Mattflaschen-WMF updated the task description. (Show Details)

• Mattflaschen-WMF added projects: User-notice, Notice, Roadmap, StructuredDiscussions, Collaboration-Team-Triage.

• Mattflaschen-WMF removed projects: Roadmap, Notice, User-notice.

• Mattflaschen-WMF set Security to None.

• Mattflaschen-WMF added subscribers: Ricordisamoa, tarlocesilion, • Mattflaschen-WMF, Aklapper.

• DannyH moved this task from Untriaged to Ready for next sprint on the Collaboration-Team-Triage board.Apr 22 2015, 6:31 PM

• DannyH edited a custom field.Apr 22 2015, 6:37 PM

• DannyH moved this task from Ready for next sprint to Current workboard on the Collaboration-Team-Triage board.

• DannyH edited projects, added Collaboration-Team-Sprint-A-2015-05-06; removed Collaboration-Team-Triage.Apr 22 2015, 7:08 PM

Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptApr 22 2015, 7:08 PM

• DannyH renamed this task from Update existing TOC to use OOJS-UI to A9. Update existing TOC to use OOJS-UI.Apr 22 2015, 8:04 PM

• DannyH moved this task from Current workboard to Untriaged on the Collaboration-Team-Triage board.

• DannyH moved this task from Untriaged to Current workboard on the Collaboration-Team-Triage board.Apr 22 2015, 8:07 PM

• Mattflaschen-WMF added a parent task: T97442: Migrate Flow components to OO UI.Apr 28 2015, 5:52 PM

Punting this back to backlog, it's too big for right now.

• DannyH removed a project: Collaboration-Team-Sprint-A-2015-05-06.Apr 30 2015, 5:36 PM

• DannyH moved this task from Current workboard to Ready for next sprint on the Collaboration-Team-Triage board.

• Mattflaschen-WMF added a parent task: T89422: Turn Flow ToC bar into a Search/ToC bar (Search).May 6 2015, 5:59 PM

• Mattflaschen-WMF added a subtask: T98368: B3. Flow DM: Create a basic flow.dm.Board and flow.dm.Topic objects and populate them.

• DannyH moved this task from Ready for next sprint to Sprint B (temporary for meeting) on the Collaboration-Team-Triage board.May 6 2015, 6:16 PM

• DannyH added a project: Collaboration-Team-Sprint-B-2015-05-20.May 6 2015, 8:42 PM

• DannyH renamed this task from A9. Update existing TOC to use OOJS-UI to B4. Update existing TOC to use OOJS-UI.May 6 2015, 8:45 PM

• DannyH moved this task from Sprint B (temporary for meeting) to Current workboard on the Collaboration-Team-Triage board.May 6 2015, 10:43 PM

• DannyH assigned this task to Catrope.May 7 2015, 5:44 PM

• DannyH moved this task from Sprint B - ends May 27 to In Development on the Collaboration-Team-Sprint-B-2015-05-20 board.May 8 2015, 5:41 PM

Catrope reassigned this task from Catrope to Mooeypoo.Jun 2 2015, 5:33 PM

• DannyH raised the priority of this task from Medium to High.Jun 3 2015, 7:15 PM

• DannyH added a project: Collaboration-Team-Sprint-C-2015-06-17.

• DannyH moved this task from Sprint C - ends June 15 to In Development on the Collaboration-Team-Sprint-C-2015-06-17 board.

Change 209671 had a related patch set uploaded (by Mooeypoo):
[WIP] Create an OOUI ToC widget

https://gerrit.wikimedia.org/r/209671

gerritbot added a project: Patch-For-Review.Jun 4 2015, 11:59 AM

• DannyH added a project: Roadmap.Jun 4 2015, 4:06 PM

Restricted Application added a project: Notice. · View Herald TranscriptJun 4 2015, 4:06 PM

• DannyH moved this task from Unscheduled to June 2015 on the Roadmap board.Jun 4 2015, 4:07 PM

• DannyH closed subtask T98368: B3. Flow DM: Create a basic flow.dm.Board and flow.dm.Topic objects and populate them as Resolved.Jun 4 2015, 9:08 PM

• DannyH moved this task from June 2015 to June 22-26 on the Roadmap board.Jun 11 2015, 4:04 PM

gpaumier moved this task from Backlog to Triaged on the Notice board.Jun 11 2015, 4:53 PM

Catrope moved this task from Current workboard to Ready for next sprint on the Collaboration-Team-Triage board.Jun 16 2015, 5:45 PM

Catrope moved this task from Ready for next sprint to Sprint D (temporary for meeting) on the Collaboration-Team-Triage board.

• DannyH added a project: Collaboration-Team-Sprint-D-2015-06-30.Jun 16 2015, 6:59 PM

• DannyH moved this task from Sprint D - ends July 1 to In Development on the Collaboration-Team-Sprint-D-2015-06-30 board.

• DannyH moved this task from Sprint D (temporary for meeting) to Current workboard on the Collaboration-Team-Triage board.Jun 16 2015, 7:05 PM

Catrope moved this task from In Development to Needs Review on the Collaboration-Team-Sprint-D-2015-06-30 board.Jun 17 2015, 5:36 PM

Catrope moved this task from Sprint D - ends July 1 to Code Review Started on the Collaboration-Team-Sprint-D-2015-06-30 board.Jun 19 2015, 5:39 PM

Jdforrester-WMF moved this task from June 22-26 to June 29-July 3 on the Roadmap board.Jun 25 2015, 4:14 PM

Jdforrester-WMF added a project: User-notice.Jun 29 2015, 10:38 PM

• DannyH added a project: Collaboration-Team-Sprint-E-Everywhere-2015-07-14.Jun 30 2015, 7:41 PM

• DannyH moved this task from Sprint E - ends July 14 to Code Review Started on the Collaboration-Team-Sprint-E-Everywhere-2015-07-14 board.

Change 209671 merged by jenkins-bot:
Create an OOUI ToC widget

https://gerrit.wikimedia.org/r/209671

Catrope mentioned this in rEFLWa16357b8c5d6: Create an OOUI ToC widget.Jul 1 2015, 8:57 PM

Mooeypoo mentioned this in rMEXT3f6700e9fac8: Updated mediawiki/extensions Project: mediawiki/extensions/Flow….Jul 1 2015, 8:57 PM

Catrope moved this task from Code Review Started to QA Review on the Collaboration-Team-Sprint-E-Everywhere-2015-07-14 board.Jul 1 2015, 9:00 PM

gpaumier removed a project: User-notice.Jul 2 2015, 8:14 PM

gpaumier moved this task from Triaged to Archive on the Notice board.Jul 2 2015, 8:19 PM

Checked http://en.wikipedia.beta.wmflabs.org/wiki/Talk:ET3 and compared with https://www.mediawiki.org/wiki/Talk:Flow_QA in Chrome 43.

Note: In screenshots, Talk:Flow QA refers to mediawiki; Talk:ET3 refers to beta.

mediawiki
- 'Newest topics' label is not bold
- hovering over topics make topics blue on the grey background
- selected/viewed topic is indicated in bold; in beta - in blue
- down-pointing arrow is different

Screen Shot 2015-07-03 at 4.34.05 PM.png (346×1 px, 40 KB)

Screen Shot 2015-07-03 at 5.35.38 PM.png (437×1 px, 51 KB)

Screen Shot 2015-07-03 at 5.36.04 PM.png (312×1 px, 31 KB)

beta

Screen Shot 2015-07-03 at 3.50.56 PM.png (563×1 px, 70 KB)

mediawiki displays tooltips for 'Newest topics' & 'Recently active topics' - beta does not display them.

mediawiki: icons for 'Newest topics' & 'Recently active topics'

beta swaps the icons for 'Newest topics' & 'Recently active topics'

After selecting a different sort order

mediawiki does not change the background for a previously selected option.

beta indicates the previously selected order by changing the background color and providing the same icon for both options 'Newest topics' & 'Recently active topics'

mediawiki - when a selection is made from 'Browse topics' - no page scrolling is noticeable.

beta - the scrolling is present. Note: checked in the Chrome(Mac) browser.

Etonkovidova moved this task from QA Review to Product Review on the Collaboration-Team-Sprint-E-Everywhere-2015-07-14 board.Jul 4 2015, 12:43 AM

• DannyH closed this task as Resolved.Jul 6 2015, 5:04 PM

• DannyH reopened this task as Open.

• DannyH moved this task from Product Review to Done on the Collaboration-Team-Sprint-E-Everywhere-2015-07-14 board.

• DannyH moved this task from Done to Product Review on the Collaboration-Team-Sprint-E-Everywhere-2015-07-14 board.

Change 223072 had a related patch set uploaded (by Catrope):
Follow-up a16357b8c5: fix order icons

https://gerrit.wikimedia.org/r/223072

In T96890#1431175, @gerritbot wrote:

Change 223072 had a related patch set uploaded (by Catrope):
Follow-up a16357b8c5: fix order icons

https://gerrit.wikimedia.org/r/223072

Fixes #3 and #4 from Elena's comment.

Re #1: the style is a bit different, but I believe that's intended

Re #5: I believe this is intended too, but I'm not sure

Re #2: good point

Change 223072 merged by jenkins-bot:
Follow-up a16357b8c5: fix order icons

https://gerrit.wikimedia.org/r/223072

Diffusion mentioned this in rMEXTd47fcd09256a: Updated mediawiki/extensions Project: mediawiki/extensions/Flow….Jul 6 2015, 7:07 PM

Catrope mentioned this in rEFLW39c07deaa9e0: Follow-up a16357b8c5: fix order icons.Jul 6 2015, 7:07 PM

• Forrestbot added a project: WMF-deploy-2015-07-07_(1.26wmf13).Jul 6 2015, 8:00 PM

There are two things that still need to be corrected.

#1 - When you choose an item in the ToC, it should bring you to a point that's just a little above the top of the topic header. Right now, depending on which item you choose, you get a few different results. The screenshot shows the correct spacing:

#2 - The ToC item that you're currently on needs to be in bold, so that it's easy to keep track of where you currently are while you're scrolling up and down in the ToC. The item needs to stay bold while you scroll. It should also line up under the floating bar, to indicate that the bar is showing ToC items as you scroll.

Change 223472 had a related patch set uploaded (by Mooeypoo):
Correct placement of the scroll when we scroll to topic

https://gerrit.wikimedia.org/r/223472

Change 223472 merged by jenkins-bot:
Correct placement of the scroll when we scroll to topic

https://gerrit.wikimedia.org/r/223472

Mooeypoo mentioned this in rEFLW026066cd45aa: Correct placement of the scroll when we scroll to topic.Jul 8 2015, 12:56 AM

Diffusion mentioned this in rMEXT5e7145fe07f9: Updated mediawiki/extensions Project: mediawiki/extensions/Flow….Jul 8 2015, 12:57 AM

• Forrestbot added a project: WMF-deploy-2015-07-14_(1.26wmf14).Jul 8 2015, 1:00 AM

• DannyH closed this task as Resolved.Jul 10 2015, 5:34 PM

• DannyH moved this task from Product Review to Done on the Collaboration-Team-Sprint-E-Everywhere-2015-07-14 board.

Legoktm added a parent task: T100269: Flow OOUI + Data Model tickets (tracking).Jul 12 2015, 4:44 AM

Legoktm removed a parent task: T97442: Migrate Flow components to OO UI.

• DannyH moved this task from Current workboard to Resolved on the Collaboration-Team-Triage board.Jul 22 2015, 4:52 PM