summaryrefslogtreecommitdiff
path: root/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/_sila/BMC/Configuration/SettingsImportPopup.vue')
-rw-r--r--src/views/_sila/BMC/Configuration/SettingsImportPopup.vue291
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>