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 | |
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')
14 files changed, 36 insertions, 42 deletions
diff --git a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue index da6b457c..a5dc4e74 100644 --- a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue +++ b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue @@ -237,7 +237,7 @@ placeholder="" > <template #add-button-text> - {{ $t('global.action.add') }} <icon-add /> + <icon-add /> {{ $t('global.action.add') }} </template> </b-form-tags> </b-form-group> 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; diff --git a/src/views/Control/Kvm/Kvm.vue b/src/views/Control/Kvm/Kvm.vue index 10322bde..1a41baaf 100644 --- a/src/views/Control/Kvm/Kvm.vue +++ b/src/views/Control/Kvm/Kvm.vue @@ -18,13 +18,6 @@ export default { </script> <style scoped> -.button-launch > svg { - height: 25px; -} -.button-launch { - padding-left: 0px; -} - .terminal-container { width: 100%; } diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue index 43dc7271..0c545d0f 100644 --- a/src/views/Control/Kvm/KvmConsole.vue +++ b/src/views/Control/Kvm/KvmConsole.vue @@ -14,28 +14,24 @@ </dl> </b-col> - <b-col class="d-flex justify-content-end"> + <b-col class="d-flex justify-content-end pr-1"> <b-button v-if="isConnected" variant="link" type="button" - class="pr-0 button-launch" @click="sendCtrlAltDel" > - <icon-arrow-down aria-hidden="true" /> + <icon-arrow-down /> {{ $t('pageKvm.buttonCtrlAltDelete') }} </b-button> <b-button v-if="!isFullWindow" variant="link" type="button" - class="pr-0 button-launch" @click="openConsoleWindow()" > - <icon-launch aria-hidden="true" /> - <span class="d-none d-md-inline"> - {{ $t('pageKvm.openNewTab') }} - </span> + <icon-launch /> + {{ $t('pageKvm.openNewTab') }} </b-button> </b-col> </b-row> diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue index 2b49562c..a0e47870 100644 --- a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue +++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue @@ -13,14 +13,8 @@ </b-col> <b-col v-if="!isFullWindow" class="d-flex justify-content-end"> - <b-button - variant="link" - type="button" - class="pr-0 button-launch" - @click="openConsoleWindow()" - > - <icon-launch aria-hidden="true" /> - + <b-button variant="link" type="button" @click="openConsoleWindow()"> + <icon-launch /> {{ $t('pageSerialOverLan.openNewTab') }} </b-button> </b-col> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue index 25436c8a..a6342089 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue @@ -14,9 +14,11 @@ variant="link" data-test-id="hardwareStatus-button-expandBmc" :aria-label="expandRowLabel" + :title="expandRowLabel" + class="btn-icon-only" @click="toggleRowDetails(row)" > - <icon-chevron :title="expandRowLabel" /> + <icon-chevron /> </b-button> </template> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue index e629006f..4fdda506 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue @@ -14,9 +14,11 @@ variant="link" data-test-id="hardwareStatus-button-expandChassis" :aria-label="expandRowLabel" + :title="expandRowLabel" + class="btn-icon-only" @click="toggleRowDetails(row)" > - <icon-chevron :title="expandRowLabel" /> + <icon-chevron /> </b-button> </template> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue index 9e0c9f8b..a5953054 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue @@ -36,9 +36,11 @@ variant="link" data-test-id="hardwareStatus-button-expandDimms" :aria-label="expandRowLabel" + :title="expandRowLabel" + class="btn-icon-only" @click="toggleRowDetails(row)" > - <icon-chevron :title="expandRowLabel" /> + <icon-chevron /> </b-button> </template> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue index 4981d457..58b092da 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue @@ -36,9 +36,11 @@ variant="link" data-test-id="hardwareStatus-button-expandFans" :aria-label="expandRowLabel" + :title="expandRowLabel" + class="btn-icon-only" @click="toggleRowDetails(row)" > - <icon-chevron :title="expandRowLabel" /> + <icon-chevron /> </b-button> </template> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue index 4137f1bf..94f5774b 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue @@ -36,9 +36,11 @@ variant="link" data-test-id="hardwareStatus-button-expandPowerSupplies" :aria-label="expandRowLabel" + :title="expandRowLabel" + class="btn-icon-only" @click="toggleRowDetails(row)" > - <icon-chevron :title="expandRowLabel" /> + <icon-chevron /> </b-button> </template> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue index da15b7a9..fcb8ef36 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue @@ -35,9 +35,11 @@ variant="link" data-test-id="hardwareStatus-button-expandProcessors" :aria-label="expandRowLabel" + :title="expandRowLabel" + class="btn-icon-only" @click="toggleRowDetails(row)" > - <icon-chevron :title="expandRowLabel" /> + <icon-chevron /> </b-button> </template> <!-- Health --> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue index e2ba49ec..9cb1c6ae 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue @@ -14,9 +14,11 @@ variant="link" data-test-id="hardwareStatus-button-expandSystem" :aria-label="expandRowLabel" + :title="expandRowLabel" + class="btn-icon-only" @click="toggleRowDetails(row)" > - <icon-chevron :title="expandRowLabel" /> + <icon-chevron /> </b-button> </template> diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue index 9c549da4..1330ca5e 100644 --- a/src/views/Overview/OverviewQuickLinks.vue +++ b/src/views/Overview/OverviewQuickLinks.vue @@ -37,7 +37,7 @@ data-test-id="overviewQuickLinks-button-networkSettings" class="d-flex justify-content-between align-items-center" > - <span>{{ $t('pageOverview.quicklinks.editNetworkSettings') }}</span> + {{ $t('pageOverview.quicklinks.editNetworkSettings') }} <icon-arrow-right /> </b-button> </div> @@ -48,7 +48,7 @@ data-test-id="overviewQuickLinks-button-solConsole" class="d-flex justify-content-between align-items-center" > - <span>{{ $t('pageOverview.quicklinks.solConsole') }}</span> + {{ $t('pageOverview.quicklinks.solConsole') }} <icon-arrow-right /> </b-button> </div> |