Make UserStatusSelector a dismissible page pushed onto the tray window

[claucambra]

Closes #3819

Screen.Recording.2022-07-22.at.13.39.14.mov

[codecov]

Codecov Report

Merging #4760 (d86f25d) into master (b90e79a) will decrease coverage by 0.04%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #4760      +/-   ##
==========================================
- Coverage   57.24%   57.19%   -0.05%     
==========================================
  Files         138      138              
  Lines       17144    17144              
==========================================
- Hits         9814     9806       -8     
- Misses       7330     7338       +8     

Impacted Files	Coverage Δ
src/libsync/filesystem.cpp	73.11% <0.00%> (-3.23%)	⬇️
src/libsync/propagatedownload.cpp	64.00% <0.00%> (-1.19%)	⬇️
src/libsync/discovery.cpp	84.86% <0.00%> (+0.29%)	⬆️

[mgallien]

the behavior with respect to having it close when we ant is much better
but currently this is not really working well as we now get a popup in which you have to scroll
so I would suggest to either make it again a real window that can be bigger than the main dialog but really behaves like a popup (close on lost focus) or have the content be much smaller such that we do not need to scroll

[claucambra]

the behavior with respect to having it close when we ant is much better
but currently this is not really working well as we now get a popup in which you have to scroll
so I would suggest to either make it again a real window that can be bigger than the main dialog but really behaves like a popup (close on lost focus) or have the content be much smaller such that we do not need to scroll

How about making the pre-defined statuses list scrollable?

[claucambra]

the behavior with respect to having it close when we ant is much better
but currently this is not really working well as we now get a popup in which you have to scroll
so I would suggest to either make it again a real window that can be bigger than the main dialog but really behaves like a popup (close on lost focus) or have the content be much smaller such that we do not need to scroll

Screen.Recording.2022-07-21.at.19.50.54.mov

[mgallien]

@claucambra thanks for the video
to be honest I am not the best with regard to design of a solution but it is already much better that way
I also agree that the interaction with the set status window is much better than when it was just a plain window that could stay open if you did not find the proper action to close it

[nimishavijay]

This is much better than the separate window :) I am not sure about the scrollable status list, it doesn't seem obvious that there are more statuses available and it seems a but cramped.

What do you think about replacing the main dialogue with the status dialogue instead of overlaying it? Would that be possible? It can then be in full height without any scrolling, and on clicking "Set status" or "Cancel" it could go back to the main dialogue. The position would depend on the OS, for eg. on Windows it would be bottom and right aligned with the main dialogue (because the tray menu icon is on the bottom right) and on Ubuntu it could be top and right aligned (assuming the tray menu icon is on the top right).

What do you think? cc @jancborchardt

[claucambra]

This is much better than the separate window :) I am not sure about the scrollable status list, it doesn't seem obvious that there are more statuses available and it seems a but cramped.

What do you think about replacing the main dialogue with the status dialogue instead of overlaying it? Would that be possible? It can then be in full height without any scrolling, and on clicking "Set status" or "Cancel" it could go back to the main dialogue. The position would depend on the OS, for eg. on Windows it would be bottom and right aligned with the main dialogue (because the tray menu icon is on the bottom right) and on Ubuntu it could be top and right aligned (assuming the tray menu icon is on the top right).

What do you think? cc @jancborchardt

I think an easier and maybe more intuitive way of doing this is by making the status selector a page that gets pushed on top of the existing dialog, forming a stack. Then this page can be removed by hitting a back or cancel button. This should have the same effect as your proposal without having ti create an entirely separate window -- thoughts? :)

[nimishavijay]

I think an easier and maybe more intuitive way of doing this is by making the status selector a page that gets pushed on top of the existing dialog, forming a stack. Then this page can be removed by hitting a back or cancel button. This should have the same effect as your proposal without having ti create an entirely separate window -- thoughts? :)

Yes, that's exactly what I had in mind when I proposed that :)
We just have to make sure that it doesn't look too cramped, ideally there wouldn't be any scrolling required

[claucambra]

I think an easier and maybe more intuitive way of doing this is by making the status selector a page that gets pushed on top of the existing dialog, forming a stack. Then this page can be removed by hitting a back or cancel button. This should have the same effect as your proposal without having ti create an entirely separate window -- thoughts? :)

Yes, that's exactly what I had in mind when I proposed that :) We just have to make sure that it doesn't look too cramped, ideally there wouldn't be any scrolling required

How about this?

Screen.Recording.2022-07-22.at.13.39.14.mov

[claucambra]

@mgallien @allexzander @camilasan the diffs have blown up but this is mainly just due to moving what used to be most of the contents of Window.qml into a separate MainTrayView.qml, now that we have a StackView

[nimishavijay]

Super nice! Looks great 🚀🚀🚀 :)

[jancborchardt]

The design is much better! :)

