From a25af3efbc4aa50d84448f23a0d686804c96102e Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 11 Jan 2018 19:32:10 -0600
Subject: convert notification subscription button into toggle

---
 .../components/subscriptions/subscriptions.vue     | 25 ++++++++--------------
 .../vue_shared/components/toggle_button.vue        |  4 ++--
 app/assets/stylesheets/pages/issuable.scss         |  4 ----
 3 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index 7226076a8fc..f4f9d04fcf2 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -2,11 +2,11 @@
   /* eslint-disable vue/require-default-prop */
   import { __ } from '../../../locale';
   import eventHub from '../../event_hub';
-  import loadingButton from '../../../vue_shared/components/loading_button.vue';
+  import toggleButton from '../../../vue_shared/components/toggle_button.vue';
 
   export default {
     components: {
-      loadingButton,
+      toggleButton,
     },
     props: {
       loading: {
@@ -24,15 +24,8 @@
       },
     },
     computed: {
-      buttonLabel() {
-        let label;
-        if (this.subscribed === false) {
-          label = __('Subscribe');
-        } else if (this.subscribed === true) {
-          label = __('Unsubscribe');
-        }
-
-        return label;
+      showLoadingState() {
+        return this.subscribed === null || this.loading;
       },
     },
     methods: {
@@ -55,12 +48,12 @@
     <span class="issuable-header-text hide-collapsed pull-left">
       {{ __('Notifications') }}
     </span>
-    <loading-button
+    <toggle-button
       ref="loadingButton"
-      class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button"
-      :loading="loading"
-      :label="buttonLabel"
-      @click="toggleSubscription"
+      class="pull-right hide-collapsed js-issuable-subscribe-button"
+      :is-loading="showLoadingState"
+      :value="subscribed"
+      @change="toggleSubscription"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 2b12718ae96..274ea80c484 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -23,11 +23,10 @@
       name: {
         type: String,
         required: false,
-        default: '',
       },
       value: {
         type: Boolean,
-        required: true,
+        required: false,
       },
       disabledInput: {
         type: Boolean,
@@ -61,6 +60,7 @@
 <template>
   <label class="toggle-wrapper">
     <input
+      v-if="name"
       type="hidden"
       :name="name"
       :value="value"
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ae9a8b0182c..759719a72da 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -162,10 +162,6 @@
       border: 0;
     }
 
-    span {
-      display: inline-block;
-    }
-
     .select2-container span {
       margin-top: 0;
     }
-- 
cgit v1.2.1