feat: floating composer editor

[GretaD]

fixes: #12011
needs: nextcloud/contacts#5583

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI

[nimishavijay]

Really cool! Ik this is still a draft but getting some early feedback in:

• Position and resizing:

  • There is now an extra 56px gap below the bottom of the editor, it should not be there, and should just be calc(var(--body-container-margin, 0px) + var(--default-grid-baseline))
  • The editor should automatically expand when text is added, right now it only expands when you click on the fullscreen button. We can always have height: auto. The original idea was to use the big editor modal when you click the fullscreen button (like in Gmail) but if time does not permit it can be a follow up.

• Recipients:

  • Adding more than 1 recipient directly shows a +1 chip in the select component. Now that we have more space we can resize it when focused
  • clicking on the +1 expands the recipients but there is a bug where it overlaps the next field
  
  • There is no way to "unexpand". The ideal flow is: when the select field is focused, all recipients in that field are shown, when it is unfocused, the +1 is shown
  • There is not enough contrast between the +1 and the background. I would remove all opacity properties and use only --color-text-maxcontrast

• Cc/Bcc button

  • The size of the button ends up being a bit bigger than we need it to be. We can do in the button class: padding: calc(var(--default-grid-baseline) * 1) calc(var(--default-grid-baseline) * 2);
  • The position of the button is always situated in the middle of the select component, so as the select component changes size it will move around. I find that removing in copy-toggle top: 50%; and transform: translateY(-50%); fixes it.
  • The button is also too light, we can remove the opacity property in copy-toggle

The rest are small alignment fixes that can be done later on also. Looking really cool! :)

[GretaD]

[jancborchardt]

Very nice! :) Some details and thoughts on first look:

• Would the "New message" header change to whatever subject is put in? That would be nice, especially needed if minimized
• The "From", "To", "Cc" and "Bcc" labels are not vertically aligned with the text in the inputs, but too high up. (For multiline inputs, should be aligned with the first line of the input)
• The "Cc/Bcc" toggle would be nicer in the bottom right corner of the "To" field, so bottom-aligned from the current state. Then it potentially overlaps less content.
• All text on the left, from "New message" through To/Cc etc, Subject, Write message to "Draft saved" on the bottom should be left-aligned on one line.
• On the bottom, there is more bottom margin than right margin for the "Send" button. This should be even.

[GretaD]

• The "From", "To", "Cc" and "Bcc" labels are not vertically aligned with the text in the inputs, but too high up. (For multiline inputs, should be aligned with the first line of the input)

thank you Jan, the first point is already done. The rest i will fix asap.

[SebastianKrupinski]

Hey @GretaD

Great work so far. But from a usability concept, here are my thoughts of what is missing:

1. ability to resize the editor (imagine having a ultra wide screen and being forced to edit on this tiny window )

2. ability to move the editor to another part of the screen. (Have a look at the image below, and now imaging how many times you would need to minimize and maximize the editor if you where referencing and email, but you can't see half of it)

[GretaD]

@SebastianKrupinski very good points, but i think those are for designers to decide, I only delivered what it was requested. Since this feature needs to be in soon, we can propose these points as follow-ups.

[jancborchardt]

Considering @SebastianKrupinski's points – but @GretaD your call on whether it’s a follow-up or in here:

1. ability to resize the editor (imagine having a ultra wide screen and being forced to edit on this tiny window )

This makes sense, but not as manual resizing but better to use some percentage of the viewport. Of course with some max width for desktop and min-width for mobile.

2. ability to move the editor to another part of the screen. (Have a look at the image below, and now imaging how many times you would need to minimize and maximize the editor if you where referencing and email, but you can't see half of it)

This is for sure something for a follow-up, or rather to be discussed if and how we would want it.