Page MenuHomePhabricator

Minor visual refinements pin-button: state and margin
Closed, ResolvedPublic

Description

Story: As a user I would like to see easily in which state the pin button of the revision slider is.

There are some minor enhancements I would like to propose. They may be not possible in the OOUI framework. If that is the case, please tell me, so I can consider such things in the future.

  1. Margin:

The button (which shape is only visible when activated) is as big as the title bar of the revision slider. Thus, the button looks not very button-ish anymore if it is activated
If we make it 2 or 3 px smaller on each side it would look more like something you can click again

  1. Active status: The dark gray as the activated status seems unusual to me. According to the OOUI demo it seems to be darkblue.(see ToggleButtonWidget (icon only)‎)

So darkblue might be better according to the styleguide.

Problem is: It looks very heavvy:

Does anyone of you know any alternative way or could subscribe someone who knows about the visual design of OOUI well?

  1. active status icon: If active, the icon should look pinned.

@Charlie_WMDE – I remember you designed once a "pinned pin" icon. If I'm right, could you link it here?

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 15 2016, 7:50 AM
Jan_Dittrich updated the task description. (Show Details)Sep 15 2016, 9:12 AM
Addshore added a project: Revision-Slider.

Active status: The dark gray as the activated status seems unusual to me. According to the OOUI demo it seems to be darkblue.(see ToggleButtonWidget (icon only)‎)

Looks like this colour change has happened recently (was relesed in version 0.17.9 released a week ago). MediaWiki's core switched to use the new version already, so I am guessing WMF wikis will get new colours this week (Wikipedias on Thursday evening European time). So I believe there is no action required regarding the colour in "enabled" state.
Of course margin change won't happen automatically and it still needs to be done.

Original icons designed by @Charlie_WMDE were posted in https://phabricator.wikimedia.org/T142196#2539938

Sorry for the late answer. Didn't get around to catching up on phabricator sooner. Thanks for linking the files.
If there's anything else I can help with, I'm ping-able again :)

Lea_WMDE moved this task from Incoming to Doing on the Revision-Slider board.Sep 22 2016, 1:26 PM
Tobi_WMDE_SW moved this task from Doing to Backlog on the Revision-Slider board.Sep 27 2016, 10:17 AM
Tobi_WMDE_SW moved this task from Proposed to Sprint ready on the WMDE-QWERTY-Team board.

Change 318543 had a related patch set uploaded (by Tobias Gritschacher):
Add margin to pin button

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

  1. solved by https://gerrit.wikimedia.org/r/318543
  2. this got changed in core, so it is blue now for a while already
  3. I'm unsure about this as for the current size of the icon, the difference between unpinned and pinned can hardly be recognized. Probably not worth the effort of adding another icon.

See the new button in

introduced in https://gerrit.wikimedia.org/r/#/c/318543/

If this gets approved by design then we can +2 it straight away!
@Jan_Dittrich @Charlie_WMDE

@Addshore is the change a slight border to the button? I can hardly see it and it seems to only be on top. Is this correct?

Would it be possible to have it look more like in the mock in the description? With a visibly clearer border on all sides.

@Addshore is the change a slight border to the button? I can hardly see it and it seems to only be on top. Is this correct?
Would it be possible to have it look more like in the mock in the description? With a visibly clearer border on all sides.

I have commented on the CR!

@Addshore is the change a slight border to the button? I can hardly see it and it seems to only be on top. Is this correct?
Would it be possible to have it look more like in the mock in the description? With a visibly clearer border on all sides.

@Charlie_WMDE
IMO this is a Chrome-only issue. In Chrome without zooming in, it looks like in @Addshore's example.


If you zoom in, it looks fine:

In Firefox it also looks fine:

And even in Internet Explorer it seems to work:

So, @Charlie_WMDE, should I add still more space there? I could increase it a little bit but adding too much it also starts to look odd again. Also, it won't solve the Chrome issue.

Ok, @Charlie_WMDE, I've added some additional padding now in https://gerrit.wikimedia.org/r/#/c/318543/2 and it now seems to look fine in Chrome too!

Change 318543 merged by jenkins-bot:
Add margin to pin button

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

Addshore closed this task as Resolved.Nov 3 2016, 10:46 AM
Addshore moved this task from Currently in sprint to Done on the WMDE-QWERTY-Team board.
Tobi_WMDE_SW moved this task from Done to Demoed on the WMDE-QWERTY-Team board.Nov 8 2016, 3:11 PM
Tobi_WMDE_SW moved this task from Backlog to Done on the Revision-Slider board.Dec 2 2016, 12:39 PM