-
Notifications
You must be signed in to change notification settings - Fork 1
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
[NO-MERGE] DLT-1689 add overlay scrollbars example #330
Conversation
036b572
to
7228dff
Compare
add scrollbars directive
c6e672a
to
4bfffa3
Compare
Are we able to show the scrollbar on mouseover of the scrollable region rather than when you actually start scrolling? I think this would make it a bit more obvious that the region is actually scrollable. |
Not really a problem at all, we've investigated native functionality before and found it was actually impossible to do what we needed to do.
We can certainly release this initially the way it is, however it would be nice if we had sort of alternative way to properly use events. Would it work if we had a directive as well as a component like we do for tooltip? The conversation view is a place where we would like to use this scrollbar if possible. (i know it's a mess) |
Yes, I meant the functionality, not the styles.
I would need more time to explore this possibility with a Scrollbar component, I wanted to first get some feedback to decide if it's worth to explore that. But yes, I could certainly continue with the investigation to explore that possibility. |
351f928
to
47427ec
Compare
Please add either the |
✔️ Deploy previews ready! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks nice!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm okay with this for now, maybe we can find a solution to the scroll events issue in the future.
The implementation was merged here: #391 |
Custom scrollbars POC
Jira: DLT-1689
Adds the dependency Overlay Scrollbars to Dialtone to see how it works and what functionality it allows.
I created and exported a new directive
DtScrollbarsDirective
, that can be used similar to theDtTooltipDirective
, just addingv-dt-scrollbars
to the component that would normally haveoverflow: auto
to allow scroll.The Vue wrapper that this library offers is only available for Vue 3, so it's not an option to use that for now.
Notice that when there are listeners to the scroll event in the element where we are adding the custom scrollbars, some changes would have to be made (see Emoji Picker).
I tested in:
Message Input ✅
Leftbar ✅
Check the code for Ubervoice here.
Emoji Picker ✅
Some changes were needed to make it work with the emoji picker, because the overlay scrollbars library adds some new elements to the DOM, and this component was using refs and attaching event handlers to the scrollable element.
When using this directive, the scrollable element is the second child of the element you attach the custom scrollbar to.
Conversation View ❌
When adding
v-dt-scrollbars
directive in theInfiniteList
the render gets stuck in an infinite loop, so the conversation is never rendered. I tried debugging this with no success, so this one might be a component where we can't add this directive for now.Advantages of using Overlays Scrollbars over native scrollbars
Disadvantages
Previous
![image](https://private-user-images.githubusercontent.com/24460973/336201842-a48c0de0-5e4d-4b1b-9601-e61bf00d007c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQwMzI3MDQsIm5iZiI6MTcyNDAzMjQwNCwicGF0aCI6Ii8yNDQ2MDk3My8zMzYyMDE4NDItYTQ4YzBkZTAtNWU0ZC00YjFiLTk2MDEtZTYxYmYwMGQwMDdjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDAxNTMyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlhMTEwMTFjYjNhMDNhYjI1YzNjMDBiOGYyY2VlNTM5ODdkMzc0M2YwOWZjMjE2ZGYzNzk5OWI1OGJiZGJhZmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.EG4PB4ofdoTZGjpPgSfYAKkJqCGGyRBWlvm6E89VL8w)
Without the directive, the element with id
d-emoji-picker-list
is the scrollable elementWith custom scrollbars
![image](https://private-user-images.githubusercontent.com/24460973/336202145-f439bed3-1a9e-4907-b6de-c35f59c58fe8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQwMzI3MDQsIm5iZiI6MTcyNDAzMjQwNCwicGF0aCI6Ii8yNDQ2MDk3My8zMzYyMDIxNDUtZjQzOWJlZDMtMWE5ZS00OTA3LWI2ZGUtYzM1ZjU5YzU4ZmU4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDAxNTMyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdhZGQ4OWNiNzdiZDI4YjI4YzQ3NWEwNDlhOTY1MmU1ZDk2Yzg1Mjk1MzE3ODAxZDg5NmI0NWFkZGU0MWM4MmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Fd0B-K1xSQQX39rJjGxMb6nKcUmvK-7H5sy_xwNe6Fs)
The element with id
d-emoji-picker-list
now has four divs inside:Accessibility
They give control over the contrast and can work both in light and dark mode.
The size can increase on hover (imitating the native behavior) for better accessibility. This is customizable too.
Keyboard navigation: the native behavior is supported. These are the guidelines (from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role):
I don't think this role is added, and I didn't find a way to add it so this might be a problem for screen readers.
Next Steps