jws-frontend/src/components/ProfileBanner.vue

<script setup lang="ts">
import { ref } from 'vue';

defineProps<{
  icon?: string;
  fallbackCover?: string;
  color?: string;
  img?: string | null;
  bgColor?: string;
  title?: string;
  caption?: string;

  hideFade?: boolean;
  active?: boolean;
  readonly?: boolean;

  menu?: { icon: string; color: string; bgColor: string }[];
}>();

defineEmits<{
  (e: 'view'): void;
  (e: 'edit'): void;
}>();

const coverUrl = defineModel<string>('coverUrl', {
  required: false,
  default: '',
});

const showOverlay = ref(false);
</script>
<template>
  <q-img
    fit="cover"
    class="cover rounded bordered relative-position"
    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%`
          }
        )`"
    >
      <!-- profile -->
      <div class="flex items-center full-height q-pl-lg" style="z-index: 999">
        <div
          class="surface-1"
          style="
            border-radius: 50%;
            border: 4px solid var(--surface-1);
            overflow: hidden;
          "
        >
          <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"> -->
            <div
              v-if="showOverlay && !readonly"
              class="absolute-bottom text-caption flex items-center justify-center upload-overlay"
              :class="{ dark: $q.dark.isActive }"
              @click.stop="$emit('edit')"
            >
              {{ $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" 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">
.cover {
  height: 15vh;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.text-cover {
  height: 7.5vh;
  padding-left: 150px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 35%,
    rgba(255, 255, 255, 0.5) 100%
  );
  backdrop-filter: blur(11.2px);
  -webkit-backdrop-filter: blur(11.2px);

  &.dark {
    background: linear-gradient(
      90deg,
      hsla(var(--gray-10-hsl) / 1) 35%,
      hsla(var(--gray-10-hsl) / 0.3) 100%
    );
  }
}

.avatar__status {
  content: ' ';
  display: block;
  block-size: 1rem;
  aspect-ratio: 1;
  position: absolute;
  border-radius: 50%;
  left: 6.5rem;
  border: 1px solid var(--surface-1);
  top: calc(80% - 1.2rem);
}

.upload-overlay {
  top: 3.5rem;
  background-color: hsla(var(--gray-10-hsl) / 0.5);
  color: white;

  &.dark {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.slide-fade-enter-active {
  transition: all 0.15s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
}

.q-img__content > nav {
  pointer-events: all;
}
</style>