diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-06-20 11:52:15 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-06-20 11:52:15 +0300 |
commit | 931c2cad0da1a84e3df0745b385ec06d29cc2634 (patch) | |
tree | c5ee97bcd812a1a45cd645ab334613cdada13118 /src/components/Global | |
parent | 58d1eb3b899b730877299be6635adceb127fe6a9 (diff) | |
download | webui-vue-931c2cad0da1a84e3df0745b385ec06d29cc2634.tar.xz |
fix Modals, Tables and Pages: event logs, inventoty, post logs, operttions, global styles
Diffstat (limited to 'src/components/Global')
-rw-r--r-- | src/components/Global/Alert.vue | 2 | ||||
-rw-r--r-- | src/components/Global/FormFile.vue | 56 | ||||
-rw-r--r-- | src/components/Global/Search.vue | 9 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/PopoverWithSlot.vue | 2 | ||||
-rw-r--r-- | src/components/Global/StatusIcon.vue | 22 | ||||
-rw-r--r-- | src/components/Global/TableDateFilter.vue | 6 | ||||
-rw-r--r-- | src/components/Global/TableToolbar.vue | 2 |
7 files changed, 63 insertions, 36 deletions
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue index e8de9e27..0109e7d2 100644 --- a/src/components/Global/Alert.vue +++ b/src/components/Global/Alert.vue @@ -12,7 +12,7 @@ <status-icon :status="variant" /> </div> <div class="alert-content"> - <div class="alert-msg"> + <div class="alert-msg regular-14px"> <slot /> </div> </div> diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue index cf713acf..18c542c3 100644 --- a/src/components/Global/FormFile.vue +++ b/src/components/Global/FormFile.vue @@ -1,26 +1,38 @@ <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="modal-file-body" + :title="$t('pageKvm.addImage_modal')" + hide-footer > - </b-form-file> - <span - class="add-file-btn btn" + <div class="file-input_container"> + <b-form-file + :id="id" + v-model="file" + :accept="accept" + :disabled="disabled" + :state="state" + placeholder="Нажмите на область или перетащите в нее файл" + drop-placeholder="Отпустите, чтобы добавить файл" + @input="$emit('input', file)" + > + </b-form-file> + </div> + </b-modal> + <b-button + size="lg" + 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"> @@ -78,9 +90,15 @@ export default { return this.variant === 'secondary'; }, }, + watch: { + file() { + if (this.file) { + this.$bvModal.hide(`modal-${this.id}`); + } + }, + }, }; </script> - <style lang="scss" scoped> .form-control-file { opacity: 0; @@ -116,4 +134,16 @@ export default { } } } + +.file-input_container { + width: 100%; + height: 400px; + background-color: $surface-secondary; + border-top: 1px solid #f3f4f5; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} </style> diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index ac8f9bfb..ce097fcb 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -1,11 +1,12 @@ <template> <div class="search-global"> - <b-form-group - :label="$t('global.form.search')" + <!--<b-form-group + :label="$t('global.form.search')" :label-for="`searchInput-${_uid}`" label-class="invisible" - class="mb-2" - > + class="mb-2" + >--> + <b-form-group> <b-input-group size="md" class="align-items-center"> <b-input-group-prepend> <icon-search class="search-icon" /> diff --git a/src/components/Global/SilaComponents/PopoverWithSlot.vue b/src/components/Global/SilaComponents/PopoverWithSlot.vue index a9ec649b..44fb9640 100644 --- a/src/components/Global/SilaComponents/PopoverWithSlot.vue +++ b/src/components/Global/SilaComponents/PopoverWithSlot.vue @@ -135,7 +135,6 @@ export default { // updated & popover positioned first this.$nextTick(() => { this.$nextTick(() => { - console.log(ref); (ref.$el || ref).focus(); }); }); @@ -158,6 +157,7 @@ export default { margin: 0 28px 0 auto; background: none; border: none; + height: 25px; &:active { background-color: $faint-secondary-primary-5-hover !important; box-shadow: none !important; diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index fb818451..8f9e3d53 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -1,32 +1,28 @@ <template> <span :class="['status-icon', status]"> <icon-info v-if="status === 'info'" /> - <img - v-else-if="status === 'success'" - class="status__img" - src="@/assets/images/status/on.svg" - /> + <icon-success v-else-if="status === 'success'" /> <icon-warning v-else-if="status === 'warning'" /> - <img - v-else-if="status === 'danger'" - class="status__img" - src="@/assets/images/status/off.svg" - /> + <icon-danger v-else-if="status === 'danger'" /> <icon-secondary v-else /> </span> </template> <script> -import IconInfo from '@carbon/icons-vue/es/information--filled/20'; -import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; -import IconError from '@carbon/icons-vue/es/error--filled/20'; +import IconInfo from '@carbon/icons-vue/es/information/20'; +import IconCheckmark from '@carbon/icons-vue/es/checkmark--outline/20'; +import IconWarning from '@carbon/icons-vue/es/warning/20'; +import IconError from '@carbon/icons-vue/es/error--outline/20'; +import IconMisuse from '@carbon/icons-vue/es/misuse--outline/20'; export default { name: 'StatusIcon', components: { IconInfo: IconInfo, + iconSuccess: IconCheckmark, iconSecondary: IconError, iconWarning: IconWarning, + iconDanger: IconMisuse, }, props: { status: { diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue index aa10cb5c..3094b6ea 100644 --- a/src/components/Global/TableDateFilter.vue +++ b/src/components/Global/TableDateFilter.vue @@ -1,9 +1,10 @@ <template> - <b-row class="mb-2"> + <b-row class="mb-2 mt-2"> <b-col class="d-sm-flex"> <b-form-group :label="$t('global.table.fromDate')" label-for="input-from-date" + label-class="caption-12px mb-0" class="mr-3 my-0 w-100" > <b-input-group> @@ -12,7 +13,7 @@ v-model="fromDate" placeholder="YYYY-MM-DD" :state="getValidationState($v.fromDate)" - class="form-control-with-button mb-3 mb-md-0" + class="form-control-with-button mb-md-0" @blur="$v.fromDate.$touch()" /> <b-form-invalid-feedback role="alert"> @@ -50,6 +51,7 @@ <b-form-group :label="$t('global.table.toDate')" label-for="input-to-date" + label-class="caption-12px mb-0" class="my-0 w-100" > <b-input-group> diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index eabe0c98..4137d98c 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -68,8 +68,6 @@ export default { }; </script> <style lang="scss" scoped> -$toolbar-height: 64px; - .toolbar-container { width: calc(100vw - 320px); height: $toolbar-height; |