Page MenuHomePhabricator
Create Task
Maniphest T78371

Apply consistent animation and timings to controls and transitions (tracking)
Closed, ResolvedPublic
Actions

Description

Tracking task for mw.ui style control animations

Details

SubjectRepoBranchLines +/-
MediaWiki Theme: input: Use variable for transition time and easing functionoojs/uimaster+3 -2
MediaWiki Theme: radio/checkbox: Use variable for transition time and easing functionoojs/uimaster+3 -2
MediaWiki Theme: Use variable for transition time and easing functionoojs/uimaster+10 -9
Customize query in gerrit

Related Objects
Search...

Event Timeline

• Jaredzimmerman-WMF created this task.Dec 12 2014, 4:44 AM
• Jaredzimmerman-WMF assigned this task to • Prtksxna.
• Jaredzimmerman-WMF raised the priority of this task from to Medium.
• Jaredzimmerman-WMF updated the task description. (Show Details)
• Jaredzimmerman-WMF added a project: UI-Standardization.
• Jaredzimmerman-WMF changed Security from none to None.
• Jaredzimmerman-WMF added a subtask: T78370: Animate state changes of radio control.
• Jaredzimmerman-WMF added a subtask: T77949: Rationalize how (CSS) animations, transitions and timing are used.
• Jaredzimmerman-WMF subscribed.
• Jaredzimmerman-WMF renamed this task from Apply consistent animation and timings to controls to Apply consistent animation and timings to controls and transitions.Dec 12 2014, 5:10 AM
• Jaredzimmerman-WMF added a subtask: T61185: Echo: Red Notifications Badge should animate when there are new messages.
• Jaredzimmerman-WMF added a subtask: T1158: Polish : White overlay for search on mobile should quickly animate in, and out rather than flashing.
• Prtksxna added a project: Notifications.Dec 12 2014, 5:15 AM

I don't think Notifications tasks should block anything on UI-Standardization.

• Prtksxna removed a project: Notifications.Dec 12 2014, 5:15 AM
Florian closed subtask T1158: Polish : White overlay for search on mobile should quickly animate in, and out rather than flashing as Resolved.Dec 18 2014, 11:56 AM
• Prtksxna closed subtask T78370: Animate state changes of radio control as Resolved.Jan 5 2015, 10:49 PM
• Prtksxna closed subtask T78372: animating drawing of check mark in checkbox with simple SVG animation as Resolved.Jan 9 2015, 1:10 AM
• Mattflaschen-WMF added a project: Notifications.EditedJan 11 2015, 4:35 AM
• Mattflaschen-WMF added subscribers: • Prtksxna, • Mattflaschen-WMF.
In T78371#843591, @Prtksxna wrote:

I don't think Notifications tasks should block anything on UI-Standardization.

My understanding is UI-Standardization is a cross-project tag (indeed, that's part of the purpose). It says, "The Front-End Standardisation workstream covers all interfaces of MediaWiki itself and (at least) Wikimedia-supported MediaWiki skins and extensions. The principle objective is to provide a clean, comprehensive, well-architected front-end infrastructure so that user interface, interaction and skinning changes can be consistently applied in a single, central location. The workstream also covers applying the new styling changes being led by the Wikimedia UX Team to these interfaces."

In many cases, to achieve standardization, changes need to be made in multiple projects (last sentence of above quote).

So I think having such a blocks/blocked-by relationship could make sense in some cases.

Quiddity renamed this task from Apply consistent animation and timings to controls and transitions to Apply consistent animation and timings to controls and transitions (tracking).Jan 11 2015, 4:43 AM
Quiddity added a project: Tracking-Neverending.
Quiddity removed a project: Notifications.
• Prtksxna added a comment.Jan 12 2015, 11:35 PM
In T78371#968922, @Mattflaschen wrote:

In many cases, to achieve standardization, changes need to be made in multiple projects (last sentence of above quote).

So I think having such a blocks/blocked-by relationship could make sense in some cases.

I understand now.

• Mattflaschen-WMF unsubscribed.Jan 15 2015, 3:50 AM
• Prtksxna added a project: OOUI.Feb 11 2015, 2:20 PM

In OOUI only radios and checkboxes have a transition time of 0.2s. All other elements are at 0.1s. But, if you see the elements changing state there isn't much of a visual difference. This could be because of the easing function we are using in radios and checkboxes where the icon reaches more than its full size is almost half the time (which is 1s) and it uses the rest of the time to come to its correct size.

I wanted to use a variable for the time but it seems that the interpolation function will have to be part of this too.

NOTE: The progressBarWidget is an exception to this as it uses 2s. Its more of an animation than transition anyway.
Ricordisamoa subscribed.Feb 11 2015, 2:31 PM
gerritbot subscribed.May 1 2015, 1:14 PM

Change 208102 had a related patch set uploaded (by Prtksxna):
MediaWiki Theme: Use variable for transition time and easing function

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

gerritbot added a project: Patch-For-Review.May 1 2015, 1:14 PM

Change 208103 had a related patch set uploaded (by Prtksxna):
MediaWiki Theme: radio/checkbox: Use variable for transition time and easing function

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

gerritbot added a comment.May 1 2015, 1:14 PM

Change 208104 had a related patch set uploaded (by Prtksxna):
MediaWiki Theme: input: Use variable for transition time and easing function

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

gerritbot added a comment.May 1 2015, 7:50 PM

Change 208102 merged by jenkins-bot:
MediaWiki Theme: Use variable for transition time and easing function

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

gerritbot added a comment.May 1 2015, 7:50 PM

Change 208103 merged by jenkins-bot:
MediaWiki Theme: radio/checkbox: Use variable for transition time and easing function

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

gerritbot added a comment.May 1 2015, 7:51 PM

Change 208104 merged by jenkins-bot:
MediaWiki Theme: input: Use variable for transition time and easing function

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

• Prtksxna mentioned this in rGOJU17ed4c2613ff: MediaWiki Theme: Use variable for transition time and easing function.May 1 2015, 7:51 PM
• Prtksxna mentioned this in rGOJU31ca653c4b72: MediaWiki Theme: radio/checkbox: Use variable for transition time and easing….
• Prtksxna mentioned this in rGOJU8291c161ea06: MediaWiki Theme: input: Use variable for transition time and easing function.
Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.May 4 2015, 6:06 PM
Jdforrester-WMF closed this task as Resolved.Jun 3 2015, 9:28 PM
Jdforrester-WMF removed subtasks: T61185: Echo: Red Notifications Badge should animate when there are new messages, T77949: Rationalize how (CSS) animations, transitions and timing are used.
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.11.1); removed Patch-For-Review.
Jdforrester-WMF moved this task from Doing to Reviewing on the OOUI board.Jun 10 2015, 2:27 AM
Danny_B moved this task from Unsorted to OOUI on the UI-Standardization board.May 20 2016, 8:54 PM
Danny_B moved this task from Tag to Should be Goal instead on the Tracking-Neverending board.Aug 16 2016, 1:10 AM
Volker_E subscribed.Aug 16 2016, 1:13 AM
Izno moved this task from Should be Goal instead to Other completed tasks on the Tracking-Neverending board.Feb 16 2018, 3:55 PM
Liuxinyu970226 moved this task from Other completed tasks to Transition completed / Archived on the Tracking-Neverending board.Oct 27 2018, 11:55 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits