From 27c051984d020f159fc0de9b89ed7e74b2a84224 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 2 Dec 2024 15:42:12 +0530
Subject: [PATCH] feat: add expanded view

---
 .../components-next/message/bubbles/Email.vue | 26 ++++++++++++++--
 .../i18n/locale/en/conversation.json          |  3 +-
 tailwind.config.js                            | 31 +++++++++----------
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email.vue b/app/javascript/dashboard/components-next/message/bubbles/Email.vue
index 6eb1f910f..6fdbecd3b 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useTemplateRef, ref, watch } from 'vue';
 import { Letter } from 'vue-letter';
+import Button from 'next/button/Button.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 
 const props = defineProps({
@@ -19,6 +20,7 @@ const props = defineProps({
 });
 
 const isOverflowing = ref(false);
+const isExpanded = ref(false);
 const contentContainer = useTemplateRef('contentContainer');
 
 watch(
@@ -81,7 +83,7 @@ const showMeta = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="w-full">
+  <BaseBubble class="w-full overflow-hidden">
     <div
       v-if="showMeta"
       class="p-4 text-n-slate-11 space-y-1 pr-9 border-b border-n-strong"
@@ -106,7 +108,27 @@ const showMeta = computed(() => {
         {{ subject }}
       </div>
     </div>
-    <div ref="contentContainer" class="p-4 max-h-96 overflow-hidden">
+    <div
+      ref="contentContainer"
+      class="p-4"
+      :class="{
+        'max-h-96 overflow-hidden relative': !isExpanded,
+      }"
+    >
+      <div
+        v-if="isOverflowing && !isExpanded"
+        class="absolute left-0 right-0 bottom-0 h-28 grid place-content-center bg-gradient-to-t dark:from-[#24252b] from-[#F5F5F6] dark:via-[rgba(36,37,43,0.5)] via-[rgba(245,245,246,0.50)] dark:to-transparent to-[rgba(245,245,246,0.00)]"
+      >
+        <Button
+          icon="i-lucide-maximize-2"
+          ghost
+          slate
+          class="text-n-slate-1"
+          @click="isExpanded = true"
+        >
+          {{ $t('EMAIL_HEADER.EXPAND') }}:
+        </Button>
+      </div>
       <Letter
         class-name="prose prose-email"
         :html="contentToShow"
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 9a6a64d6d..485f50796 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -310,7 +310,8 @@
     "TO": "To",
     "BCC": "Bcc",
     "CC": "Cc",
-    "SUBJECT": "Subject"
+    "SUBJECT": "Subject",
+    "EXPAND": "Expand email"
   },
   "CONVERSATION_PARTICIPANTS": {
     "SIDEBAR_MENU_TITLE": "Participating",
diff --git a/tailwind.config.js b/tailwind.config.js
index c87e92d02..92e5b7fc1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,34 +40,31 @@ const tailwindConfig = {
         inter: ['Inter', ...defaultSansFonts],
         interDisplay: ['Inter Display', ...defaultSansFonts],
       },
-      typography: theme => ({
+      typography: {
         email: {
           css: {
-            color: theme('colors.n.slate.12'),
+            color: 'rgb(var(--slate-11))',
             lineHeight: '1.6',
             fontSize: '14px',
 
             h1: {
-              color: theme('colors.n.slate.12'),
+              color: 'rgb(var(--slate-12))',
               fontWeight: '700',
               fontSize: '2em',
             },
             h2: {
-              color: theme('colors.n.slate.12'),
+              color: 'rgb(var(--slate-12))',
               fontWeight: '600',
               fontSize: '1.5em',
             },
             h3: {
-              color: theme('colors.n.slate.12'),
+              color: 'rgb(var(--slate-12))',
               fontWeight: '500',
               fontSize: '1.25em',
             },
             a: {
-              color: theme('colors.n.solid.blue'),
+              color: 'rgb(var(--text-blue))',
               textDecoration: 'underline',
-              '&:hover': {
-                color: theme('colors.blue.800'),
-              },
             },
 
             // Lists
@@ -83,21 +80,21 @@ const tailwindConfig = {
             // Blockquotes
             blockquote: {
               fontStyle: 'italic',
-              color: theme('colors.n.slate.11'),
-              borderLeft: `4px solid ${theme('colors.n.strong')}`,
+              color: 'rgb(var(--slate-11))',
+              borderLeft: `4px solid rgb(var(--strong))}`,
               paddingLeft: '1em',
             },
 
             // Code Blocks
             code: {
-              backgroundColor: theme('colors.n.alpha.3'),
-              color: theme('colors.n.solid.amber'),
+              backgroundColor: 'rgb(var(--alpha-3))',
+              color: 'rgb(var(--solid-amber))',
               padding: '0.2em 0.4em',
               borderRadius: '4px',
               fontSize: '0.95em',
             },
             pre: {
-              backgroundColor: theme('colors.n.alpha.3'),
+              backgroundColor: 'rgb(var(--alpha-3))',
               padding: '1em',
               borderRadius: '6px',
               overflowX: 'auto',
@@ -109,13 +106,13 @@ const tailwindConfig = {
             },
             th: {
               padding: '0.75em',
-              borderBottom: `1px solid ${theme('colors.n.strong')}`,
+              borderBottom: `1px solid rgb(var(--strong))}`,
               textAlign: 'left',
               fontWeight: '600',
             },
             td: {
               padding: '0.75em',
-              borderBottom: `1px solid ${theme('colors.n.strong')}`,
+              borderBottom: `1px solid rgb(var(--strong))}`,
             },
 
             img: {
@@ -124,7 +121,7 @@ const tailwindConfig = {
             },
           },
         },
-      }),
+      },
     },
     screens: {
       xs: '480px',