diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-06-01 17:40:28 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-06-01 17:49:04 +0300 |
commit | 0cbf1713dc23e0039653891fab1fa2c52b4bfaf3 (patch) | |
tree | 94f31f3d6935a130d49704c51512016814df15eb /src/components | |
parent | c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 (diff) | |
download | webui-vue-0cbf1713dc23e0039653891fab1fa2c52b4bfaf3.tar.xz |
Add PopoverSlot restyled DateTime and ServerPowerOrerations pages add reload BMC.
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 19 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigationMixin.js | 17 | ||||
-rw-r--r-- | src/components/Global/LoadingBar.vue | 4 | ||||
-rw-r--r-- | src/components/Global/Popover.vue | 90 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/InventoryControlSystem.vue | 42 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/NtpPopover.vue | 4 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/PopoverWithSlot.vue | 225 | ||||
-rw-r--r-- | src/components/Global/TableToolbar.vue | 11 | ||||
-rw-r--r-- | src/components/Global/TableToolbarExport.vue | 13 | ||||
-rw-r--r-- | src/components/SubHeader/SubHeader.vue | 10 |
10 files changed, 309 insertions, 126 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 70631fbf..939ec5af 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -65,19 +65,6 @@ </b-nav-item> <b-nav-item - to="/profile-settings" - data-test-id="appHeader-container-health" - class="nav-top-button" - :class="{ - 'active-route-top-nav': ''.includes( - $route.path.split('profile-settings')[1] - ), - }" - > - {{ $t('appHeader.settings') }} - </b-nav-item> - - <b-nav-item to="/information-and-faq" data-test-id="appHeader-container-power" class="nav-top-button" @@ -125,7 +112,7 @@ <status-icon :status="serverStatusIcon" /> {{ $t('appHeader.power') }} </b-nav-item> - <div class="nav-item"> + <div class="nav-item header-clock__icon"> <b-button id="app-header-refresh" variant="link" @@ -193,7 +180,7 @@ import IconClose from '@carbon/icons-vue/es/close/20'; import IconMenu from '@carbon/icons-vue/es/menu/20'; import IconAvatar from '@carbon/icons-vue/es/user--avatar/20'; import IconRenew from '@carbon/icons-vue/es/renew/20'; -import StatusIcon from '@/components/Global/StatusIcon'; +// import StatusIcon from '@/components/Global/StatusIcon'; export default { name: 'AppHeader', components: { @@ -201,7 +188,7 @@ export default { IconMenu, IconAvatar, IconRenew, - StatusIcon, + // StatusIcon, }, mixins: [BVToastMixin], props: { diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js index c58553a2..241a8f3b 100644 --- a/src/components/AppNavigation/AppNavigationMixin.js +++ b/src/components/AppNavigation/AppNavigationMixin.js @@ -32,6 +32,16 @@ export const AppNavigationMixin = { label: this.$t('appNavigation.serverParam'), route: '/server-parametrs', }, + { + id: 'date-time', + label: this.$t('appNavigation.dateTime'), + route: '/settings/date-time', + }, + { + id: 'server-power-operations', + label: this.$t('appNavigation.serverPowerOperations'), + route: '/operations/server-power-operations', + }, ], }, { @@ -269,7 +279,7 @@ export const AppNavigationMixin = { }, { id: 'key-clear', - label: this.$t('appNavigation.keyClear'), + label: this.$t('appPageTitle.keyClear'), route: '/operations/key-clear', }, { @@ -299,11 +309,6 @@ export const AppNavigationMixin = { label: this.$t('appNavigation.settings'), children: [ { - id: 'date-time', - label: this.$t('appNavigation.dateTime'), - route: '/settings/date-time', - }, - { id: 'network', label: this.$t('appNavigation.network'), route: '/settings/network', diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue index 0e9551b5..b65f97a7 100644 --- a/src/components/Global/LoadingBar.vue +++ b/src/components/Global/LoadingBar.vue @@ -74,12 +74,13 @@ export default { <style lang="scss" scoped> .progress { position: absolute; - left: 0; right: 0; bottom: -0.4rem; opacity: 1; transition: opacity $duration--moderate-01 $standard-easing--productive; height: 0.4rem; + width: calc(100vw - 320px); + border-radius: 0px; &.fade-enter, // Remove this vue2 based only class when switching to vue3 &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter' @@ -89,5 +90,6 @@ export default { } .progress-bar { background-color: $loading-color; + border-radius: 0px; } </style> diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue index f0b4063f..95e9fb24 100644 --- a/src/components/Global/Popover.vue +++ b/src/components/Global/Popover.vue @@ -1,5 +1,5 @@ <template> - <div id="my-container"> + <div id="popover-container"> <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer"> <img src="@/assets/images/icon-clear-red.svg" /> <span class="regular-12px red-font">{{ $t(description) }}</span> @@ -42,7 +42,7 @@ triggers="click" :show.sync="popoverShow" placement="auto" - container="my-container" + container="popover-container" @show="onShow" @shown="onShown" @hidden="onHidden" @@ -58,28 +58,34 @@ <div class="popup-body"> <div> - <label class="light-12px" for="username">{{ 'HEX для ввода' }}</label> - <img - id="popover-target-1" - src="@/assets/images/popups/red-sign.svg" - /> + <label class="light-12px" style="margin-right: 5px">{{ + 'HEX для ввода' + }}</label> + <img id="popover-tooltip" src="@/assets/images/popups/red-sign.svg" /> <popover-info - id="popover-target-1" + id="popover-tooltip" description="Введите HEX в поле для подтверждения действия" /> - <div class="hex-form"> + <div class="hex-label"> <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span> </div> </div> <div class="popup-body__input-container"> - <span class="regular-12px tretiatry">Поле для ввода</span> + <span style="margin-left: 12px" class="regular-12px tretiatry" + >Поле для ввода</span + > <b-form-input id="popover-input-1" - v-model="input1" + v-model="input" class="medium-12px" ></b-form-input> </div> - <b-button class="popover-button" variant="primary" @click="onClose"> + <b-button + class="popup-button" + variant="primary" + :disabled="!input" + @click="onOk" + > {{ $t(button) }} </b-button> </div> @@ -89,27 +95,32 @@ <script> import PopoverInfo from './PopoverInfo'; - +import BVToastMixin from '@/components/Mixins/BVToastMixin'; export default { components: { PopoverInfo, }, + mixins: [BVToastMixin], props: { + id: { + type: String, + default: '', + }, description: { type: String, default: '', }, - id: { + popup: { type: String, default: '', }, - button: { + placement: { type: String, - default: 'global.action.reload', + default: 'auto', }, - popup: { + button: { type: String, - default: '', + default: 'global.action.reload', }, isMicrocode: { type: Boolean, @@ -123,43 +134,39 @@ export default { type: Boolean, default: false, }, + action: { + type: Function, + default: null, + }, }, data() { return { - input1: '', - input1state: null, - input1Return: '', + input: '', popoverShow: false, }; }, - watch: { - input1(val) { - if (val) { - this.input1state = true; - } - }, - }, methods: { onClose() { this.popoverShow = false; }, onOk() { - if (!this.input1) { - this.input1state = false; - } - if (this.input1) { + if (this.input === '9c1735b3f819142393146a5d03314f0a') { + this.action(); this.onClose(); - // Return our popover form results - this.input1Return = this.input1; + } else { + this.warningToast( + this.$t('Неправильный HEX в поле для подтверждения действия'), + { + title: this.$t('Неправильный НЕХ'), + } + ); } }, onShow() { - this.$root.$emit('bv::hide::popover'); // This is called just before the popover is shown // Reset our popover form variables - this.input1 = ''; - this.input1state = null; - this.input1Return = ''; + this.$root.$emit('bv::hide::popover'); + this.input = ''; }, onShown() { // Called just after the popover has been shown @@ -220,6 +227,7 @@ export default { flex-direction: column; align-content: center; justify-content: center; + align-items: center; } .form-control { @@ -229,7 +237,7 @@ export default { padding-top: 30px; } -.hex-form { +.hex-label { height: 32px; width: 341px; display: flex; @@ -241,10 +249,10 @@ export default { margin: 0 auto; } -.popover-button { +.popup-button { width: 341px; height: 40px; - margin: 0 auto 10px; + margin-bottom: 10px; } .popup-body__input-container { diff --git a/src/components/Global/SilaComponents/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue index de5432e1..18f1d9ff 100644 --- a/src/components/Global/SilaComponents/InventoryControlSystem.vue +++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue @@ -91,10 +91,10 @@ v-model="timeOption" class="system-control__radio regular-12px" > - <b-form-radio value="NTP"> + <b-form-radio variant="radio" value="NTP"> {{ $t('SystemDescription.GetNtpFromServer') }} </b-form-radio> - <b-form-radio value="serverDate"> + <b-form-radio variant="radio" value="serverDate"> {{ $t('SystemDescription.UseServerDatettime') }} </b-form-radio> </b-form-radio-group> @@ -192,42 +192,4 @@ label { .system-control__table__cell__4 { margin-top: 26px; } - -.custom-radio ::before { - border: 1px solid $red-brand-primary; - background-color: #fff; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:checked - ~ .custom-control-label::before { - border: 2px solid $red-brand-primary; - background-color: $red-brand-primary; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:hover - ~ .custom-control-label::before { - background-color: $red-brand-primary-hover !important; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-color: $red-brand-primary-hover; -} - -.system-control-section::v-deep - .custom-control-input:checked - ~ .custom-control-label::after { - background-image: none !important; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:active - ~ .custom-control-label::before { - background-color: $red-brand-primary-active !important; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-color: $red-brand-primary-active; -} </style> diff --git a/src/components/Global/SilaComponents/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue index c94c1cc8..6f181002 100644 --- a/src/components/Global/SilaComponents/NtpPopover.vue +++ b/src/components/Global/SilaComponents/NtpPopover.vue @@ -31,7 +31,7 @@ class="medium-12px" ></b-form-input> </div> - <b-button class="popover-button" variant="primary" @click="onClose"> + <b-button class="popup-button" variant="primary" @click="onClose"> {{ $t('global.action.save') }} </b-button> </div> @@ -115,7 +115,7 @@ export default { padding-top: 30px; } -.popover-button { +.popup-button { width: 341px; height: 40px; margin: 0 auto 10px; diff --git a/src/components/Global/SilaComponents/PopoverWithSlot.vue b/src/components/Global/SilaComponents/PopoverWithSlot.vue new file mode 100644 index 00000000..a9ec649b --- /dev/null +++ b/src/components/Global/SilaComponents/PopoverWithSlot.vue @@ -0,0 +1,225 @@ +<template> + <div id="popover-container"> + <slot /> + <b-popover + ref="popover" + :target="id" + triggers="click" + :show.sync="popoverShow" + :placement="placement" + container="popover-container" + @show="onShow" + @shown="onShown" + @hidden="onHidden" + > + <template #title> + <div class="popup-title"> + <span class="bold-16px__caps">{{ popupLabel }}</span> + <b-button class="popup-title__button_close" @click="onClose"> + <img src="@/assets/images/popups/x-icon.svg" /> + </b-button> + </div> + </template> + + <div class="popup-body"> + <div> + <label class="light-12px" style="margin-right: 5px">{{ + 'HEX для ввода' + }}</label> + <img id="popover-tooltip" src="@/assets/images/popups/red-sign.svg" /> + <popover-info + id="popover-tooltip" + description="Введите HEX в поле для подтверждения действия" + /> + <div class="hex-label"> + <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span> + </div> + </div> + <div class="popup-body__input-container"> + <span style="margin-left: 12px" class="regular-12px tretiatry" + >Поле для ввода</span + > + <b-form-input + id="popover-input-1" + ref="input" + v-model="input" + class="medium-12px" + ></b-form-input> + </div> + <b-button + class="popup-button" + variant="primary" + :disabled="!input" + @click="onOk" + > + {{ buttonLabel }} + </b-button> + </div> + </b-popover> + </div> +</template> + +<script> +import PopoverInfo from '../PopoverInfo'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +export default { + components: { + PopoverInfo, + }, + mixins: [BVToastMixin], + props: { + id: { + type: String, + default: '', + }, + placement: { + type: String, + default: 'auto', + }, + popupLabel: { + type: String, + default: '', + }, + buttonLabel: { + type: String, + default: 'global.action.reload', + }, + action: { + type: Function, + default: null, + }, + }, + data() { + return { + input: '', + popoverShow: false, + }; + }, + methods: { + onClose() { + this.popoverShow = false; + }, + onOk() { + if (this.input === '9c1735b3f819142393146a5d03314f0a') { + this.action(); + this.onClose(); + } else { + this.warningToast( + this.$t('Неправильный HEX в поле для подтверждения действия'), + { + title: this.$t('Неправильный НЕХ'), + } + ); + } + }, + onShow() { + // This is called just before the popover is shown + // Reset our popover form variables + this.$root.$emit('bv::hide::popover'); + this.input = ''; + }, + onShown() { + // Called just after the popover has been shown + // Transfer focus to the first input + this.focusRef(this.$refs.input); + }, + onHidden() { + // Called just after the popover has finished hiding + // Bring focus back to the button + // this.focusRef(this.$refs.button); + }, + focusRef(ref) { + // Some references may be a component, functional component, or plain element + // This handles that check before focusing, assuming a `focus()` method exists + // We do this in a double `$nextTick()` to ensure components have + // updated & popover positioned first + this.$nextTick(() => { + this.$nextTick(() => { + console.log(ref); + (ref.$el || ref).focus(); + }); + }); + }, + }, +}; +</script> +<style lang="scss" scoped> +.form-group { + margin: 0; +} + +.popup-title { + display: flex; + flex-flow: row nowrap; + align-items: baseline; +} + +.popup-title__button_close { + margin: 0 28px 0 auto; + background: none; + border: none; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + box-shadow: none !important; + border-radius: 8px; + } + &:focus-visible { + border: none !important; + border-radius: 8px; + } + &:focus { + box-shadow: none; + border-radius: 8px; + } +} + +.popup-body { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + align-items: center; +} + +.form-control { + width: 341px; + height: 52px; + margin: -25px auto; + padding-top: 30px; +} + +.hex-label { + height: 32px; + width: 341px; + display: flex; + justify-content: center; + align-items: center; + background: $faint-secondary-primary-5; + border-radius: 8px; + border: none; + margin: 0 auto; +} + +.popup-button { + width: 341px; + height: 40px; + margin-bottom: 10px; +} + +.popup-body__input-container { + height: 52px; + margin: 24px auto 16px auto; +} + +.popover-info { + background-color: $on-surface-primary; + // border: 1px solid $text-primary; + // box-shadow: 0px 6px 16px -12px rgba(23, 40, 77, 0.06); + border-radius: 8px; + width: 168px; + height: 76px; + &.arrow { + display: block; + } +} +</style> diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index 3ac8e2ce..eabe0c98 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -67,12 +67,13 @@ export default { }, }; </script> - <style lang="scss" scoped> $toolbar-height: 64px; .toolbar-container { - width: 100%; + width: calc(100vw - 320px); + height: $toolbar-height; + border-radius: 0px; position: fixed; bottom: 0; right: 0; @@ -80,18 +81,14 @@ $toolbar-height: 64px; } .toolbar-content { - height: $toolbar-height; background-color: $white; color: $white; - position: absolute; - left: 0; - right: 0; - top: -$toolbar-height; display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); + border-radius: 0px; } .toolbar-selected { diff --git a/src/components/Global/TableToolbarExport.vue b/src/components/Global/TableToolbarExport.vue index 69646ea6..152a4f68 100644 --- a/src/components/Global/TableToolbarExport.vue +++ b/src/components/Global/TableToolbarExport.vue @@ -1,16 +1,15 @@ <template> - <b-button - class="d-flex align-items-center" - variant="primary" - :download="download" - :href="href" - > - {{ $t('global.action.export') }} + <b-button size="md" variant="primary" :download="download" :href="href"> + <icon-export /> {{ $t('global.action.export') }} </b-button> </template> <script> +import IconExport from '@carbon/icons-vue/es/document--export/20'; export default { + components: { + IconExport, + }, props: { data: { type: Array, diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue index 4ab6b094..9d8a1b88 100644 --- a/src/components/SubHeader/SubHeader.vue +++ b/src/components/SubHeader/SubHeader.vue @@ -114,20 +114,18 @@ export default { .navbar-text, .nav-link, .btn-link { - border-radius: 4px; + border-radius: 14% 14% 0px 0px; padding: 0.68rem 1rem !important; &:hover { background-color: $white; color: #1a3e5b !important; - border-radius: 4px; - border-bottom: 5px; + border-radius: 14% 14% 0px 0px; } &:active { background-color: $white; color: #1a3e5b !important; - border-bottom: 5px; - border-radius: 4px; + border-radius: 14% 14% 0px 0px; } } @@ -169,7 +167,7 @@ export default { #sub-header .nav-item.active-route-top > a { background-color: $white; color: #1a3e5b; - border-radius: 4px; + border-radius: 14% 14% 0px 0px; } .navbar-dark .navbar-nav .nav-link { |