Add email signature to design resources

[bartaz]

Done

Adds email signature to design resources.

Drive-by: update slide template preview

Fixes WD-9907 Fixes WD-4140

QA

• Go do resources page, scroll down to email signature
• Edit details in place if you want to
• Select the signature and copy it
• Go to Gmail
  • compose new email, paste signature into the email
  • or go to Gmail / Settings / Signature and paste it as a signature

Screenshots

[webteam-app]

Demo starting at https://design-ubuntu-com-311.demos.haus

[lyubomir-popov]

@bartaz the implementation looks good, thanks. I need to check with camille why the tag seems taller in the sig than the logos above. I'll get back to you once I receive an answer. ALso can we please use the latest sldie template?

This one is old:

Here's an updated thumbnail:

[gerwitz]

FWIW I tested using this to copy-paste the signature and it worked well 👍

[camillet16]

@bartaz Here's the fixed logo at x2 to accommodate retina screens.

Notes:

• has white bg for dark mode cases
• if you need another version please ping.

CC: @lyubomir-popov

[gerwitz]

@bartaz it looks like the logos element ID got re-used, here. Not a big deal because I was able to target #email-signature-frame.

[bartaz]

@bartaz it looks like the logos element ID got re-used, here. Not a big deal because I was able to target #email-signature-frame.

Good catch @gerwitz, should be fixed now: https://design.ubuntu.com/resources#email-signature

[gerwitz]

Next challenge unlocked! Does anyone have any idea why the iframe is editable? https://discourse.canonical.com/t/new-email-signature/3459/2

[bartaz]

Next challenge unlocked! Does anyone have any idea why Stephanie sees the iframe as editable? https://discourse.canonical.com/t/new-email-signature/3459/2

@gerwitz Because it is editable. I made it editable as it felt like a nice feature, so you could edit it in place and copy/paste. If that causes confusion it's easy to revert.

[gerwitz]

I missed that somehow despite even searching the source for contenteditable 😮‍💨

I think it is confusing, since we haven't suggested editing-in-place and the image being draggable makes selecting finicky. Let's "freeze" it.

And if you're modifying anyway, maybe we can add instructions below:

Use this template for email signatures. See Discourse for Gmail instructions

[bartaz]

I think it is confusing, since we haven't suggested editing-in-place and the image being draggable makes selecting finicky. Let's "freeze" it.

Yes, I can see that it makes dragging the image too easy. Will update.