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>
|
<script>
|
||||||
|
import tooltip from '~/vue_shared/directives/tooltip';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CollapsedCalendarIcon',
|
name: 'CollapsedCalendarIcon',
|
||||||
|
directives: {
|
||||||
|
tooltip,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
containerClass: {
|
containerClass: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -17,6 +22,11 @@
|
||||||
required: false,
|
required: false,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
tooltipText: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
click() {
|
click() {
|
||||||
|
@ -28,7 +38,13 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
|
v-tooltip
|
||||||
:class="containerClass"
|
:class="containerClass"
|
||||||
|
:title="tooltipText"
|
||||||
|
data-container="body"
|
||||||
|
data-placement="left"
|
||||||
|
data-html="true"
|
||||||
|
data-boundary="viewport"
|
||||||
@click="click"
|
@click="click"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
|
|
|
@ -1,25 +1,23 @@
|
||||||
<script>
|
<script>
|
||||||
import { dateInWords } from '../../../lib/utils/datetime_utility';
|
import { __ } from '~/locale';
|
||||||
import toggleSidebar from './toggle_sidebar.vue';
|
import timeagoMixin from '~/vue_shared/mixins/timeago';
|
||||||
|
import { dateInWords, timeFor } from '~/lib/utils/datetime_utility';
|
||||||
import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
|
import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SidebarCollapsedGroupedDatePicker',
|
name: 'SidebarCollapsedGroupedDatePicker',
|
||||||
components: {
|
components: {
|
||||||
toggleSidebar,
|
|
||||||
collapsedCalendarIcon,
|
collapsedCalendarIcon,
|
||||||
},
|
},
|
||||||
|
mixins: [
|
||||||
|
timeagoMixin,
|
||||||
|
],
|
||||||
props: {
|
props: {
|
||||||
collapsed: {
|
collapsed: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
showToggleSidebar: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
minDate: {
|
minDate: {
|
||||||
type: Date,
|
type: Date,
|
||||||
required: false,
|
required: false,
|
||||||
|
@ -51,7 +49,7 @@
|
||||||
},
|
},
|
||||||
iconClass() {
|
iconClass() {
|
||||||
const disabledClass = this.disableClickableIcons ? 'disabled' : '';
|
const disabledClass = this.disableClickableIcons ? 'disabled' : '';
|
||||||
return `block sidebar-collapsed-icon calendar-icon ${disabledClass}`;
|
return `sidebar-collapsed-icon calendar-icon ${disabledClass}`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -63,7 +61,21 @@
|
||||||
const dateWords = dateInWords(date, true);
|
const dateWords = dateInWords(date, true);
|
||||||
const parsedDateWords = dateWords ? dateWords.replace(',', '') : dateWords;
|
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>
|
<template>
|
||||||
<div class="block sidebar-grouped-item">
|
<div class="block sidebar-grouped-item">
|
||||||
<div
|
|
||||||
v-if="showToggleSidebar"
|
|
||||||
class="issuable-sidebar-header"
|
|
||||||
>
|
|
||||||
<toggle-sidebar
|
|
||||||
:collapsed="collapsed"
|
|
||||||
@toggle="toggleSidebar"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<collapsed-calendar-icon
|
<collapsed-calendar-icon
|
||||||
v-if="showMinDateBlock"
|
v-if="showMinDateBlock"
|
||||||
:container-class="iconClass"
|
:container-class="iconClass"
|
||||||
|
:tooltip-text="tooltipText('min')"
|
||||||
@click="toggleSidebar"
|
@click="toggleSidebar"
|
||||||
>
|
>
|
||||||
<span class="sidebar-collapsed-value">
|
<span class="sidebar-collapsed-value">
|
||||||
|
@ -99,7 +103,7 @@
|
||||||
<collapsed-calendar-icon
|
<collapsed-calendar-icon
|
||||||
v-if="maxDate"
|
v-if="maxDate"
|
||||||
:container-class="iconClass"
|
:container-class="iconClass"
|
||||||
:show-icon="!minDate"
|
:tooltip-text="tooltipText('max')"
|
||||||
@click="toggleSidebar"
|
@click="toggleSidebar"
|
||||||
>
|
>
|
||||||
<span class="sidebar-collapsed-value">
|
<span class="sidebar-collapsed-value">
|
||||||
|
|
|
@ -5796,6 +5796,12 @@ msgstr ""
|
||||||
msgid "Start a %{new_merge_request} with these changes"
|
msgid "Start a %{new_merge_request} with these changes"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
msgid "Start and due date"
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
|
msgid "Start date"
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
msgid "Start the Runner!"
|
msgid "Start the Runner!"
|
||||||
msgstr ""
|
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', () => {
|
describe('toggleCollapse events', () => {
|
||||||
beforeEach((done) => {
|
beforeEach((done) => {
|
||||||
spyOn(vm, 'toggleSidebar');
|
spyOn(vm, 'toggleSidebar');
|
||||||
|
@ -28,12 +18,6 @@ describe('collapsedGroupedDatePicker', () => {
|
||||||
Vue.nextTick(done);
|
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', () => {
|
it('should emit when collapsed-calendar-icon is clicked', () => {
|
||||||
vm.$el.querySelector('.sidebar-collapsed-icon').click();
|
vm.$el.querySelector('.sidebar-collapsed-icon').click();
|
||||||
|
|
||||||
|
@ -92,5 +76,11 @@ describe('collapsedGroupedDatePicker', () => {
|
||||||
expect(icons.length).toEqual(1);
|
expect(icons.length).toEqual(1);
|
||||||
expect(icons[0].innerText.trim()).toEqual('None');
|
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