Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Spritelab] UI Polish for pause button #38849

Merged
merged 2 commits into from
Feb 2, 2021
Merged

Conversation

ajpal
Copy link
Contributor

@ajpal ajpal commented Feb 2, 2021

No functional changes, just UI updates.
From the JIRA ticket:

  • it should be grayed out before the program runs
  • when paused, the (right/left/up/down) arrow buttons should be grayed out
  • change the color and shape of the button to a green blue circle (to differentiate it from the arrow buttons)

Before
Feb-01-2021 17-25-25

After
Feb-01-2021 17-25-12

Links

Testing story

Reviewer Checklist:

  • Tests provide adequate coverage
  • Privacy and Security impacts have been assessed
  • Code is well-commented
  • New features are translatable or updates will not break translations
  • Relevant documentation has been added or updated
  • User impact is well-understood and desirable
  • Pull Request is labeled appropriately
  • Follow-up work items (including potential tech debt) are tracked and linked

@ajpal ajpal requested a review from a team February 2, 2021 01:30
Comment on lines +47 to +51
const buttonStyle = {
...styles.button,
...(this.props.isRunning && styles.runningColor),
...(this.props.isPaused && styles.pausedColor)
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

@breville
Copy link
Member

breville commented Feb 2, 2021

Does the button get slightly wider when paused?

Neat idea to use a circle to differentiate against the other buttons. It does seem we should unify on a design decision for play/pause across our system before releasing this widely.

@ajpal
Copy link
Contributor Author

ajpal commented Feb 2, 2021

Does the button get slightly wider when paused?

Wow, nice catch! It was a difference of ~1 pixel!
image image

Restructured things a bit and now it's always 42x42
imageimage

@ajpal ajpal merged commit edbeb7c into staging Feb 2, 2021
@ajpal ajpal deleted the feb1-spritelab-pause-polish branch February 2, 2021 19:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants