From ea9822562a43033e43a1c4a357e689f7c0c5df22 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 18 Jul 2019 13:38:22 +0200
Subject: [PATCH] Use popover in user widget

---
 client/src/components/HeaderBar.vue           |  4 +-
 client/src/components/MoreOptionsWidget.vue   |  4 +-
 client/src/components/UserWidget.vue          | 53 +++++++++++++++++--
 .../components/{rooms => }/WidgetPopover.vue  |  2 +-
 .../components/portfolio/ProjectActions.vue   | 10 +++-
 client/src/components/rooms/RoomActions.vue   | 10 +++-
 client/src/styles/_mixins.scss                |  4 ++
 client/src/styles/_variables.scss             |  3 ++
 8 files changed, 76 insertions(+), 14 deletions(-)
 rename client/src/components/{rooms => }/WidgetPopover.vue (97%)

diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 7c97788b..45af59c5 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -5,9 +5,7 @@
       <logo></logo>
     </router-link>
     <div class="user-header">
-      <router-link to="/me/activity">
-        <user-widget v-bind="me"></user-widget>
-      </router-link>
+      <user-widget v-bind="me"></user-widget>
       <logout-widget></logout-widget>
     </div>
     <book-navigation v-if="showSubnavigation">
diff --git a/client/src/components/MoreOptionsWidget.vue b/client/src/components/MoreOptionsWidget.vue
index 863129ba..9fcb68d2 100644
--- a/client/src/components/MoreOptionsWidget.vue
+++ b/client/src/components/MoreOptionsWidget.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-  import WidgetPopover from '@/components/rooms/WidgetPopover';
+  import WidgetPopover from '@/components/WidgetPopover';
   import Ellipses from '@/components/icons/Ellipses.vue';
 
   export default {
@@ -31,6 +31,7 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .more-options {
     display: flex;
@@ -54,6 +55,7 @@
 
     &__popover {
       width: 180px;
+      @include popover-defaults();
     }
   }
 </style>
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 03c28f54..285403e8 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -1,21 +1,58 @@
 <template>
     <div class="user-widget" :class="{'user-widget--is-profile': isProfile}">
-      <div class="user-widget__avatar">
-        <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
+      <div class="user-widget__avatar" @click="toggleShowPopover()">
+        <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile"/>
       </div>
-      <span class="user-widget__name">{{firstName}} {{lastName}}</span>
-      <span class="user-widget__date" v-if="date">{{date}}</span>
+      <!--span class="user-widget__name">{{firstName}} {{lastName}}</span>
+      <span class="user-widget__date" v-if="date">{{date}}</span-->
+      <widget-popover v-if="showPopover"
+                      @hide-me="showPopover == false"
+                      class="user-widget__popover">
+        <li class="popover-links__link">{{firstName}} {{lastName}}</li>
+        <li class="popover-links__link">
+          <router-link to="/me/activity">Aktivität</router-link>
+        </li>
+        <li class="popover-links__link">
+          <router-link to="/me/profile" >Profil</router-link>
+        </li>
+        <li class="popover-links__link">
+          <router-link to="/me/myclasses">Klassenliste</router-link>
+        </li>
+        <li class="popover-links__link" data-cy="logout" @click="logout()"><a>Logout</a>
+        </li>
+    </widget-popover>
     </div>
 </template>
 
 <script>
+  import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
   import Avatar from '@/components/profile/Avatar';
+  import WidgetPopover from '@/components/WidgetPopover';
 
   export default {
     props: ['firstName', 'lastName', 'avatarUrl', 'date'],
 
+    data() {
+      return {
+        showPopover: false
+      }
+    },
+
+    methods: {
+      toggleShowPopover() {
+        this.showPopover = !this.showPopover;
+      },
+      logout() {
+        this.$apollo.mutate({
+          mutation: LOGOUT_MUTATION,
+        }).then(({data}) => {
+          if (data.logout.success) { location.replace('/') }
+        });
+      }
+    },
+
     components: {
-      Avatar
+      Avatar, WidgetPopover
     },
     computed: {
       isProfile() {
@@ -32,6 +69,11 @@
     color: $color-silver-dark;
     display: flex;
     align-items: center;
+    position: relative;
+
+    &__popover {
+      top: 40px;
+    }
 
     &__name {
       padding: 0px 10px;
@@ -47,6 +89,7 @@
       width: 30px;
       height: 30px;
       fill: $color-silver-dark;
+      cursor: pointer;
     }
 
     &--is-profile {
diff --git a/client/src/components/rooms/WidgetPopover.vue b/client/src/components/WidgetPopover.vue
similarity index 97%
rename from client/src/components/rooms/WidgetPopover.vue
rename to client/src/components/WidgetPopover.vue
index e97784f3..f3bc2526 100644
--- a/client/src/components/rooms/WidgetPopover.vue
+++ b/client/src/components/WidgetPopover.vue
@@ -23,7 +23,7 @@
   .widget-popover {
     position: absolute;
     right: 0;
-    bottom: -110px;
+    // bottom: -110px;
     display: flex;
     flex-direction: column;
     background-color: $color-white;
diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index f27e1641..8f4ad201 100644
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@@ -5,7 +5,8 @@
       <ellipses></ellipses>
     </a>
     <widget-popover v-if="showMenu"
-                    @hide-me="showMenu = false">
+                    @hide-me="showMenu = false"
+                    class="project-actions__popover">
       <li class="popover-links__link"><a @click="deleteProject(id)">Projekt löschen</a></li>
       <li class="popover-links__link"><a @click="editProject(id)">Projekt bearbeiten</a></li>
       <li v-if="!final" class="popover-links__link"><a @click="updateShareState(id, true)">Projekt teilen</a></li>
@@ -18,7 +19,7 @@
 
 <script>
   import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/rooms/WidgetPopover';
+  import WidgetPopover from '@/components/WidgetPopover';
 
   import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
   import PROJECT_QUERY from '@/graphql/gql/projectQuery.gql';
@@ -100,12 +101,17 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .project-actions {
     &__more-link {
       cursor: pointer;
     }
 
+    &__popover {
+      @include popover-defaults();
+    }
+
     svg {
       width: 30px;
       fill: $color-charcoal-dark;
diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue
index d2c1217e..09bf7e90 100644
--- a/client/src/components/rooms/RoomActions.vue
+++ b/client/src/components/rooms/RoomActions.vue
@@ -5,7 +5,8 @@
       <ellipses></ellipses>
     </a>
     <widget-popover v-if="showMenu"
-                    @hide-me="showMenu = false">
+                    @hide-me="showMenu = false"
+                    class="room-actions__popover">
       <li class="popover-links__link"><a @click="deleteRoom()">Raum löschen</a></li>
       <li class="popover-links__link"><a @click="editRoom()">Raum bearbeiten</a></li>
     </widget-popover>
@@ -14,7 +15,7 @@
 
 <script>
   import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/rooms/WidgetPopover';
+  import WidgetPopover from '@/components/WidgetPopover';
 
   import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
   import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
@@ -66,12 +67,17 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .room-actions {
     &__more-link {
       cursor: pointer;
     }
 
+    &__popover {
+      @include popover-defaults();
+    }
+
     svg {
       width: 30px;
       fill: $color-charcoal-dark;
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 1f575f0a..b19849e7 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -142,3 +142,7 @@
 @mixin light-border($border-position) {
   border-#{$border-position}: 1px solid $color-silver;
 }
+
+@mixin popover-defaults() {
+  bottom: $popover-default-bottom;
+}
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 2cf324e0..7187d1d7 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -77,3 +77,6 @@ $font-weight-semibold: 600;
 $font-weight-regular: 400;
 
 $default-line-height: 1.5;
+
+// popover
+$popover-default-bottom: -110px;