From 82b9b676b6cdea6341a91eeb8ac6b4895b9d2c01 Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Thu, 28 Sep 2023 15:40:48 +0200
Subject: [PATCH] Fix linked protocol dropdown [SCI-9328]

---
 .../vue/mixins/stackableHeadersMixin.js       |  2 +-
 app/javascript/vue/protocol/container.vue     | 32 +++++++++--------
 .../protocols/_protocol_status_bar.html.erb   | 36 +++++++++----------
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/app/javascript/vue/mixins/stackableHeadersMixin.js b/app/javascript/vue/mixins/stackableHeadersMixin.js
index 655b37454..38c3b9344 100644
--- a/app/javascript/vue/mixins/stackableHeadersMixin.js
+++ b/app/javascript/vue/mixins/stackableHeadersMixin.js
@@ -87,7 +87,7 @@ export default {
         this.secondaryNavigation.style.top = '0px';
         header.style.top = '0px';
         header.style.boxShadow = 'none';
-        header.style.zIndex = 10;
+        header.style.zIndex = 105;
         this.headerSticked = false;
       }
 
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index b16937c6c..0247f31c6 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -1,22 +1,24 @@
 <template>
   <div v-if="protocol.id" class="task-protocol">
     <div ref="header" class="task-section-header ml-[-1rem] w-[calc(100%_+_2rem)] px-4 bg-sn-white sticky top-0 transition" v-if="!inRepository">
-      <div class="portocol-header-left-part truncate grow">
-        <template v-if="headerSticked && moduleName">
-          <i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
-          <div @click="scrollTop" class="task-section-title w-[calc(100%_-_4rem)] cursor-pointer">
-            <h2 class="truncate leading-6">{{ moduleName }}</h2>
-          </div>
-        </template>
-        <template v-else >
-          <a class="task-section-caret" tabindex="0" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
-            <i class="sn-icon sn-icon-right"></i>
-            <div class="task-section-title">
-              <h2>{{ i18n.t('Protocol') }}</h2>
+      <div class="flex items-center grow">
+        <div class="portocol-header-left-part grow">
+          <template v-if="headerSticked && moduleName">
+            <i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
+            <div @click="scrollTop" class="task-section-title w-[calc(100%_-_4rem)] cursor-pointer">
+              <h2 class="truncate leading-6">{{ moduleName }}</h2>
             </div>
-          </a>
-        </template>
-        <div :class="{'hidden': headerSticked}" >
+          </template>
+          <template v-else>
+            <a class="task-section-caret" tabindex="0" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
+              <i class="sn-icon sn-icon-right"></i>
+              <div class="task-section-title truncate">
+                <h2>{{ i18n.t('Protocol') }}</h2>
+              </div>
+            </a>
+          </template>
+        </div>
+        <div :class="{'hidden': headerSticked}">
           <div class="my-module-protocol-status">
             <!-- protocol status dropdown gets mounted here -->
           </div>
diff --git a/app/views/my_modules/protocols/_protocol_status_bar.html.erb b/app/views/my_modules/protocols/_protocol_status_bar.html.erb
index a115c0616..e4ee2d919 100644
--- a/app/views/my_modules/protocols/_protocol_status_bar.html.erb
+++ b/app/views/my_modules/protocols/_protocol_status_bar.html.erb
@@ -1,21 +1,19 @@
-<div class="dropdown my-module-protocol-status">
-  <div class="flex items-center">
-    <% if @protocol.linked? %>
-      <span class="status-label linked">
-        [<%= t("my_modules.protocols.protocol_status_bar.linked") %>]
-      </span>
-    <% else %>
-      <span class="status-label">
-        [<%= t("my_modules.protocols.protocol_status_bar.unlinked") %>]
-      </span>
-    <% end %>
-    <a href="#" id="my-module-protocol-info-button" class="status-info
-      <%= 'parent-newer' if @protocol.parent_newer? %>
-      <%= 'protocol-newer' if @protocol.newer_than_parent? %>
-      " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <i class="sn-icon sn-icon-info"></i>
-    </a>
-  </div>
+<div class="flex items-center dropdown my-module-protocol-status">
+  <% if @protocol.linked? %>
+    <span class="status-label linked">
+      [<%= t("my_modules.protocols.protocol_status_bar.linked") %>]
+    </span>
+  <% else %>
+    <span class="status-label">
+      [<%= t("my_modules.protocols.protocol_status_bar.unlinked") %>]
+    </span>
+  <% end %>
+  <a href="#" id="my-module-protocol-info-button" class="status-info dropdown-toggle
+    <%= 'parent-newer' if @protocol.parent_newer? %>
+    <%= 'protocol-newer' if @protocol.newer_than_parent? %>
+    " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="sn-icon sn-icon-info"></i>
+  </a>
   <div class="dropdown-menu status-info-dropdown" aria-labelledby="my-module-protocol-info-button">
     <div class="dropdown-content">
         <div class="dropdown-header">
@@ -69,4 +67,6 @@
         </div>
       </div>
     </div>
+  </div>
 </div>
+