Restyle room entry actions

client/cypress/integration/frontend/rooms/rooms-page.spec.js

@@ -11,7 +11,6 @@ describe('The Rooms Page', () => {
               schoolClass: {
                 id: btoa('SchoolClassNode:selectedClassId'),
               },
-
             },
           },
         ],

client/src/components/rooms/MoreActions.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="more-actions">
+    <a
+      class="room-actions__more-link"
+      data-cy="toggle-more-actions-menu"
+      @click="toggleMenu">
+      <ellipses/>
+    </a>
+    <widget-popover
+      class="room-actions__popover"
+      v-if="showMenu"
+      @hide-me="showMenu = false">
+      <slot/>
+    </widget-popover>
+  </div>
+</template>
+
+<script>
+  import Ellipses from '@/components/icons/Ellipses';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
+
+  export default {
+
+    components: {
+      Ellipses,
+      WidgetPopover,
+    },
+    data() {
+      return {
+        showMenu: false,
+      };
+    },
+
+    methods: {
+      toggleMenu: function () {
+        this.showMenu = !this.showMenu;
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .more-actions {
+    svg {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+  }
+</style>

client/src/components/rooms/RoomActions.vue

@@ -1,54 +1,31 @@
 <template>
-  <div
+  <more-actions data-cy="room-actions">
-    class="room-actions"
+    <popover-link
-    data-cy="room-actions">
+      icon="pen-icon"
-    <a
+      text="Bearbeiten"
-      class="room-actions__more-link"
+      @link-action="editRoom()"/>
-      data-cy="toggle-room-actions-menu"
+    <popover-link
-      @click="toggleMenu">
+      icon="eye-icon"
-      <ellipses/>
+      data-cy="change-visibility"
-    </a>
+      text="Sichtbarkeit anpassen"
-    <widget-popover
+      @link-action="changeVisibility()"/>
-      class="room-actions__popover"
+    <popover-link
-      v-if="showMenu"
+      icon="trash-icon"
-      @hide-me="showMenu = false">
+      text="Löschen"
-      <li class="popover-links__link">
+      data-cy="delete-room"
-        <popover-link
+      @link-action="deleteRoom()"/>
-          icon="pen-icon"
+  </more-actions>
-          text="Bearbeiten"
-          @link-action="editRoom()"/>
-      </li>
-      <li class="popover-links__link">
-        <popover-link
-          icon="eye-icon"
-          data-cy="change-visibility"
-          text="Sichtbarkeit anpassen"
-          @link-action="changeVisibility()"/>
-      </li>
-      <li class="popover-links__link">
-        <popover-link
-          icon="trash-icon"
-          text="Löschen"
-          data-cy="delete-room"
-          @link-action="deleteRoom()"/>
-      </li>
-    </widget-popover>
-  </div>
 </template>
 
 <script>
-  import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/ui/WidgetPopover';
 
   import DELETE_ROOM_MUTATION from 'gql/mutations/rooms/deleteRoom.gql';
   import UPDATE_ROOM_VISIBILITY_MUTATION from 'gql/mutations/rooms/updateRoomVisibility.gql';
 
   import ROOMS_QUERY from '@/graphql/gql/queries/roomsQuery.gql';
-  import PenIcon from '@/components/icons/PenIcon';
-  import TrashIcon from '@/components/icons/TrashIcon';
-  import EyeIcon from '@/components/icons/EyeIcon';
   import PopoverLink from '@/components/ui/PopoverLink';
   import {ROOMS_PAGE} from '@/router/room.names';
+  import MoreActions from '@/components/rooms/MoreActions';
 
   export default {
     props: {
@@ -58,29 +35,17 @@
       },
       restricted: {
         type: Boolean,
-        default: false
+        default: false,
-      }
+      },
     },
 
     components: {
+      MoreActions,
       PopoverLink,
-      EyeIcon,
-      TrashIcon,
-      PenIcon,
-      Ellipses,
-      WidgetPopover,
-    },
 
-    data() {
-      return {
-        showMenu: false,
-      };
     },
 
     methods: {
-      toggleMenu: function () {
-        this.showMenu = !this.showMenu;
-      },
       deleteRoom() {
         this.$apollo.mutate({
           mutation: DELETE_ROOM_MUTATION,
@@ -98,7 +63,7 @@
               }
             }
             this.$router.push({
-              name: ROOMS_PAGE
+              name: ROOMS_PAGE,
             });
           },
         });
@@ -115,15 +80,15 @@
               variables: {
                 input: {
                   id: this.id,
-                  restricted
+                  restricted,
-                }
+                },
-              }
+              },
             });
           })
           .catch(() => {
 
           });
-      }
+      },
     },
   };
 </script>
@@ -145,11 +110,5 @@
       display: flex;
       width: max-content;
     }
-
-    svg {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      margin-right: 15px;
-    }
   }
 </style>

client/src/components/rooms/RoomEntry.vue

@@ -1,18 +1,9 @@
 <template>
   <div class="room-entry">
-    <more-options-widget
-      class="room-entry__more"
-      data-cy="room-entry-actions"
-      v-if="myEntry">
-      <li class="popover-links__link"><a @click="deleteRoomEntry(id)">Eintrag löschen</a></li>
-      <li class="popover-links__link"><a
-        data-cy="edit-room-entry"
-        @click="editRoomEntry(id)">Eintrag bearbeiten</a></li>
-    </more-options-widget>
     <router-link
       :to="{name: 'article', params: { slug: slug }}"
-      tag="div"
+      class="room-entry__router-link"
-      class="room-entry__router-link">
+      tag="div">
       <div
         class="room-entry__header"
         v-if="image">
