fix Modals, Tables and Pages: event logs, inventoty, post logs, operttions, global styles

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;