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/views/Configuration | |
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/views/Configuration')
-rw-r--r-- | src/views/Configuration/DateTimeSettings/DateTimeSettings.vue | 13 | ||||
-rw-r--r-- | src/views/Configuration/Firmware/Firmware.vue | 2 |
2 files changed, 6 insertions, 9 deletions
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue index 79cdbc1e..d1d04539 100644 --- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue +++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue @@ -73,25 +73,22 @@ </b-form-invalid-feedback> <b-form-datepicker v-model="form.manual.date" - class="input-action" + class="btn-datepicker btn-icon-only" button-only + right :hide-header="true" :locale="locale" :label-help=" $t('global.calendar.useCursorKeysToNavigateCalendarDates') " + :aria-label="$t('global.calendar.selectDate')" + :title="$t('global.calendar.selectDate')" :disabled="form.configurationSelected === 'ntp'" button-variant="link" aria-controls="input-manual-date" > <template #button-content> - <icon-calendar - :title="$t('global.calendar.openDatePicker')" - aria-hidden="true" - /> - <span class="sr-only"> - {{ $t('global.calendar.openDatePicker') }} - </span> + <icon-calendar /> </template> </b-form-datepicker> </b-input-group> diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue index 7e9599fe..24ef33c8 100644 --- a/src/views/Configuration/Firmware/Firmware.vue +++ b/src/views/Configuration/Firmware/Firmware.vue @@ -367,7 +367,7 @@ export default { } } .card-footer { - height: 41px; + height: 40px; } .card-body { padding: 0.75rem 1.25rem; |