Add favorite-button.

4 files changed, 45 insertions, 6 deletions

diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
new file mode 100644
index 00000000..0a8843ea
--- /dev/null
+++ b/src/components/favorite_button/favorite_button.js
@@ -0,0 +1,22 @@
+const FavoriteButton = {
+  props: [ 'status' ],
+  methods: {
+    favorite () {
+      if (!this.status.favorited) {
+        this.$store.dispatch('favorite', { id: this.status.id})
+      } else {
+        this.$store.dispatch('unfavorite', { id: this.status.id})
+      }
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'icon-star-empty': !this.status.favorited,
+        'icon-star': this.status.favorited
+      }
+    }
+  }
+}
+
+export default FavoriteButton
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
new file mode 100644
index 00000000..0455c706
--- /dev/null
+++ b/src/components/favorite_button/favorite_button.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <i :class='classes' class='favorite-button fa' v-on:click.prevent='favorite()'></i>
+    <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
+  </div>
+</template>
+
+<script src="./favorite_button.js" ></script>
+
+<style>
+ .favorite-button {
+     cursor: pointer
+ }
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 6ee8f0dd..f3816daa 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,4 +1,5 @@
 import Attachment from '../attachment/attachment.vue'
+import FavoriteButton from '../favorite_button/favorite_button.vue'
 
 const Status = {
   props: [ 'statusoid' ],
@@ -14,9 +15,9 @@ const Status = {
     }
   },
   components: {
-    Attachment
+    Attachment,
+    FavoriteButton
   }
 }
 
 export default Status
-
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a6a5aac2..4d8700d5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -23,7 +23,9 @@
           <small>{{status.created_at_parsed}}</small>
         </h4>
 
-        <div v-html="status.statusnet_html"></div>
+        <p>
+          <div v-html="status.statusnet_html"></div>
+        </p>
 
         <div v-if='status.attachments' class='attachments'>
           <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments">
@@ -33,12 +35,12 @@
         <div>
           <div class='status-actions'>
             <div ng-click="toggleReplying()">
-              <i class='fa fa-reply'></i>
+              <i class='fa icon-reply'></i>
             </div>
             <div>
-              <i class='fa fa-retweet'></i>
+              <i class='fa icon-retweet'></i>
             </div>
-            <favorite-button status=status></favorite-button>
+            <favorite-button :status=status></favorite-button>
           </div>
 
           <!-- <post-status-form ng-if="replying" toggle="toggleReplying" reply-to-status="status" reply-to="{{status.id}}"></post-status-form> -->