Page MenuHomePhabricator
Create Task
Maniphest T158027

MediaWiki theme: SelectFileWidget (with drop target): Align with WikimediaUI color palette and provide smoother UI pattern when dropping files
Closed, ResolvedPublic
Actions

Assigned To
Volker_E
Authored By
Volker_E
Feb 14 2017, 1:53 AM
Tags
Referenced Files
F5627908: T158027 SelectFileWidget Media Upload Dialog VE - Wikipedia 2017-02-13.png
Feb 14 2017, 5:40 AM
F5627821: T158027 _after screencast 2017-02-13.mp4
Feb 14 2017, 5:40 AM
F5627883: T158027 SelectFileWidget to align with color palette _after OOjs UI Demos 2017-02-13.png
Feb 14 2017, 5:40 AM
F5626870: T158027 screencast _before 2017-02-13.mp4
Feb 14 2017, 3:51 AM
F5626848: T158027 SelectFileWidget to align with color palette _ OOjs UI Demos 2017-02-13.png
Feb 14 2017, 1:56 AM
Subscribers
Aklapper
Jdforrester-WMF
matmarex
Pginer-WMF
• Prtksxna
Volker_E

Description

SelectFileWidget with drop target as of v0.19.1 is (https://gerrit.wikimedia.org/r/#/c/337534/ & https://gerrit.wikimedia.org/r/#/c/337540/ currently under way) the last widget using a color (#eee) not part of the WikimediaUI color palette M82.

v0.19.1proposed
T158027 SelectFileWidget to align with color palette _ OOjs UI Demos 2017-02-13.png (798×654 px, 92 KB)
T158027 SelectFileWidget to align with color palette _after OOjs UI Demos 2017-02-13.png (587×661 px, 59 KB)
Video beforeafter
T158027 screencast _before 2017-02-13.mp4485 KBDownload
T158027 _after screencast 2017-02-13.mp4707 KBDownload

Expected solution:
Align SelectFileWidget with drop target to the color palette and to UX patterns elsewhere and finalize turning fixed color values into variables in MediaWiki theme.

Another take of the widget in proposed action at the Media Upload dialog.

T158027 SelectFileWidget Media Upload Dialog VE - Wikipedia 2017-02-13.png (434×500 px, 56 KB)

Details

SubjectRepoBranchLines +/-
MediaWiki theme: SelectFileWidget drop target aligned to UX patternsoojs/uimaster+22 -10
Customize query in gerrit

Related Objects
Search...

Event Timeline

Volker_E created this task.Feb 14 2017, 1:53 AM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptFeb 14 2017, 1:53 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E updated the task description. (Show Details)Feb 14 2017, 1:56 AM
Volker_E triaged this task as Medium priority.Feb 14 2017, 3:51 AM
Volker_E updated the task description. (Show Details)
Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.
Volker_E added a parent task: T148708: Replace abandoned colors in current WMF/Wikimedia products with WikimediaUI palette colors (tracking).Feb 14 2017, 3:56 AM
Volker_E updated the task description. (Show Details)
gerritbot subscribed.Feb 14 2017, 5:03 AM

Change 337542 had a related patch set uploaded (by VolkerE):
MediaWiki theme: SelectFileWidget drop target aligned to UX patterns

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

gerritbot added a project: Patch-For-Review.Feb 14 2017, 5:03 AM
Volker_E moved this task from Backlog to Review on the UI-Standardization-Kanban board.Feb 14 2017, 5:08 AM
Volker_E updated the task description. (Show Details)Feb 14 2017, 5:40 AM
Volker_E added a comment.Feb 14 2017, 5:43 AM

In the proposed solution the drop area is not greyed out, but a normal background similar to a TextInputWidget. On drop it turns light blue similar to :active menu item on a soft transition.
Feedback welcome!

Pginer-WMF added a comment.Feb 14 2017, 10:10 AM

The highlight works well.
My only concern was the area being less noticeable, but with the more realistic example (F5627908) seems it may still work.

Volker_E added a comment.Feb 14 2017, 5:36 PM

@Pginer-WMF Thanks. I was a bit concerned about it as well, due to the button in the center, the distinct dashed border-style and somewhat similarity to other widgets like TextInputWidget, I'm pretty convinced it's sufficient. Let's revisit in case of opposing voices.

One minor thing, that we could consider, is if we gonna change the cursor (on desktop) on drop target :hover to pointer as clicking is bound to action of opening the upload file dialog and it might be clearer that there is an action bound when the cursor is set to pointer.

Volker_E moved this task from Backlog to Reviewing on the OOUI board.Feb 15 2017, 12:54 AM
gerritbot added a comment.Feb 15 2017, 9:00 PM

Change 337542 merged by jenkins-bot:
MediaWiki theme: SelectFileWidget drop target aligned to UX patterns

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

Volker_E closed this task as Resolved.Feb 15 2017, 9:03 PM
Volker_E moved this task from Reviewing to OOjs-UI-0.19.3 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.19.3); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.
Volker_E moved this task from Review to Done on the UI-Standardization-Kanban board.Apr 7 2017, 12:11 AM
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