-
Notifications
You must be signed in to change notification settings - Fork 78
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
feat(ProfileShowcase): Drop area behaviour / design when sections expanded #13657
Conversation
Jenkins BuildsClick to see older builds (18)
|
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.
LGTM!
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.
Nice work! I have some findings below
- The drop area should be visible as soon as the delegate started the drag action.
Here's an example:
App
- The drop area height is much larger in the designs. In this example the pointer is below the
Everyone
drop area, but theEveryone
drop area is active. I find this handy because you can see where you'll drop the item and improves the experience. My suggestion is to extend the drop area (without extending the button visual height) below each drop section until theHidden
header.
App
https://github.com/status-im/status-desktop/assets/47811206/d951b33a-937f-4408-9628-221e18935be3
- The accounts address highlight is too sensitive. Looks like the events are not properly handled or the height is too small. Sometimes it's flickering by itself without moving the pointer.
Screen.Recording.2024-02-22.at.09.49.18.mov
Thanks for the comments!
|
Hey, my thought regarding this point:
I think that the key is to activate drop area whenever we the dragged item overlapping with the target section along the Y axis. Bc it seems that now mouse pointer within the target area activates it. |
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.
One small discovery here:
Kazam_screencast_00095.webm
When moving from hidden to in showcase, the spacing below the hidden section grows and becomes quite big at some point.
Yes this is bc of the model items are hidden with heigh = 0 and the spacing is kept there. With the new model refactor this will be directly solved! |
In that case, you have to set the spacing in the listview to 0, and simulate the spacing using the delegate's inset |
Do you think it makes sense to add more extra logic to that just to prevent this particular model usage? With the refactor, the model will just have the data needed and the listview behavior will be correct. |
No need to do anything, the // inset to simulate spacing
topInset: 4
bottomInset: 4 just set the ListView |
mmm, I'm not sure about this bc I've added this default height property Having a proper model behavior will just solve the issue here. |
c1cc77e
to
d7da10a
Compare
First issue @alexjba pointed to solved: Screen.Recording.2024-02-22.at.14.11.09.mov |
d7da10a
to
549b26b
Compare
Screen.Recording.2024-02-22.at.16.40.30.mov
Whenever the cursor is inside the red area, this should activate the |
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.
lgtm
549b26b
to
9171218
Compare
…ive ` This property holds if background color will be changed on drag active or not.
…anded - It updates `ProfileShowcasePanel` with new drop area design adding shadows, changing drop areas design and sizes. - It adjusts `ShowcaseDelegate` according to design, ie: heigh and background colour on dragActive. Closes #13509
9171218
to
3f0e705
Compare
Rebased and updated property name following last @micieslak suggestion. |
Closes #13509
What does the PR do
ProfileShowcasePanel
with new drop area design adding shadows, changing drop areas design and sizes.ShowcaseDelegate
according to design, ie: heigh and background colour on dragActive.StatusDraggableListItem
: Added new propertycolorOnDragActive
that holds if background color will be changed on drag active or not.Affected areas
Profile showcase tabs: Communities, Accounts, Collectibles and Assets
StatusQ / StatusDraggableListItem
Screenshot of functionality
Screen.Recording.2024-02-20.at.19.48.27.mov