Add possibility to send scheduled emails.

[JuliaKirschenheuter]

resolves #1626

Add few action buttons for pre-defined time to send.
Add a new submenu for scheduled time.
Compute a time to send as a timestamp.
Correct the styles.
Add disabled parameters to Datetimepicker.
Dispatch sendMessage only if sendAt is not available.
Fix saving attachments.
Fix sending workflow for scheduled messages.
Correct locale at DatetimePicker.
Correct the confirmation dialogue.

Outdated:

after discussion #1626 (comment) set label to one-line, like this

Final version:

[miaulalala]

I think this should be merged into feature/outbox

[JuliaKirschenheuter]

I think this should be merged into feature/outbox

absolutely! sorry, was a automatic motion

[ChristophWurst]

Looks like a required icon prop is not filled

[ChristophWurst]

Looks good otherwise 🚀

[ChristophWurst]

I still see an invalid sendAt timestamp sent to the server

[marcoambrosini]

This pattern with the radios seems very weird to me..
I think this is yet another case where a split button would make a whole lotta sense. Why are we resisting them so much? Everyone uses them and while I agree that they should be avoided when possible, sometimes there are very good reasons to use them.
Also, why squeeze important features such as this into little menus instead of giving them more space with a dialog based flow?

Screen.Recording.2022-04-11.at.09.55.01.mov

Sorry for the late criticism, I know it's late for any change to happen, I'm just raising honest concerns I have since I'm seeing this here again.

[nimishavijay]

Woah this looks great already! :D I have some small feedback and some questions:

• "Custom" --> "Custom date and time"
  As just "Custom" looks a bit empty
• The date format next to "Tomorrow morning" looks a bit confusing so we do:
  "Tomorrow morning - 4/9/2022 9:00 AM" --> "Tomorrow morning 9 Apr, 9:00 AM" with "9 Apr, 9:00 AM" in --color-text-maxcontrast
  Similarly for the other items as well
• We don't need to show the seconds in the datetime picker. Just HH:MM would work. While choosing a time there doesn't need to be a section for seconds either
• It is possible to change the format of the date and time shown inside the datetime picker to something like "8 Apr 2022, 5:30 PM"?
• Once any item other than "Send now" is selected, it should be shown in the first level of the menu as well, something like this:
  

I think other than that it looks great!

Also, why squeeze important features such as this into little menus instead of giving them more space with a dialog based flow?

@marcoambrosini a dialogue was the original idea as well, but the new composer would be in a modal, so another modal on top of that would be weird, as pointed out by @ChristophWurst

I think this is yet another case where a split button would make a whole lotta sense. Why are we resisting them so much?

I think it is kinda confusing, especially since we don't really use it anywhere as of now, and many of our users may not be super fluent with technology. I do agree that we can use it in super niche cases, though. But for this particular case a split button that opens a modal on top of another modal seems like a terrible idea.

Amazing work @JuliaKirschenheuter and cc @jancborchardt for any more feedback

[marcoambrosini]

@nimishavijay what's confusing is that basically those radios already act like a split button, in the sense that they modify the outcome of pressing the send button, but the UI doesn't reflect that at all.

In my mind, only the "custom" option would open a modal with the datetimepicker. Gmail's composer is also a modal and there's no weirdness per se in having a modal on top of another modal. Or at least it's much less weird than having 3 levels of horizontal navigation within our busy popovers. (all actions -> "scheduler" -> datetimepicker).

I don't see how that proposal is a "terrible idea" or in any way less desirable than this

[nimishavijay]

@nimishavijay what's confusing is that basically those radios already act like a split button, in the sense that they modify the outcome of pressing the send button, but the UI doesn't reflect that at all.

That's a good point. Right now there is only a difference between "Send now" and "Send later" because the text in the button changes from "Send" to "Send later". Is this enough?
Gmail and Outlook do it differently, they both open a modal where you pick the date and time and you directly send from the modal, there's no change in the "send" button. I found it a bit jarring in Gmail because there isn't even a button to confirm, it just sends as soon as you click on any of the options. Outlook has a "Schedule send" button inside the modal. What do you think?

In my mind, only the "custom" option would open a modal with the datetimepicker. Gmail's composer is also a modal and there's no weirdness per se in having a modal on top of another modal. Or at least it's much less weird than having 3 levels of horizontal navigation within our busy popovers. (all actions -> "scheduler" -> datetimepicker).

