diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue | 117 |
1 files changed, 63 insertions, 54 deletions
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue index 932ca8e002e..9ac687f5e2c 100644 --- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue +++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue @@ -5,6 +5,7 @@ import { __, sprintf } from '~/locale'; import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range'; import Icon from '~/vue_shared/components/icon.vue'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import DateTimePickerInput from './date_time_picker_input.vue'; import { defaultTimeRanges, @@ -24,6 +25,7 @@ const events = { export default { components: { Icon, + TooltipOnTruncate, DateTimePickerInput, GlFormGroup, GlButton, @@ -149,61 +151,68 @@ export default { }; </script> <template> - <gl-dropdown - :text="timeWindowText" - class="date-time-picker" - menu-class="date-time-picker-menu" - v-bind="$attrs" - toggle-class="w-100 text-truncate" + <tooltip-on-truncate + :title="timeWindowText" + :truncate-target="elem => elem.querySelector('.date-time-picker-toggle')" + placement="top" + class="d-inline-block" > - <div class="d-flex justify-content-between gl-p-2"> - <gl-form-group - :label="__('Custom range')" - label-for="custom-from-time" - label-class="gl-pb-1" - class="custom-time-range-form-group col-md-7 gl-pl-1 gl-pr-0 m-0" - > - <div class="gl-pt-2"> - <date-time-picker-input - id="custom-time-from" - v-model="startInput" - :label="__('From')" - :state="startInputValid" - /> - <date-time-picker-input - id="custom-time-to" - v-model="endInput" - :label="__('To')" - :state="endInputValid" - /> - </div> - <gl-form-group> - <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button> - <gl-button variant="success" :disabled="!isValid" @click="setFixedRange()"> - {{ __('Apply') }} - </gl-button> + <gl-dropdown + :text="timeWindowText" + v-bind="$attrs" + class="date-time-picker w-100" + menu-class="date-time-picker-menu" + toggle-class="date-time-picker-toggle text-truncate" + > + <div class="d-flex justify-content-between gl-p-2"> + <gl-form-group + :label="__('Custom range')" + label-for="custom-from-time" + label-class="gl-pb-1" + class="custom-time-range-form-group col-md-7 gl-pl-1 gl-pr-0 m-0" + > + <div class="gl-pt-2"> + <date-time-picker-input + id="custom-time-from" + v-model="startInput" + :label="__('From')" + :state="startInputValid" + /> + <date-time-picker-input + id="custom-time-to" + v-model="endInput" + :label="__('To')" + :state="endInputValid" + /> + </div> + <gl-form-group> + <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button> + <gl-button variant="success" :disabled="!isValid" @click="setFixedRange()"> + {{ __('Apply') }} + </gl-button> + </gl-form-group> </gl-form-group> - </gl-form-group> - <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0"> - <template #label> - <span class="gl-pl-5">{{ __('Quick range') }}</span> - </template> + <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0"> + <template #label> + <span class="gl-pl-5">{{ __('Quick range') }}</span> + </template> - <gl-dropdown-item - v-for="(option, index) in options" - :key="index" - :active="isOptionActive(option)" - active-class="active" - @click="setQuickRange(option)" - > - <icon - name="mobile-issue-close" - class="align-bottom" - :class="{ invisible: !isOptionActive(option) }" - /> - {{ option.label }} - </gl-dropdown-item> - </gl-form-group> - </div> - </gl-dropdown> + <gl-dropdown-item + v-for="(option, index) in options" + :key="index" + :active="isOptionActive(option)" + active-class="active" + @click="setQuickRange(option)" + > + <icon + name="mobile-issue-close" + class="align-bottom" + :class="{ invisible: !isOptionActive(option) }" + /> + {{ option.label }} + </gl-dropdown-item> + </gl-form-group> + </div> + </gl-dropdown> + </tooltip-on-truncate> </template> |