From 69249e6b6a399404f576ee21e85aa73175fbad06 Mon Sep 17 00:00:00 2001
From: BerniWittmann <dev@bernhardwittmann.com>
Date: Fri, 4 Oct 2019 22:37:31 +0200
Subject: [PATCH] feat: added new signature template

Added a new email signature template, which puts a stronger focus on the
name
---
 .../templates/SignatureTemplate2.vue          | 263 ++++++++++++++++++
 .../templates/components/PromoteSignature.vue |   4 +-
 src/db/templates.js                           |   3 +-
 3 files changed, 267 insertions(+), 3 deletions(-)
 create mode 100644 src/components/templates/SignatureTemplate2.vue

diff --git a/src/components/templates/SignatureTemplate2.vue b/src/components/templates/SignatureTemplate2.vue
new file mode 100644
index 0000000..9e8db4c
--- /dev/null
+++ b/src/components/templates/SignatureTemplate2.vue
@@ -0,0 +1,263 @@
+<template>
+  <div>
+    <table
+      cellspacing="0"
+      cellpadding="0"
+      border="0"
+      role="presentation"
+      style="font-size: 0; line-height: 1.5"
+    >
+      <tbody>
+        <!-- Name and job fields -->
+        <tr>
+          <td
+            colspan="2"
+            style="padding: 10px 10px 0px 10px"
+          >
+            <span
+              :style="[fontBase, {
+                fontSize: `${options.font.size + 2}px`,
+                color: options.color.mainPreview || options.color.main,
+                fontWeight: 700
+              }]"
+            >{{ mainFields[0].value }}</span>
+          </td>
+        </tr>
+        <tr>
+          <td
+            colspan="2"
+            style="padding: 0px 10px 10px 10px"
+          >
+            <span :style="fontBase">{{ mainFields[1].value }}</span>
+            <span v-if="mainFields[2].value && options.separator !== 'br'">
+              <span :style="fontBase">&nbsp;{{ options.separator }}&nbsp;</span>
+              <span :style="fontBase">{{ mainFields[2].value }}</span>
+            </span>
+          </td>
+        </tr>
+        <tr v-if="options.separator === 'br'">
+          <td>
+            <span :style="fontBase">{{ mainFields[2].value }}</span>
+          </td>
+        </tr>
+        <tr style="border-collapse: collapse;">
+          <!-- Avatar column -->
+          <td
+            :style="{
+              display: showAvatar ? 'table-cell' : 'none',
+              width: `${options.avatar.size}px`,
+              verticalAlign: 'top',
+              borderStyle: 'solid',
+              borderTopWidth: '1px',
+              borderBottomWidth: '1px',
+              borderLeftStyle: 'none',
+              borderRightStyle: 'none',
+              borderColor: '#eee',
+              padding: '10px'
+            }"
+          >
+            <avatar
+              :show-avatar="showAvatar"
+              :src="image"
+              :size="options.avatar.size"
+              :roundness="options.avatar.roundness"
+              style="margin-right: -10px"
+            />
+          </td>
+          <!-- Info column -->
+          <td style="vertical-align: top; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px">
+            <table
+              cellspacing="0"
+              cellpadding="0"
+              border="0"
+              role="presentation"
+              style="font-size: 0;"
+            >
+              <tbody>
+                <!-- Other fields -->
+                <tr>
+                  <td>
+                    <table
+                      cellspacing="0"
+                      cellpadding="0"
+                      border="0"
+                      role="presentation"
+                      style="margin-top: 5px; font-size: 0;"
+                    >
+                      <template v-for="item in otherFields">
+                        <tr
+                          v-if="item.value"
+                          :key="item.name"
+                        >
+                          <td>
+                            <span
+                              :style="[fontBase, {
+                                color: options.color.secondaryPreview || options.color.secondary,
+                                fontWeight: 600
+                              }]"
+                            >{{ item.name }}:&nbsp;</span>
+                            <a
+                              v-if="item.type === 'link'"
+                              :href="formatLink(item.value)"
+                              style="text-decoration: none; color: inherit;"
+                              :style="fontBase"
+                            >{{ item.value }}</a>
+                            <a
+                              v-if="item.type === 'email'"
+                              :href="`mailto:${item.value}`"
+                              style="text-decoration: none; color: inherit;"
+                              :style="fontBase"
+                            >{{ item.value }}</a>
+                            <span
+                              v-if="item.type === 'text'"
+                              :style="fontBase"
+                            >{{ item.value }}</span>
+                          </td>
+                        </tr>
+                      </template>
+                    </table>
+                  </td>
+                </tr>
+                <!-- Social icons -->
+                <tr v-if="socials.installed.length">
+                  <td>
+                    <table
+                      cellspacing="2"
+                      cellpadding="0"
+                      border="0"
+                      role="presentation"
+                      style="margin-top: 5px; margin-left: -2px; font-size: 0;"
+                    >
+                      <tbody>
+                        <tr>
+                          <td
+                            v-for="item in socials.installed"
+                            :key="item.name"
+                            align="center"
+                            style="width: 20px; height: 20px; border-radius: 3px;"
+                            :style="{
+                              backgroundColor: options.color.mainPreview || options.color.main,
+                            }"
+                          >
+                            <a :href="formatLink(item.link)">
+                              <img
+                                width="12px"
+                                :src="`${s3url}/icons/${item.icon}.png`"
+                                :alt="`social-icon-${item.icon}`"
+                                style="display: table-cell; vertical-align: middle;"
+                              >
+                            </a>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- Addons -->
+    <table
+      v-if="isAdded('mobileApp')"
+      cellspacing="0"
+      cellpadding="0"
+      border="0"
+      role="presentation"
+      style="margin-top: 10px; font-size: 0;"
+    >
+      <tbody>
+        <tr>
+          <td v-if="addons.mobileApp.appStore.link">
+            <a :href="addons.mobileApp.appStore.link">
+              <img
+                :src="addons.mobileApp.appStore.img"
+                style="height:35px; margin-right: 5px;"
+                alt="app store badge"
+              >
+            </a>
+          </td>
+          <td v-if="addons.mobileApp.googlePlay.link">
+            <a :href="addons.mobileApp.googlePlay.link">
+              <img
+                :src="addons.mobileApp.googlePlay.img"
+                style="height:35px;"
+                alt="google play badge"
+              >
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      v-if="isAdded('banner')"
+      cellspacing="0"
+      cellpadding="0"
+      border="0"
+      role="presentation"
+      style="font-size: 0; margin-top: 10px; width: 100%;"
+    >
+      <tbody>
+        <tr v-if="addons.banner.image">
+          <td>
+            <a
+              v-if="addons.banner.link"
+              :href="formatLink(addons.banner.link)"
+            >
+              <img
+                :src="addons.banner.image"
+                alt="banner"
+                style="max-width: 100%"
+              >
+            </a>
+            <img
+              v-else
+              :src="addons.banner.image"
+              alt="banner"
+              style="max-width: 100%"
+            >
+          </td>
+        </tr>
+        <banner-placeholder v-else />
+      </tbody>
+    </table>
+    <table
+      v-if="isAdded('disclaimer')"
+      cellspacing="0"
+      cellpadding="0"
+      border="0"
+      role="presentation"
+      style="font-size: 0; color: #888; margin-top: 10px;"
+    >
+      <tbody>
+        <tr>
+          <td>
+            <span :style="fontBase">{{ addons.disclaimer }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <promote-signature
+      v-if="template.promoteSignature"
+      style="border-top: none"
+    />
+  </div>
+</template>
+
+<script>
+import EmailTemplate from './emailTemplate'
+import Avatar from './components/Avatar'
+import PromoteSignature from './components/PromoteSignature'
+import BannerPlaceholder from './components/BannerPlaceholder'
+
+export default {
+  components: {
+    Avatar,
+    PromoteSignature,
+    BannerPlaceholder
+  },
+  extends: EmailTemplate
+}
+</script>
diff --git a/src/components/templates/components/PromoteSignature.vue b/src/components/templates/components/PromoteSignature.vue
index ab7f66b..a0229c9 100644
--- a/src/components/templates/components/PromoteSignature.vue
+++ b/src/components/templates/components/PromoteSignature.vue
@@ -1,6 +1,6 @@
 <template>
   <table
-    style="font-size: 0; margin-top: 10px;"
+    style="font-size: 0; margin-top: 10px; border-top: 1px solid #eee;padding-top: 5px;"
     cellspacing="0"
     cellpadding="0"
     border="0"
@@ -9,7 +9,7 @@
     <tbody>
       <tr>
         <td>
-          <span style="font-size: 10px; color: #888; border-top: 1px solid #eee; padding-top: 5px;">Email signature by <a href="https://mysigmail.com?ref=email">mysigmail.com</a></span>
+          <span style="font-size: 10px; color: #888;">Email signature by <a href="https://mysigmail.com?ref=email">mysigmail.com</a></span>
         </td>
       </tr>
     </tbody>
diff --git a/src/db/templates.js b/src/db/templates.js
index befddc9..da3592a 100644
--- a/src/db/templates.js
+++ b/src/db/templates.js
@@ -1,3 +1,4 @@
 export default [
-  { label: 'Template #1', value: 'SignatureTemplate1' }
+  { label: 'Template #1', value: 'SignatureTemplate1' },
+  { label: 'Template #2', value: 'SignatureTemplate2' }
 ]