From 0249f2a30ea66045c72f87eab37b9819d15d520b Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Thu, 28 Jul 2022 09:56:09 +0200
Subject: [PATCH] CSS fixes for step attachments [SCI-7001] (#4294)

---
 app/assets/stylesheets/shared/assets.scss            | 10 ++++++++++
 app/assets/stylesheets/steps/step.scss               | 11 ++++++++++-
 app/assets/stylesheets/steps/step_attachments.scss   |  3 ++-
 app/javascript/vue/protocol/attachments.vue          |  2 +-
 .../vue/protocol/step_attachments/context_menu.vue   |  4 ++--
 .../vue/protocol/step_attachments/file_modal.vue     | 12 ++++++------
 .../vue/protocol/step_attachments/uploading.vue      |  4 ++--
 app/javascript/vue/protocol/storage_usage.vue        |  4 ++--
 config/locales/en.yml                                |  2 +-
 9 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/shared/assets.scss b/app/assets/stylesheets/shared/assets.scss
index 86cd72208..ab7676a12 100644
--- a/app/assets/stylesheets/shared/assets.scss
+++ b/app/assets/stylesheets/shared/assets.scss
@@ -194,6 +194,10 @@
     width: 100%;
   }
 
+  .file-info {
+    line-height: 1.5em;
+  }
+
   .image-container,
   .general-file-container {
     align-items: center;
@@ -285,6 +289,7 @@
     display: grid;
     grid-column-gap: 1em;
     grid-template-columns: max-content max-content;
+    margin-left: auto;
   }
 
   .asset-context-menu {
@@ -358,6 +363,10 @@
 
   .file-name {
     text-align: center;
+
+    div {
+      margin-bottom: .5em;
+    }
   }
 
   .remove-button {
@@ -445,6 +454,7 @@
   border-radius: 2px;
   color: $color-concrete;
   font-size: 12px;
+  margin-left: .25em;
   margin-right: 1em;
   padding: 4px 8px;
   white-space: nowrap;
diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss
index 086358649..2c2130a11 100644
--- a/app/assets/stylesheets/steps/step.scss
+++ b/app/assets/stylesheets/steps/step.scss
@@ -226,13 +226,18 @@
 
   .storage-usage {
     @include font-small;
+    align-self: center;
     color: $color-black;
+    display: flex;
+    margin-top: 1em;
+    width: 400px;
 
     .progress-container {
       background-color: $color-white;
       border-radius: 2px;
+      flex-grow: 1;
       height: 4px;
-      margin: 1em 0;
+      margin: 1em 1em 1em 0;
       overflow: hidden;
       position: relative;
 
@@ -243,6 +248,10 @@
         transition: 1s $timing-function-sharp;
       }
     }
+
+    .progress-message {
+      line-height: 2em;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/steps/step_attachments.scss b/app/assets/stylesheets/steps/step_attachments.scss
index 3a6517bbe..612b850b8 100644
--- a/app/assets/stylesheets/steps/step_attachments.scss
+++ b/app/assets/stylesheets/steps/step_attachments.scss
@@ -152,7 +152,8 @@
     }
 
     .divider {
-      @include font-h3;
+      @include font-small;
+      font-weight: bold;
       padding: 1em 0;
       text-align: center;
     }
diff --git a/app/javascript/vue/protocol/attachments.vue b/app/javascript/vue/protocol/attachments.vue
index 22c481fbf..e46b60cef 100644
--- a/app/javascript/vue/protocol/attachments.vue
+++ b/app/javascript/vue/protocol/attachments.vue
@@ -16,7 +16,7 @@
           >
             <li class="divider-label">{{ i18n.t("protocols.steps.attachments.add") }}</li>
             <li>
-              <a class="action-link .attachments-view-mode {" @click="$emit('attachments:openFileModal')">
+              <a class="action-link attachments-view-mode" @click="$emit('attachments:openFileModal')">
                 <i class="fas fa-upload"></i>
                 {{ i18n.t('protocols.steps.insert.attachment') }}
               </a>
diff --git a/app/javascript/vue/protocol/step_attachments/context_menu.vue b/app/javascript/vue/protocol/step_attachments/context_menu.vue
index f91ff61bd..cd06b7b7b 100644
--- a/app/javascript/vue/protocol/step_attachments/context_menu.vue
+++ b/app/javascript/vue/protocol/step_attachments/context_menu.vue
@@ -21,7 +21,7 @@
         </a>
       </li>
       <li v-if="attachment.attributes.asset_type == 'marvinjs' && attachment.attributes.urls.marvin_js_start_edit">
-        <a class="btn btn-light marvinjs-edit-button"
+        <a class="marvinjs-edit-button"
            :data-sketch-id="attachment.id"
            :data-update-url="attachment.attributes.urls.marvin_js"
            :data-sketch-start-edit-url="attachment.attributes.urls.marvin_js_start_edit"
@@ -33,7 +33,7 @@
         </a>
       </li>
       <li v-if="attachment.attributes.image_editable && attachment.attributes.urls.start_edit_image">
-        <a class="btn btn-light image-edit-button"
+        <a class="image-edit-button"
            :data-image-id="attachment.id"
            :data-image-name="attachment.attributes.file_name"
            :data-image-url="attachment.attributes.urls.asset_file"
diff --git a/app/javascript/vue/protocol/step_attachments/file_modal.vue b/app/javascript/vue/protocol/step_attachments/file_modal.vue
index 3c93957df..693f76c60 100644
--- a/app/javascript/vue/protocol/step_attachments/file_modal.vue
+++ b/app/javascript/vue/protocol/step_attachments/file_modal.vue
@@ -38,6 +38,12 @@
             {{ i18n.t("protocols.steps.attachments.file_modal.or") }}
           </div>
           <div class="integrations-container">
+            <div class="integration-block wopi" v-if="step.attributes.wopi_enabled">
+              <a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light" tabindex="0" @keyup.enter="openWopiFileModal">
+                <img :src="step.attributes.wopi_context.icon"/>
+                {{ i18n.t('assets.create_wopi_file.button_text') }}
+              </a>
+            </div>
             <div class="integration-block marvinjs" v-if="step.attributes.marvinjs_enabled">
               <a
                 class="new-marvinjs-upload-button btn btn-light"
@@ -54,12 +60,6 @@
                 {{ i18n.t('marvinjs.new_button') }}
               </a>
             </div>
-            <div class="integration-block wopi" v-if="step.attributes.wopi_enabled">
-              <a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light" tabindex="0" @keyup.enter="openWopiFileModal">
-                <img :src="step.attributes.wopi_context.icon"/>
-                {{ i18n.t('assets.create_wopi_file.button_text') }}
-              </a>
-            </div>
           </div>
         </div>
         <div class="modal-footer">
diff --git a/app/javascript/vue/protocol/step_attachments/uploading.vue b/app/javascript/vue/protocol/step_attachments/uploading.vue
index 7cb9f8c35..a8ad11bde 100644
--- a/app/javascript/vue/protocol/step_attachments/uploading.vue
+++ b/app/javascript/vue/protocol/step_attachments/uploading.vue
@@ -7,8 +7,8 @@
       <i v-if="attachment.error" class="fas fa-exclamation-triangle"></i>
     </div>
     <div class="file-name">
-      <span v-if="!attachment.error">{{ i18n.t("protocols.steps.attachments.new.uploading") }}</span>
-      <span>{{ attachment.attributes.file_name }}</span>
+      <div v-if="!attachment.error">{{ i18n.t("protocols.steps.attachments.new.uploading") }}</div>
+      <div>{{ attachment.attributes.file_name }}</div>
     </div>
     <div v-if="!attachment.error" class="progress-container">
       <div class="progress-bar" :style="`width: ${attachment.attributes.progress}%`"></div>
diff --git a/app/javascript/vue/protocol/storage_usage.vue b/app/javascript/vue/protocol/storage_usage.vue
index 0eb03cdbe..34247a0fc 100644
--- a/app/javascript/vue/protocol/storage_usage.vue
+++ b/app/javascript/vue/protocol/storage_usage.vue
@@ -3,13 +3,13 @@
     <div class="progress-container">
       <div class="progress-bar" :style="`width:${storagePrecentage}%`"></div>
     </div>
-    <span v-if="this.step.attributes.storage_limit.total > 0">
+    <span class="progress-message" v-if="this.step.attributes.storage_limit.total > 0">
       {{ i18n.t('protocols.steps.space_used_label', {
                   used: this.step.attributes.storage_limit.used_human,
                   limit: this.step.attributes.storage_limit.total_human
       }) }}
     </span>
-    <span v-else>
+    <span class="progress-message" v-else>
       {{ i18n.t('protocols.steps.space_used_label_unlimited', {used: this.step.attributes.storage_limit.used_human}) }}
     </span>
   </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index e541053e1..d84d46843 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2792,7 +2792,7 @@ en:
       modal_title: 'Create new MS Office document'
       text_field_label: 'Document name'
       type_select_label: 'Document type'
-      text_field_placeholder: 'New Document'
+      text_field_placeholder: 'Enter document name...'
       ms_word: 'Word<br/>Online'
       ms_excel: 'Excel<br/>Online'
       ms_powerpoint: 'PowerPoint<br/>Online'