The animation is a bit out of place though, as normally left/right animations denote diving down into details and going back up.

In this case, an animation from the bottom like an iOS/Android bottom sheet commonly used for dialogs would probably be more fitting. Does that work?

[claucambra]

The design is much better! :)

The animation is a bit out of place though, as normally left/right animations denote diving down into details and going back up.

In this case, an animation from the bottom like an iOS/Android bottom sheet commonly used for dialogs would probably be more fitting. Does that work?

Sure, I added this animation:

Screen.Recording.2022-07-22.at.14.57.45.mov

[mgallien]

The design is much better! :)

The animation is a bit out of place though, as normally left/right animations denote diving down into details and going back up.

In this case, an animation from the bottom like an iOS/Android bottom sheet commonly used for dialogs would probably be more fitting. Does that work?

@claucambra given the comment about having the set user status slide from bottom, I would go with a Drawer that are made for that (and inherit from Popup that was your original idea)
that way, you do not need to use a StackLayout but simply benefit from the Drawer existing behavior

[claucambra]

The design is much better! :)
The animation is a bit out of place though, as normally left/right animations denote diving down into details and going back up.
In this case, an animation from the bottom like an iOS/Android bottom sheet commonly used for dialogs would probably be more fitting. Does that work?

@claucambra given the comment about having the set user status slide from bottom, I would go with a Drawer that are made for that (and inherit from Popup that was your original idea) that way, you do not need to use a StackLayout but simply benefit from the Drawer existing behavior

Agree, looking at it now it is pretty obvious the drawer does what we want more directly

I have also rolled back the bigger changes of putting the tray window contents into its own file as I felt it was a bit out of scope

[jancborchardt]

If the video in your comment is the current state: Nice! Really great job, looks slick :)

[allexzander]

@claucambra Looks good. But, should not this dialog auto-close when the tray window gets closed by clicking outside it? For me (on Windows), the dialog remains open when I click that tray icon next time. I'd expect it to get closed if I changed my mind about setting the status.

#Update

I have also noticed one other bug. Selecting the status Away does not work now if the current status is Online. When selecting the Away status, it gets reset back to Online, when opening the dialog again.

[mgallien]

I tested it on my dev laptop
I noticed two issues
the layout can still overflow and would want to use more space than available

if the main dialog closes due to lost focus, the set status drawer will stay on top. that is unexpected and I would expect it to be closed

[claucambra]

@claucambra Looks good. But, should not this dialog auto-close when the tray window gets closed by clicking outside it? For me (on Windows), the dialog remains open when I click that tray icon next time. I'd expect it to get closed if I changed my mind about setting the status.

#Update

I have also noticed one other bug. Selecting the status Away does not work now if the current status is Online. When selecting the Away status, it gets reset back to Online, when opening the dialog again.

I think this will be caused by the model not being correctly requested to load when the drawer is opened. Will look into it, thanks

I tested it on my dev laptop
I noticed two issues
the layout can still overflow and would want to use more space than available

Argh. Okay, will test with different font sizes

[claucambra]

@claucambra Looks good. But, should not this dialog auto-close when the tray window gets closed by clicking outside it? For me (on Windows), the dialog remains open when I click that tray icon next time. I'd expect it to get closed if I changed my mind about setting the status.
#Update
I have also noticed one other bug. Selecting the status Away does not work now if the current status is Online. When selecting the Away status, it gets reset back to Online, when opening the dialog again.

I think this will be caused by the model not being correctly requested to load when the drawer is opened. Will look into it, thanks

@allexzander This is actually used by a very, ahem, interesting bug outside the changes of this PR. Will open a new PR with a fix for this soon

[claucambra]

@claucambra Looks good. But, should not this dialog auto-close when the tray window gets closed by clicking outside it? For me (on Windows), the dialog remains open when I click that tray icon next time. I'd expect it to get closed if I changed my mind about setting the status.
#Update
I have also noticed one other bug. Selecting the status Away does not work now if the current status is Online. When selecting the Away status, it gets reset back to Online, when opening the dialog again.

I think this will be caused by the model not being correctly requested to load when the drawer is opened. Will look into it, thanks

@allexzander This is actually used by a very, ahem, interesting bug outside the changes of this PR. Will open a new PR with a fix for this soon

Fix in #4822

[claucambra]

@allexzander @mgallien The drawer now auto-closes when the tray window is closed, and I have adjusted the layout to remove unnecessary padding around certain elements and to reduce the spacing if there is insufficient space. This should really help

[camilasan]

/rebase

[nextcloud-desktop-bot]

AppImage file: Nextcloud-PR-4760-d86f25d21536e6953d7eb8cf22a33ee3c3c1911f-x86_64.AppImage

To test this change/fix you can simply download above AppImage file and test it.

Please make sure to quit your existing Nextcloud app and backup your data.

[sonarcloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

16.7% Coverage
0.0% Duplication