updated Avatar and NoteHeader

Author: e11sy

codex-ui/src/vue/components/avatar/Avatar.vue

@@ -2,15 +2,15 @@
   <img
     :src="src"
     :alt="`Avatar of ${username}`"
-    :class="$style.avatar"
+    :class="$style[`avatar--${size}`]"
     referrerpolicy="no-referrer"
   >
 </template>
 
 <script setup lang="ts">
 import { defineProps } from 'vue';
 
-defineProps<{
+withDefaults(defineProps<{
   /**
    * Path to the image
    */
@@ -21,13 +21,33 @@ defineProps<{
    * In future, we can use this to generate initials
    */
   username: string;
-}>();
+
+  /**
+   * Size of the avatar image
+   * medium by default
+   */
+  size: 'medium' | 'small'
+}>(),
+{
+  src: undefined,
+  username: undefined,
+  size: 'medium',
+});
+
 </script>
 
 <style module>
 .avatar {
-  width: var(--size-avatar);
-  height: var(--size-avatar);
-  border-radius: var(--radius-m);
+  &--small {
+    width: var(--size-icon);
+    height: var(--size-icon);
+    border-radius: var(--radius-s);
+  }
+
+  &--medium {
+    width: var(--size-avatar);
+    height: var(--size-avatar);
+    border-radius: var(--radius-m);
+  }
 }
 </style>

src/application/i18n/messages/en.json

@@ -85,7 +85,8 @@
     "title": "Versions history",
     "view": "View",
     "useVersion": "Use this version",
-    "confirmVersionRestore": "Do you really want to use this version?"
+    "confirmVersionRestore": "Do you really want to use this version?",
+    "editedTime": "edited on"
   },
   "noteList": {
     "emptyNoteList": "No Notes yet. Make your first note",

src/presentation/components/note-header/NoteHeader.vue

@@ -30,6 +30,7 @@
   &__right {
     display: flex;
     gap: var(--spacing-s);
+    align-items: center;
   }
 }
 </style>

src/presentation/pages/HistoryVersion.vue

@@ -1,14 +1,23 @@
 <template>
   <div>
     <NoteHeader>
-      <template #left>
-        {{
-          historyMeta && 'createdAt' in historyMeta && historyMeta.createdAt
-            ? t('note.lastEdit') + ' ' + getTimeFromNow(historyMeta.createdAt)
-            : t('note.lastEdit') + ' ' + 'a few seconds ago'
-        }}
-      </template>
       <template #right>
+        <div
+          v-if="historyMeta !== undefined && historyMeta?.user.photo"
+          :class="$style['head-meta']"
+        >
+          <Avatar
+            :src="historyMeta.user.photo"
+            :username="historyMeta.user.name"
+            size="small"
+          />
+          {{
+            historyMeta?.user.name
+          }}
+          {{
+            t('history.editedTime') + ' ' + parseDate(new Date(historyMeta.createdAt))
+          }}
+        </div>
         <Button
           @click="useThisVersion"
         >
@@ -21,7 +30,7 @@
           secondary
           @click="router.push(`/note/${noteId}/history`)"
         >
-          👁️
+          History
         </Button>
       </template>
     </NoteHeader>
@@ -35,11 +44,11 @@
 
 <script lang="ts" setup>
 import { ref, toRef, watch } from 'vue';
-import { Editor, Button } from 'codex-ui/vue';
+import { Editor, Button, Avatar } from 'codex-ui/vue';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
 import useHistory from '@/application/services/useNoteHistory';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
-import { getTimeFromNow, parseDate } from '@/infrastructure/utils/date';
+import { parseDate } from '@/infrastructure/utils/date';
 import useNote from '@/application/services/useNote';
 import { useI18n } from 'vue-i18n';
 import useHeader from '@/application/services/useHeader';
@@ -131,5 +140,12 @@ watch(noteTitle, (currentNoteTitle) => {
 
 </script>
 
-<style scoped>
+<style module>
+.head-meta {
+  display: flex;
+  align-items: center;
+  color: var(--base--text-secondary);
+  gap: var(--spacing-s);
+  padding: 0 var(--spacing-s);
+}
 </style>

src/presentation/pages/Note.vue

@@ -23,7 +23,7 @@
           secondary
           @click="router.push(`/note/${noteId}/history`)"
         >
-          👁️
+          History
         </Button>
         <Button
           v-if="canEdit"