summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKushal Pandya <kushal@gitlab.com>2018-10-29 13:31:50 +0530
committerKushal Pandya <kushal@gitlab.com>2018-10-29 15:08:53 +0530
commit8861885773df0172f33518497cc5b01afc954c7e (patch)
treeed655347a8102fc10231d5754fc57bd1e3819f83
parentb868b02c626dc4f9986eb93e54cf593055121972 (diff)
downloadgitlab-ce-8861885773df0172f33518497cc5b01afc954c7e.tar.gz
Update tooltip for when no date is present, port back EE changesce-7103-show-milestone-dates-within-tooltips
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue16
-rw-r--r--app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue44
-rw-r--r--locale/gitlab.pot6
-rw-r--r--spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js22
4 files changed, 52 insertions, 36 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
index 7f1eb6bcec4..11fac3bb12c 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
@@ -1,6 +1,11 @@
<script>
+ import tooltip from '~/vue_shared/directives/tooltip';
+
export default {
name: 'CollapsedCalendarIcon',
+ directives: {
+ tooltip,
+ },
props: {
containerClass: {
type: String,
@@ -17,6 +22,11 @@
required: false,
default: true,
},
+ tooltipText: {
+ type: String,
+ required: false,
+ default: '',
+ },
},
methods: {
click() {
@@ -28,7 +38,13 @@
<template>
<div
+ v-tooltip
:class="containerClass"
+ :title="tooltipText"
+ data-container="body"
+ data-placement="left"
+ data-html="true"
+ data-boundary="viewport"
@click="click"
>
<i
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
index dac438a702d..6e7194ccc9e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
@@ -1,25 +1,23 @@
<script>
- import { dateInWords } from '../../../lib/utils/datetime_utility';
- import toggleSidebar from './toggle_sidebar.vue';
+ import { __ } from '~/locale';
+ import timeagoMixin from '~/vue_shared/mixins/timeago';
+ import { dateInWords, timeFor } from '~/lib/utils/datetime_utility';
import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
export default {
name: 'SidebarCollapsedGroupedDatePicker',
components: {
- toggleSidebar,
collapsedCalendarIcon,
},
+ mixins: [
+ timeagoMixin,
+ ],
props: {
collapsed: {
type: Boolean,
required: false,
default: true,
},
- showToggleSidebar: {
- type: Boolean,
- required: false,
- default: false,
- },
minDate: {
type: Date,
required: false,
@@ -51,7 +49,7 @@
},
iconClass() {
const disabledClass = this.disableClickableIcons ? 'disabled' : '';
- return `block sidebar-collapsed-icon calendar-icon ${disabledClass}`;
+ return `sidebar-collapsed-icon calendar-icon ${disabledClass}`;
},
},
methods: {
@@ -63,7 +61,21 @@
const dateWords = dateInWords(date, true);
const parsedDateWords = dateWords ? dateWords.replace(',', '') : dateWords;
- return date ? parsedDateWords : 'None';
+ return date ? parsedDateWords : __('None');
+ },
+ tooltipText(dateType = 'min') {
+ const defaultText = dateType === 'min' ? __('Start date') : __('Due date');
+ const date = this[`${dateType}Date`];
+ const timeAgo = dateType === 'min' ? this.timeFormated(date) : timeFor(date);
+ const dateText = date ? [
+ this.dateText(dateType),
+ `(${timeAgo})`,
+ ].join(' ') : '';
+
+ if (date) {
+ return [defaultText, dateText].join('<br />');
+ }
+ return __('Start and due date');
},
},
};
@@ -71,18 +83,10 @@
<template>
<div class="block sidebar-grouped-item">
- <div
- v-if="showToggleSidebar"
- class="issuable-sidebar-header"
- >
- <toggle-sidebar
- :collapsed="collapsed"
- @toggle="toggleSidebar"
- />
- </div>
<collapsed-calendar-icon
v-if="showMinDateBlock"
:container-class="iconClass"
+ :tooltip-text="tooltipText('min')"
@click="toggleSidebar"
>
<span class="sidebar-collapsed-value">
@@ -99,7 +103,7 @@
<collapsed-calendar-icon
v-if="maxDate"
:container-class="iconClass"
- :show-icon="!minDate"
+ :tooltip-text="tooltipText('max')"
@click="toggleSidebar"
>
<span class="sidebar-collapsed-value">
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 26270595c6a..86dcc1a99b9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5784,6 +5784,12 @@ msgstr ""
msgid "Start a %{new_merge_request} with these changes"
msgstr ""
+msgid "Start and due date"
+msgstr ""
+
+msgid "Start date"
+msgstr ""
+
msgid "Start the Runner!"
msgstr ""
diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
index 026a0c7ea09..3483b7d387d 100644
--- a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
@@ -11,16 +11,6 @@ describe('collapsedGroupedDatePicker', () => {
});
});
- it('should render toggle sidebar if showToggleSidebar', (done) => {
- expect(vm.$el.querySelector('.issuable-sidebar-header')).toBeDefined();
-
- vm.showToggleSidebar = false;
- Vue.nextTick(() => {
- expect(vm.$el.querySelector('.issuable-sidebar-header')).toBeNull();
- done();
- });
- });
-
describe('toggleCollapse events', () => {
beforeEach((done) => {
spyOn(vm, 'toggleSidebar');
@@ -28,12 +18,6 @@ describe('collapsedGroupedDatePicker', () => {
Vue.nextTick(done);
});
- it('should emit when sidebar is toggled', () => {
- vm.$el.querySelector('.gutter-toggle').click();
-
- expect(vm.toggleSidebar).toHaveBeenCalled();
- });
-
it('should emit when collapsed-calendar-icon is clicked', () => {
vm.$el.querySelector('.sidebar-collapsed-icon').click();
@@ -92,5 +76,11 @@ describe('collapsedGroupedDatePicker', () => {
expect(icons.length).toEqual(1);
expect(icons[0].innerText.trim()).toEqual('None');
});
+
+ it('should have tooltip as `Start and due date`', () => {
+ const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon');
+
+ expect(icons[0].dataset.originalTitle).toBe('Start and due date');
+ });
});
});