@@ -31,25 +22,34 @@
           class="room-entry__author"/>
       </div>
     </router-link>
+
+    <room-entry-actions
+      :id="id"
+      data-cy="room-entry-actions"
+      class="room-entry__more"
+      v-if="myEntry"/>
+
   </div>
 
 </template>
 
 <script>
-  import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry.gql';
-  import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
   import UserMetaWidget from '@/components/UserMetaWidget';
   import MoreOptionsWidget from '@/components/MoreOptionsWidget';
   import teaser from '@/helpers/teaser';
+  import WidgetFooter from '@/components/ui/WidgetFooter';
+  import RoomEntryActions from '@/components/rooms/RoomEntryActions';
 
   export default {
     props: ['title', 'author', 'contents', 'slug', 'id'],
 
     components: {
+      RoomEntryActions,
+      WidgetFooter,
       MoreOptionsWidget,
-      UserMetaWidget
+      UserMetaWidget,
     },
 
     computed: {
@@ -67,54 +67,26 @@
         const authorId = atob(this.author.id).split(':')[1];
         const userId = atob(this.me.id).split(':')[1];
         return authorId === userId;
-      }
-    },
-
-    methods: {
-      deleteRoomEntry(id) {
-        this.$apollo.mutate({
-          mutation: DELETE_ROOM_ENTRY_MUTATION,
-          variables: {
-            input: {
-              id
-            }
-          },
-          update(store, {data: {deleteRoomEntry: {success, roomSlug}}}) {
-            if (success) {
-              const query = ROOM_ENTRIES_QUERY;
-              const variables = {slug: roomSlug};
-              const data = store.readQuery({query, variables});
-              if (data) {
-                data.room.roomEntries.edges.splice(data.room.roomEntries.edges.findIndex(edge => edge.node.id === id), 1);
-                store.writeQuery({query, data, variables});
-              }
-            }
-          }
-        });
       },
-      editRoomEntry(id) {
-        this.$store.dispatch('editRoomEntry', id);
-      }
     },
 
     apollo: {
       me() {
         return {
-          query: ME_QUERY
+          query: ME_QUERY,
         };
-      }
+      },
     },
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_functions.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_variables.scss";
 
   .room-entry {
     border-radius: 12px;
-    overflow: hidden;
     background-color: $color-white;
+    overflow: hidden;
     -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
     page-break-inside: avoid; /* Firefox */
     break-inside: avoid; /* IE 10+ */
@@ -143,8 +115,8 @@
 
     &__more {
       position: absolute;
-      top: 10px;
+      top: 0;
-      right: 10px;
+      right: 0;
     }
 
   }

client/src/components/rooms/RoomEntryActions.vue

@@ -0,0 +1,93 @@
+<template>
+  <more-actions data-cy="room-entry-actions">
+    <popover-link
+      icon="trash-icon"
+      text="Eintrag löschen"
+      @link-action="deleteRoomEntry(id)"/>
+    <popover-link
+      icon="pen-icon"
+      data-cy="edit-room-entry"
+      text="Eintrag bearbeiten"
+      @link-action="editRoomEntry(id)"/>
+  </more-actions>
+</template>
+
+<script>
+  import PopoverLink from '@/components/ui/PopoverLink';
+  import MoreActions from '@/components/rooms/MoreActions';
+  import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry';
+  import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery';
+
+  export default {
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+    },
+
+    components: {
+      MoreActions,
+      PopoverLink,
+    },
+
+    data() {
+      return {
+        showMenu: false,
+      };
+    },
+
+    methods: {
+      deleteRoomEntry(id) {
+        this.$apollo.mutate({
+          mutation: DELETE_ROOM_ENTRY_MUTATION,
+          variables: {
+            input: {
+              id,
+            },
+          },
+          update(store, {data: {deleteRoomEntry: {success, roomSlug}}}) {
+            if (success) {
+              const query = ROOM_ENTRIES_QUERY;
+              const variables = {slug: roomSlug};
+              const data = store.readQuery({query, variables});
+              if (data) {
+                data.room.roomEntries.edges.splice(data.room.roomEntries.edges.findIndex(edge => edge.node.id === id), 1);
+                store.writeQuery({query, data, variables});
+              }
+            }
+          },
+        });
+      },
+      editRoomEntry(id) {
+        this.$store.dispatch('editRoomEntry', id);
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~styles/helpers";
+
+  $height: 30px;
+
+  .room-entry-actions {
+    height: $height;
+
+    &__more-link {
+      cursor: pointer;
+      height: $height;
+    }
+
+    &__popover {
+      display: flex;
+      width: max-content;
+    }
+
+    svg {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+  }
+</style>

client/src/components/rooms/RoomWidget.vue

@@ -64,8 +64,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .room-widget {
     display: -ms-grid;

client/src/components/ui/PopoverLink.vue

@@ -1,12 +1,14 @@
 <template>
-  <a
+  <li class="popover-links__link">
-    class="popover-link"
+    <a
-    @click="$emit('link-action')">
+      class="popover-link"
-    <component
+      @click="$emit('link-action')">
-      :is="icon"
+      <component
-      class="popover-link__icon"/>
+        :is="icon"
-    <span class="popover-link__text">{{ text }}</span>
+        class="popover-link__icon"/>
-  </a>
+      <span class="popover-link__text">{{ text }}</span>
+    </a>
+  </li>
 </template>
 
 <script>

client/src/styles/_widget-popover.scss

@@ -10,6 +10,7 @@
   padding: 0;
   z-index: 100;
   @include widget-shadow;
+  width: max-content;
 
   &--mobile {
     left: 0;