logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

user_avatar.vue (1914B)

    

  1. <template>
  2.   <span
  3.     class="Avatar"
  4.     :class="{ '-compact': compact }"
  5.   >
  6.     <StillImage
  7.       v-if="user"
  8.       class="avatar"
  9.       :alt="user.screen_name_ui"
  10.       :title="user.screen_name_ui"
  11.       :src="imgSrc(user.profile_image_url_original)"
  12.       :image-load-error="imageLoadError"
  13.       :class="{ '-compact': compact, '-better-shadow': betterShadow }"
  14.     />
  15.     <div
  16.       v-else
  17.       class="avatar -placeholder"
  18.       :class="{ '-compact': compact }"
  19.     />
  20.     <FAIcon
  21.       v-if="showActorTypeIndicator && user?.actor_type === 'Service'"
  22.       icon="robot"
  23.       class="actor-type-indicator"
  24.     />
  25.     <FAIcon
  26.       v-if="showActorTypeIndicator && user?.actor_type === 'Group'"
  27.       icon="people-group"
  28.       class="actor-type-indicator"
  29.     />
  30.   </span>
  31. </template>
  33. <script src="./user_avatar.js"></script>
  34. <style lang="scss">
  35. .Avatar {
  36.   --_avatarShadowBox: var(--shadow);
  37.   --_avatarShadowFilter: var(--shadowFilter);
  38.   --_avatarShadowInset: var(--shadowInset);
  39.   --_still-image-label-visibility: hidden;
  41.   display: inline-block;
  42.   position: relative;
  43.   width: 48px;
  44.   height: 48px;
  46.   &.-compact {
  47.     width: 32px;
  48.     height: 32px;
  49.     border-radius: var(--roundness);
  50.   }
  52.   .avatar {
  53.     width: 100%;
  54.     height: 100%;
  55.     box-shadow: var(--_avatarShadowBox);
  56.     border-radius: var(--roundness);
  58.     &.-better-shadow {
  59.       box-shadow: var(--_avatarShadowInset);
  60.       filter: var(--_avatarShadowFilter);
  61.     }
  63.     &.-animated::before {
  64.       display: none;
  65.     }
  67.     &.-compact {
  68.       border-radius: var(--roundness);
  69.     }
  71.     &.-placeholder {
  72.       background-color: var(--background);
  73.     }
  74.   }
  76.   img {
  77.     width: 100%;
  78.     height: 100%;
  79.   }
  81.   .actor-type-indicator {
  82.     position: absolute;
  83.     bottom: 0;
  84.     right: 0;
  85.     margin: -0.2em;
  86.     padding: 0.2em;
  87.     background: rgb(127 127 127 / 50%);
  88.     color: #fff;
  89.     border-radius: var(--roundness);
  90.   }
  91. }
  92. </style>