Minimize composer modal while editing a message

[st3iny]

WIP

[szaimen]

Maybe adding a signal color on the compose button as long as a draft is active would make sense? having a good highlight on this makes probably sense?

[st3iny]

Maybe adding a signal color on the compose button as long as a draft is active would make sense? having a good highlight on this makes probably sense?

Indeed. I added the primary class as long as a composer session is ongoing.

[GretaD]

will this pr resolve also this issue: https://github.com/nextcloud/mail/issues/2831 ?

[st3iny]

will this pr resolve also this issue: #2831 ?

This PR handles the part about browsing mails while editing. However, editing mail in a whole new browser window or popout is not implemented.

[ChristophWurst]

When I close/re-open repeatedly I sometimes loose the message. But I'm not able to trigger this consistently.

Minor remark: the To input is always focused. This is what we want for new messages, for resumed ones we can jump into the message body, I think.

[st3iny]

Also, is this saving the message as a draft? Cause if not it’s a bit off as you can not continue on mobile or other apps if you started a mail like this.

Yes, the draft is saved immediately when the modal is minimized. It can be opened again on any device/client from the drafts folder.

[st3iny]

My concern is that it’s not very obvious that the message is being saved, even with the notification and the changing of the button text.

Yeah, that is my biggest concern as well. We should definitely promote the feature in a more noticeable way. I was also thinking about adding a dedicated minimize button to the modal. Right now, it can only be minimized by "accidentally" clicking outside.

A mockup would be awesome and highly appreciated.

[ChristophWurst]

A mockup would be awesome and highly appreciated.

Specifically one for desktop and another one for mobile or small screens in general. The floating element could overlap other content.

[st3iny]

Minor remark: the To input is always focused. This is what we want for new messages, for resumed ones we can jump into the message body, I think.

Done.

---

I also did some more testing and was able to find some bugs around replies. In some cases replies were lost when opening them again.

~I also implemented a convenience feature: A session can now be resumed by repeating an action (e.g. replying to a mail and clicking the reply button on the same mail will now resume the session instead of creating a new one and creating a new draft). This only works when the session is still ongoing. Otherwise, the draft can be opened as usual.~

EDIT: Is not necessary anymore due to persistent composer indicator on the bottom right.

[nimishavijay]

I was also thinking about adding a dedicated minimize button to the modal. Right now, it can only be minimized by " "accidentally" clicking outside.

Totally agree! Conveniently, there is a minimize MDI icon :)

Specifically one for desktop and another one for mobile or small screens in general. The floating element could overlap other content.

For desktop:

• [x] It would be a button on the bottom right of the screen, with an edit icon and text on the left, and an expand button and a close button on the right. in this mockup it's 384px but that is fairly arbitrary. 256px and 300px seem too narrow.
• [x] The close button gets rid of the floating button
• [x] clicking anywhere else would open up the modal
• [x] The expand button also opens the modal, it's more just visual reassurance that the composer will be maximised. without the expand button it looks like a notification toast that should be dismissed.
• [x] If the subject is too long it should be ellipsised
• One possible concern is that the expand and close are very close to each other which may cause misclicks, but since the draft can be accessed from the navigation also I think it's okay. What do you think? also @jancborchardt

For mobile, I checked Gmail, Outlook, Protonmail and Apple mail and none of them have this. There is a notification that says "Draft saved" and no way to open up the message without going to the drafts folder. However, I do think this feature would be pretty useful. If it is taking too much vertical space it can be easily dismissed with the close button.

• [x] It could be full width on mobile or very small screens, and take up a maximum of 30% of the screen for other small screens like tablets.

[ChristophWurst]

Clicking New message when there is already one in minimized state replaces minimized version, right?

[nimishavijay]

Clicking New message when there is already one in minimized state replaces minimized version, right?

Yes but only if the new message is minimised. For example, "Company dinner" is in minimised state. On clicking new message, the composer modal opens with minimised "Company dinner" still in the background.

• If the new message is closed using the close button, modal closes with "Company dinner" in the minimised state.
• If the new message is minimised using the minimise button or by clicking outside the modal, modal closes with "New message" in the minimised state.

[ChristophWurst]

We are technically limited here and the software architecture only allows one new message at a time. We can't leave Company dinner minimized and show the new message modal. Our options are

• Disable the New message button when there is a minimized message
• Allow clicks on New message but save any previous message as draft and remove it from the minimized state

[nimishavijay]

Ah alright. enhancement for the future then :)

Allow clicks on New message but save any previous message as draft and remove it from the minimized state

This sounds like a good solution 👍🏽

[st3iny]

This PR is now ready to review. I also updated the screen recording and added a mobile screenshot to the description.

[st3iny]

@st3iny to confirm, when you press the "x" on the bottom right element, the draft stays saved, correct?

Yes. Furthermore, if the draft can't be saved for some reason, the composer indicator thingy will stay (and there will be a toast indicating the error).

---

Nice! Ideal would be to have a little animation on closing which moves/minimizes the modal towards the bottom right so it's more obvious where the overlay is – but I assume that is out of scope for now?

That is a good idea but as you said it is out of scope. We should prioritize getting the MVP for this feature done and schedule the animation as a followup. Currently, I'm not sure if this is easy to do and we would need to do some investigation on this (as the modal is a shared component in nc-vue).

[kesselb]

• [x] Request a read receipt is not saved

1. New message
2. Enter email, subject, body and check Request a read receipt
3. Press X to close
4. Open message again
5. Checkbox is false again

[kesselb]

• [x] The composer modal is closed automatically

Screencast from 2023-05-02 11-53-36.webm

1. New message
2. Enter email, subject and body
3. Press X to close
4. Open message again
5. Continue to write the message
6. The composer closes suddenly

[st3iny]

• [ ] The composer modal is closed automatically

Screencast.from.2023-05-02.11-53-36.webm

1. New message

2. Enter email, subject and body

3. Press X to close

4. Open message again

5. Continue to write the message

6. The composer closes suddenly

Nice catch! The indicator should be disabled (not clickable) when it was deliberately closed to prevent this. The indicator can't be hidden right away in case of errors during saving. I'll fix it.

EDIT: Done!

[kesselb]

While testing the feature, I noticed the save draft toast frequently.

Screencast from 2023-05-02 14-39-27.webm

I think we already have a variable to indicate if the saving is in process. I wonder if it makes sense to check it before showing a toast?