diff options
-rw-r--r-- | src/assets/images/_sila/chevron-down.svg | 9 | ||||
-rw-r--r-- | src/assets/styles/bmc/_sila/_forms.scss | 5 | ||||
-rw-r--r-- | src/assets/styles/bmc/_sila/_modal.scss | 71 | ||||
-rw-r--r-- | src/assets/styles/bmc/helpers/_variables.scss | 4 | ||||
-rw-r--r-- | src/components/_sila/Global/FormFile.vue | 43 | ||||
-rw-r--r-- | src/env/components/AppNavigation/sila.js | 2 | ||||
-rw-r--r-- | src/locales/ru-RU.json | 8 | ||||
-rw-r--r-- | src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue | 1 | ||||
-rw-r--r-- | src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue | 33 | ||||
-rw-r--r-- | src/views/_sila/Overview/Network/ModalDns.vue | 2 | ||||
-rw-r--r-- | src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue | 167 |
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> |