refactor(editor): account image header in loading and error cases

Novout · Sep 24, 2022 · 32f94c9 · 32f94c9
1 parent 2fbfa50
commit 32f94c9
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 119 deletions.
diff --git a/packages/better-write-app/package.json b/packages/better-write-app/package.json
@@ -26,6 +26,7 @@
     "@vuelidate/core": "2.0.0-alpha.44",
     "@vuelidate/validators": "2.0.0-alpha.31",
     "@vueuse/core": "9.2.0",
+    "@vueuse/components": "9.2.0",
     "@vueuse/head": "0.7.12",
     "@vueuse/integrations": "9.2.0",
     "@vueuse/motion": "2.0.0-beta.12",

diff --git a/packages/better-write-app/src/components/icons/IconGitlab.vue b/packages/better-write-app/src/components/icons/IconGitlab.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="m23.6 9.593l-.033-.086L20.3.98a.851.851 0 0 0-.336-.405a.875.875 0 0 0-1 .054a.875.875 0 0 0-.29.44L16.47 7.818H7.537L5.332 1.07a.857.857 0 0 0-.29-.441a.875.875 0 0 0-1-.054a.859.859 0 0 0-.336.405L.433 9.502l-.032.086a6.066 6.066 0 0 0 2.012 7.01l.01.009l.03.021l4.977 3.727l2.462 1.863l1.5 1.132a1.008 1.008 0 0 0 1.22 0l1.499-1.132l2.461-1.863l5.006-3.75l.013-.01a6.068 6.068 0 0 0 2.01-7.002z"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/better-write-app/src/components/icons/IconGoogle.vue b/packages/better-write-app/src/components/icons/IconGoogle.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 1024 1024">
+    <path
+      fill="currentColor"
+      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm167 633.6C638.4 735 583 757 516.9 757c-95.7 0-178.5-54.9-218.8-134.9C281.5 589 272 551.6 272 512s9.5-77 26.1-110.1c40.3-80.1 123.1-135 218.8-135c66 0 121.4 24.3 163.9 63.8L610.6 401c-25.4-24.3-57.7-36.6-93.6-36.6c-63.8 0-117.8 43.1-137.1 101c-4.9 14.7-7.7 30.4-7.7 46.6s2.8 31.9 7.7 46.6c19.3 57.9 73.3 101 137 101c33 0 61-8.7 82.9-23.4c26-17.4 43.2-43.3 48.9-74H516.9v-94.8h230.7c2.9 16.1 4.4 32.8 4.4 50.1c0 74.7-26.7 137.4-73 180.1z"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/better-write-app/src/components/icons/IconNotion.vue b/packages/better-write-app/src/components/icons/IconNotion.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 32 32">
+    <path
+      fill="currentColor"
+      d="M5.948 5.609c.99.807 1.365.75 3.234.625l17.62-1.057c.375 0 .063-.375-.063-.438l-2.927-2.115c-.557-.438-1.307-.932-2.74-.813L4.015 3.061c-.625.057-.75.37-.5.62zm1.057 4.11v18.536c0 .995.495 1.37 1.615 1.307l19.365-1.12c1.12-.063 1.25-.745 1.25-1.557V8.474c0-.813-.313-1.245-1-1.182L8.001 8.474c-.75.063-.995.432-.995 1.24zm19.115.989c.125.563 0 1.12-.563 1.188l-.932.188v13.682c-.813.438-1.557.688-2.177.688c-1 0-1.25-.313-1.995-1.245l-6.104-9.583v9.271l1.932.438s0 1.12-1.557 1.12l-4.297.25c-.125-.25 0-.875.438-.995l1.12-.313V13.142l-1.557-.125c-.125-.563.188-1.37 1.057-1.432l4.609-.313l6.354 9.708v-8.589l-1.62-.188c-.125-.682.37-1.182.995-1.24zM2.583 1.38L20.328.073c2.177-.188 2.74-.063 4.109.932l5.667 3.984c.932.682 1.245.87 1.245 1.615v21.839c0 1.37-.5 2.177-2.24 2.302L8.494 31.99c-1.302.063-1.927-.125-2.615-.995l-4.172-5.417C.962 24.583.65 23.838.65 22.969V3.558c0-1.12.5-2.052 1.932-2.177z"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/better-write-app/src/components/icons/IconUser.vue b/packages/better-write-app/src/components/icons/IconUser.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 256 256">
+    <path
+      fill="currentColor"
+      d="M231.9 220a7.8 7.8 0 0 1-6.9 4H31a7.8 7.8 0 0 1-6.9-4a7.7 7.7 0 0 1 0-8a120.7 120.7 0 0 1 67.1-54.2a72 72 0 1 1 73.6 0a120.7 120.7 0 0 1 67.1 54.2a7.7 7.7 0 0 1 0 8Z"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/better-write-app/src/components/page/editor/header/items/EditorBaseHeaderLogin.vue b/packages/better-write-app/src/components/page/editor/header/items/EditorBaseHeaderLogin.vue
@@ -5,112 +5,36 @@
       class="flex items-center px-3 font-poppins py-2 sm:py-1 mr-2 bg-black-opacity border-theme-border-1 wb-text rounded-full"
     >
       <button class="flex items-center truncate">
