add modal global style, fix some modal

11 files changed, 219 insertions, 126 deletions

diff --git a/src/assets/images/_sila/chevron-down.svg b/src/assets/images/_sila/chevron-down.svg
new file mode 100644
index 00000000..ee70185f
--- /dev/null
+++ b/src/assets/images/_sila/chevron-down.svg
@@ -0,0 +1,9 @@
+<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<polygon points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12 "/>
+<rect id="_x3C_Transparent_Rectangle_x3E_" class="st0" width="32" height="32"/>
+</svg>
+
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 9288bb42..79d1726f 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -40,6 +40,11 @@
   }
 }
 
+.custom-select {
+  background-image: url('~@/assets/images/_sila/chevron-down.svg');
+  background-size: 18px;
+}
+
 .form-control::-webkit-outer-spin-button,
 .form-control::-webkit-inner-spin-button {
   -webkit-appearance: none;
diff --git a/src/assets/styles/bmc/_sila/_modal.scss b/src/assets/styles/bmc/_sila/_modal.scss
index e2fa0cd8..91412338 100644
--- a/src/assets/styles/bmc/_sila/_modal.scss
+++ b/src/assets/styles/bmc/_sila/_modal.scss
@@ -1,12 +1,77 @@
+.modal-dialog {
+  margin: 20vh auto 0;
+}
+
+.modal-content {
+  border-radius: $border-radius;
+}
+
 .modal-header {
+  border-bottom: none;
+
   .close {
+    padding: 0 1.4rem 0 0;
+    margin-top: -2rem;
     font-weight: normal;
     color: theme-color("dark");
     opacity: 1;
-  }
+    &:hover {
+      background-color: none;
+    }
+    }
   .modal-title {
-    font-size: 1.25rem;
-    font-weight: normal;
+    font-size: 1.25rem !important;
+    font-weight: 500;
     line-height: 1.3;
   }
 }
+
+.modal-header {
+  align-items: center;
+}
+
+.modal-body {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.file-input_container >
+.custom-file {
+  height: 100%;
+}
+
+  .custom-file-input ~ .custom-file-label {
+    background-color: transparent;
+  border: 1px dashed rgba(12, 28, 41, 0.6);
+  box-sizing: border-box;
+  border-radius: $border-radius;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: normal;
+  justify-content: center;
+}
+
+
+.custom-file-input ~ .custom-file-label::after {
+  display: none;
+}
+
+#modal-reset {
+  .modal-body {
+    flex-direction: column;
+  }
+  .modal-footer {
+    flex-wrap: nowrap;
+  }
+}
+
+#modal-dns,
+#configure-connection {
+  .modal-body {
+    > form {
+      width: 100%;
+    }
+  }
+} 
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index c87c4e0c..fe57012b 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -17,8 +17,8 @@ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
 $grid-breakpoints: (
   xs: 0,
-  sm: 480px,
-  md: 640px,
+  sm: 576px,
+  md: 768px,
   lg: 992px,
   xl: 1920px
 );
\ No newline at end of file
diff --git a/src/components/_sila/Global/FormFile.vue b/src/components/_sila/Global/FormFile.vue
index 30e4af1f..ee93ba49 100644
--- a/src/components/_sila/Global/FormFile.vue
+++ b/src/components/_sila/Global/FormFile.vue
@@ -1,26 +1,37 @@
 <template>
   <div class="custom-form-file-container">
     <label>
-      <b-form-file
-        :id="id"
-        v-model="file"
-        :accept="accept"
-        :disabled="disabled"
-        :state="state"
-        plain
-        @input="$emit('input', file)"
+      <b-modal
+        :id="`modal-${id}`"
+        body-class="p-0 justify-content-center"
+        :title="$t('global.fileUpload.modal')"
+        hide-footer
       >
-      </b-form-file>
-      <span
-        class="add-file-btn btn"
+        <b-col class="p-3 file-input_container">
+          <b-form-file
+            :id="id"
+            v-model="file"
+            :accept="accept"
+            :disabled="disabled"
+            :state="state"
+            :placeholder="$t('global.fileUpload.placeholder')"
+            :drop-placeholder="$t('global.fileUpload.dropPlaceholder')"
+            @input="$emit('input', file)"
+          >
+          </b-form-file>
+        </b-col>
+      </b-modal>
+      <b-button
+        class="add-file-btn"
         :class="{
           disabled,
           'btn-secondary': isSecondary,
           'btn-primary': !isSecondary,
         }"
+        @click="$bvModal.show(`modal-${id}`)"
       >
         {{ $t('global.fileUpload.browseText') }}
-      </span>
+      </b-button>
       <slot name="invalid"></slot>
     </label>
     <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
@@ -89,7 +100,6 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 .form-control-file {
   opacity: 0;
@@ -125,4 +135,11 @@ export default {
     }
   }
 }
+
+.file-input_container {
+  width: 100%;
+  height: 46vh;
+  background-color: $surface-secondary;
+  border-radius: 0 0 16px 16px;
+}
 </style>
