Page MenuHomePhabricator

Edit pencil icon should support different Android view states
Closed, ResolvedPublic

Description

The edit pencil icons are static and do not have visual indication of states the way other Android drawables do. This task is to add at least a pressed state so they don't feel like a mock.

Event Timeline

Niedzielski raised the priority of this task from to Low.
Niedzielski updated the task description. (Show Details)
Niedzielski added a subscriber: Niedzielski.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 19 2015, 4:06 PM
Niedzielski set Security to None.
Niedzielski moved this task from To Do to Doing on the Mobile-App-Sprint-57-Android board.

Change 213760 had a related patch set uploaded (by Niedzielski):
Add active state to article edit pencil icons

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

Change 213759 had a related patch set uploaded (by Niedzielski):
Add active state to article edit pencil icons

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

Change 213759 merged by Mholloway:
Add active state to article edit pencil icons

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

Change 216869 had a related patch set uploaded (by Niedzielski):
Center edit pencil icon active state

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

Before and after (second) patch shots

Before:

After:

Change 216869 merged by jenkins-bot:
Center edit pencil icon active state

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

Change 213760 merged by jenkins-bot:
Add active state to article edit pencil icons

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

I haven't seen any patterns of a grey square in the bg representing a pressed state to a user.

These are the kind of things that we should follow material design guidelines on:
See Responsive Interaction: https://www.google.com/design/spec/animation/responsive-interaction.html#

Dbrant added a subscriber: Dbrant.Jun 16 2015, 11:33 PM

@Niedzielski, After discussing with @Vibhabamba, it will be sufficient to simply change the background highlight to a circle instead of a square. This is probably accomplished in CSS most easily by adding a "border-radius" to your "active" style.

@Niedzielski - Just a quick note on color

One of these values will make us a bit consistent with any future work around responsive interaction
200 #EEEEEE
300 #E0E0E

Taken from - https://www.google.com/design/spec/style/color.html#color-color-palette

Change 219082 had a related patch set uploaded (by Niedzielski):
Use Material-ish edit pencil background

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

Change 219083 had a related patch set uploaded (by Niedzielski):
Use Material-ish edit pencil background

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

Change 219083 merged by jenkins-bot:
Use Material-ish edit pencil background

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

Change 219082 merged by jenkins-bot:
Use Material-ish edit pencil background

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

Vibhabamba added a comment.EditedJun 18 2015, 9:05 PM

@Niedzielski Can I request you to add a screenshot?
Would like to have design signoff done before last day of sprint.

Looks good for now. Signed off by design.

Checked on 2.0.103-alpha-2015-06-19 on Samsung Tablet Ce0168(Android 4.0.4)
No grayish background is displayed behind the pencil icon.

Checked 2.0.105-alpha-2015-07-08 on Nexus 5 API 22 x86 and Samsung Galaxy(android 4.3 GT-I9300).

Dbrant closed this task as Resolved.Jul 21 2015, 11:59 AM