From 64c596349034819c519dd6d6030560a5154c3f4b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 25 Aug 2021 13:48:37 +0200
Subject: [PATCH] Update styling of room page

---
 client/src/components/BackLink.vue            | 23 ++++++--
 client/src/components/ContentBlock.vue        | 22 +++++--
 client/src/components/MoreOptionsWidget.vue   |  2 +-
 .../src/components/modules/SnapshotMenu.vue   |  2 +-
 .../components/portfolio/ProjectActions.vue   |  2 +-
 .../components/portfolio/ProjectWidget.vue    |  2 +-
 client/src/components/rooms/Comment.vue       |  4 +-
 client/src/components/rooms/RoomActions.vue   | 52 +++++++++++++----
 client/src/components/rooms/RoomWidget.vue    |  2 +-
 .../school-class/ClassSelectionWidget.vue     |  2 +-
 client/src/components/ui/PopoverLink.vue      | 58 +++++++++++++++++++
 .../src/components/{ => ui}/WidgetFooter.vue  |  3 +-
 .../src/components/{ => ui}/WidgetPopover.vue |  0
 client/src/pages/room.vue                     | 17 +++++-
 client/src/router/room.names.js               |  1 +
 client/src/router/room.routes.js              |  4 +-
 client/src/styles/_mixins.scss                | 10 ++++
 client/src/styles/_room.scss                  | 27 +++++++--
 client/src/styles/_widget-popover.scss        | 20 ++++---
 19 files changed, 203 insertions(+), 50 deletions(-)
 create mode 100644 client/src/components/ui/PopoverLink.vue
 rename client/src/components/{ => ui}/WidgetFooter.vue (87%)
 rename client/src/components/{ => ui}/WidgetPopover.vue (100%)

diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
index ce5e534b..b7f2e258 100644
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@@ -10,6 +10,7 @@
 <script>
   import ChevronLeft from '@/components/icons/ChevronLeft';
   import {MODULE_PAGE} from '@/router/module.names';
+  import {ROOMS_PAGE} from '@/router/room.names';
 
   export default {
     props: {
@@ -33,15 +34,25 @@
 
     computed: {
       to() {
-        if (this.type === 'topic') {
-          return {name: 'topic', params: {topicSlug: this.slug}};
-        } else {
-          return {name: MODULE_PAGE};
+        switch (this.type) {
+          case 'topic':
+            return {name: 'topic', params: {topicSlug: this.slug}};
+          case 'module':
+            return {name: MODULE_PAGE};
+          default:
+            return {name: ROOMS_PAGE};
         }
       },
       fullTitle() {
-        return this.type === 'topic' ? `Thema: ${this.title}` : `Modul: ${this.title}`;
-      }
+        switch (this.type) {
+          case 'topic':
+            return `Thema: ${this.title}`;
+          case 'module':
+            return `Modul: ${this.title}`;
+          default:
+            return this.title;
+        }
+      },
     },
   };
 </script>
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index a2b6895c..519ae989 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -13,10 +13,19 @@
           v-bind="me"
           class="block-actions__user-widget content-block__user-widget"/>
         <more-options-widget>
-          <li class="popover-links__link"><a
-            data-cy="delete-content-block-link"
-            @click="deleteContentBlock(contentBlock)">Löschen</a></li>
-          <li class="popover-links__link"><a @click="editContentBlock(contentBlock)">Bearbeiten</a></li>
+          <li class="popover-links__link">
+            <popover-link
+              data-cy="delete-content-block-link"
+              text="Löschen"
+              @link-action="deleteContentBlock(contentBlock)" />
+
+          </li>
+
+          <li class="popover-links__link">
+            <popover-link
+              text="Bearbeiten"
+              @link-action="editContentBlock(contentBlock)" />
+          </li>
         </more-options-widget>
       </div>
       <div class="content-block__visibility">
@@ -67,6 +76,7 @@
   import me from '@/mixins/me';
   import {hidden} from '@/helpers/visibility';
   import {CONTENT_TYPE} from '@/consts/types';
+  import PopoverLink from '@/components/ui/PopoverLink';
 
   const instruments = {
     base_communication: 'Sprache & Kommunikation',
@@ -82,6 +92,7 @@
     mixins: [me],
 
     components: {
+      PopoverLink,
       ContentComponent,
       AddContentButton,
       VisibilityAction,
@@ -238,8 +249,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .content-block {
     margin-bottom: $section-spacing;
diff --git a/client/src/components/MoreOptionsWidget.vue b/client/src/components/MoreOptionsWidget.vue
index 59a0a0fd..33b44e75 100644
--- a/client/src/components/MoreOptionsWidget.vue
+++ b/client/src/components/MoreOptionsWidget.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
   import Ellipses from '@/components/icons/Ellipses.vue';
 
   export default {
diff --git a/client/src/components/modules/SnapshotMenu.vue b/client/src/components/modules/SnapshotMenu.vue
index cf8d8880..e298da00 100644
--- a/client/src/components/modules/SnapshotMenu.vue
+++ b/client/src/components/modules/SnapshotMenu.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
   import {SNAPSHOT_LIST} from '@/router/module.names';
   import me from '@/mixins/me';
 
diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index ebe17199..0105b18c 100644
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@@ -27,7 +27,7 @@
 
 <script>
   import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
 
   import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
   import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
diff --git a/client/src/components/portfolio/ProjectWidget.vue b/client/src/components/portfolio/ProjectWidget.vue
index 39e9e5ed..9ffa3ee7 100644
--- a/client/src/components/portfolio/ProjectWidget.vue
+++ b/client/src/components/portfolio/ProjectWidget.vue
@@ -32,7 +32,7 @@
   import OwnerWidget from '@/components/portfolio/OwnerWidget';
   import ProjectActions from '@/components/portfolio/ProjectActions';
   import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import WidgetFooter from '@/components/WidgetFooter';
+  import WidgetFooter from '@/components/ui/WidgetFooter';
 
   export default {
     props: ['title', 'appearance', 'slug', 'id', 'final', 'student', 'entriesCount', 'userId', 'readOnly'],
diff --git a/client/src/components/rooms/Comment.vue b/client/src/components/rooms/Comment.vue
index 6868143e..1c670d24 100644
--- a/client/src/components/rooms/Comment.vue
+++ b/client/src/components/rooms/Comment.vue
@@ -36,7 +36,9 @@
     display: grid;
     grid-template-columns: auto auto;
     grid-template-rows: 2rem auto;
-    grid-template-areas: "o d" "t t";
+    grid-template-areas:
+      "o d"
+      "t t";
     padding: $medium-spacing 0 $large-spacing 0;
     border-bottom: 1px solid $color-silver;
     grid-row-gap: $medium-spacing;
diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue
index f2c6fe8d..dc051a2b 100644
--- a/client/src/components/rooms/RoomActions.vue
+++ b/client/src/components/rooms/RoomActions.vue
@@ -11,30 +11,54 @@
       class="room-actions__popover"
       v-if="showMenu"
       @hide-me="showMenu = false">
-      <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>
+      <li class="popover-links__link">
+        <popover-link
+          icon="pen-icon"
+          text="Bearbeiten"
+          @link-action="editRoom()"/>
+      </li>
+      <li class="popover-links__link">
+        <popover-link
+          icon="eye-icon"
+          text="Sichtbarkeit anpassen"
+          @link-action="editRoom()"/>
+      </li>
+      <li class="popover-links__link">
+        <popover-link
+          icon="trash-icon"
+          text="Löschen"
+          @link-action="deleteRoom()"/>
+      </li>
     </widget-popover>
   </div>
 </template>
 
 <script>
   import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
 
   import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.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';
 
   export default {
     props: ['id'],
 
     components: {
+      PopoverLink,
+      EyeIcon,
+      TrashIcon,
+      PenIcon,
       Ellipses,
-      WidgetPopover
+      WidgetPopover,
     },
 
     data() {
       return {
-        showMenu: false
+        showMenu: false,
       };
     },
 
@@ -48,8 +72,8 @@
           mutation: DELETE_ROOM_MUTATION,
           variables: {
             input: {
-              id: theId
-            }
+              id: theId,
+            },
           },
           update(store, {data: {deleteRoom: {success}}}) {
             if (success) {
@@ -59,26 +83,32 @@
                 store.writeQuery({query: ROOMS_QUERY, data});
               }
             }
-          }
+          },
         });
       },
       editRoom() {
         this.$router.push({name: 'edit-room', params: {id: this.id}});
-      }
-    }
+      },
+    },
   };
 </script>
 
 <style scoped lang="scss">
   @import "~styles/helpers";
 
