diff options
| author | Dixsie Wolmers <dixsie@ibm.com> | 2020-11-11 01:07:56 +0300 |
|---|---|---|
| committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-11-13 18:37:57 +0300 |
| commit | 30f11f818168c89126777b717ab37829e25e8378 (patch) | |
| tree | 2bfea87a7f99cc1143df630fda3c908e8c02b6e7 /src/components/Global/TableDateFilter.vue | |
| parent | 151dd2491c01e70ed69baf638c22624fae598361 (diff) | |
| download | webui-vue-30f11f818168c89126777b717ab37829e25e8378.tar.xz | |
Align button icons
- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with form input buttons
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie28d7d7dd7303ab6bf1897d1fa569e1580cc2f9d
Diffstat (limited to 'src/components/Global/TableDateFilter.vue')
| -rw-r--r-- | src/components/Global/TableDateFilter.vue | 92 |
1 files changed, 40 insertions, 52 deletions
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue index 73b2b832..00c04ab0 100644 --- a/src/components/Global/TableDateFilter.vue +++ b/src/components/Global/TableDateFilter.vue @@ -23,32 +23,26 @@ {{ $t('global.form.dateMustBeBefore', { date: toDate }) }} </template> </b-form-invalid-feedback> - <template #append> - <b-form-datepicker - v-model="fromDate" - class="input-action" - button-only - right - :max="toDate" - :hide-header="true" - :locale="locale" - :label-help=" - $t('global.calendar.useCursorKeysToNavigateCalendarDates') - " - button-variant="link" - aria-controls="input-from-date" - > - <template #button-content> - <icon-calendar - :title="$t('global.calendar.openDatePicker')" - aria-hidden="true" - /> - <span class="sr-only">{{ - $t('global.calendar.openDatePicker') - }}</span> - </template> - </b-form-datepicker> - </template> + <b-form-datepicker + v-model="fromDate" + class="btn-datepicker btn-icon-only" + button-only + right + :max="toDate" + :hide-header="true" + :locale="locale" + :label-help=" + $t('global.calendar.useCursorKeysToNavigateCalendarDates') + " + :aria-label="$t('global.calendar.selectDate')" + :title="$t('global.calendar.selectDate')" + button-variant="link" + aria-controls="input-from-date" + > + <template #button-content> + <icon-calendar /> + </template> + </b-form-datepicker> </b-input-group> </b-form-group> <b-form-group @@ -73,32 +67,26 @@ {{ $t('global.form.dateMustBeAfter', { date: fromDate }) }} </template> </b-form-invalid-feedback> - <template #append> - <b-form-datepicker - v-model="toDate" - class="input-action" - button-only - right - :min="fromDate" - :hide-header="true" - :locale="locale" - :label-help=" - $t('global.calendar.useCursorKeysToNavigateCalendarDates') - " - button-variant="link" - aria-controls="input-to-date" - > - <template #button-content> - <icon-calendar - :title="$t('global.calendar.openDatePicker')" - aria-hidden="true" - /> - <span class="sr-only">{{ - $t('global.calendar.openDatePicker') - }}</span> - </template> - </b-form-datepicker> - </template> + <b-form-datepicker + v-model="toDate" + class="btn-datepicker btn-icon-only" + button-only + right + :min="fromDate" + :hide-header="true" + :locale="locale" + :label-help=" + $t('global.calendar.useCursorKeysToNavigateCalendarDates') + " + :aria-label="$t('global.calendar.openDatePicker')" + :title="$t('global.calendar.openDatePicker')" + button-variant="link" + aria-controls="input-to-date" + > + <template #button-content> + <icon-calendar /> + </template> + </b-form-datepicker> </b-input-group> </b-form-group> </b-col> |