diff options
24 files changed, 130 insertions, 143 deletions
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index e927d244..2a7b8169 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -3,11 +3,11 @@ padding-right: $spacer; padding-bottom: $spacer / 2; padding-left: $spacer; - - // Buttons with SVGs and text expect - // text to be wrapped in a span element - svg + span { - margin-left: $spacer / 4; + display: inline-flex; + align-items: center; + justify-content: space-around; + svg { + margin-right: $spacer / 4; } &:disabled { color: gray("600"); @@ -60,21 +60,23 @@ } } -// Datepicker and Password toggle buttons -.input-action { +// Icon only buttons +.btn-icon-only svg { + margin-right: 0; +} + +// Datepicker, clear search and Password toggle buttons +.input-action-btn, +.btn-datepicker { position: absolute; right: 0; + top: 0; + z-index: $zindex-dropdown + 1; } -.input-action .btn-link, + +// Contain input buttons within input +.btn-datepicker .dropdown-toggle, .input-action-btn { - position: absolute; - right: 1px; - top: 1px; - z-index: $zindex-dropdown + 1; - padding: 0; - width: 36px; - height: 35.8px; - svg { - vertical-align: sub; - } + padding: 7px; + margin: 1px; }
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss index 641e4ed1..0307a6ce 100644 --- a/src/assets/styles/bmc/custom/_calendar.scss +++ b/src/assets/styles/bmc/custom/_calendar.scss @@ -5,4 +5,13 @@ color: theme-color("dark"); } } +} + +.b-calendar-grid .btn { + display: inline-block; +} + +// Date picker focus +.b-calendar .b-calendar-grid { + padding: 6px 12px; }
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss index 464282c6..0451474b 100644 --- a/src/assets/styles/bmc/custom/_forms.scss +++ b/src/assets/styles/bmc/custom/_forms.scss @@ -127,6 +127,6 @@ .form-control-with-button { &.is-invalid, &.is-valid { - background-position: right 3rem bottom 50%; + background-position: right 2.5rem bottom 50%; } } diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index fb50f5ec..6e893a33 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -124,6 +124,7 @@ svg { } .btn-link { + display: inline-block; width: 100%; text-align: left; text-decoration: none !important; diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue index f3cb7f12..5d604503 100644 --- a/src/components/Global/InfoTooltip.vue +++ b/src/components/Global/InfoTooltip.vue @@ -1,6 +1,11 @@ <template> - <b-button v-b-tooltip variant="link" class="btn-tooltip" :title="title"> - <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span> + <b-button + v-b-tooltip + variant="link" + class="btn-tooltip btn-icon-only" + :title="title" + :aria-label="$t('global.ariaLabel.tooltip')" + > <icon-tooltip /> </b-button> </template> diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue index bf3e4ca5..2119f8c6 100644 --- a/src/components/Global/InputPasswordToggle.vue +++ b/src/components/Global/InputPasswordToggle.vue @@ -2,22 +2,15 @@ <div class="input-password-toggle-container"> <slot></slot> <b-button - :aria-label="$t('global.ariaLabel.showPassword')" + :aria-label="togglePasswordLabel" + :title="togglePasswordLabel" variant="link" - class="input-action-btn" + class="input-action-btn btn-icon-only" :class="{ isVisible: isVisible }" @click="toggleVisibility" > - <icon-view-off - v-if="isVisible" - aria-hidden="true" - :title="$t('global.ariaLabel.hidePassword')" - /> - <icon-view - v-else - aria-hidden="true" - :title="$t('global.ariaLabel.showPassword')" - /> + <icon-view-off v-if="isVisible" /> + <icon-view v-else /> </b-button> </div> </template> @@ -32,6 +25,7 @@ export default { data() { return { isVisible: false, + togglePasswordLabel: this.$t('global.ariaLabel.showPassword'), }; }, methods: { @@ -44,6 +38,10 @@ export default { if (inputEl.nodeName === 'INPUT') { inputEl.type = this.isVisible ? 'text' : 'password'; } + + this.isVisible + ? (this.togglePasswordLabel = this.$t('global.ariaLabel.hidePassword')) + : (this.togglePasswordLabel = this.$t('global.ariaLabel.showPassword')); }, }, }; diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index c259df91..d472c0c9 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -23,10 +23,12 @@ <b-button v-if="filter" variant="link" + class="btn-icon-only input-action-btn" :aria-label="$t('global.ariaLabel.clearSearch')" + :title="$t('global.ariaLabel.clearSearch')" @click="onClearSearch" > - <icon-close :title="$t('global.ariaLabel.clearSearch')" /> + <icon-close /> </b-button> </b-input-group> </b-form-group> @@ -77,16 +79,4 @@ export default { z-index: 4; stroke: gray('400'); } - -.btn { - position: absolute; - right: 0; - top: 0; - padding: 0.4rem 1rem; - z-index: 4; - svg { - margin-left: 0; - vertical-align: sub; - } -} </style> 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> diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue index a12ae801..94ef6ce4 100644 --- a/src/components/Global/TableRowAction.vue +++ b/src/components/Global/TableRowAction.vue @@ -2,7 +2,7 @@ <span> <b-link v-if="value === 'export'" - class="align-bottom btn-link py-0" + class="align-bottom btn-icon-only py-0 btn-link" :download="download" :href="href" :title="title" @@ -15,7 +15,7 @@ <b-button v-else variant="link" - class="py-0" + class="btn-icon-only" :aria-label="title" :title="title" :disabled="!enabled" diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 571e7470..0c4dcd6d 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -26,7 +26,7 @@ "progressBar": "Page loading progress bar" }, "calendar": { - "openDatePicker": "Open date picker", + "selectDate": "Select date", "useCursorKeysToNavigateCalendarDates": "Use cursor keys to navigate calendar dates" }, "fileUpload": { 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> |