+  $height: 30px;
+
   .room-actions {
+    height: $height;
+
     &__more-link {
       cursor: pointer;
+      height: $height;
     }
 
     &__popover {
-      @include popover-defaults();
+      display: flex;
+      width: max-content;
     }
 
     svg {
diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue
index bb4eb0db..cbc204a1 100644
--- a/client/src/components/rooms/RoomWidget.vue
+++ b/client/src/components/rooms/RoomWidget.vue
@@ -22,7 +22,7 @@
 
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
   import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import WidgetFooter from '@/components/WidgetFooter';
+  import WidgetFooter from '@/components/ui/WidgetFooter';
   import RoomActions from '@/components/rooms/RoomActions';
 
   import {meQuery} from '@/graphql/queries';
diff --git a/client/src/components/school-class/ClassSelectionWidget.vue b/client/src/components/school-class/ClassSelectionWidget.vue
index ddf481ac..482b39f2 100644
--- a/client/src/components/school-class/ClassSelectionWidget.vue
+++ b/client/src/components/school-class/ClassSelectionWidget.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-  import WidgetPopover from '@/components/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
   import ChevronDown from '@/components/icons/ChevronDown';
   import CurrentClass from '@/components/school-class/CurrentClass';
   import AddIcon from '@/components/icons/AddIcon';
diff --git a/client/src/components/ui/PopoverLink.vue b/client/src/components/ui/PopoverLink.vue
new file mode 100644
index 00000000..f1832227
--- /dev/null
+++ b/client/src/components/ui/PopoverLink.vue
@@ -0,0 +1,58 @@
+<template>
+  <a
+    class="popover-link"
+    @click="$emit('link-action')">
+    <component
+      :is="icon"
+      class="popover-link__icon"/>
+    <span class="popover-link__text">{{ text }}</span>
+  </a>
+</template>
+
+<script>
+  import EyeIcon from '@/components/icons/EyeIcon';
+  import TrashIcon from '@/components/icons/TrashIcon';
+  import PenIcon from '@/components/icons/PenIcon';
+
+  export default {
+    props: {
+      icon: {
+        type: String,
+        default: '',
+      },
+      text: {
+        type: String,
+        default: '',
+      },
+    },
+    components: {
+      EyeIcon,
+      TrashIcon,
+      PenIcon,
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .popover-link {
+    @include popover-link;
+
+    &__icon {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+      display: flex;
+      flex-basis: auto;
+      flex-shrink: 0;
+    }
+
+    &__text {
+      width: auto;
+      display: flex;
+      flex-basis: auto;
+      flex-shrink: 0;
+    }
+  }
+</style>
diff --git a/client/src/components/WidgetFooter.vue b/client/src/components/ui/WidgetFooter.vue
similarity index 87%
rename from client/src/components/WidgetFooter.vue
rename to client/src/components/ui/WidgetFooter.vue
index d94e7362..52933afc 100644
--- a/client/src/components/WidgetFooter.vue
+++ b/client/src/components/ui/WidgetFooter.vue
@@ -5,8 +5,7 @@
 </template>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/_helpers";
 
   .widget-footer {
     background-color: $color-grey--lighter;
diff --git a/client/src/components/WidgetPopover.vue b/client/src/components/ui/WidgetPopover.vue
similarity index 100%
rename from client/src/components/WidgetPopover.vue
rename to client/src/components/ui/WidgetPopover.vue
diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue
index 9dddf606..48bcd03d 100644
--- a/client/src/pages/room.vue
+++ b/client/src/pages/room.vue
@@ -1,14 +1,23 @@
 <template>
   <div class="room">
+    <div class="room__back">
+
+      <back-link
+        type="room"
+        title="Zurück zur Übersicht"/>
+    </div>
+    <div class="room__context-menu">
+      <room-actions
+        :id="room.id"
+        class="room__actions"
+        v-if="canEdit"/>
+    </div>
     <div class="room__header">
       <h1 class="room__title">{{ room.title }}</h1>
       <p class="room__intro">
         {{ room.description }}
       </p>
       <div class="room__meta">
-        <room-actions
-          :id="room.id"
-          v-if="canEdit"/>
         <room-group-widget v-bind="room.schoolClass"/>
         <entry-count-widget :entry-count="roomEntryCount"/>
       </div>
@@ -34,10 +43,12 @@
   import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
   import room from '@/mixins/room';
   import me from '@/mixins/me';
+  import BackLink from '@/components/BackLink';
 
   export default {
     props: ['slug'],
     mixins: [room, me],
+    components: {BackLink},
 
     computed: {
       canEdit() {
diff --git a/client/src/router/room.names.js b/client/src/router/room.names.js
index 9cf9c333..a7dd05a2 100644
--- a/client/src/router/room.names.js
+++ b/client/src/router/room.names.js
@@ -1 +1,2 @@
 export const NEW_ROOM_PAGE = 'new-room';
+export const ROOMS_PAGE = 'rooms';
diff --git a/client/src/router/room.routes.js b/client/src/router/room.routes.js
index 3dfed04f..70b4356d 100644
--- a/client/src/router/room.routes.js
+++ b/client/src/router/room.routes.js
@@ -3,10 +3,10 @@ import newRoom from '@/pages/newRoom';
 import editRoom from '@/pages/editRoom';
 import room from '@/pages/room';
 import moduleRoom from '@/pages/module/moduleRoom';
-import {NEW_ROOM_PAGE} from '@/router/room.names';
+import {NEW_ROOM_PAGE, ROOMS_PAGE} from '@/router/room.names';
 
 export default [
-  {path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true, hideFooter: true}},
+  {path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: {filter: true, hideFooter: true}},
   {path: '/new-room/', name: NEW_ROOM_PAGE, component: newRoom},
   {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
   {path: '/room/:slug', name: 'room', component: room, props: true},
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 6fec7552..eca0992e 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -302,3 +302,13 @@
   border: 0;
   min-height: 110px;
 }
+
+@mixin popover-link {
+  @include large-link;
+  padding: $small-spacing 0;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
diff --git a/client/src/styles/_room.scss b/client/src/styles/_room.scss
index 015580c4..5fdd487e 100644
--- a/client/src/styles/_room.scss
+++ b/client/src/styles/_room.scss
@@ -1,14 +1,29 @@
-@import "@/styles/_variables.scss";
-@import "@/styles/_functions.scss";
-@import "@/styles/_mixins.scss";
+@import "~styles/helpers";
 
 .room {
   display: grid;
-  grid-template-rows: max-content 1fr;
+  grid-template-rows: 30px max-content 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    "b m"
+    "h h"
+    "c c";
   margin-bottom: -90px;
+  padding: $medium-spacing;
+
+  &__back {
+    grid-area: b;
+  }
+
+  &__context-menu {
+    position: relative;
+    grid-area: m;
+    justify-self: end;
+  }
 
   &__header {
-    padding: 30px;
+    padding: 30px 0;
+    grid-area: h;
   }
 
   &__intro {
@@ -39,6 +54,8 @@
   }
 
   &__content {
+    margin: 0 -$medium-spacing;
+    grid-area: c;
     padding: 50px 15px;
     background-color: rgba($color-charcoal-dark, 0.18);
     @include desktop {
diff --git a/client/src/styles/_widget-popover.scss b/client/src/styles/_widget-popover.scss
index 19c346d8..364fcc15 100644
--- a/client/src/styles/_widget-popover.scss
+++ b/client/src/styles/_widget-popover.scss
@@ -19,7 +19,9 @@
 
 .popover-links {
   list-style: none;
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  padding: $small-spacing;
 
   &__icon {
     width: 25px;
@@ -35,15 +37,17 @@
   &__link {
     cursor: pointer;
     padding: 0 $medium-spacing;
+    box-sizing: border-box;
+    position: relative;
+
+    display: flex;
+    flex-shrink: 0;
+    flex-grow: 1;
+    width: auto;
+
 
     & > a {
-      display: inline-block;
-      color: $color-silver-dark;
-      font-family: $sans-serif-font-family;
-      font-size: toRem(14px);
-      line-height: 1.5;
-      padding: 5px 0;
-      cursor: pointer;
+      @include popover-link;
     }
 
     &--large {