diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2018-01-12 21:31:09 +0000 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2018-01-12 21:31:09 +0000 |
commit | 74f2f9b30fb1972a26481072486b358eb943309f (patch) | |
tree | 1deb872f7720adb96935a1e5c170eb4c4fa5f042 /app/assets | |
parent | 6b5b93abe67be1cbc0acfbcde7964a8a632bcc3f (diff) | |
parent | 0815236ffb5c62b6cb8817e5c1f38b2ea26b1681 (diff) | |
download | gitlab-ce-74f2f9b30fb1972a26481072486b358eb943309f.tar.gz |
Merge branch '16988-use-toggle-for-subscribed-unsubscribed-to-notifications' into 'master'
Resolve "Use toggle for subscribed/unsubscribed to notifications"
Closes #16988
See merge request gitlab-org/gitlab-ce!16408
Diffstat (limited to 'app/assets')
3 files changed, 46 insertions, 29 deletions
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue index 7226076a8fc..d69d100a26c 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue @@ -1,12 +1,22 @@ <script> - /* eslint-disable vue/require-default-prop */ - import { __ } from '../../../locale'; + import { __ } from '~/locale'; + import icon from '~/vue_shared/components/icon.vue'; + import toggleButton from '~/vue_shared/components/toggle_button.vue'; + import tooltip from '~/vue_shared/directives/tooltip'; import eventHub from '../../event_hub'; - import loadingButton from '../../../vue_shared/components/loading_button.vue'; + + const ICON_ON = 'notifications'; + const ICON_OFF = 'notifications-off'; + const LABEL_ON = __('Notifications on'); + const LABEL_OFF = __('Notifications off'); export default { + directives: { + tooltip, + }, components: { - loadingButton, + icon, + toggleButton, }, props: { loading: { @@ -17,22 +27,23 @@ subscribed: { type: Boolean, required: false, + default: null, }, id: { type: Number, required: false, + default: null, }, }, computed: { - buttonLabel() { - let label; - if (this.subscribed === false) { - label = __('Subscribe'); - } else if (this.subscribed === true) { - label = __('Unsubscribe'); - } - - return label; + showLoadingState() { + return this.subscribed === null; + }, + notificationIcon() { + return this.subscribed ? ICON_ON : ICON_OFF; + }, + notificationTooltip() { + return this.subscribed ? LABEL_ON : LABEL_OFF; }, }, methods: { @@ -46,21 +57,29 @@ <template> <div> <div class="sidebar-collapsed-icon"> - <i - class="fa fa-rss" - aria-hidden="true" + <span + v-tooltip + :title="notificationTooltip" + data-container="body" + data-placement="left" > - </i> + <icon + :name="notificationIcon" + :size="16" + aria-hidden="true" + class="sidebar-item-icon is-active" + /> + </span> </div> <span class="issuable-header-text hide-collapsed pull-left"> {{ __('Notifications') }} </span> - <loading-button - ref="loadingButton" - class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button" - :loading="loading" - :label="buttonLabel" - @click="toggleSubscription" + <toggle-button + ref="toggleButton" + 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..09031d3ffa1 100644 --- a/app/assets/javascripts/vue_shared/components/toggle_button.vue +++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue @@ -23,11 +23,12 @@ name: { type: String, required: false, - default: '', + default: null, }, value: { type: Boolean, - required: true, + required: false, + default: null, }, disabledInput: { type: Boolean, @@ -61,6 +62,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; } |