Revert "Remove StudipUserAvatar Vue component"

This reverts commit 8c2b6f49ebff97c8b1b0dccb2849364d16e01299.

4 files changed, 57 insertions, 33 deletions

diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 6ea02f5..f6c8e9e 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -898,8 +898,6 @@ input.allow-plaintext-toggle {
         padding: 0;
         cursor: pointer;
         display: flex;
-        align-items: center;
-        gap: 5px;
 
         &:hover,
         &:focus,
diff --git a/resources/vue/components/StudipUserAvatar.vue b/resources/vue/components/StudipUserAvatar.vue
new file mode 100644
index 0000000..1020839
--- /dev/null
+++ b/resources/vue/components/StudipUserAvatar.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="studip-user-avatar" :class="{ 'studip-user-avatar-small': small }">
+        <span>
+            <img :src="avatarUrl" role="presentation" />
+        </span>
+        <span>{{ formattedName }}</span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        avatarUrl: {
+            type: String,
+            required: true,
+        },
+        formattedName: {
+            type: String,
+            required: true,
+        },
+        small: {
+            type: Boolean,
+            default: false,
+        },
+    },
+};
+</script>
+
+<style scoped>
+.studip-user-avatar {
+    align-items: center;
+    display: flex;
+    gap: 0.25rem;
+}
+.studip-user-avatar-small img {
+    width: 1em;
+}
+</style>
diff --git a/resources/vue/components/avatar/UserAvatarDropdown.vue b/resources/vue/components/avatar/UserAvatarDropdown.vue
index 486e3d3..9cb17ee 100644
--- a/resources/vue/components/avatar/UserAvatarDropdown.vue
+++ b/resources/vue/components/avatar/UserAvatarDropdown.vue
@@ -1,4 +1,5 @@
 <script setup>
+import {$gettext} from "@/assets/javascripts/lib/gettext";
 import Dropdown from "@/vue/components/Dropdown.vue";
 import UserAvatar from "@/vue/components/avatar/UserAvatar.vue";
 
@@ -14,10 +15,6 @@ defineProps({
     label: {
         type: String,
         default: ''
-    },
-    withName: {
-        type: Boolean,
-        default: false
     }
 });
 
@@ -27,20 +24,17 @@ const isOpen = defineModel({ default: false });
     <Dropdown class="user-avatar-dropdown" v-model="isOpen">
         <template #trigger>
             <button
-                class="user-avatar-dropdown__preview button-base"
+                class="user-avatar-dropdown__preview"
                 @click="isOpen = !isOpen"
                 v-bind="$attrs"
                 :class="{
                     'active': isOpen
                 }"
                 :title="label ?? user.name"
-                :aria-label="label ?? user.name"
+                :aria-label="label ?? $gettext('vCard')"
                 :aria-pressed="isOpen"
             >
                 <img class="user-profile" :src="user.avatar_url" :style="{ width: size, height: size }" :alt="user.name" />
-                <span v-if="withName">
-                    {{ user.name }}
-                </span>
             </button>
         </template>
 
diff --git a/resources/vue/components/courseware/tasks/peer-review/PeerReviewListItem.vue b/resources/vue/components/courseware/tasks/peer-review/PeerReviewListItem.vue
index 67a5d09..d24616e 100644
--- a/resources/vue/components/courseware/tasks/peer-review/PeerReviewListItem.vue
+++ b/resources/vue/components/courseware/tasks/peer-review/PeerReviewListItem.vue
@@ -6,31 +6,25 @@
             </a>
         </td>
         <td>
-            <UserAvatarDropdown
-                v-if="isUser(submitter)"
-                :user="{
-                    id: submitter.id,
-                    avatar_url: submitter.meta.avatar.small,
-                    username: submitter.attributes['username'],
-                    name: submitter.attributes['formatted-name']
-                }"
-                :withName="true"
-            />
+            <a v-if="isUser(submitter)" :href="userProfile(submitter)">
+                <UserAvatar
+                    :avatar-url="submitter.meta.avatar.small"
+                    :formatted-name="submitter.attributes['formatted-name']"
+                    small
+                />
+            </a>
             <a v-else :href="statusGroupUrl(submitter)">
                 {{ submitter.attributes.name }}
             </a>
         </td>
         <td>
-            <UserAvatarDropdown
-                v-if="isUser(reviewer)"
-                :user="{
-                    id: reviewer.id,
-                    avatar_url: reviewer.meta.avatar.small,
-                    username: reviewer.attributes['username'],
-                    name: reviewer.attributes['formatted-name']
-                }"
-                :withName="true"
-            />
+            <a v-if="isUser(reviewer)" :href="userProfile(reviewer)">
+                <UserAvatar
+                    :avatar-url="reviewer.meta.avatar.small"
+                    :formatted-name="reviewer.attributes['formatted-name']"
+                    small
+                />
+            </a>
             <a v-else :href="statusGroupUrl(reviewer)">
                 {{ reviewer.attributes.name }}
             </a>
@@ -57,9 +51,9 @@
 <script>
 import { mapGetters } from 'vuex';
 import StudipDate from '@/vue/components/StudipDate.vue';
+import UserAvatar from '@/vue/components/StudipUserAvatar.vue';
 import taskHelper from '../../../../mixins/courseware/task-helper.js';
 import { getProcessStatus, ProcessStatus } from './definitions';
-import UserAvatarDropdown from "@/vue/components/avatar/UserAvatarDropdown.vue";
 
 export default {
     mixins: [taskHelper],
@@ -77,7 +71,7 @@ export default {
             required: true,
         },
     },
-    components: { StudipDate, UserAvatarDropdown },
+    components: { StudipDate, UserAvatar },
     computed: {
         ...mapGetters({
             context: 'context',