Well you're right, ideally not only the custom date picker but this entire send later flow would be in a modal just like Gmail, and it's not ideal to have everything buried in the action menu. But Gmail's composer is not a modal like ours, it's a little popover window looking thing in the corner which doesn't dim the background or block interactions with the background. The new Mail composer opens a modal which does both of these things. If we do the composer also like Gmail, then having a modal for the send later would make perfect sense :) We don't use a modal on top of another modal anywhere else either (and if we do I think we should change that). It's only because we already have a blocking modal that we fit everything into the action menu.

I think we could incorporate more split buttons into our UI, as long as we think about if it is really needed.

[marcoambrosini]

Gmail also has the centered modal, you can have it either way.

Anyway I don't want to pollute this pr anymore. I just wanted to raise a general concern that we can move into a separate design discussion about split buttons and this habit we have of squeezing complex flows into little menus. I apologise again for the noise.

[jancborchardt]

@marcoambrosini could you open a separate issue about this in the Vue components? :) Ideally also collecting other cases where this would be useful, so we can see that/if it makes sense as a pattern.

(For the record for here: The 3-dot menu basically already acts as if it’s a split button. It’s not like "Send later" is a thing that is sooo common. So it’s nice that it’s all in one menu with attachments etc, so you see it when you do other things too. In Gmail it’s actually very strange, having the split button, to only have 1 item in there.)

[JuliaKirschenheuter]

• "Custom" --> "Custom date and time"

done

• The date format next to "Tomorrow morning" looks a bit confusing so we do:
  "Tomorrow morning - 4/9/2022 9:00 AM" --> "Tomorrow morning 9 Apr, 9:00 AM" with "9 Apr, 9:00 AM" in --color-text-maxcontrast

well, unfortunately it is not possible to style a label right now

• We don't need to show the seconds in the datetime picker. Just HH:MM would work. While choosing a time there doesn't need to be a section for seconds either

done

• It is possible to change the format of the date and time shown inside the datetime picker to something like "8 Apr 2022, 5:30 PM"?

done

• Once any item other than "Send now" is selected, it should be shown in the first level of the menu as well, something like this:
  

done

[st3iny]

Things I noticed during testing:

1. Editing a scheduled message in the outbox will reset the sendAt timestamp. I have to select the original date and time manually on each edit. I have a fix ready and can push it if this is indeed a bug/not intended.
2. Editing a message and sending it again will yield a second/duplicate entry in the outbox. The old message should be deleted in favor of the new version. I did not test if both actually get sent.
3. I can't schedule a message for the same hour. I can only select the next hour in the date-time picker. E.g. at 11:02 I can only schedule a message starting from 12:00. Ideally I should be able to schedule it for 11:30 and such. (Might be fixed by Bump @nextcloud/vue from 4.3.0 to 5.3.1 #6219).

[st3iny]

• src/components/OutboxComposer.vue is an emtpy file -> 💥

[JuliaKirschenheuter]

1. Editing a scheduled message in the outbox will reset the sendAt timestamp. I have to select the original date and time manually on each edit. I have a fix ready and can push it if this is indeed a bug/not intended.

Ok, push it please

3. I can't schedule a message for the same hour. I can only select the next hour in the date-time picker. E.g. at 11:02 I can only schedule a message starting from 12:00. Ideally I should be able to schedule it for 11:30 and such.

Hm, i have tested it and i can. Could you post some screenshots?

[st3iny]

3. I can't schedule a message for the same hour. I can only select the next hour in the date-time picker. E.g. at 11:02 I can only schedule a message starting from 12:00. Ideally I should be able to schedule it for 11:30 and such.

Hm, i have tested it and i can. Could you post some screenshots?

I already fixed it locally and can push a commit.

[miaulalala]

Scheduled sending dialogue:

• Dialogue is very hidden, I couldn't find it at all at first. (Discussion)
• The default options are a bit far into the future, I would like to see one option to send in half an hour or an hour.

Custom date time option:

• I can't choose a date time in the next hour that has already started. So right now, I have no way to send a mail at 11:30, because the slot from 11 to 12 is not available.
• Don't force the user to use the datetime picker but also let them manually input the date and time via keyboard. This is also an accessibility issue.
• In the datetime picker, scroll to the time slot that is choosable, don't start at midnight. (Follow up)

Confirmation Dialogue

• Change the confirmation dialogue to "Message scheduled for xx.xx.xxxx xx:xx" or similar when scheduling a message (Follow up). Currently it says:
  

Outbox

• The send now button icon should be the envelope:
  
• There is no feedback on interaction with an outbox message. If I use send now I would like to have some feedback - "Message Sent"". Same for deletion. (Follow up)
• Have a confirmation dialogue for both options. (Follow up)

resolved