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/App store description overflow CSS #441

Merged
merged 4 commits into from
Sep 15, 2021

Conversation

ShobhitAd
Copy link
Contributor

@ShobhitAd ShobhitAd commented Sep 10, 2021

Fixes #440

Testing Plan

  • I have verified that I have not introduced new warnings in this PR (or explain why below)
  • I have tested this PR against Core and verified behavior (if applicable, if not applicable, explain why below).

Core Tests

Install and uninstall the "Hello Webengine" app

Core version tested against: release/8.0.0 (smartdevicelink/sdl_core@5da5770)

Summary

  • Change .alert-top h4 overflow value to "auto". The previous value ("scroll") would always display scrollbars, whether or not any content is actually clipped.
  • Fix deafult click handler for grayed out app in app store
Bug Fixes

Currently clicking an installed(grayed out) app tile in the app store results in a console error

Uncaught TypeError: p is not a function
    at onClick (HScrollMenuItem.js:73)
    at onClick (Link.js:37)
    at Object.u (react-dom.production.min.js:14)
    at d (react-dom.production.min.js:14)
    at react-dom.production.min.js:14
    at y (react-dom.production.min.js:15)
    at at (react-dom.production.min.js:52)
    at ot (react-dom.production.min.js:51)
    at ut (react-dom.production.min.js:52)
    at dt (react-dom.production.min.js:56)

This PR fixes the default click handler for the menuItem.greyOut case

CLA

@@ -63,7 +63,7 @@
max-height: calc((#{$master-height} - 75px) * 0.6);

h4 {
overflow: scroll;
overflow: auto;
Copy link
Collaborator

Choose a reason for hiding this comment

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

With auto I cannot scroll down on an alert with too much text.

For ex when I send this alert I can tell the text continues down past the bottom of the container but I cannot read that text or scroll down to it.

 Alert {"alertText1":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibu"}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not seeing a scroll bar on my end, even on the latest relase/0.11.0 commit, for an alert request with that value.

I don't think that alertText* should be affected by this PR since the change relates to h4 whereas all alert text fields are p elements
Screenshot from 2021-09-14 22-50-55

@iCollin
Copy link
Collaborator

iCollin commented Sep 13, 2021

It seems to me that this bug is due to my change as part of the Scrollable Message implementation: https://github.com/smartdevicelink/generic_hmi/pull/394/files#diff-086204f81abae904e396dcfbfcfe45acdffa9541673ff56447fe45b3b8063118R10

I made it possible for the Scrollable Message scroll bar to still be visible, not realizing that it will affect other interactions. I suppose this should be modified to affect a smaller scope.

@ShobhitAd
Copy link
Contributor Author

It seems to me that this bug is due to my change as part of the Scrollable Message implementation: https://github.com/smartdevicelink/generic_hmi/pull/394/files#diff-086204f81abae904e396dcfbfcfe45acdffa9541673ff56447fe45b3b8063118R10

I made it possible for the Scrollable Message scroll bar to still be visible, not realizing that it will affect other interactions. I suppose this should be modified to affect a smaller scope.

Unfortunately, I'm not able to overwrite the webkit-scrollbar display property in the .scrollableText class after reverting the change https://github.com/smartdevicelink/generic_hmi/pull/394/files#diff-086204f81abae904e396dcfbfcfe45acdffa9541673ff56447fe45b3b8063118R10.

I did find that removing https://github.com/smartdevicelink/generic_hmi/pull/441/files#diff-086204f81abae904e396dcfbfcfe45acdffa9541673ff56447fe45b3b8063118L10 did not affect the visibility of scrollbars for other interactions (Alert, AppStore, ScrollableMessage, etc.) so I removed that section and changed the overflow value for .appstore-menu to "hidden" in befb015

Copy link
Collaborator

@iCollin iCollin left a comment

Choose a reason for hiding this comment

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

looks good otherwise!

Co-authored-by: Collin <iCollin@users.noreply.github.com>
@ShobhitAd ShobhitAd merged commit 984c7c7 into release/0.11.0 Sep 15, 2021
@ShobhitAd ShobhitAd deleted the fix/app_store_description_scrollbar branch September 15, 2021 19:04
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.

2 participants