Use popover in user widget

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>
-        <user-widget v-bind="me"></user-widget>
-      </router-link>
       <logout-widget></logout-widget>
     </div>
     <book-navigation v-if="showSubnavigation">

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>

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">
+      <div class="user-widget__avatar" @click="toggleShowPopover()">
-        <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
+        <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile"/>
       </div>
-      <span class="user-widget__name">{{firstName}} {{lastName}}</span>
+      <!--span class="user-widget__name">{{firstName}} {{lastName}}</span>
-      <span class="user-widget__date" v-if="date">{{date}}</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 {

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;

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;

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;

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;
+}

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;