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/Global/Popover.vue | |
parent | c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 (diff) | |
download | webui-vue-0cbf1713dc23e0039653891fab1fa2c52b4bfaf3.tar.xz |
Add PopoverSlot restyled DateTime and ServerPowerOrerations pages add reload BMC.
Diffstat (limited to 'src/components/Global/Popover.vue')
-rw-r--r-- | src/components/Global/Popover.vue | 90 |
1 files changed, 49 insertions, 41 deletions
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 { |