diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-01-11 19:32:10 -0600 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-01-11 23:48:36 -0600 |
commit | a25af3efbc4aa50d84448f23a0d686804c96102e (patch) | |
tree | 8375314989f785fef11a1e5405ca4b0fee2e3a2b /app/assets/javascripts | |
parent | 34760245bcb4156e21ca463b82b1fab84508b842 (diff) | |
download | gitlab-ce-a25af3efbc4aa50d84448f23a0d686804c96102e.tar.gz |
convert notification subscription button into toggle
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue | 25 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/toggle_button.vue | 4 |
2 files changed, 11 insertions, 18 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" |