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

Assigned To

Authored By

	Jan_Dittrich
	Sep 15 2016, 7:50 AM

Description

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

Screenshot from 2016-09-15 09-09-58.png (73×183 px, 1 KB)

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.

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

Screenshot from 2016-09-15 09-09-58_ex.png (73×183 px, 1008 B)

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:

Screenshot from 2016-09-15 09-09-58_ex2.png (73×183 px, 1 KB)

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

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?

Details

	Subject	Repo	Branch	Lines +/-
	Add margin to pin button	mediawiki/extensions/RevisionSlider	master	+6 -2

Customize query in gerrit

Related Objects

Mentioned In: rERSL1bef0504296a: Add margin to pin button
rERSL995d95a52eb7: Add margin to pin button
T137186: Prevent revision tooltip from jumping when hovering over the bars

Event Timeline

Jan_Dittrich created this task.Sep 15 2016, 7:50 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 15 2016, 7:50 AM

Jan_Dittrich mentioned this in T137186: Prevent revision tooltip from jumping when hovering over the bars.Sep 15 2016, 9:08 AM

Jan_Dittrich updated the task description. (Show Details)Sep 15 2016, 9:12 AM

Addshore moved this task from Incoming to Revision Slider on the TCB-Team (now WMDE-TechWish) board.Sep 19 2016, 8:33 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 added a project: WMDE-QWERTY-Team-Experimental-Sprint.Sep 22 2016, 1:22 PM

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 added a project: WMDE-TechWish.Oct 24 2016, 8:13 AM

Tobi_WMDE_SW claimed this task.Oct 28 2016, 2:00 PM

Tobi_WMDE_SW moved this task from Proposed to Sprint ready on the WMDE-TechWish board.

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

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

gerritbot added a project: Patch-For-Review.Oct 28 2016, 2:03 PM

solved by https://gerrit.wikimedia.org/r/318543
this got changed in core, so it is blue now for a while already
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.

Tobi_WMDE_SW mentioned this in rERSL995d95a52eb7: Add margin to pin button.Oct 28 2016, 2:07 PM

Tobi_WMDE_SW moved this task from Sprint ready to Currently in sprint on the WMDE-TechWish board.Oct 28 2016, 2:08 PM

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.

In T145726#2760601, @Charlie_WMDE wrote:

@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!

In T145726#2760601, @Charlie_WMDE wrote:

@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.

rs_pin_chrome_nozoom.jpg (273×507 px, 10 KB)

If you zoom in, it looks fine:

rs_pin_chrome_zoom.jpg (271×493 px, 10 KB)

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.

Tobi_WMDE_SW mentioned this in rERSL1bef0504296a: Add margin to pin button.Nov 2 2016, 1:19 PM

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!

rs_pin_chrome_padding.jpg (286×563 px, 11 KB)

@Tobi_WMDE_SW @Addshore

looks awesome! \o/

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-TechWish board.

Tobi_WMDE_SW moved this task from Done to Demoed on the WMDE-TechWish 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

Tobi_WMDE_SW removed a project: WMDE-TechWish.Jun 7 2017, 12:02 PM

thiemowmde removed a project: TCB-Team (now WMDE-TechWish).Jan 7 2022, 3:08 PM

	F4470585: Screenshot from 2016-09-15 09-09-58.png
	Sep 15 2016, 7:50 AM

	F4470591: Screenshot from 2016-09-15 09-09-58_ex.png
	Sep 15 2016, 7:50 AM

	F4688310: rs_pin_ie.jpg
	Nov 2 2016, 1:03 PM

	F4688307: rs_pin_firefox.jpg
	Nov 2 2016, 1:03 PM

	F4685209: pasted_file
	Nov 1 2016, 5:22 PM

Minor visual refinements pin-button: state and marginClosed, ResolvedPublicActions

Description

Details

Related Objects

Event Timeline

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