Skip to content

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

Merged
dsmmcken merged 12 commits intomainfrom
dmckenzie_fix-card-flip
Oct 14, 2021
Merged

Fix card flip animation showing back-face in chrome#228
dsmmcken merged 12 commits intomainfrom
dmckenzie_fix-card-flip

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 mofojed and vbabich 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
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