summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue38
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') }}