From 664284ce958fa0818a82b0266cc1f675e37c6789 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 2 Aug 2024 07:29:41 +0000
Subject: [PATCH] fix: profile banner fallback

---
 src/components/ProfileBanner.vue | 156 ++++++++++++++++++-------------
 1 file changed, 93 insertions(+), 63 deletions(-)

diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index aa4c3038..45780443 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -3,12 +3,12 @@ import { ref } from 'vue';
 
 defineProps<{
   icon?: string;
+  fallbackCover?: string;
   color?: string;
   img?: string | null;
   bgColor?: string;
   title?: string;
   caption?: string;
-  cover?: string | null;
 
   hideFade?: boolean;
   active?: boolean;
@@ -22,49 +22,75 @@ defineEmits<{
   (e: 'edit'): void;
 }>();
 
+const coverUrl = defineModel<string>('coverUrl', {
+  required: false,
+  default: '',
+});
+
 const showOverlay = ref(false);
 </script>
 <template>
-  <div
+  <q-img
+    fit="cover"
     class="cover rounded bordered relative-position"
-    :style="`background-image: linear-gradient(
+    position="0 0"
+    :src="coverUrl || fallbackCover || 'blank-cover.png'"
+    @error="coverUrl = ''"
+  >
+    <nav
+      class="full-width full-height"
+      :style="`background-image: linear-gradient(
           90deg, ${
             $q.dark.isActive
               ? `hsla(var(--gray-10-hsl) / ${hideFade ? '0' : '1'}) 10%,hsla(var(--gray-10-hsl) / 0) 100%`
               : `rgba(255, 255, 255, ${hideFade ? '0' : '1'}) 10%,rgba(255, 255, 255, 0) 100%`
           }
-        ),
-        url(${cover || 'blank-cover.png'});`"
-  >
-    <!-- profile -->
-    <div class="absolute-top flex items-center full-height q-pl-lg">
-      <div
-        class="surface-1"
-        style="
-          border-radius: 50%;
-          border: 4px solid var(--surface-1);
-          overflow: hidden;
-        "
-      >
+        )`"
+    >
+      <!-- profile -->
+      <div class="flex items-center full-height q-pl-lg" style="z-index: 999">
         <div
-          class="avatar__status"
-          style="z-index: 2"
-          :style="`${active ? 'background-color: hsla(var(--positive-bg) / 1)' : 'background-color: hsla(var(--text-mute) / 1)'}`"
-        ></div>
-        <q-avatar
-          size="6rem"
-          font-size="3rem"
-          class="cursor-pointer"
-          style="z-index: 1"
-          :style="`background-color: ${img ? 'white' : bgColor || 'var(--brand-1)'}; color: ${color || 'white'}`"
-          @mouseover="showOverlay = true"
-          @mouseleave="showOverlay = false"
-          @click.stop="$emit('view')"
+          class="surface-1"
+          style="
+            border-radius: 50%;
+            border: 4px solid var(--surface-1);
+            overflow: hidden;
+          "
         >
-          <q-img v-if="img" :src="img" :ratio="1" />
-          <q-icon v-if="!img" :name="icon || 'mdi-account'" />
+          <div
+            class="avatar__status"
+            style="z-index: 2"
+            :style="`${active ? 'background-color: hsla(var(--positive-bg) / 1)' : 'background-color: hsla(var(--text-mute) / 1)'}`"
+          ></div>
+          <q-avatar
+            size="6rem"
+            font-size="3rem"
+            class="cursor-pointer relative-position"
+            style="z-index: 1"
+            :style="{
+              'background-color': `${bgColor || 'var(--brand-1)'}`,
+              color: `${color || 'white'}`,
+            }"
+            @mouseover="showOverlay = true"
+            @mouseleave="showOverlay = false"
+            @click.stop="$emit('view')"
+          >
+            <q-img v-if="img" :src="img" :ratio="1">
+              <template #error>
+                <div
+                  class="full-width full-height flex items-center justify-center"
+                  style="background-color: transparent"
+                  :style="{
+                    color: `${color || 'white'}`,
+                  }"
+                >
+                  <q-icon :name="icon || 'mdi-account'" />
+                </div>
+              </template>
+            </q-img>
+            <q-icon v-else :name="icon || 'mdi-account'" />
 
-          <Transition name="slide-fade">
+            <!-- <Transition name="slide-fade"> -->
             <div
               v-if="showOverlay && !readonly"
               class="absolute-bottom text-caption flex items-center justify-center upload-overlay"
@@ -73,37 +99,38 @@ const showOverlay = ref(false);
             >
               {{ $t('editImage') }}
             </div>
-          </Transition>
-        </q-avatar>
-      </div>
-    </div>
-
-    <!-- text -->
-    <div
-      class="absolute-bottom relative-position justify-between row text-cover"
-      :class="{ dark: $q.dark.isActive }"
-    >
-      <div class="column">
-        <span class="text-bold q-pt-xs text-body1">{{ title }}</span>
-        <span class="app-text-muted">{{ caption }}</span>
-      </div>
-
-      <!-- icon -->
-      <div class="row items-center q-pr-lg">
-        <div class="q-gutter-x-sm">
-          <q-btn
-            v-for="(item, n) in menu"
-            :key="n"
-            flat
-            size="sm"
-            class="q-pa-xs rounded"
-            :icon="item.icon"
-            :style="`background-color: ${item.bgColor}; color: ${item.color}`"
-          />
+            <!-- </Transition> -->
+          </q-avatar>
         </div>
       </div>
-    </div>
-  </div>
+
+      <!-- text -->
+      <div
+        class="absolute-bottom relative-position justify-between row text-cover"
+        :class="{ dark: $q.dark.isActive }"
+      >
+        <div class="column">
+          <span class="text-bold q-pt-xs text-body1">{{ title }}</span>
+          <span class="app-text-muted">{{ caption }}</span>
+        </div>
+
+        <!-- icon -->
+        <div class="row items-center q-pr-lg" style="z-index: 999">
+          <div class="q-gutter-x-sm">
+            <q-btn
+              v-for="(item, n) in menu"
+              :key="n"
+              flat
+              size="sm"
+              class="q-pa-xs rounded"
+              :icon="item.icon"
+              :style="`background-color: ${item.bgColor}; color: ${item.color}`"
+            />
+          </div>
+        </div>
+      </div>
+    </nav>
+  </q-img>
 </template>
 
 <style lang="scss">
@@ -149,8 +176,7 @@ const showOverlay = ref(false);
 
 .upload-overlay {
   top: 3.5rem;
-  background-color: hsla(var(--gray-10-hsl) / 0.2);
-  backdrop-filter: blur(8px);
+  background-color: hsla(var(--gray-10-hsl) / 0.5);
   color: white;
 
   &.dark {
@@ -170,4 +196,8 @@ const showOverlay = ref(false);
 .slide-fade-leave-to {
   opacity: 0;
 }
+
+.q-img__content > nav {
+  pointer-events: all;
+}
 </style>