jws-frontend/src/components/ProfileBanner.vue

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

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

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

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

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

const showOverlay = ref(false);
</script>
<template>
  <div
    class="cover rounded bordered relative-position"
    :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;
        "
      >
        <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')"
        >
          <q-img v-if="img" :src="img" :ratio="1" />
          <q-icon v-if="!img" :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">
        <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>
  </div>
</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.2);
  backdrop-filter: blur(8px);
  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;
}
</style>