-        <img
-          v-if="user && user?.user_metadata.avatar_url"
-          onerror="this.onerror=null;this.style.display = 'none';"
-          class="rounded-full mr-0 sm:mr-2"
-          :width="28"
-          :src="user?.user_metadata?.avatar_url"
+        <UseImage
           alt="Profile Logo"
-        />
-        <HeroIcon v-else class="mr-2">
-          <svg
-            v-if="user && user.app_metadata.provider === 'google'"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            aria-hidden="true"
-            role="img"
-            class="h-5 w-5"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="#EA4335"
-              d="M5.266 9.765A7.077 7.077 0 0 1 12 4.909c1.69 0 3.218.6 4.418 1.582L19.91 3C17.782 1.145 15.055 0 12 0C7.27 0 3.198 2.698 1.24 6.65l4.026 3.115z"
-            ></path>
-            <path
-              fill="#34A853"
-              d="M16.04 18.013c-1.09.703-2.474 1.078-4.04 1.078a7.077 7.077 0 0 1-6.723-4.823l-4.04 3.067A11.965 11.965 0 0 0 12 24c2.933 0 5.735-1.043 7.834-3l-3.793-2.987z"
-            ></path>
-            <path
-              fill="#4A90E2"
-              d="M19.834 21c2.195-2.048 3.62-5.096 3.62-9c0-.71-.109-1.473-.272-2.182H12v4.637h6.436c-.317 1.559-1.17 2.766-2.395 3.558L19.834 21z"
-            ></path>
-            <path
-              fill="#FBBC05"
-              d="M5.277 14.268A7.12 7.12 0 0 1 4.909 12c0-.782.125-1.533.357-2.235L1.24 6.65A11.934 11.934 0 0 0 0 12c0 1.92.445 3.73 1.237 5.335l4.04-3.067z"
-            ></path>
-          </svg>
-          <svg
-            v-else-if="user && user.app_metadata.provider === 'github'"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            aria-hidden="true"
-            role="img"
-            class="h-5 w-5"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M8 .198a8 8 0 0 0-2.529 15.591c.4.074.547-.174.547-.385c0-.191-.008-.821-.011-1.489c-2.226.484-2.695-.944-2.695-.944c-.364-.925-.888-1.171-.888-1.171c-.726-.497.055-.486.055-.486c.803.056 1.226.824 1.226.824c.714 1.223 1.872.869 2.328.665c.072-.517.279-.87.508-1.07c-1.777-.202-3.645-.888-3.645-3.954c0-.873.313-1.587.824-2.147c-.083-.202-.357-1.015.077-2.117c0 0 .672-.215 2.201.82A7.672 7.672 0 0 1 8 4.066c.68.003 1.365.092 2.004.269c1.527-1.035 2.198-.82 2.198-.82c.435 1.102.162 1.916.079 2.117c.513.56.823 1.274.823 2.147c0 3.073-1.872 3.749-3.653 3.947c.287.248.543.735.543 1.481c0 1.07-.009 1.932-.009 2.195c0 .213.144.462.55.384A8 8 0 0 0 8.001.196z"
-              fill="currentColor"
-            ></path>
-          </svg>
-          <svg
-            v-else-if="user && user.app_metadata.provider === 'notion'"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            aria-hidden="true"
-            role="img"
-            class="h-5 w-5"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 15 15"
-          >
-            <path
-              fill="currentColor"
-              d="M3.258 3.117c.42.341.577.315 1.366.262l7.433-.446c.158 0 .027-.157-.026-.183l-1.235-.893c-.236-.184-.551-.394-1.155-.341l-7.198.525c-.262.026-.315.157-.21.262l1.025.814Zm.446 1.732v7.821c0 .42.21.578.683.552l8.17-.473c.472-.026.525-.315.525-.656V4.324c0-.34-.131-.525-.42-.499l-8.538.499c-.315.026-.42.184-.42.525Zm8.065.42c.052.236 0 .472-.237.499l-.394.078v5.774c-.341.184-.657.29-.92.29c-.42 0-.525-.132-.84-.526L6.803 7.342v3.911l.815.184s0 .472-.657.472l-1.812.105c-.053-.105 0-.367.184-.42l.472-.13V6.292L5.15 6.24c-.053-.236.078-.577.446-.604l1.944-.13L10.22 9.6V5.978l-.683-.079c-.053-.289.157-.499.42-.525l1.813-.105Zm-9.93-3.937L9.326.781c.919-.08 1.155-.026 1.733.394l2.39 1.68c.395.288.526.367.526.682v9.212c0 .578-.21.92-.946.971l-8.694.525c-.552.027-.815-.052-1.104-.42l-1.76-2.283c-.315-.42-.446-.735-.446-1.103V2.25c0-.472.21-.866.814-.918Z"
-            ></path>
-          </svg>
-          <svg
-            v-else-if="user && user.app_metadata.provider === 'gitlab'"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            aria-hidden="true"
-            role="img"
-            class="h-5 w-5"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 32 32"
-          >
-            <path
-              fill="#e24329"
-              d="m16 28.896l5.156-15.867H10.844L16 28.896z"
-            ></path>
-            <path
-              fill="#fc6d26"
-              d="m16 28.896l-5.156-15.867H3.619L16 28.896z"
-            ></path>
-            <path
-              fill="#fca326"
-              d="m3.619 13.029l-1.567 4.822a1.067 1.067 0 0 0 .388 1.193L16 28.9L3.619 13.029Z"
-            ></path>
-            <path
-              fill="#e24329"
-              d="M3.619 13.029h7.225L7.739 3.473a.534.534 0 0 0-1.015 0l-3.105 9.556Z"
-            ></path>
-            <path
-              fill="#fc6d26"
-              d="m16 28.896l5.156-15.867h7.225L16 28.896z"
-            ></path>
-            <path
-              fill="#fca326"
-              d="m28.381 13.029l1.567 4.822a1.067 1.067 0 0 1-.388 1.193L16 28.9l12.381-15.871Z"
-            ></path>
-            <path
-              fill="#e24329"
-              d="M28.381 13.029h-7.225l3.105-9.557a.534.534 0 0 1 1.015 0l3.105 9.557Z"
-            ></path>
-          </svg>
-        </HeroIcon>
+          class="rounded-full mr-0 sm:mr-2 w-8"
+          :src="user?.user_metadata.avatar_url"
+        >
+          <template #loading>
+            <Spinner class="rounded-full mr-0 sm:mr-2" width="32" />
+          </template>
+          <template #error>
+            <HeroIcon class="rounded-full mr-0 sm:mr-2 w-8">
+              <IconGoogle
+                v-if="user && user.app_metadata.provider === 'google'"
+                class="h-8 w-8"
+              />
+              <IconGithub
+                v-else-if="user && user.app_metadata.provider === 'github'"
+                class="h-8 w-8"
+              />
+              <IconNotion
+                v-else-if="user && user.app_metadata.provider === 'notion'"
+                class="h-8 w-8"
+              />
+              <IconGitlab
+                v-else-if="user && user.app_metadata.provider === 'gitlab'"
+                class="h-8 w-8"
+              />
+              <IconUser v-else />
+            </HeroIcon>
+          </template>
+        </UseImage>
         <p v-if="mobile && user" class="truncate">
           {{ user?.user_metadata?.name || user?.email || '' }}
         </p>
