From db70aaf2717c7ab0ec501a0b7c3c5d65cfa46355 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 22 Aug 2018 16:15:38 +0200
Subject: [PATCH] Add some more components to room page

---
 client/src/components/AddRoomEntry.vue        | 35 ++++++++++++++
 .../components/rooms/RoomEntryCountWidget.vue | 39 +++++++++++++++
 .../src/components/rooms/RoomGroupWidget.vue  | 40 ++++++++++++++++
 client/src/components/rooms/RoomWidget.vue    | 48 +++----------------
 client/src/styles/_mixins.scss                |  8 ++++
 5 files changed, 129 insertions(+), 41 deletions(-)
 create mode 100644 client/src/components/AddRoomEntry.vue
 create mode 100644 client/src/components/rooms/RoomEntryCountWidget.vue
 create mode 100644 client/src/components/rooms/RoomGroupWidget.vue

diff --git a/client/src/components/AddRoomEntry.vue b/client/src/components/AddRoomEntry.vue
new file mode 100644
index 00000000..74c61af2
--- /dev/null
+++ b/client/src/components/AddRoomEntry.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="add-room-entry">
+    <add class="add-room-entry__icon"></add>
+  </div>
+</template>
+
+<script>
+  import Add from '@/components/images/Add';
+
+  export default {
+    components: {
+      Add
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .add-room-entry {
+    border: 2px solid $color-white;
+    border-radius: 12px;
+    height: 150px;
+    display: flex;
+    box-sizing: border-box;
+    margin-bottom: 25px;
+    justify-content: center;
+    align-items: center;
+
+    &__icon {
+      width: 80px;
+      fill: $color-white;
+    }
+  }
+</style>
diff --git a/client/src/components/rooms/RoomEntryCountWidget.vue b/client/src/components/rooms/RoomEntryCountWidget.vue
new file mode 100644
index 00000000..ad5d0ba4
--- /dev/null
+++ b/client/src/components/rooms/RoomEntryCountWidget.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="room-entry-count-widget">
+    <cards></cards>
+    <span>{{entryCount}} {{entryCount === 1 ? 'Beitrag' : 'Beiträge'}}</span>
+  </div>
+</template>
+
+<script>
+  import Cards from '@/components/images/Cards.vue';
+
+  export default {
+    props: ['entryCount'],
+
+    components: {
+      Cards
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
+  .room-entry-count-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+
+    svg {
+      width: 30px;
+      fill: $color-darkgrey-1;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;
+    }
+  }
+
+</style>
diff --git a/client/src/components/rooms/RoomGroupWidget.vue b/client/src/components/rooms/RoomGroupWidget.vue
new file mode 100644
index 00000000..01154cd7
--- /dev/null
+++ b/client/src/components/rooms/RoomGroupWidget.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="room-group-widget">
+    <group></group>
+    <span>
+        {{group}}
+        </span>
+  </div>
+</template>
+
+<script>
+  import Group from '@/components/images/Group.vue';
+
+  export default {
+    props: ['group'],
+
+    components: {
+      Group
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
+  .room-group-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+
+    svg {
+      width: 30px;
+      fill: $color-darkgrey-1;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;;
+    }
+  }
+</style>
diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue
index b534df2c..c39fb7be 100644
--- a/client/src/components/rooms/RoomWidget.vue
+++ b/client/src/components/rooms/RoomWidget.vue
@@ -2,16 +2,8 @@
   <div class="room-widget" :class="roomClass">
     <div class="room-widget__content">
       <h2 class="room-widget__title">{{title}}</h2>
-      <div class="room-widget__group">
-        <group></group>
-        <span>
-        {{group}}
-        </span>
-      </div>
-      <div class="room-widget__entries">
-        <cards></cards>
-        <span>{{entryCount}} {{entryCount === 1 ? 'Beitrag' : 'Beiträge'}}</span>
-      </div>
+      <room-group-widget :group="group"></room-group-widget>
+      <room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget>
     </div>
     <div class="room-widget__footer">
       <router-link to="/room" class="room-widget__more-link">
@@ -23,17 +15,17 @@
 </template>
 
 <script>
-  import Group from '@/components/images/Group.vue';
-  import Cards from '@/components/images/Cards.vue';
   import Ellipses from '@/components/images/Ellipses.vue';
+  import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
+  import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
 
   export default {
     props: ['title', 'type', 'entries', 'group'],
 
     components: {
-      Group,
-      Cards,
-      Ellipses
+      RoomEntryCountWidget,
+      Ellipses,
+      RoomGroupWidget
     },
     computed: {
       entryCount() {
@@ -50,12 +42,6 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
-  @mixin text-style {
-    font-family: $sans-serif-font-family;
-    font-size: 1rem;
-    fill: $color-darkgrey-1;
-  }
-
   .room-widget {
     display: -ms-grid;
     @supports (display: grid) {
@@ -92,26 +78,6 @@
       color: $color-darkgrey-1;
     }
 
-    &__group {
-      display: flex;
-      align-items: center;
-      opacity: 0.6;
-
-      & > span {
-        @include text-style;
-      }
-    }
-
-    &__entries {
-      display: flex;
-      align-items: center;
-      opacity: 0.6;
-
-      & > span {
-        @include text-style;
-      }
-    }
-
     &__title {
       font-size: 1.375rem;
     }
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 64e1d05e..daf87480 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -1,5 +1,13 @@
+@import 'variables';
+
 @mixin widget-shadow {
   border-radius: 12px;
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
 
 }
+
+@mixin room-widget-text-style {
+  font-family: $sans-serif-font-family;
+  font-size: 1rem;
+  fill: $color-darkgrey-1;
+}