chore(client): update UI

mysigmail · Jun 29, 2023 · 6d433b2 · 6d433b2
1 parent e2aac2f
commit 6d433b2
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 25 deletions.
diff --git a/packages/client/assets/svg/copy.svg b/packages/client/assets/svg/copy.svg
diff --git a/packages/client/components/CodePreview.vue b/packages/client/components/CodePreview.vue
@@ -31,6 +31,7 @@ const source = computed(() => highlighter.codeToHtml(pretty(props.code), {
     overflow: scroll;
     padding: 8px;
     font-size: 14px;
+    height: calc(100vh - 13rem);
   }
 }
 </style>
diff --git a/packages/client/layouts/default.vue b/packages/client/layouts/default.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import LogoSvg from '@/assets/svg/logo-black.svg'
 
+const route = useRoute()
+
+const isGridBd = computed(() => route.query.view === 'desktop' || route.path === '/')
+
 const files = import.meta.glob('../emails/*.vue')
 const re = /\/([^/]+)\.vue$/
 
@@ -13,15 +17,16 @@ const nav = Object.entries(files).map(([k, _]) => {
 </script>
 
 <template>
-  <div class="default-layout pb-12 h-screen text-slate-900 bg-[#f6f9fc]">
-    <nav
-      class="pl-60 h-12 sticky left-0 top-0 z-50 _w-full bg-slate-100 flex gap-10 items-center justify-center"
-    >
+  <div
+    class="default-layout pb-12 h-screen text-slate-900 bg-[#f6f9fc]"
+    :class="{ 'is-grid-bg': isGridBd }"
+  >
+    <nav class="pl-60 h-20 sticky left-0 top-0 z-50 flex gap-10 items-center justify-center">
       <TheHeader />
     </nav>
-    <nav class="sidebar fixed flex flex-col justify-between-b left-0 top-0 z-[1036] h-screen w-60 bg-slate-100 pl-4">
+    <nav class="sidebar fixed flex flex-col justify-between-b left-0 top-0 z-[1036] h-screen w-60 bg-white pl-4">
       <div class="sidebar__header">
-        <div class="logo flex h-12 items-center font-bold">
+        <div class="logo flex h-20 items-center font-bold">
           Vue Email Client
         </div>
       </div>
@@ -30,12 +35,7 @@ const nav = Object.entries(files).map(([k, _]) => {
           List of emails
         </p>
         <nav class="flex flex-col mt-3">
-          <NuxtLink
-            v-for="i in nav"
-            :key="i.name"
-            :to="`/preview/${i.name}?view=desktop`"
-            class="py-2 text-sm"
-          >
+          <NuxtLink v-for="i in nav" :key="i.name" :to="`/preview/${i.name}?view=desktop`" class="py-2 text-sm">
             {{ i.name }}
           </NuxtLink>
         </nav>
@@ -46,14 +46,17 @@ const nav = Object.entries(files).map(([k, _]) => {
         </a>
       </div>
     </nav>
-    <main class="container pl-60 m-auto h-[calc(100vh_-_3rem)]">
+    <main class="container pl-60 m-auto h-[calc(100vh_-_5rem)]">
       <slot />
     </main>
   </div>
 </template>
 
 <style lang="scss">
 .default-layout {
+  &.is-grid-bg {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%23d1d5db' fill-opacity='.4' fill-rule='evenodd'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/svg%3E");
+  }
   .router-link-active {
     color: #409eff;
   }

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "@element-plus/nuxt": "^1.0.5",
     "@mysigmail/vue-email-components": "file:../components",
+    "@vueuse/core": "^10.2.1",
     "element-plus": "^2.3.7",
     "html-to-text": "^9.0.5",
     "pretty": "^2.0.0",

diff --git a/packages/client/pages/index.vue b/packages/client/pages/index.vue
@@ -4,7 +4,7 @@
 
 <template>
   <div class="index flex items-center justify-center leading-7 text-slate-600">
-    <div class="w-[500px] text-center _border p-8 rounded-lg _bg-white mt-24">
+    <div class="w-[500px] text-center p-8 rounded-lg mt-24">
       <p class="font-bold">
         Welcome to the Vue Email preview!
       </p>

diff --git a/packages/client/pages/preview/[slug].vue b/packages/client/pages/preview/[slug].vue
@@ -1,16 +1,32 @@
 <script setup lang="ts">
 import { convert } from 'html-to-text'
+import { useClipboard } from '@vueuse/core'
 import { renderInIframe, renderToString } from '@/utils'
 import { useState } from '@/composables'
+import CopySvg from '@/assets/svg/copy.svg'
+
+type Source = 'vue' | 'html' | 'text'
 
 const route = useRoute()
 const refMount = ref<HTMLDivElement>()
 
 const slug = route.params.slug
 const view = computed(() => route.query.view)
+const tab = ref<Source>('vue')
 
 const { html, text, vue } = useState()
 
+function onCopy() {
+  const source = {
+    html,
+    text,
+    vue,
+  }
+
+  const { copy } = useClipboard({ source: source[tab.value] })
+  copy()
+}
+
 onMounted(async () => {
   const Email = defineAsyncComponent(() => import(`../../emails/${slug}.vue`))
   const source = await import(`../../emails/${slug}.vue?raw`)
@@ -25,24 +41,29 @@ onMounted(async () => {
 
 <template>
   <div v-show="view === 'desktop'" class="desktop">
-    <div class="relative h-[calc(100vh_-_3rem)] overflow-auto">
-      <div ref="refMount" class="w-full h-[calc(100vh_-_3rem)] " />
+    <div class="relative h-[calc(100vh_-_5rem)] overflow-auto">
+      <div ref="refMount" class="desktop__preview w-full h-[calc(100vh_-_5rem)] flex justify-center " />
     </div>
   </div>
-  <div v-show="view === 'source'" class="source flex justify-center">
-    <div class="source__inner mt-4 w-[800px]">
-      <ElTabs>
-        <ElTabPane label="Vue" class="h-[calc(100vh_-_10rem)] overflow-auto rounded">
+  <div v-show="view === 'source'" class="source flex justify-center relative top-[8px]">
+    <div class="source__inner w-[752px] rounded px-8 pb-8 pt-2 bg-white">
+      <div class="actions absolute right-[50px] z-10">
+        <ElButton _size="small" link _type="info" @click="onCopy">
+          <CopySvg width="18" :font-controlled="false" />
+        </ElButton>
+      </div>
+      <ElTabs v-model="tab">
+        <ElTabPane label="Vue" name="vue" class="h-[calc(100vh_-_13rem)] overflow-auto rounded">
           <ClientOnly>
             <CodePreview :code="vue" />
           </ClientOnly>
         </ElTabPane>
-        <ElTabPane label="HTML" class="h-[calc(100vh_-_10rem)] overflow-auto rounded">
+        <ElTabPane label="HTML" name="html" class="h-[calc(100vh_-_13rem)] overflow-auto rounded">
           <ClientOnly>
             <CodePreview :code="html" />
           </ClientOnly>
         </ElTabPane>
-        <ElTabPane label="Text" class="h-[calc(100vh_-_10rem)] overflow-auto rounded">
+        <ElTabPane label="Text" name="text" class="h-[calc(100vh_-_13rem)] overflow-auto rounded">
           <ClientOnly>
             <CodePreview :code="text" />
           </ClientOnly>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml