Add toolbar for steps and results [SCI-10785]

app/assets/stylesheets/tailwind/buttons.css

@@ -114,7 +114,7 @@
   }
 
   .btn.btn-light {
-    @apply bg-transparent text-sn-blue border-transparent;
+    @apply bg-transparent text-sn-blue border-transparent bg-sn-white;
   }
 
   .btn.btn-light.btn-black {

app/javascript/vue/protocol/container.vue

@@ -175,6 +175,7 @@
             <div v-for="(step, index) in steps" :key="step.id" class="step-block">
               <div v-if="index > 0 && urls.add_step_url" class="insert-step" @click="addStep(index)" data-e2e="e2e-BT-protocol-templateSteps-insertStep">
                 <i class="sn-icon sn-icon-new-task"></i>
+                <span>{{ i18n.t("protocols.steps.add_step") }}</span>
               </div>
               <Step
                 ref="steps"
@@ -197,6 +198,7 @@
               />
               <div v-if="(index === steps.length - 1) && urls.add_step_url" class="insert-step" @click="addStep(index + 1)" data-e2e="e2e-BT-protocol-templateSteps-insertStep">
                 <i class="sn-icon sn-icon-new-task"></i>
+                <span>{{ i18n.t("protocols.steps.add_step") }}</span>
               </div>
             </div>
             <div v-if="steps.length > 0 && urls.add_step_url && inRepository" class="py-5">

app/javascript/vue/protocol/step.vue

@@ -145,7 +145,19 @@
                     @attachments:viewMode="changeAttachmentsViewMode"
                     @attachment:viewMode="updateAttachmentViewMode"/>
       </div>
+      <ContentToolbar
+        v-if="orderedElements.length > 3"
+        :insertMenu="insertMenu"
+        @create:table="(...args) => this.createElement('table', ...args)"
+        @create:checklist="createElement('checklist')"
+        @create:text="createElement('text')"
+        @create:file="openLoadFromComputer"
+        @create:wopi_file="openWopiFileModal"
+        @create:ove_file="openOVEditor"
+        @create:marvinjs_file="openMarvinJsModal($refs.marvinJsButton)"
+      ></ContentToolbar>
     </div>
+
     <deleteStepModal v-if="confirmingDelete" @confirm="deleteStep" @cancel="closeDeleteModal"/>
     <ReorderableItemsModal v-if="reordering"
       :title="i18n.t('protocols.steps.modals.reorder_elements.title', { step_position: step.attributes.position + 1 })"
@@ -172,6 +184,7 @@
   import Attachments from '../shared/content/attachments.vue'
   import ReorderableItemsModal from '../shared/reorderable_items_modal.vue'
   import MenuDropdown from '../shared/menu_dropdown.vue'
+  import ContentToolbar from '../shared/content/content_toolbar.vue'
 
   import UtilsMixin from '../mixins/utils.js'
   import AttachmentsMixin from '../shared/content/mixins/attachments.js'
@@ -262,7 +275,8 @@
       Attachments,
       StorageUsage,
       ReorderableItemsModal,
-      MenuDropdown
+      MenuDropdown,
+      ContentToolbar
     },
     created() {
       this.loadAttachments();
@@ -338,25 +352,30 @@
         if (this.urls.update_url) {
           menu = menu.concat([{
                     text: this.i18n.t('protocols.steps.insert.text'),
+                    icon: 'sn-icon sn-icon-result-text',
                     emit: 'create:text',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertText`
                   },{
                     text: this.i18n.t('protocols.steps.insert.attachment'),
                     submenu: this.filesMenu,
                     position: 'left',
+                    icon: 'sn-icon sn-icon-file',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertAttachment`
                   },{
                     text: this.i18n.t('protocols.steps.insert.table'),
+                    icon: 'sn-icon sn-icon-tables',
                     emit: 'create:table',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertTable`
                   },{
                     text: this.i18n.t('protocols.steps.insert.well_plate'),
                     submenu: this.wellPlateOptions,
+                    icon: 'sn-icon sn-icon-tables',
                     position: 'left',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellplate`
                   },{
                     text: this.i18n.t('protocols.steps.insert.checklist'),
                     emit: 'create:checklist',
+                    icon: 'sn-icon sn-icon-checkllist',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertChecklist`
                   }]);
         }

app/javascript/vue/results/result.vue

@@ -131,6 +131,16 @@
                       @attachments:viewMode="changeAttachmentsViewMode"
                       @attachment:viewMode="updateAttachmentViewMode"/>
       </div>
+      <ContentToolbar
+        v-if="orderedElements.length > 3"
+        :insertMenu="insertMenu"
+        @create:table="(...args) => this.createElement('table', ...args)"
+        @create:text="createElement('text')"
+        @create:file="openLoadFromComputer"
+        @create:wopi_file="openWopiFileModal"
+        @create:ove_file="openOVEditor"
+        @create:marvinjs_file="openMarvinJsModal($refs.marvinJsButton)"
+      ></ContentToolbar>
     </div>
   </div>
 </template>
@@ -144,6 +154,7 @@ import Attachments from '../shared/content/attachments.vue';
 import InlineEdit from '../shared/inline_edit.vue';
 import MenuDropdown from '../shared/menu_dropdown.vue';
 import deleteResultModal from './delete_result.vue';
+import ContentToolbar from '../shared/content/content_toolbar';
 
 import AttachmentsMixin from '../shared/content/mixins/attachments.js';
 import WopiFileModal from '../shared/content/attachments/mixins/wopi_file_modal.js';
@@ -192,7 +203,8 @@ export default {
     InlineEdit,
     MenuDropdown,
     deleteResultModal,
-    StorageUsage
+    StorageUsage,
+    ContentToolbar
   },
   watch: {
     resultToReload() {
@@ -253,16 +265,20 @@ export default {
       if (this.urls.update_url) {
         menu = menu.concat([{
           text: this.i18n.t('my_modules.results.insert.text'),
+          icon: 'sn-icon sn-icon-result-text',
           emit: 'create:text'
         }, {
           text: this.i18n.t('my_modules.results.insert.attachment'),
           submenu: this.filesMenu,
+          icon: 'sn-icon sn-icon-file',
           position: 'left'
         }, {
           text: this.i18n.t('my_modules.results.insert.table'),
+          icon: 'sn-icon sn-icon-tables',
           emit: 'create:table'
         }, {
           text: this.i18n.t('my_modules.results.insert.well_plate'),
+          icon: 'sn-icon sn-icon-tables',
           submenu: this.wellPlateOptions,
           position: 'left'
         }]);

app/javascript/vue/shared/content/content_toolbar.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="px-4 py-2 bg-sn-super-light-blue flex gap-4 mt-10 mb-4">
+    <span class="font-bold shrink-0 leading-10">
+      {{ i18n.t('protocols.steps.insert.button') }}:
+    </span>
+    <div class="flex items-center gap-2 flex-wrap">
+      <template v-for="item in insertMenu">
+        <button v-if="!item.submenu" @click="$emit(item.emit)" class="btn btn-light">
+          <i :class="item.icon"></i>
+          {{ item.text }}
+        </button>
+        <MenuDropdown
+          :listItems="item.submenu"
+          :btnText="item.text"
+          :btnClasses="'btn btn-light'"
+          :position="'right'"
+          :caret="true"
+          :btnIcon="item.icon"
+          @dtEvent="handleEvents"
+        ></MenuDropdown>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import MenuDropdown from '../menu_dropdown.vue';
+
+export default {
+  components: {
+    MenuDropdown
+  },
+  name: 'stepToolbar',
+  props: {
+    insertMenu: Array
+  },
+  methods: {
+    handleEvents(event, option) {
+      this.$emit(event, option.params);
+    }
+  }
+
+};
+</script>

config/locales/en.yml

@@ -3411,6 +3411,7 @@ en:
       expand_label: "Expand All"
       collapse_label: "Collapse All"
       new_step: "New step"
+      add_step: "Add step"
       new_step_title: "Create new step"
       subtitle: "Protocol Steps"
       no_steps: "Protocol has no steps."