From deabbf328fa18266427b5b6c01921353d9c0bb22 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 25 Jul 2019 11:42:58 +0200
Subject: [PATCH] Use UserMetaWidget

---
 client/src/components/UserMetaWidget.vue  | 53 +++++++++++++++++++++++
 client/src/components/rooms/RoomEntry.vue |  6 +--
 client/src/pages/article.vue              |  6 +--
 3 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/UserMetaWidget.vue

diff --git a/client/src/components/UserMetaWidget.vue b/client/src/components/UserMetaWidget.vue
new file mode 100644
index 00000000..65df569d
--- /dev/null
+++ b/client/src/components/UserMetaWidget.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="user-widget">
+      <div class="user-widget__avatar">
+        <avatar :avatar-url="avatarUrl" />
+      </div>
+      <span class="user-widget__name">{{firstName}} {{lastName}}</span>
+      <span class="user-widget__date" v-if="date">{{date}}</span>
+    </div>
+</template>
+
+<script>
+  import Avatar from '@/components/profile/Avatar';
+
+  export default {
+    props: ['firstName', 'lastName', 'avatarUrl', 'date'],
+
+    components: {
+      Avatar
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .user-widget {
+    color: $color-silver-dark;
+    display: flex;
+    align-items: center;
+
+    &__name {
+      padding: 0px 10px;
+      color: $color-silver-dark;
+      font-family: $sans-serif-font-family;
+    }
+
+    &__date {
+      font-family: $sans-serif-font-family;
+    }
+
+    &__avatar {
+      width: 30px;
+      height: 30px;
+      fill: $color-silver-dark;
+    }
+
+    &--is-profile {
+      & > span {
+        color: $color-brand;
+      }
+    }
+  }
+</style>
diff --git a/client/src/components/rooms/RoomEntry.vue b/client/src/components/rooms/RoomEntry.vue
index 971dc462..d9249475 100644
--- a/client/src/components/rooms/RoomEntry.vue
+++ b/client/src/components/rooms/RoomEntry.vue
@@ -13,7 +13,7 @@
         <p class="room-entry__teaser" v-html="teaser">
 
         </p>
-        <user-widget class="room-entry__author" v-bind="author"></user-widget>
+        <user-meta-widget class="room-entry__author" v-bind="author"></user-meta-widget>
       </div>
     </router-link>
   </div>
@@ -25,7 +25,7 @@
   import ROOM_ENTRIES_QUERY from '@/graphql/gql/roomEntriesQuery.gql';
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
-  import UserWidget from '@/components/UserWidget';
+  import UserMetaWidget from '@/components/UserMetaWidget';
   import MoreOptionsWidget from '@/components/MoreOptionsWidget';
   import teaser from '@/helpers/teaser';
 
@@ -34,7 +34,7 @@
 
     components: {
       MoreOptionsWidget,
-      UserWidget
+      UserMetaWidget
     },
 
     methods: {
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index ddcf48ad..490c278e 100644
--- a/client/src/pages/article.vue
+++ b/client/src/pages/article.vue
@@ -2,7 +2,7 @@
   <div class="article">
     <div class="article__header">
       <div class="article__meta">
-        <user-widget v-bind="roomEntry.author"></user-widget>
+        <user-meta-widget v-bind="roomEntry.author"></user-meta-widget>
       </div>
       <h1 class="article__title">{{roomEntry.title}}</h1>
     </div>
@@ -24,7 +24,7 @@
   import VideoBlock from '@/components/content-blocks/VideoBlock';
   import LinkBlock from '@/components/content-blocks/LinkBlock';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
-  import UserWidget from '@/components/UserWidget';
+  import UserMetaWidget from '@/components/UserMetaWidget';
 
   import ROOM_ENTRY_QUERY from '@/graphql/gql/roomEntryQuery.gql';
 
@@ -36,7 +36,7 @@
       'video_block': VideoBlock,
       'link_block': LinkBlock,
       'document_block': DocumentBlock,
-      UserWidget
+      UserMetaWidget
     },
 
     apollo: {