WIP: Add new draft styles

[nicodh]

resolves #3968

[nicodh]

TBD: should we scroll down when the attachement draft is added?

Styling is just a proposal - reduced opcity should show the "draft" state

Draft Image

VCard

Datei

[r10s]

looks nice, thanks a lot for taking care!

at a first glance, however, i think the old "white outer box" makes things more clear: that the bubble is not sent yet, what the staging area is, when quotes are added etc. still, inside the white box, the nicely styled card/image can be shown.

but i am afk, only looking at the screenshots, i can have a closer look tomorrow.

[Simon-Laux]

My ideas on this:

• keep in in the composer (white background), I agree with r10s on that point
• change to 100% opacity
• use some subtle color as background that you can still see the rounded corners, but the color is subtle that it still looks good

[r10s]

i reviewed in a little more detail and played around with things on my desktop.

[r10s]

the padding/margin here could be removed again when going for the general "padding: 9px;" suggestion above.

having simple, horizontally symmetric spacings is also better wrt to the rtl issue that needs to be targeted at some point, btw

[nicodh]

Image

VCard

Datei

Next proposal...

[r10s]

tested - and it is a huge improvement that can be merged :)

also, the "close" button and its hover-effect is much nicer now (as no longer a long, vertical bar when hovered)

what i would streamline is the different position of the "close" button - for images/quotes is it on the right edge - for contacts it is directly after the contact card.

i think, the old approach, "right edge" is better as there are often combinations with quotes and we have two "X" - and it looks much nicer and is better usable if they're at the same position.

so, i would change that bit for the contact-cards/files as well (so moving the "x" to the edge). but that is no blocker :)

[nicodh]

That how I implemented it before, and Simon asked me to keep the icon nearer to the VCard & File since on bigger screen the X is pretty far from the left aligned VCard :-)

But I agree if there are multiple delete icons it looks strange if they are positioned different

[r10s]

for the distance on bigger screens: yes, that is true, thanks for bringing that up. however, this is how it usually is, ppl are used to it. moreover, in this case, deletion is less a things than eg. for closing dialog. ppl just searched and added for a card/file/image, it is not the most common case to delete that immediately again, so a clearer, less cluttered UI seems advantageous here.
finally, also the send button is at the same horizontal offset, so, the "X" are not out of view at all, it is even sort of a "focus column" where you can "do things". just some additional thoughts :)

EDIT: just tested, it looks great! thanks a lot for taking care!