diff options
Diffstat (limited to 'src/components/_sila/Global/Popover.vue')
| -rw-r--r-- | src/components/_sila/Global/Popover.vue | 287 |
1 files changed, 0 insertions, 287 deletions
diff --git a/src/components/_sila/Global/Popover.vue b/src/components/_sila/Global/Popover.vue deleted file mode 100644 index 95e9fb24..00000000 --- a/src/components/_sila/Global/Popover.vue +++ /dev/null @@ -1,287 +0,0 @@ -<template> - <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> - </div> - <div - v-else-if="isMicrocode" - :id="id" - ref="button" - variant="primary" - class="pointer" - > - <img src="@/assets/images/icon-reload-red.svg" /> - <span class="regular-12px red-font">{{ $t(description) }}</span> - </div> - - <div - v-else-if="isMicrocodeDrivers" - :id="id" - ref="button" - variant="primary" - class="pointer" - > - <img src="@/assets/images/icon-reload-red.svg" /> - <span class="semi-bold-16px red-font">{{ $t(description) }}</span> - </div> - - <span - v-else - :id="id" - ref="button" - class="regular-12px underline" - variant="primary" - > - {{ $t(description) }} - </span> - <!-- Our popover title and content render container --> - <b-popover - ref="popover" - :target="id" - triggers="click" - :show.sync="popoverShow" - placement="auto" - container="popover-container" - @show="onShow" - @shown="onShown" - @hidden="onHidden" - > - <template #title> - <div class="popup-title"> - <span class="bold-16px__caps">{{ $t(popup) }}</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" - v-model="input" - class="medium-12px" - ></b-form-input> - </div> - <b-button - class="popup-button" - variant="primary" - :disabled="!input" - @click="onOk" - > - {{ $t(button) }} - </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: '', - }, - description: { - type: String, - default: '', - }, - popup: { - type: String, - default: '', - }, - placement: { - type: String, - default: 'auto', - }, - button: { - type: String, - default: 'global.action.reload', - }, - isMicrocode: { - type: Boolean, - default: false, - }, - isMicrocodeDrivers: { - type: Boolean, - default: false, - }, - isclear: { - type: Boolean, - default: false, - }, - 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.input1); - }, - 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(() => { - (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; -} - -.tretiatry { - margin-left: 12px; -} - -.light-12px { - margin: 0px 5px 0px 15px; -} - -.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; - } -} - -.red-font { - padding-left: 5px; - color: $red-brand-primary; -} -</style> |