diff options
Diffstat (limited to 'src/views/BMC/Configuration/SettingsImportPopup.vue')
-rw-r--r-- | src/views/BMC/Configuration/SettingsImportPopup.vue | 295 |
1 files changed, 295 insertions, 0 deletions
diff --git a/src/views/BMC/Configuration/SettingsImportPopup.vue b/src/views/BMC/Configuration/SettingsImportPopup.vue new file mode 100644 index 00000000..c7309ba3 --- /dev/null +++ b/src/views/BMC/Configuration/SettingsImportPopup.vue @@ -0,0 +1,295 @@ +<template> + <div id="my-container"> + <span + :id="id" + ref="button" + class="regular-12px underline pointer" + 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; +} + +.pointer { + cursor: pointer; +} + +.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> |