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

Fix card flip animation showing back-face in chrome #228

Merged
merged 12 commits into from
Oct 14, 2021

Conversation

dsmmcken
Copy link
Contributor

Remove react-card-flip component and replace with basic css, also reduce complexity of markup to make transforms cleaner. Card was showing as backwards when the front face was showing, but UI was short such that the backface had overflow scrolling. Probably a bug triggered by chrome, but reducing complexity solved it.

Also adds special logic to Button.tsx component, to handle tooltips on disabled buttons.

Fixes DH-11657

@dsmmcken dsmmcken requested review from vbabich and mofojed October 12, 2021 15:57
@dsmmcken dsmmcken marked this pull request as draft October 12, 2021 16:09
@dsmmcken
Copy link
Contributor Author

Extracted as component, also added some z-index and overflow shenanigan while animation is happening, because the perspective transform can actually trigger overflow, and z-index, so that it is always on top of other adjacent panels during flip animation.

@dsmmcken dsmmcken marked this pull request as ready for review October 13, 2021 15:56
@dsmmcken dsmmcken requested a review from vbabich October 13, 2021 15:56
@dsmmcken dsmmcken changed the title Remove react-card-flip Fix card flip animation showing back-face in chrome Oct 13, 2021
packages/components/src/CardFlip.tsx Outdated Show resolved Hide resolved
packages/components/src/CardFlip.tsx Outdated Show resolved Hide resolved
dsmmcken and others added 2 commits October 14, 2021 10:09
Co-authored-by: Mike Bender <mikebender@deephaven.io>
@dsmmcken dsmmcken requested a review from mofojed October 14, 2021 14:12
@dsmmcken dsmmcken merged commit 4226ebd into main Oct 14, 2021
@dsmmcken dsmmcken deleted the dmckenzie_fix-card-flip branch October 14, 2021 15:42
@mofojed mofojed added bug Something isn't working web-client-ui labels Oct 14, 2021
mofojed added a commit to mofojed/web-client-ui that referenced this pull request Oct 14, 2021
  * [deephaven#232](deephaven#232) Fix notebook functionality ([@mofojed](https://github.com/mofojed))
* `code-studio`, `components`, `dashboard-core-plugins`
  * [deephaven#228](deephaven#228) Fix card flip animation showing back-face in chrome ([@dsmmcken](https://github.com/dsmmcken))
* `grid`
  * [deephaven#233](deephaven#233) Fix scroll bar not working in the corner if only one scroll direction ([@mofojed](https://github.com/mofojed))
* `dashboard-core-plugins`
  * [deephaven#230](deephaven#230) Fix up getTableMapForDashboard selector ([@mofojed](https://github.com/mofojed))

- Don ([@dsmmcken](https://github.com/dsmmcken))
- Mike Bender ([@mofojed](https://github.com/mofojed))
@mofojed mofojed mentioned this pull request Oct 14, 2021
mofojed added a commit that referenced this pull request Oct 14, 2021
* [#232](#232) Fix notebook functionality ([@mofojed](https://github.com/mofojed))
* `code-studio`, `components`, `dashboard-core-plugins`
  * [#228](#228) Fix card flip animation showing back-face in chrome ([@dsmmcken](https://github.com/dsmmcken))
* `grid`
  * [#233](#233) Fix scroll bar not working in the corner if only one scroll direction ([@mofojed](https://github.com/mofojed))
* `dashboard-core-plugins`
  * [#230](#230) Fix up getTableMapForDashboard selector ([@mofojed](https://github.com/mofojed))

- Don ([@dsmmcken](https://github.com/dsmmcken))
- Mike Bender ([@mofojed](https://github.com/mofojed))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working web-client-ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants