diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-01-12 11:01:01 -0600 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-01-12 11:01:01 -0600 |
commit | 3ef0ab7264967a23698459b47dc88d4a398547c4 (patch) | |
tree | 4c2f5245c7a4a73689d0342de0b6c4d11099854f /app | |
parent | 5d44441836945653cd03c8fb37d36c23526d0be5 (diff) | |
download | gitlab-ce-3ef0ab7264967a23698459b47dc88d4a398547c4.tar.gz |
add tooltip for notifications icon in collapsed sidebar
Diffstat (limited to 'app')
-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') }} |