diff options
| -rw-r--r-- | app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue | 38 |
1 files changed, 29 insertions, 9 deletions
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue index 104c4b14264..d5656397886 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue @@ -1,9 +1,19 @@ <script> + 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 icon from '../../../vue_shared/components/icon.vue'; - import toggleButton from '../../../vue_shared/components/toggle_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: { icon, toggleButton, @@ -30,8 +40,11 @@ return this.subscribed === null || this.loading; }, notificationIcon() { - return this.subscribed ? 'notifications' : 'notifications-off'; + return this.subscribed ? ICON_ON : ICON_OFF; }, + notificationTooltip() { + return this.subscribed ? LABEL_ON : LABEL_OFF; + } }, methods: { toggleSubscription() { @@ -44,12 +57,19 @@ <template> <div> <div class="sidebar-collapsed-icon"> - <icon - :name="notificationIcon" - :size="16" - aria-hidden="true" - class="sidebar-item-icon is-active" - /> + <span + v-tooltip + :title="notificationTooltip" + data-container="body" + data-placement="left" + > + <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') }} |