@@ -119,20 +43,7 @@
           class="wb-icon"
           @click.prevent.stop="supabase.out"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            aria-hidden="true"
-            role="img"
-            class="w-5 h-5"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="currentColor"
-              d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
-            ></path>
-          </svg>
+          <IconClose class="w-6 h-6" />
         </HeroIcon>
       </button>
     </div>
@@ -143,6 +54,7 @@
   import { useAuthStore } from '@/store/auth'
   import { useEnv } from '@/use/env'
   import { useSupabase } from '@/use/storage/supabase'
+  import { UseImage } from '@vueuse/components'
   import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
   import { computed } from 'vue'
   import { useRouter } from 'vue-router'

diff --git a/yarn.lock b/yarn.lock
@@ -3654,6 +3654,15 @@
   dependencies:
     vue-demi "^0.13.4"
 
+"@vueuse/components@9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-9.2.0.tgz#606e926c3ac0291f0fd7e58b29d4023afcfd0578"
+  integrity sha512-NgQRhq5v1LRZsQq21rJlY8VjEqYg5xWiGErBftY+HaBhHsLAn4PxJxtvbe9uZNdOQlRdWM3UPUF6NO/sWfnyWw==
+  dependencies:
+    "@vueuse/core" "9.2.0"
+    "@vueuse/shared" "9.2.0"
+    vue-demi "*"
+
 "@vueuse/core@9.2.0":
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.2.0.tgz#58e3588b9bc5a69010aa9104b00056ee9ebff738"