diff --git a/src/env/components/AppNavigation/sila.js b/src/env/components/AppNavigation/sila.js
index 0390c42b..bf7f0748 100644
--- a/src/env/components/AppNavigation/sila.js
+++ b/src/env/components/AppNavigation/sila.js
@@ -23,7 +23,7 @@ const AppNavigationMixin = {
       navigationItems: [
         {
           id: 'overview',
-          label: this.$t('appNavigation.overview'),
+          label: this.$t('appNavigation.system'),
           icon: 'iconOverview',
           children: [
             {
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 56cdb0f8..97016f8a 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -36,7 +36,10 @@
     },
     "fileUpload": {
       "browseText": "Выбрать файл",
-      "clearSelectedFile": "Очистить поле"
+      "clearSelectedFile": "Очистить поле",
+      "modal":"Выбор файла",
+      "placeholder": "Нажмите на область или перетащите в нее файл",
+      "dropPlaceholder": "Отпустите, чтобы добавить файл"
     },
     "form": {
       "dateMustBeAfter": "Дата должна быть после %{date}",
@@ -98,6 +101,7 @@
     "titleRefresh": "Обновить данные веб-приложения"
   },
   "appNavigation": {
+    "system": "Система",
     "resourceManagement": "Управление ресурсами",
     "securityAndAccess": "Безопасность и доступ",
     "sessions": "@:appPageTitle.sessions",
@@ -293,7 +297,7 @@
     "modal": {
       "resetBiosTitle": "Сбросить настройки встроенного ПО сервера",
       "resetBiosHeader": "Вы хотите сбросить настройки встроенного ПО сервера?",
-      "resetBiosSubmitText": "Сбросить настройки встроенного ПО сервера",
+      "resetBiosSubmitText": "Сбросить настройки сервера",
       "resetBiosSettingsList": {
         "item1": "Все ручные настройки будут удалены.",
         "item2": "Конфигурация разделов и хранилище ключей могут быть восстановлены, если существует резервная копия."
diff --git a/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue b/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
index abe2e4c5..be2927f3 100644
--- a/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
+++ b/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
@@ -3,7 +3,6 @@
     id="modal-reset"
     ref="modal"
     :title="$t(`pageFactoryReset.modal.${resetType}Title`)"
-    title-tag="h2"
     @hidden="resetConfirm"
   >
     <p class="mb-2">
diff --git a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
index aae307f8..8b396f41 100644
--- a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
@@ -78,25 +78,22 @@
                 >
                   {{ $t('pageVirtualMedia.configureConnection') }}
                 </b-button>
-
-                <b-button
-                  v-if="!device.isActive"
-                  variant="primary"
-                  class="float-right"
-                  :disabled="!device.serverUri"
-                  @click="startLegacy(device)"
-                >
-                  {{ $t('pageVirtualMedia.start') }}
-                </b-button>
-                <b-button
-                  v-if="device.isActive"
-                  variant="primary"
-                  class="float-right"
-                  @click="stopLegacy(device)"
-                >
-                  {{ $t('pageVirtualMedia.stop') }}
-                </b-button>
               </b-form-group>
+              <b-button
+                v-if="!device.isActive"
+                variant="primary"
+                :disabled="!device.serverUri"
+                @click="startLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.start') }}
+              </b-button>
+              <b-button
+                v-if="device.isActive"
+                variant="primary"
+                @click="stopLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.stop') }}
+              </b-button>
             </b-col>
           </b-row>
         </page-section>
diff --git a/src/views/_sila/Overview/Network/ModalDns.vue b/src/views/_sila/Overview/Network/ModalDns.vue
index 342ebe5e..82edb1e8 100644
--- a/src/views/_sila/Overview/Network/ModalDns.vue
+++ b/src/views/_sila/Overview/Network/ModalDns.vue
@@ -7,7 +7,7 @@
   >
     <b-form id="form-dns" @submit.prevent="handleSubmit">
       <b-row>
-        <b-col sm="6">
+        <b-col>
           <b-form-group
             :label="$t('pageNetwork.modal.staticDns')"
             label-for="staticDns"
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 5bfb81b4..63258a40 100644
--- a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -3,7 +3,6 @@
     <b-modal
       id="generate-csr"
       ref="modal"
-      size="lg"
       no-stacking
       :title="$t('pageCertificates.modal.generateACertificateSigningRequest')"
       @ok="onOkGenerateCsrModal"
@@ -13,7 +12,88 @@
       <b-form id="generate-csr-form" novalidate @submit.prevent="handleSubmit">
         <b-container fluid>
           <b-row>
-            <b-col lg="9">
+            <b-col lg="12">
+              <b-row>
+                <b-col lg="12">
+                  <p class="col-form-label">
+                    {{ $t('pageCertificates.modal.privateKey') }}
+                  </p>
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.keyPairAlgorithm')"
+                    label-for="key-pair-algorithm"
+                  >
+                    <b-form-select
+                      id="key-pair-algorithm"
+                      v-model="form.keyPairAlgorithm"
+                      data-test-id="modalGenerateCsr-select-keyPairAlgorithm"
+                      :options="keyPairAlgorithmOptions"
+                      :state="getValidationState($v.form.keyPairAlgorithm)"
+                      @input="$v.form.keyPairAlgorithm.$touch()"
+                    >
+                      <template #first>
+                        <b-form-select-option :value="null" disabled>
+                          {{ $t('global.form.selectAnOption') }}
+                        </b-form-select-option>
+                      </template>
+                    </b-form-select>
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col lg="12">
+                  <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'">
+                    <b-form-group
+                      :label="$t('pageCertificates.modal.keyCurveId')"
+                      label-for="key-curve-id"
+                    >
+                      <b-form-select
+                        id="key-curve-id"
+                        v-model="form.keyCurveId"
+                        data-test-id="modalGenerateCsr-select-keyCurveId"
+                        :options="keyCurveIdOptions"
+                        :state="getValidationState($v.form.keyCurveId)"
+                        @input="$v.form.keyCurveId.$touch()"
+                      >
+                        <template #first>
+                          <b-form-select-option :value="null" disabled>
+                            {{ $t('global.form.selectAnOption') }}
+                          </b-form-select-option>
+                        </template>
+                      </b-form-select>
+                      <b-form-invalid-feedback role="alert">
+                        {{ $t('global.form.fieldRequired') }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </template>
+                  <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'">
+                    <b-form-group
+                      :label="$t('pageCertificates.modal.keyBitLength')"
+                      label-for="key-bit-length"
+                    >
+                      <b-form-select
+                        id="key-bit-length"
+                        v-model="form.keyBitLength"
+                        data-test-id="modalGenerateCsr-select-keyBitLength"
+                        :options="keyBitLengthOptions"
+                        :state="getValidationState($v.form.keyBitLength)"
+                        @input="$v.form.keyBitLength.$touch()"
+                      >
+                        <template #first>
+                          <b-form-select-option :value="null" disabled>
+                            {{ $t('global.form.selectAnOption') }}
+                          </b-form-select-option>
+                        </template>
+                      </b-form-select>
+                      <b-form-invalid-feedback role="alert">
+                        {{ $t('global.form.fieldRequired') }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </template>
+                </b-col>
+              </b-row>
               <b-row>
                 <b-col lg="6">
                   <b-form-group
@@ -241,89 +321,6 @@
                 </b-col>
               </b-row>
             </b-col>
-            <b-col lg="3">
-              <b-row>
-                <b-col lg="12">
-                  <p class="col-form-label">
-                    {{ $t('pageCertificates.modal.privateKey') }}
-                  </p>
-                  <b-form-group
-                    :label="$t('pageCertificates.modal.keyPairAlgorithm')"
-                    label-for="key-pair-algorithm"
-                  >
-                    <b-form-select
-                      id="key-pair-algorithm"
-                      v-model="form.keyPairAlgorithm"
-                      data-test-id="modalGenerateCsr-select-keyPairAlgorithm"
-                      :options="keyPairAlgorithmOptions"
-                      :state="getValidationState($v.form.keyPairAlgorithm)"
-                      @input="$v.form.keyPairAlgorithm.$touch()"
-                    >
-                      <template #first>
-                        <b-form-select-option :value="null" disabled>
-                          {{ $t('global.form.selectAnOption') }}
-                        </b-form-select-option>
-                      </template>
-                    </b-form-select>
-                    <b-form-invalid-feedback role="alert">
-                      {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col lg="12">
-                  <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'">
-                    <b-form-group
-                      :label="$t('pageCertificates.modal.keyCurveId')"
-                      label-for="key-curve-id"
-                    >
-                      <b-form-select
-                        id="key-curve-id"
-                        v-model="form.keyCurveId"
-                        data-test-id="modalGenerateCsr-select-keyCurveId"
-                        :options="keyCurveIdOptions"
-                        :state="getValidationState($v.form.keyCurveId)"
-                        @input="$v.form.keyCurveId.$touch()"
-                      >
-                        <template #first>
-                          <b-form-select-option :value="null" disabled>
-                            {{ $t('global.form.selectAnOption') }}
-                          </b-form-select-option>
-                        </template>
-                      </b-form-select>
-                      <b-form-invalid-feedback role="alert">
-                        {{ $t('global.form.fieldRequired') }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </template>
-                  <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'">
-                    <b-form-group
-                      :label="$t('pageCertificates.modal.keyBitLength')"
-                      label-for="key-bit-length"
-                    >
-                      <b-form-select
-                        id="key-bit-length"
-                        v-model="form.keyBitLength"
-                        data-test-id="modalGenerateCsr-select-keyBitLength"
-                        :options="keyBitLengthOptions"
-                        :state="getValidationState($v.form.keyBitLength)"
-                        @input="$v.form.keyBitLength.$touch()"
-                      >
-                        <template #first>
-                          <b-form-select-option :value="null" disabled>
-                            {{ $t('global.form.selectAnOption') }}
-                          </b-form-select-option>
-                        </template>
-                      </b-form-select>
-                      <b-form-invalid-feedback role="alert">
-                        {{ $t('global.form.fieldRequired') }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </template>
-                </b-col>
-              </b-row>
-            </b-col>
           </b-row>
         </b-container>
       </b-form>