diff options
Diffstat (limited to 'src/views/_sila/BMC/Configuration/SettingsImportPopup.vue')
-rw-r--r-- | src/views/_sila/BMC/Configuration/SettingsImportPopup.vue | 291 |
1 files changed, 0 insertions, 291 deletions
diff --git a/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue b/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue deleted file mode 100644 index d0524e27..00000000 --- a/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue +++ /dev/null @@ -1,291 +0,0 @@ -<template> - <div id="my-container"> - <span - :id="id" - ref="button" - class="regular-12px underline" - variant="primary" - > - {{ $t(description) }} - </span> - <!-- Our popover title and content render container --> - <b-popover - id="export-popup" - ref="popover" - :target="id" - triggers="click" - :show.sync="popoverShow" - placement="auto" - container="my-container" - @show="onShow" - @shown="onShown" - @hidden="onHidden" - > - <template #title> - <div class="popup-title"> - <span class="semi-bold-20px">{{ $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-switch"> - <span - class="medium-16px popup-item" - :class="{ 'switch-active': isExport }" - @click="switchExport" - >{{ $t('global.action.export') }}</span - > - <span - class="medium-16px popup-item" - :class="{ 'switch-active': !isExport }" - @click="switchImport" - >{{ $t('global.action.import') }}</span - > - <div class="slider" /> - </div> - <div v-if="isExport" class="popup-body"> - <div class="ip-container"> - <span class="regular-16px" - >Оставить IP адрес из настроек сервера</span - > - <b-form-checkbox switch> </b-form-checkbox> - </div> - <b-button class="popover-button" variant="primary" @click="onClose"> - {{ $t(button) }} - </b-button> - </div> - <div v-else class="settings-import_container"> - <b-form-file - id="settings-import__file-input" - placeholder="Нажмите на область или перетащите в нее файл с настройками" - ></b-form-file> - </div> - </b-popover> - </div> -</template> - -<script> -export default { - props: { - description: { - type: String, - default: '', - }, - id: { - type: String, - default: '', - }, - button: { - type: String, - default: 'global.action.reload', - }, - popup: { - type: String, - default: '', - }, - }, - data() { - return { - input1: '', - input1state: null, - input1Return: '', - popoverShow: false, - isExport: true, - }; - }, - watch: { - input1(val) { - if (val) { - this.input1state = true; - } - }, - }, - methods: { - onClose() { - this.popoverShow = false; - }, - onOk() { - if (!this.input1) { - this.input1state = false; - } - if (this.input1) { - this.onClose(); - // Return our popover form results - this.input1Return = this.input1; - } - }, - 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 = ''; - }, - 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(); - }); - }); - }, - switchExport() { - this.isExport = true; - }, - switchImport() { - this.isExport = false; - }, - }, -}; -</script> -<style lang="scss"> -.custom-file { - width: 432px; - height: 108px; -} - -#settings-import__file-input ~ .custom-file-label { - background-color: transparent; - border: 1px dashed rgba(12, 28, 41, 0.6); - box-sizing: border-box; - border-radius: 8px; - width: 432px; - height: 108px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - white-space: normal; - padding: 0 65px; -} - -#settings-import__file-input ~ .custom-file-label::after { - display: none; -} -</style> -<style lang="scss" scoped> -#export-popup { - flex-direction: column; - align-items: flex-start; - background: #ffffff; - box-shadow: 0px -4px 12px rgb(0 0 0 / 5%); - border-radius: 16px !important; - border-radius: 4px; - max-width: 480px; - width: 480px; - height: auto; -} - -.form-group { - margin: 0; -} - -.popup-title { - display: flex; - align-items: baseline; - width: 465px; -} - -.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; -} - -.medium-16px { - display: inline-block; - height: 45px; - margin: 10px; - cursor: pointer; -} - -.popup-switch { - position: relative; - display: flex; - flex-flow: row nowrap; - border-bottom: 1px solid #f3f4f5; -} - -.switch-active { - // color: $red-brand-primary; - transition: ease-in 0.15s; -} - -.slider { - position: absolute; - width: 130px; - height: 0px; - // border-bottom: 4px solid $red-brand-primary; - transition: ease-in 0.2s; - bottom: 14px; - left: 10px; -} - -.popup-item:nth-child(1).switch-active ~ .slider { - left: 10px; -} - -.popup-item:nth-child(2).switch-active ~ .slider { - left: 160px; -} - -.ip-container { - display: flex; - width: 461px; - height: 75px; - padding: 30px 15px 25px 15px; -} - -.popover-button { - width: 432px; - height: 52px; - margin: 0 auto 10px; -} - -.settings-import_container { - width: 478px; - height: 160px; - background-color: $surface-secondary; - margin: -15px -15px -8px -12px; - border-radius: 0 0 16px 16px; - - display: flex; - align-items: center; - justify-content: center; -} -</style> |