Merge branch 'ce-7103-show-milestone-dates-within-tooltips' into 'master'
CE Backport: Show actual Milestone dates within tooltips for Milestones in Epics sidebar See merge request gitlab-org/gitlab-ce!22653
This commit is contained in:
commit
274d33803a
|
@ -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
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -5796,6 +5796,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 ""
|
||||
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue