added shout button

components/ShoutButton.vue

@@ -0,0 +1,63 @@
+<template>
+  <ds-space
+    margin="large"
+    style="text-align: center">
+    <ds-button
+      :disabled="disabled || loading"
+      danger
+      size="x-large"
+      icon="heart"
+      @click="shout" />
+    <ds-space margin-bottom="xx-small" />
+    <ds-text color="soft">
+      <ds-heading
+        style="display: inline"
+        tag="h3">{{ shoutedCount }}x</ds-heading> Empfohlen
+    </ds-text>
+  </ds-space>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  props: {
+    count: { type: Number, default: 0 },
+    postId: { type: String, default: null }
+  },
+  data() {
+    return {
+      loading: false,
+      disabled: false,
+      shoutedCount: this.count
+    }
+  },
+  methods: {
+    shout() {
+      this.loading = true
+      this.$apollo
+        .mutate({
+          mutation: gql`
+            mutation($myId: ID!, $postId: ID!) {
+              AddUserShouted(from: { id: $myId }, to: { id: $postId }) {
+                from {
+                  id
+                }
+              }
+            }
+          `,
+          variables: {
+            myId: this.$store.getters['auth/user'].id,
+            postId: this.postId
+          }
+        })
+        .then(() => {
+          this.loading = false
+          this.disabled = true
+          this.shoutedCount++
+          this.$emit('update')
+        })
+    }
+  }
+}
+</script>

pages/post/_slug/index.vue

@@ -10,7 +10,12 @@
     <div
       class="content"
       v-html="post.content" />
-    <ds-space margin-top="large"/>
+    <!-- Shout Button -->
+    <ds-space margin="xx-large" />
+    <hc-shout-button
+      v-if="post.author"
+      :count="post.shoutedCount"
+      :post-id="post.id" />
     <!-- Categories -->
     <div class="tags">
       <ds-icon name="compass" /> <ds-tag
@@ -19,13 +24,14 @@
     </div>
     <!-- Tags -->
     <template v-if="post.tags && post.tags.length">
+      <ds-space margin="xx-small"/>
       <div class="tags">
         <ds-icon name="tags" /> <ds-tag
           v-for="tag in post.tags"
           :key="tag.id"><ds-icon name="tag" /> {{ tag.name }}</ds-tag>
       </div>
     </template>
-    <ds-space margin-bottom="large" />
+    <ds-space margin="small"/>
     <!-- Comments -->
     <ds-section
       slot="footer">
@@ -54,8 +60,13 @@
             <hc-author :post="comment" />
           </ds-space>
           <div
-            style="padding-left: 32px;"
+            v-if="!comment.deleted"
+            style="padding-left: 40px;"
             v-html="comment.contentExcerpt" />
+          <ds-text
+            v-else
+            style="padding-left: 40px; font-weight: bold;"
+            color="soft"><ds-icon name="ban" /> Vom Benutzer gelöscht</ds-text>
         </div>
         <ds-space margin-bottom="small" />
       </div>
@@ -69,6 +80,7 @@
 <script>
 import gql from 'graphql-tag'
 import HcAuthor from '~/components/Author.vue'
+import HcShoutButton from '~/components/ShoutButton.vue'
 
 export default {
   transition: {
@@ -76,7 +88,8 @@ export default {
     mode: 'out-in'
   },
   components: {
-    HcAuthor
+    HcAuthor,
+    HcShoutButton
   },
 
   data() {
@@ -118,6 +131,7 @@ export default {
             comments(orderBy: _id_desc) {
               id
               contentExcerpt
+              deleted
               author {
                 User {
                   id
@@ -134,12 +148,7 @@ export default {
             categories {
               name
             }
-            shoutedBy {
-              name
-              friends {
-                name
-              }
-            }
+            shoutedCount
           }
         }
       `),

styleguide/src/system/components/navigation/Button/style.scss

@@ -170,6 +170,12 @@
   height: $input-height-large;
 }
 
+.ds-button-size-x-large {
+  font-size: $font-size-x-large;
+  padding: $input-padding-vertical-large $space-base;
+  height: $input-height-x-large;
+}
+
 .ds-button-icon-only {
   width: $input-height;
   padding: 0;
@@ -186,6 +192,10 @@
   &.ds-button-size-large {
     width: $input-height-large;
   }
+
+  &.ds-button-size-x-large {
+    width: $input-height-x-large;
+  }
 }
 
 .ds-button-text {

styleguide/src/system/styles/shared/_form.scss

@@ -15,4 +15,9 @@ $input-height-small: calc(
 $input-padding-vertical-large: $space-x-small;
 $input-height-large: calc(
   #{$font-size-large * $line-height-base} + #{($input-padding-vertical-large + $input-border-size) * 2}
-);
+);
+
+$input-padding-vertical-x-large: $space-small;
+$input-height-x-large: calc(
+  #{$font-size-x-large * $line-height-base} + #{($input-padding-vertical-x-large + $input-border-size) * 2}
+);