Fix file block issues [SCI-6966] (#4244)

* Fix bugs for step attachments [SCI-6966]

* Fix flickering on fast drag over of file [SCI-6966]

* Fix flickering on fast drag over of file [SCI-6966]

* CSS fixes, rearrange steps button hiding [SCI-6940][SCI-6934] (#4234)

* Hide rearange steps button when less than 2 steps [SCI-6934]

* Task status buttons CSS fix [SCI-6940]

* Fix microinteraction for table editing [SCI-6957] (#4236)

* Fix protocol elements allignments [SCI-6932]

* DOCX layout improvements [SCI-6857] (#4160)

* Fix edit step button [SCI-6938] (#4232)

* Clean storage usage check [SCI-6966]

Co-authored-by: artoscinote <85488244+artoscinote@users.noreply.github.com>
Co-authored-by: Anton <anton@scinote.net>

app/assets/stylesheets/shared/assets.scss

@@ -438,3 +438,14 @@
     color: $brand-primary;
   }
 }
+
+.attachment-label-new {
+  align-items: center;
+  background-color: $brand-primary;
+  border-radius: 2px;
+  color: $color-concrete;
+  font-size: 12px;
+  margin-right: 1em;
+  padding: 4px 8px;
+  white-space: nowrap;
+}

app/assets/stylesheets/steps/step.scss

@@ -184,7 +184,6 @@
     height: 100%;
     justify-content: center;
     left: 0;
-    pointer-events: none;
     position: absolute;
     top: 0;
     width: 100%;
@@ -197,6 +196,10 @@
     .drop-message {
       display: flex;
       flex-direction: column;
+
+      .storage-usage {
+        pointer-events: none;
+      }
     }
 
     > *:not(.drop-message) {

app/javascript/vue/protocol/mixins/attachments.js

@@ -47,6 +47,7 @@ export default {
 
           const upload = new ActiveStorage.DirectUpload(file, this.step.attributes.urls.direct_upload_url, fileObject);
 
+          fileObject.isNewUpload = true;
           this.attachments.push(fileObject);
 
           upload.create((error, blob) => {

app/javascript/vue/protocol/step.vue

@@ -1,15 +1,14 @@
 <template>
-  <div class="step-container"
+  <div ref="stepContainer" class="step-container"
        :id="`stepContainer${step.id}`"
        @drop.prevent="dropFile"
        @dragenter.prevent="!showFileModal ? dragingFile = true : null"
-       @dragleave.prevent="!showFileModal ? dragingFile = false : null"
        @dragover.prevent
        :class="{ 'draging-file': dragingFile, 'showing-comments': showCommentsSidebar, 'editing-name': editingName }"
   >
-    <div class="drop-message">
-      {{ i18n.t('protocols.steps.drop_message', { position: step.attributes.position }) }}
-      <StorageUsage v-if="step.attributes.storage_limit" :step="step"/>
+    <div class="drop-message" @dragleave.prevent="!showFileModal ? dragingFile = false : null">
+      {{ i18n.t('protocols.steps.drop_message', { position: step.attributes.position + 1 }) }}
+      <StorageUsage v-if="showStorageUsage()" :step="step"/>
     </div>
     <div class="step-header">
       <div class="step-element-header">
@@ -21,7 +20,8 @@
           <a class="step-collapse-link"
             :href="'#stepBody' + step.id"
             data-toggle="collapse"
-            data-remote="true">
+            data-remote="true"
+            @click="toggleCollapsed">
               <span class="fas fa-caret-right"></span>
           </a>
           <div v-if="!inRepository" class="step-complete-container">
@@ -214,6 +214,7 @@
         showCommentsSidebar: false,
         dragingFile: false,
         reordering: false,
+        isCollapsed: false,
         editingName: false
       }
     },
@@ -258,6 +259,12 @@
           this.elements = result.data
         });
       },
+      showStorageUsage() {
+        return (this.elements.length || this.attachments.length) && !this.isCollapsed && this.step.attributes.storage_limit;
+      },
+      toggleCollapsed() {
+        this.isCollapsed = !this.isCollapsed;
+      },
       showDeleteModal() {
         this.confirmingDelete = true;
       },

app/javascript/vue/protocol/step_attachments/inline.vue

@@ -14,6 +14,9 @@
         >
           {{ attachment.attributes.file_name }}
         </a>
+        <span v-if="attachment.isNewUpload" class="attachment-label-new">
+          {{ i18n.t('protocols.steps.attachments.new.description') }}
+        </span>
         <div class="file-metadata">
           <span>
             {{ i18n.t('assets.placeholder.modified_label') }}

app/javascript/vue/protocol/step_attachments/list.vue

@@ -13,6 +13,9 @@
     >
       {{ attachment.attributes.file_name }}
     </a>
+    <span v-if="attachment.isNewUpload" class="attachment-label-new">
+      {{ i18n.t('protocols.steps.attachments.new.description') }}
+    </span>
     <div class="file-metadata">
       <span>
           {{ i18n.t('assets.placeholder.modified_label') }}

app/javascript/vue/protocol/step_attachments/thumbnail.vue

@@ -20,6 +20,9 @@
       </div>
       <div class="attachment-label">
         {{ attachment.attributes.file_name }}
+        <span v-if="attachment.isNewUpload" class="attachment-label-new">
+          {{ i18n.t('protocols.steps.attachments.new.description') }}
+        </span>
       </div>
       <div class="attachment-metadata">
         {{ i18n.t('assets.placeholder.modified_label') }} {{ attachment.attributes.updated_at_formatted }}<br>

config/locales/en.yml

@@ -2601,6 +2601,7 @@ en:
           drag_zone_notification: "Drop files to add to step %{position}"
           or: "OR"
         new:
+          description: 'New'
           uploading: 'Uploading'
           file_too_big: 'Failed to upload: File size is too big'
           general_error: 'Failed to upload: Something went wrong, please try again'