From 53fed694dfa4f2c4fe5c8f58ad8eb728c7720449 Mon Sep 17 00:00:00 2001
From: Jiayi Zheng <thebluber@gmail.com>
Date: Sun, 13 Nov 2016 17:52:20 +0100
Subject: Refactor css Apply different styles to reply, retweet and favorite
 buttons

---
 src/components/favorite_button/favorite_button.vue | 15 +++++++++++----
 src/components/retweet_button/retweet_button.vue   | 18 +++++++++++-------
 src/components/status/status.vue                   | 13 +++++++++----
 3 files changed, 31 insertions(+), 15 deletions(-)

(limited to 'src/components')

diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 0455c706..6eaf0607 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -7,8 +7,15 @@
 
 <script src="./favorite_button.js" ></script>
 
-<style>
- .favorite-button {
-     cursor: pointer
- }
+<style lang='scss'>
+  @import '../../_variables.scss';
+  .favorite-button {
+      cursor: pointer;
+      &:hover {
+        color: $main-color;
+      }
+  }
+  .icon-star {
+      color: $main-color;
+  }
 </style>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index ec94356a..9b2f5c7b 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -7,12 +7,16 @@
 
 <script src="./retweet_button.js" ></script>
 
-<style>
- .icon-retweet {
-     cursor: pointer
- }
- .retweeted {
+<style lang='scss'>
+  @import '../../_variables.scss';
+  .icon-retweet {
+     cursor: pointer;
+     &:hover {
+      color: $green;
+     }
+  }
+  .retweeted {
      cursor: auto;
-     color: green;
- }
+     color: $green;
+  }
 </style>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d309c495..d4bcc279 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -51,7 +51,8 @@
 <script src="./status.js" ></script>
 
 <style lang="scss">
- .status-el {
+  @import '../../_variables.scss';
+  .status-el {
      hyphens: auto;
      overflow-wrap: break-word;
      word-wrap: break-word;
@@ -66,9 +67,13 @@
          margin-top: 3px;
          margin-bottom: 3px;
      }
- }
+  }
 
- .status-actions {
+  .status-actions {
      padding-top: 5px;
- }
+  }
+
+  .icon-reply:hover {
+     color: $blue;
+  }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 7d3a6e77e4fd8c79a21a3ad9b9b9128698c9fa3d Mon Sep 17 00:00:00 2001
From: Alexander Gitter <contact@agitter.net>
Date: Sun, 13 Nov 2016 18:26:10 +0100
Subject: Show spinner while uploading file

---
 src/components/media_upload/media_upload.js  | 13 +++++++++++++
 src/components/media_upload/media_upload.vue |  3 ++-
 2 files changed, 15 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 8ae86a8d..3f2e3964 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -11,11 +11,24 @@ const mediaUpload = {
       const file = target.files[0]
       const formData = new FormData()
       formData.append('media', file)
+
+      self.$emit('uploading')
+      self.uploading = true
+
       statusPosterService.uploadMedia({ store, formData })
         .then((fileData) => {
           self.$emit('uploaded', fileData)
+          self.uploading = false
+        }, (error) => {
+          self.$emit('upload-failed')
+          self.uploading = false
         })
     })
+  },
+  data () {
+    return {
+      uploading: false
+    }
   }
 }
 
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index a62d8316..f2f0b83f 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="media-upload">
     <label class="btn btn-default">
-      <i class="fa icon-upload"></i>
+      <i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
+      <i class="fa icon-upload" v-if="!uploading"></i>
       <input type=file style="position: fixed; top: -100em"></input>
     </label>
   </div>
-- 
cgit v1.2.3-70-g09d2