status-desktop
status-desktop copied to clipboard
status-im
fix(Profile/ContactsView): removed unecessary scroll bar
Closes #6262
What does the PR do
rProfile/ContactsView emoved unecessary scroll bar
Affected areas
ContactsView
Screenshot of functionality (including design for comparison)
https://user-images.githubusercontent.com/31625338/185423672-a2182c80-33fb-4a57-972d-2a32cb50e7a7.mov
Jenkins Builds
Click to see older builds (39)
| :grey_question: | Commit | :hash: | Finished (UTC) | Duration | Platform | Result |
|---|---|---|---|---|---|---|
| :heavy_check_mark: | 044a2700 | #1 | 2022-08-18 14:53:36 | ~10 min | macos |
:package:dmg |
| :x: | 044a2700 | #1 | 2022-08-18 14:59:31 | ~15 min | e2e |
:page_facing_up:log |
| :heavy_check_mark: | 044a2700 | #1 | 2022-08-18 15:03:17 | ~19 min | linux |
:package:tgz |
| :heavy_check_mark: | 044a2700 | #1 | 2022-08-18 15:19:49 | ~36 min | windows |
:package:exe |
| :interrobang: | 60259e43 | #1 | 2022-09-01 14:01:52 | ~4 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | 60259e43 | #2 | 2022-09-01 14:09:28 | ~12 min | linux |
:package:tgz |
| :heavy_check_mark: | 60259e43 | #2 | 2022-09-01 14:11:45 | ~14 min | macos |
:package:dmg |
| :x: | 60259e43 | #2 | 2022-09-01 14:16:38 | ~14 min | e2e |
:page_facing_up:log |
| :heavy_check_mark: | 60259e43 | #2 | 2022-09-01 14:23:19 | ~25 min | windows |
:package:exe |
| :interrobang: | b3dfd243 | #2 | 2022-09-01 14:33:22 | ~5 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | b3dfd243 | #3 | 2022-09-01 14:39:52 | ~11 min | linux |
:package:tgz |
| :heavy_check_mark: | b3dfd243 | #3 | 2022-09-01 14:52:33 | ~24 min | windows |
:package:exe |
| :heavy_check_mark: | b3dfd243 | #3 | 2022-09-01 15:27:04 | ~59 min | macos |
:package:dmg |
| :x: | b3dfd243 | #3 | 2022-09-01 16:13:53 | ~9 min | e2e |
:page_facing_up:log |
| :interrobang: | 8241a645 | #3 | 2022-09-09 16:02:22 | ~5 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | 8241a645 | #4 | 2022-09-09 16:09:19 | ~12 min | linux |
:package:tgz |
| :heavy_check_mark: | 8241a645 | #4 | 2022-09-09 16:10:40 | ~13 min | macos |
:package:dmg |
| :heavy_check_mark: | 8241a645 | #4 | 2022-09-09 16:21:34 | ~24 min | windows |
:package:exe |
| :x: | 8241a645 | #4 | 2022-09-09 17:50:46 | ~10 min | e2e |
:page_facing_up:log |
| :interrobang: | c2dad313 | #4 | 2022-09-12 09:03:16 | ~5 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | c2dad313 | #5 | 2022-09-12 09:09:13 | ~11 min | linux |
:package:tgz |
| :heavy_check_mark: | c2dad313 | #5 | 2022-09-12 09:10:53 | ~12 min | macos |
:package:dmg |
| :heavy_check_mark: | c2dad313 | #5 | 2022-09-12 09:22:57 | ~24 min | windows |
:package:exe |
| :interrobang: | 09fe3d90 | #5 | 2022-09-13 10:23:33 | ~4 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | 09fe3d90 | #6 | 2022-09-13 10:30:26 | ~11 min | linux |
:package:tgz |
| :heavy_check_mark: | 09fe3d90 | #6 | 2022-09-13 10:30:48 | ~12 min | macos |
:package:dmg |
| :heavy_check_mark: | 09fe3d90 | #6 | 2022-09-13 10:44:38 | ~25 min | windows |
:package:exe |
| :interrobang: | 85cc3d6a | #6 | 2022-09-14 16:09:22 | ~4 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | 85cc3d6a | #7 | 2022-09-14 16:15:08 | ~10 min | macos |
:package:dmg |
| :heavy_check_mark: | 85cc3d6a | #7 | 2022-09-14 16:15:14 | ~10 min | linux |
:package:tgz |
| :heavy_check_mark: | 85cc3d6a | #7 | 2022-09-14 16:26:56 | ~22 min | windows |
:package:exe |
| :interrobang: | 513fbdf7 | #7 | 2022-09-15 10:15:40 | ~4 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | 513fbdf7 | #8 | 2022-09-15 10:21:45 | ~10 min | macos |
:package:dmg |
| :heavy_check_mark: | 513fbdf7 | #8 | 2022-09-15 10:22:21 | ~11 min | linux |
:package:tgz |
| :heavy_check_mark: | 513fbdf7 | #8 | 2022-09-15 10:34:19 | ~23 min | windows |
:package:exe |
| :interrobang: | 2cba876c | #8 | 2022-09-16 12:21:15 | ~5 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | 2cba876c | #9 | 2022-09-16 12:27:49 | ~11 min | macos |
:package:dmg |
| :heavy_check_mark: | 2cba876c | #9 | 2022-09-16 12:28:20 | ~12 min | linux |
:package:tgz |
| :heavy_check_mark: | 2cba876c | #9 | 2022-09-16 12:41:43 | ~25 min | windows |
:package:exe |
| :grey_question: | Commit | :hash: | Finished (UTC) | Duration | Platform | Result |
|---|---|---|---|---|---|---|
| :interrobang: | 3b28636f | #9 | 2022-09-16 14:06:27 | ~5 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | 3b28636f | #10 | 2022-09-16 14:10:11 | ~8 min | macos |
:package:dmg |
| :heavy_check_mark: | 3b28636f | #10 | 2022-09-16 14:12:55 | ~11 min | linux |
:package:tgz |
| :heavy_check_mark: | 3b28636f | #10 | 2022-09-16 14:26:23 | ~25 min | windows |
:package:exe |
| :interrobang: | c47fc5a3 | #10 | 2022-09-20 07:24:19 | ~4 min | linux-cpp |
:page_facing_up:log |
| :heavy_check_mark: | c47fc5a3 | #11 | 2022-09-20 07:29:00 | ~9 min | macos |
:package:dmg |
| :heavy_check_mark: | c47fc5a3 | #11 | 2022-09-20 07:31:09 | ~11 min | linux |
:package:tgz |
| :heavy_check_mark: | c47fc5a3 | #11 | 2022-09-20 07:43:33 | ~23 min | windows |
:package:exe |
Issues found
https://user-images.githubusercontent.com/50769329/188175443-1b4ab53b-06d7-4451-bae0-8047752d44cd.mp4
1. CLOSED [OBSERVATION] Unintuitive layout - it is not very clear to the user that there are 2 distinct lists
Suggest bolder headings or some other visual queue.
2. CLOSED Trackpad cannot control main scrollbar
Actual - see video above
3. CLOSED Mouse cannot control scrollbar for individual verified and unverified contact sections
Actual - see video above
4. CLOSED After searching scrollbars remain present for individual sections
5. CLOSED [OBSERVATION] With enough vertical height in the app all contacts are shown and scrollbar still appears
6. OPEN Alignment of contacts list when there is only 1 contact
Actual
@glitchminer good findings! @John-44 this is an issue for a while now, we need to somehow indicate the user that there are more contacts so they need to scroll and the idea was to keep the contact's list scroll bar always visible when there is more contacts to scroll. Apparently there is also the main scrolling behavior of the overall page which makes it a bit weird, also with overlapping of the scroll bars not being able to control the contact's list scrollbar. Other than this, there is no clear separation between the lists, how could we improve a bit the UI here?
we need to somehow indicate the user that there are more contacts so they need to scroll and the idea was to keep the contact's list scroll bar always visible when there is more contacts to scroll.
@John-44 @alexandraB99 So this particular issue came up in the past a few times as we run into this in many different places. Back then I proposed to introduce some sort of inset dropshadow in scrollable areas that would indicate that there's more content to scroll through. @benjthayer has looked into this as well as part of the discord import tool. Maybe it's time to revisit this as a solution?
@alexandraB99 first of all there should be only a single scrollable area in the screen body area, not sperate scrollable areas for 'Identity verified contacts' and 'contacts'. This should be a single list, with two sections ('Identity verified contacts' and 'contacts') that scrolls as one long list.
Secondly, if there are more contacts than can fit inside the available vertical window space, this list of contacts should extend all the way to the bottom of the window, where it gets cut off. In most (but not all) cases the user should see the last contact being cutoff by the window, this will indicate to the user that there are more contacts the user can scroll to. We will come up with something nicer when we do the desktop redesign post-MVP, but for now this should be good enough.
@glitchminer updated based on the comment above, please have a second look!
@glitchminer updated based on the comment above, please have a second look!
Hi @alexandraB99, closed off the other issues as superseded and added issue 6 https://github.com/status-im/status-desktop/pull/7080#issuecomment-1235596212
@glitchminer updated based on the comment above, please have a second look!
Hi @alexandraB99, closed off the other issues as superseded and added issue 6 #7080 (comment)
@glitchminer thanks! I've updated it, please re-check and let me know if anything :)
Retested, same issue present.
@glitchminer thanks for retesting, PR updated, issue should be fixed now!
