[WIP] frontend: Email redesign. #5592

vaidap · 2017-06-27T16:25:42Z

Current style:

smarx · 2017-06-27T16:25:44Z

Automated message from Dropbox CLA bot

@vaidap, it looks like you've already signed the Dropbox CLA. Thanks!

jrowan · 2017-06-27T19:23:14Z

templates/zerver/emails/email_base.html

+        }
+
+        /* -------------------------------------
+        OTHER STYLES THAT MIGHT BE USEFUL


Do we need to put in all these extra styles?

i ported all of Brock's changes without refactoring-- will remove the ones that are unnecessary for now.

jrowan · 2017-06-27T19:25:12Z

templates/zerver/emails/email_base.html

+                            {% block illustration %}{% endblock %}
+                        </div>
+                        <!-- START CENTERED WHITE CONTAINER -->
+                        <span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>


I'm not sure whether my PR about preheaders will merge first and make this moot, but this should probably be a jinja2 template {% block preheader %}{% endblock %} so we don't default to sending emails with placeholder preheader text.

changed it to {% block preheader %}{% endblock %} for now!

jrowan · 2017-06-27T19:27:15Z

templates/zerver/emails/email_base.html

+                                <tr>
+                                    <td class="content-block">
+                                        <span class="apple-link">Kandra Labs, 112 S Park St, San Francisco CA 94107</span>
+                                        <br/> Don't like these emails? <a href="#">Unsubscribe</a>.


Do we still need the unsubscribe block here if we have the {% block manage_preferences %} above? Can we roll the Kandra Labs address into that area (maybe after the email-specific manage preferences content)?

one problem i've been having with both the graphics and the manage_preferences block is that they keep floating upwards-- see screenshots in #illustrations stream. my hacky solution right now was to remove manage_preferences and just keep the kandra labs footer, and insert each image manually in each email, but that is far from optimal. would it be possible for you to have a look at this & see whether you can figure out what is causing this behaviour? i'm thinking this has to do with the order in which the template blocks are generated?

it would make sense to make use of manage_preferences as it is adequately put in the followup emails, i completely agree. just having some trouble!

jrowan · 2017-06-27T19:28:58Z

templates/zerver/emails/followup_day1.html

@@ -26,6 +26,7 @@
    {% endif %}

    <p>Thanks,<br/>Zulip</p>
+<img src="{{ realm_uri }}/static/generated/footer.svg"/>


Do we only want this footer image in this particular email, or should it be in all the emails? We might want to refactor this into a footer block in the base template.

jrowan

Looking good so far. I left some inline comments on specific things that stood out to me.

vaidap · 2017-07-01T17:04:19Z

not sure why tools/lint was failing, I had to change the CSS to this format:

            img {
            border: none;
            -ms-interpolation-mode: bicubic;
            max-width: 100%;
            }

which is not as readable, so i added some extra spaces between the blocks. not sure if this is something that should be fixed?

codecov · 2017-07-01T17:12:50Z

Codecov Report

Merging #5592 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #5592   +/-   ##
=======================================
  Coverage   88.75%   88.75%           
=======================================
  Files         438      438           
  Lines       54661    54661           
  Branches     2061     2061           
=======================================
  Hits        48514    48514           
  Misses       6147     6147

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 99a6a9b...8b3e5bd. Read the comment docs.

vaidap · 2017-07-04T09:10:57Z

Here's the current state of things! digest and missed_message haven't been modified as they do not extend the jinja2 template, and i haven't inserted the illustrations into followup_day1 as we are planning on rewriting the text for it.

jrowan

The styling/images look really good. I put in a few comments with questions about the manage_preferences blocks you added. For all of the new manage_preferences blocks, not just the ones I explicitly commented on as probably unnecessary, it doesn't look like the context is fed an unsubscribe link, so I'm not sure the unsubscribe links in them will work.

jrowan · 2017-07-05T16:07:02Z

templates/zerver/emails/password_reset.html

@@ -15,3 +15,10 @@
    Your friends at Zulip HQ
 </p>
 {% endblock %}
+
+{% block manage_preferences %}


I feel like we don't want/need a manage preferences block on the password reset email since it is a one-off email specifically requested by the user. I did a quick search through my inbox and there wasn't an unsubscribe link in any of the password reset emails I've gotten lately.

Good point, removed!

jrowan · 2017-07-05T16:16:40Z

templates/zerver/emails/notify_new_login.html

@@ -15,3 +19,10 @@
 <p>If you recognize this login activity, you can archive this notice.</p>
 <p>Thanks,<br />Zulip Account Security</p>
 {% endblock %}
+
+{% block manage_preferences %}


We probably shouldn't put an unsubscribe link here since this seems like the kind of thing that should be mandatory to send/receive, or at least we probably want this to be an "unsubscribe from new login notifications" type link/messaging if we allow unsubscribing.

replaced this with a unsubscribe from new login notifications.

jrowan · 2017-07-05T16:17:54Z

templates/zerver/emails/notify_change_in_email.html

 </p>
 <p>
    Best,<br />
    The Zulip Team
 </p>
 {% endblock %}
+
+{% block manage_preferences %}


As with password reset emails, we probably don't want an unsubscribe link here because this is a one-off user-requested email related to their account security.

vaidap · 2017-07-06T13:10:35Z

Made the appropriate changes.
Regarding {{ unsubscribe_link }}, I'm not sure how one would feed it this data?

Fixes zulip#5113.

zulipbot · 2017-08-24T08:41:35Z

Hello @zulip/server-notifications members, this pull request was labeled with the "area: notifications" label, so you may want to check it out!

zulipbot · 2017-08-24T08:47:17Z

Hello @zulip/server-notifications members, this pull request was labeled with the "area: notifications" label, so you may want to check it out!

rishig · 2017-08-26T17:45:48Z

Jotting down remaining work to take this over the finish line:

Replace server_uri with email_images_base_uri (see emails: Add server_uri to context in build_email. #6262).
Remove any context or content changes.
Separate out the CSS into its own file, and use the premailer package to do CSS inlining (or if we think that isn't working, find a different package). Some discussion at https://chat.zulip.org/#narrow/stream/development.20help/topic/css.20inlining, but for the first pass I would just do what is easiest to code.

Nice to do's, if they aren't too much work (but can also be done after the parts above are merged):

Using the bubbles signoff for confirm_registration, invitation, and day1 (instead of the ~ 🐟 ~ signoff) (I'll add this image to the assets directory)
Move the jellyfish-with-a-box from day2 to day1
Move the four fish on day2 to the top, and move the heavy fish to the bottom (i.e. to replace the ~ 🐟 ~ footer)

@hackerkid, thanks!

zulipbot · 2017-09-20T02:13:43Z

Heads up @vaidap, we just merged some commits that conflict with the changes your made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/master branch and resolve your pull request's merge conflicts accordingly.

timabbott · 2017-09-25T18:58:57Z

Closing this in favor of its rebase #6383.

zulipbot added the needs review label Jun 27, 2017

vaidap force-pushed the newemails branch from 766a6a0 to 47908d3 Compare June 27, 2017 17:02

jrowan reviewed Jun 27, 2017

View reviewed changes

zulipbot added needs more work and removed needs review labels Jun 27, 2017

jrowan reviewed Jun 27, 2017

View reviewed changes

zulipbot added needs review and removed needs more work labels Jun 28, 2017

vaidap force-pushed the newemails branch 3 times, most recently from 4c9e3db to a5c3dff Compare July 3, 2017 09:59

jrowan reviewed Jul 5, 2017

View reviewed changes

zulipbot added needs more work and removed needs review labels Jul 5, 2017

vaidap force-pushed the newemails branch from 25e6b2e to 8b3e5bd Compare July 6, 2017 13:14

zulipbot added needs review and removed needs more work labels Jul 6, 2017

vaidap force-pushed the newemails branch 5 times, most recently from 85e65b5 to 21132e9 Compare July 13, 2017 12:32

vaidap force-pushed the newemails branch 2 times, most recently from 10b98a6 to ac395ba Compare August 9, 2017 12:55

vaidap mentioned this pull request Aug 9, 2017

frontend: Add email illustrations to static/images/emails. #6066

Closed

vaidap force-pushed the newemails branch 6 times, most recently from 7be2bca to a255ebc Compare August 16, 2017 10:13

vaidap force-pushed the newemails branch from a255ebc to 1f11b1f Compare August 18, 2017 09:15

vaidap added 6 commits August 24, 2017 09:32

frontend: Remove inline color assignments in emails.

712d290

frontend: Add new style to emails.

10cff77

frontend: Add buttons to emails.

fec40b0

frontend: Add header & body illustrations to emails.

e0667ec

frontend: Add preferences footer to emails.

2afe7b8

Fixes zulip#5113.

frontend: Prepare emails for email clients.

33a97bc

vaidap force-pushed the newemails branch from 1f11b1f to e4c6466 Compare August 24, 2017 08:41

test emails, do not merge.

6f8291a

vaidap force-pushed the newemails branch from e4c6466 to 6f8291a Compare August 24, 2017 08:47

hackerkid mentioned this pull request Sep 2, 2017

Email Redesign finishup #6383

Closed

4 tasks

timabbott closed this Sep 25, 2017

zulipbot removed the needs review label Sep 25, 2017

vaidap deleted the newemails branch December 30, 2017 16:37

vaidap restored the newemails branch December 30, 2017 16:37

vaidap deleted the newemails branch December 30, 2017 16:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] frontend: Email redesign. #5592

[WIP] frontend: Email redesign. #5592

vaidap commented Jun 27, 2017 •

edited

smarx commented Jun 27, 2017

jrowan Jun 27, 2017

vaidap Jun 28, 2017

jrowan Jun 27, 2017

vaidap Jun 28, 2017

jrowan Jun 27, 2017

vaidap Jun 28, 2017

vaidap Jun 28, 2017

jrowan Jun 27, 2017 •

edited

jrowan left a comment

vaidap commented Jul 1, 2017

codecov bot commented Jul 1, 2017 •

edited

vaidap commented Jul 4, 2017

jrowan left a comment

jrowan Jul 5, 2017

vaidap Jul 6, 2017

jrowan Jul 5, 2017

vaidap Jul 6, 2017

jrowan Jul 5, 2017

vaidap commented Jul 6, 2017 •

edited

zulipbot commented Aug 24, 2017

zulipbot commented Aug 24, 2017

rishig commented Aug 26, 2017

zulipbot commented Sep 20, 2017

timabbott commented Sep 25, 2017

[WIP] frontend: Email redesign. #5592

[WIP] frontend: Email redesign. #5592

Conversation

vaidap commented Jun 27, 2017 • edited

smarx commented Jun 27, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jrowan Jun 27, 2017 • edited

Choose a reason for hiding this comment

jrowan left a comment

Choose a reason for hiding this comment

vaidap commented Jul 1, 2017

codecov bot commented Jul 1, 2017 • edited

Codecov Report

vaidap commented Jul 4, 2017

jrowan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vaidap commented Jul 6, 2017 • edited

zulipbot commented Aug 24, 2017

zulipbot commented Aug 24, 2017

rishig commented Aug 26, 2017

zulipbot commented Sep 20, 2017

timabbott commented Sep 25, 2017

vaidap commented Jun 27, 2017 •

edited

jrowan Jun 27, 2017 •

edited

codecov bot commented Jul 1, 2017 •

edited

vaidap commented Jul 6, 2017 •

edited