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

Menu panel tweaks #684

Merged
merged 7 commits into from Apr 10, 2019

Conversation

Projects
None yet
2 participants
@bpierre
Copy link
Member

bpierre commented Apr 9, 2019

Borders: consistent colors + use of 1px border vs. height (browser engines round these differently).

Preferences button: the button is now always left aligned + fix inner spacing.

System apps toggle:

  • The arrow is now next to the label, vertically aligned, points in the direction of the action (opposite), and is animated.
  • The toggle button has an active state.
  • Transition + cosmetic tweaks.

Note about the toggle transition: the plan is to improve it later, after having moved to the latest version of react-spring. I think it could work better visually, and I’d also like it to feel more snappy, but in the react-spring version we are using, keyframe transitions seem to wait for the current step to finish before cancelling the transition. I want to check if it gets fixed after an upgrade before trying an alternative approach.
Edit: moved back to a single step transition.

MenuPanel tweaks
- Consistent use of 1px border vs. height (browser engines round the values
  differently).

System apps toggle:

- The arrow is now next to the label, points in the direction of the
  action, and is animated.
- Added an active state on the toggle button.
- Some transition and minor tweaks.

@bpierre bpierre requested review from sohkai and dizzypaty Apr 9, 2019

bpierre added some commits Apr 9, 2019

@sohkai

sohkai approved these changes Apr 9, 2019

Copy link
Member

sohkai left a comment

Looks good aside from the one visual bit on the transition!

right: '0',
bottom: '0',
boxShadow: '0 1px 1px rgba(0, 0, 0, 0.1)',
opacity: showBorder,

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 9, 2019

Member

I think this is what's causing the screenshot below, but I find this box shadow quite distracting on the open/close transition:

Screen Shot 2019-04-09 at 8 15 02 PM

This comment has been minimized.

Copy link
@bpierre

bpierre Apr 9, 2019

Author Member

Yes, the idea is to elevate the toggle, so that the content slides from underneath it, like a drawer. It is to prevent it to look like the content is just “disappearing in the background” at a specific point. I made it more subtle + in a single step (so that the transition reacts instantly): it should work better now 👍

bpierre added some commits Apr 9, 2019

@sohkai

sohkai approved these changes Apr 10, 2019

Copy link
Member

sohkai left a comment

❤️ the new transition!

@bpierre bpierre merged commit 9334b19 into master Apr 10, 2019

2 of 4 checks passed

License Compliance FOSSA is analyzing this commit
Details
continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
license/cla Contributor License Agreement is signed.
Details

@bpierre bpierre deleted the menu-tweaks branch Apr 10, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.