Page MenuHomePhabricator

Tweaks to the pushpin icon design and functionality
Closed, ResolvedPublic

Description

I set a default edit filter and opened the filters menu. It showed the default filter I chose with an pin, which is nice. I clicked on the pin expecting it to remove it as my default, but it closed the menu rather than doing that. I think it'd be useful to add some functionality to that.

For a solution to this, please see Pau's post, below.

Event Timeline

Deskana created this task.Aug 13 2017, 3:49 PM
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptAug 13 2017, 3:49 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Deskana renamed this task from Clicking on the pin for a default filter should do something to Clicking on the pin for a default filter should do something (like remove it as default?).Aug 13 2017, 3:50 PM

If you simply remove the default (rather than replace it with a different default), it will fall back to the one-by-one preferences (e.g. hide minor by default). This is undesirable, since we're going to hide the one-by-one preferences.

This could do nothing or, I'd nominate, open the ... menu. @Pginer-WMF?

This particular pushpin instance was intended to be presented more like a marker than an action (T164128). Some adjustments that could help:

  • Make the size smaller. In the spec I was proposing to use 16x16px instead of the current 24x24px.
  • Use grey as the color. We can use Base20 (#54595D)
  • Use it as a shortcut for opening the menu, where the "default" status can be adjusted from. This provides a safe path for those trying to act on the mark to access related actions.
jmatazzoni renamed this task from Clicking on the pin for a default filter should do something (like remove it as default?) to Tweaks to the pushpin icon design and functionality.Aug 23 2017, 3:36 PM
jmatazzoni updated the task description. (Show Details)

OK, let's do what Pau says. Moving this to RFP.

This particular pushpin instance was intended to be presented more like a marker than an action (T164128). Some adjustments that could help:

  • Make the size smaller. In the spec I was proposing to use 16x16px instead of the current 24x24px.
  • Use grey as the color. We can use Base20 (#54595D)
  • Use it as a shortcut for opening the menu, where the "default" status can be adjusted from. This provides a safe path for those trying to act on the mark to access related actions.

The icon is coming from OOUI; we'll have to have overrides, but I think it's justified in this case (just pointing out we do override in this case.)

I'll take a look on how to properly implement this.

Change 373399 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Adjust puspin 'default' icon behavior and style

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

This particular pushpin instance was intended to be presented more like a marker than an action (T164128). Some adjustments that could help:

  • Make the size smaller. In the spec I was proposing to use 16x16px instead of the current 24x24px.

Done.

  • Use grey as the color. We can use Base20 (#54595D)

Can't directly change the color, so I've used opacity instead. opacity:0.5; seemed to be fairly good, but may require a little bit of adjustment later.

  • Use it as a shortcut for opening the menu, where the "default" status can be adjusted from. This provides a safe path for those trying to act on the mark to access related actions.

Done.

Change 373399 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Adjust pushpin 'default' icon behavior and style

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

@Pginer-WMF Please take a look if all looks fine.

(1) Current wmf.15 (the big icon) - the sizes of the icons (in the menu and when it's placed at the saved menu name)

After the fix - currently in betalabs:

(2) Regarding the behavior (a rather minor point): there is a little discrepancy between clicking on the pushpin icon and on the dotdotdot menu.

Click on the pushpin button - the menu will open. Click again - the menu won't close.
Click on the dotdotdot buton - the menu will open. Click again - the menu will close.

@Pginer-WMF Please take a look if all looks fine.
(1) Current wmf.15 (the big icon) - the sizes of the icons (in the menu and when it's placed at the saved menu name)

Based on the images, a couple of adjustments are needed:

  • The "..." icon should not be reduced in size. That is a regular button that should remain as it was before.
  • The small pushpin icon seems not to be vertically aligned, with respect to the line it occupies.

(2) Regarding the behavior (a rather minor point): there is a little discrepancy between clicking on the pushpin icon and on the dotdotdot menu.
Click on the pushpin button - the menu will open. Click again - the menu won't close.
Click on the dotdotdot buton - the menu will open. Click again - the menu will close.

That's ok, the pushpin is not intended as the main entry point to control the menu, just as a shortcut for users that may get lost trying to act on it.

Change 374434 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Target pushPin icon for size, not all icons

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

Whoops, my CSS selectors were too broad. Fixed in this commit.

Change 374434 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Target pushPin icon for size, not all icons

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

Re-checked - it seems that @Pginer-WMF comments have been integrated:

The "..." icon should not be reduced in size. That is a regular button that should remain as it was before.
The small pushpin icon seems not to be vertically aligned, with respect to the line it occupies.

QA Recommendation: Resolve

jmatazzoni closed this task as Resolved.Aug 29 2017, 4:43 PM