ProfilePicture.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <img
  3. class="profile-picture using-gravatar"
  4. v-if="avatar.type === 'gravatar'"
  5. :src="
  6. avatar.url ? `${avatar.url}?d=${notes}&s=250` : '/assets/notes.png'
  7. "
  8. onerror="this.src='/assets/notes.png'; this.onerror=''"
  9. />
  10. <div class="profile-picture using-initials" :class="avatar.color" v-else>
  11. <span>{{ initials }}</span>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. avatar: {
  18. type: Object,
  19. default: () => {}
  20. },
  21. name: {
  22. type: String,
  23. default: ": )"
  24. }
  25. },
  26. data() {
  27. return {
  28. notes: ""
  29. };
  30. },
  31. computed: {
  32. initials() {
  33. return this.name
  34. .replaceAll(/[^A-Za-z ]+/g, "")
  35. .replaceAll(/ +/g, " ")
  36. .split(" ")
  37. .map(word => word.charAt(0))
  38. .splice(0, 2)
  39. .join("")
  40. .toUpperCase();
  41. }
  42. },
  43. async mounted() {
  44. const frontendDomain = await lofig.get("frontendDomain");
  45. this.notes = encodeURI(`${frontendDomain}/assets/notes.png`);
  46. }
  47. };
  48. </script>
  49. <style lang="scss" scoped>
  50. .profile-picture {
  51. width: 100px;
  52. height: 100px;
  53. border-radius: 100%;
  54. border: 0.5px solid var(--light-grey-3);
  55. &.using-initials {
  56. display: flex;
  57. align-items: center;
  58. justify-content: center;
  59. background-color: var(--light-grey-2);
  60. font-family: "Inter", sans-serif;
  61. font-weight: 400;
  62. user-select: none;
  63. -webkit-user-select: none;
  64. span {
  65. font-size: 40px; // 2/5th of .profile-picture height/width
  66. }
  67. &.blue {
  68. background-color: var(--primary-color);
  69. color: var(--white);
  70. }
  71. &.orange {
  72. background-color: var(--orange);
  73. color: var(--white);
  74. }
  75. &.green {
  76. background-color: var(--green);
  77. color: var(--white);
  78. }
  79. &.purple {
  80. background-color: var(--purple);
  81. color: var(--white);
  82. }
  83. &.teal {
  84. background-color: var(--teal);
  85. color: var(--white);
  86. }
  87. &.grey {
  88. background-color: var(--grey);
  89. color: var(--white);
  90. }
  91. }
  92. }
  93. </style>