From ad3cd98d6e932efddfb6ef3e5eabae575167b3d2 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Fri, 22 Sep 2023 11:59:39 +0200
Subject: [PATCH] CSS fixes protocol page

---
 .../dashboard/create_task_modal.scss          | 22 ---------
 .../stylesheets/extend/perfect-scrollbar.scss | 47 +++++++++++++++++++
 .../my_modules/protocols/index.scss           |  6 +--
 app/assets/stylesheets/shared/select.scss     |  8 ++--
 app/assets/stylesheets/tailwind/modals.css    |  2 +-
 .../packs/vue/navigation/top_menu.js          |  3 +-
 app/javascript/vue/navigation/top_menu.vue    | 39 +++++++--------
 app/javascript/vue/protocol/container.vue     |  2 +-
 app/javascript/vue/results/result.vue         |  2 +-
 .../vue/shared/content/modal/move.vue         |  2 +-
 .../vue/shared/reorderable_items_modal.vue    |  2 +-
 app/javascript/vue/shared/select.vue          | 13 +++--
 .../dashboards/_create_task_modal.html.erb    |  1 -
 .../_module_header_details_popover.html.erb   | 20 ++++----
 app/views/my_modules/protocols.html.erb       |  4 +-
 .../_repositories_dropdown_list.html.erb      | 26 +++++-----
 16 files changed, 108 insertions(+), 91 deletions(-)

diff --git a/app/assets/stylesheets/dashboard/create_task_modal.scss b/app/assets/stylesheets/dashboard/create_task_modal.scss
index e24d0bf0d..44e5f17f7 100644
--- a/app/assets/stylesheets/dashboard/create_task_modal.scss
+++ b/app/assets/stylesheets/dashboard/create_task_modal.scss
@@ -47,28 +47,6 @@
       position: relative;
     }
 
-    .down-arrow {
-      background-color: $color-white;
-      box-shadow: -4px 4px 0 $color-black;
-      display: inline-block;
-      height: 38px;
-      margin: 0 11px 20px 14px;
-      opacity: .2;
-      width: 38px;
-    }
-
-    .down-arrow::before {
-      border-bottom: 6px solid transparent;
-      border-left: 8px solid $color-black;
-      border-top: 6px solid transparent;
-      content: "";
-      height: 0;
-      left: 46px;
-      position: absolute;
-      top: 38px;
-      width: 0;
-    }
-
     .project-visibility-container {
       display: inline-block;
       width: 260px;
diff --git a/app/assets/stylesheets/extend/perfect-scrollbar.scss b/app/assets/stylesheets/extend/perfect-scrollbar.scss
index 98127c311..ea9bc6e6c 100644
--- a/app/assets/stylesheets/extend/perfect-scrollbar.scss
+++ b/app/assets/stylesheets/extend/perfect-scrollbar.scss
@@ -16,10 +16,33 @@
   -webkit-transition: background-color .2s linear, opacity .2s linear;
   height: 16px;
   opacity: 0.6;
+  margin: 0 1rem 0 5px;
   /* there must be 'bottom' or 'top' for ps__rail-x */
   bottom: 0px;
   /* please don't change 'position' */
   position: absolute;
+
+  &::after,
+  &::before {
+    content: '';
+    display: block;
+    background-color: var(--sn-white);
+    height: 1rem;
+    position: absolute;
+    width: 1rem;
+    top: 0
+  }
+
+  &::after {
+    right: -1rem;
+    border-bottom-right-radius: 4px;
+  }
+
+  &::before {
+    left: -5px;
+    border-bottom-left-radius: 4px;
+    width: 5px;
+  }
 }
 
 .ps__rail-y {
@@ -28,12 +51,36 @@
   -webkit-transition: background-color .2s linear, opacity .2s linear;
   width: 16px;
   opacity: 0.6;
+  margin: 1rem 0;
   /* there must be 'right' or 'left' for ps__rail-y */
   right: 0;
   /* please don't change 'position' */
   position: absolute;
+
   cursor: pointer;
   z-index: 5;
+
+  &::after,
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    background-color: var(--sn-white);
+    height: 1rem;
+    width: 1rem;
+    left: 0
+  }
+
+  &::after {
+    bottom: -1rem;
+    border-bottom-right-radius: 4px;
+  }
+
+  &::before {
+    border-bottom-right-radius: 4px;
+    top: -1rem;
+  }
+
 }
 
 .ps--active-x > .ps__rail-x,
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 3d6234ae7..6e5095245 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -144,10 +144,6 @@
           z-index: 251;
 
           .repository {
-            @include font-button;
-            cursor: pointer;
-            display: flex;
-            padding: 8px 16px;
 
             .assigned-items,
             .shared-icon {
@@ -579,7 +575,7 @@
     z-index: 251;
 
     .task-details-value {
-      @include font-h3;
+      font-weight: bold;
     }
 
     .row-v-margin {
diff --git a/app/assets/stylesheets/shared/select.scss b/app/assets/stylesheets/shared/select.scss
index 86cc3d429..0ccf4fe3c 100644
--- a/app/assets/stylesheets/shared/select.scss
+++ b/app/assets/stylesheets/shared/select.scss
@@ -53,14 +53,14 @@
     background: transparent;
     border: 0;
     display: none;
+    height: 26px;
     outline: 0;
+    padding: 0;
     width: calc(100% - 1.5em);
   }
 
   &.sn-select--open {
     background: $color-white;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
     border-color: var(--sn-science-blue);
 
     .sn-select__search-input {
@@ -82,12 +82,10 @@
     }
 
     .sn-select__option {
-      line-height: 1.75rem;
       overflow: hidden;
-      padding: .5rem 1rem;
       text-overflow: ellipsis;
       white-space: nowrap;
-      width: calc(100%);
+      width: 100%;
     }
 
     .select__option-placeholder {
diff --git a/app/assets/stylesheets/tailwind/modals.css b/app/assets/stylesheets/tailwind/modals.css
index 22a1deb35..ba58d23b2 100644
--- a/app/assets/stylesheets/tailwind/modals.css
+++ b/app/assets/stylesheets/tailwind/modals.css
@@ -53,7 +53,7 @@
   }
 
   .modal .modal-content {
-    @apply relative border border-solid rounded outline-none shadow p-6 bg-sn-white;
+    @apply relative rounded outline-none shadow p-6 bg-sn-white;
   }
 
   .modal .modal-header {
diff --git a/app/javascript/packs/vue/navigation/top_menu.js b/app/javascript/packs/vue/navigation/top_menu.js
index d157e0232..30b71f63d 100644
--- a/app/javascript/packs/vue/navigation/top_menu.js
+++ b/app/javascript/packs/vue/navigation/top_menu.js
@@ -3,9 +3,10 @@ import Vue from 'vue/dist/vue.esm';
 import TopMenuContainer from '../../../vue/navigation/top_menu.vue';
 import PerfectScrollbar from 'vue2-perfect-scrollbar';
 import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
+import outsideClick from '../directives/outside_click';
 
 Vue.use(PerfectScrollbar);
-
+Vue.directive('click-outside', outsideClick);
 Vue.prototype.i18n = window.I18n;
 
 function addNavigationTopMenuContainer() {
diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue
index d80776d74..27c7331e4 100644
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@@ -14,23 +14,14 @@
         @change="switchTeam"
       ></Select>
     </div>
-    <div v-if="user" class="dropdown ml-auto">
-      <button class="btn btn-light icon-btn btn-black" data-toggle="dropdown"  :title="i18n.t('nav.settings')">
-        <i class="sn-icon sn-icon-settings"></i>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li v-for="(item, i) in settingsMenu" :key="i">
-          <a :href="item.url">
-            {{ item.name }}
-          </a>
-        </li>
-        <li>
-          <a href="" data-toggle='modal' data-target='#aboutModal' >
-          {{ i18n.t('left_menu_bar.support_links.core_version') }}
-          </a>
-        </li>
-      </ul>
-    </div>
+    <MenuDropdown
+      class="ml-auto"
+      v-if="this.settingsMenu && this.settingsMenu.length > 0"
+      :listItems="this.settingsMenu.map((item) => { return { text: item.name, url: item.url } })"
+      :btnClasses="'btn btn-light icon-btn btn-black'"
+      :position="'right'"
+      :btnIcon="'sn-icon sn-icon-settings'"
+    ></MenuDropdown>
     <div v-if="user" class="sci--navigation--notificaitons-flyout-container" >
       <button class="btn btn-light icon-btn btn-black"
               :title="i18n.t('nav.notifications.title')"
@@ -52,14 +43,14 @@
       <div class="sci--navigation--top-menu-user btn btn-light icon-btn btn-black" data-toggle="dropdown">
         <img class="avatar w-6 h-6" :src="user.avatar_url">
       </div>
-      <div class="dropdown-menu dropdown-menu-right top-menu-user-dropdown">
+      <div class="dropdown-menu dropdown-menu-right rounded !p-2.5 sn-shadow-menu-sm">
         <li v-for="(item, i) in userMenu" :key="i">
-          <a :href="item.url">
+          <a :href="item.url" class="!px-3 !py-2.5 rounded hover:!bg-sn-super-light-grey !text-sn-blue block">
             {{ item.name }}
           </a>
         </li>
         <li>
-          <a rel="nofollow" data-method="delete" :href="user.sign_out_url">
+          <a rel="nofollow" data-method="delete" :href="user.sign_out_url" class="!px-3 !py-2.5 rounded hover:!bg-sn-super-light-grey !text-sn-blue block">
             {{ i18n.t('nav.user.logout') }}
           </a>
         </li>
@@ -69,16 +60,18 @@
 </template>
 
 <script>
-  import NotificationsFlyout from './notifications/notifications_flyout.vue'
-  import DropdownSelector from '../shared/dropdown_selector.vue'
+  import NotificationsFlyout from './notifications/notifications_flyout.vue';
+  import DropdownSelector from '../shared/dropdown_selector.vue';
   import Select from "../shared/select.vue";
+  import MenuDropdown from '../shared/menu_dropdown.vue';
 
   export default {
     name: 'TopMenuContainer',
     components: {
       DropdownSelector,
       NotificationsFlyout,
-      Select
+      Select,
+      MenuDropdown
     },
     props: {
       url: String,
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index cceb86569..6dd3bfe90 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -142,7 +142,7 @@
                 <span>{{ i18n.t("protocols.steps.new_step") }}</span>
             </a>
           </div>
-          <div class="protocol-steps">
+          <div class="protocol-steps pb-8">
             <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)">
                 <i class="sn-icon sn-icon-new-task"></i>
diff --git a/app/javascript/vue/results/result.vue b/app/javascript/vue/results/result.vue
index 2caa952de..d018bcd11 100644
--- a/app/javascript/vue/results/result.vue
+++ b/app/javascript/vue/results/result.vue
@@ -230,7 +230,7 @@
       },
       actionsMenu() {
         let menu = [];
-        if (this.urls.reorder_elements_url) {
+        if (this.urls.reorder_elements_url && this.elements.length > 1) {
           menu = menu.concat([{
             text: this.i18n.t('my_modules.results.actions.rearrange'),
             emit: 'reorder'
diff --git a/app/javascript/vue/shared/content/modal/move.vue b/app/javascript/vue/shared/content/modal/move.vue
index 8f02446ac..e2a7fc745 100644
--- a/app/javascript/vue/shared/content/modal/move.vue
+++ b/app/javascript/vue/shared/content/modal/move.vue
@@ -9,7 +9,7 @@
           </h4>
         </div>
         <div class="modal-body">
-          <label>
+          <label class="font-normal text-sn-dark-grey">
             {{ i18n.t(`protocols.steps.modals.move_element.${parent_type}.targets_label`) }}
           </label>
           <div class="w-full">
diff --git a/app/javascript/vue/shared/reorderable_items_modal.vue b/app/javascript/vue/shared/reorderable_items_modal.vue
index b6ed57d29..1b3c00c2e 100644
--- a/app/javascript/vue/shared/reorderable_items_modal.vue
+++ b/app/javascript/vue/shared/reorderable_items_modal.vue
@@ -16,7 +16,7 @@
             :chosenClass="'step-checklist-item-chosen'"
             :handle="'.step-element-grip'"
           >
-            <div v-for="(item, index) in reorderedItems" :key="item.id" class="step-element-header">
+            <div v-for="(item, index) in reorderedItems" :key="item.id" class="step-element-header flex items-center">
               <div class="step-element-grip step-element-grip--draggable">
                 <i class="sn-icon sn-icon-drag"></i>
               </div>
diff --git a/app/javascript/vue/shared/select.vue b/app/javascript/vue/shared/select.vue
index b817c9c41..2077200ab 100644
--- a/app/javascript/vue/shared/select.vue
+++ b/app/javascript/vue/shared/select.vue
@@ -9,19 +9,22 @@
     <perfect-scrollbar
       ref="optionsContainer"
       :style="optionPositionStyle"
-      class="sn-select__options scroll-container"
+      class="sn-select__options scroll-container p-2.5 block"
     >
-      <template v-if="options.length">
+      <div v-if="options.length" class="flex flex-col gap-[1px]">
         <div
           v-for="option in options"
           :key="option[0]"
           @mousedown.prevent.stop="setValue(option[0])"
-          class="sn-select__option"
-          :class="{ 'select__option-placeholder': option[2] }"
+          class="sn-select__option p-3 rounded"
+          :class="{
+            'select__option-placeholder': option[2],
+            '!bg-sn-super-light-blue': option[0] == value,
+          }"
         >
           {{ option[1] }}
         </div>
-      </template>
+      </div>
       <template v-else>
         <div
           class="sn-select__no-options"
diff --git a/app/views/dashboards/_create_task_modal.html.erb b/app/views/dashboards/_create_task_modal.html.erb
index 27f99b1ad..675eee81a 100644
--- a/app/views/dashboards/_create_task_modal.html.erb
+++ b/app/views/dashboards/_create_task_modal.html.erb
@@ -18,7 +18,6 @@
                     data-placeholder="<%= t("dashboard.create_task_modal.project_placeholder") %>"></select>
           </div>
           <div class="new-projects-visibility" style="display: none;">
-            <div class="down-arrow"></div>
             <div class="project-visibility-container">
               <div class="project-visibility-title"><%= t("dashboard.create_task_modal.project_visibility_label") %></div>
               <div class="sci-toggles-group" data-toggle="buttons">
diff --git a/app/views/my_modules/_module_header_details_popover.html.erb b/app/views/my_modules/_module_header_details_popover.html.erb
index 05d063b93..5c99b43d7 100644
--- a/app/views/my_modules/_module_header_details_popover.html.erb
+++ b/app/views/my_modules/_module_header_details_popover.html.erb
@@ -1,42 +1,42 @@
 <div class="task-details-popover">
   <div class="row row-v-margin">
-    <div class="col-xs-3">
+    <div class="col-xs-3 task-details-value">
       <%= t('my_modules.details.info_popover.project_label') %>
     </div>
-    <div class="col-xs-9 task-details-value">
+    <div class="col-xs-9">
         <%= @my_module.experiment.project.name.truncate(Constants::MAX_NAME_TRUNCATION) %>
     </div>
   </div>
   <div class="row row-v-margin">
-    <div class="col-xs-3">
+    <div class="col-xs-3 task-details-value">
       <%= t('my_modules.details.info_popover.experiment_label') %>
     </div>
-    <div class="col-xs-9 task-details-value">
+    <div class="col-xs-9">
         <%= @my_module.experiment.name.truncate(Constants::MAX_NAME_TRUNCATION) %>
     </div>
   </div>
   <div class="row row-v-margin">
-    <div class="col-xs-3">
+    <div class="col-xs-3 task-details-value">
       <%= t('my_modules.details.info_popover.creator_label') %>
     </div>
-    <div class="col-xs-9 task-details-value">
+    <div class="col-xs-9">
       <%= @my_module.created_by&.full_name&.truncate(Constants::MAX_NAME_TRUNCATION) %>
       <%= t('my_modules.details.info_popover.creator_same_user_label') if current_user == @my_module.created_by %>
     </div>
   </div>
   <div class="row row-v-margin">
-    <div class="col-xs-3">
+    <div class="col-xs-3 task-details-value">
       <%= t('my_modules.details.info_popover.created_label') %>
     </div>
-    <div class="col-xs-9 task-details-value">
+    <div class="col-xs-9">
         <%= l(@my_module.created_at, format: :full_date) %>
     </div>
   </div>
   <div class="row row-v-margin">
-    <div class="col-xs-3">
+    <div class="col-xs-3 task-details-value">
       <%= t('my_modules.details.info_popover.modified_label') %>
     </div>
-    <div class="col-xs-9 task-details-value">
+    <div class="col-xs-9">
         <% if @my_module.last_modified_by.present? %>
           <%= t('my_modules.details.info_popover.modified_value',
                 date: l(@my_module.updated_at, format: :full_date),
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index 7f4f06764..12f0ca08f 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -92,12 +92,12 @@
         </a>
         <div class="actions-block">
           <% if can_assign_my_module_repository_rows?(@my_module) %>
-            <div class="dropdown repositories-assign-container sci-dropdown" data-repositories-url="<%= my_module_repositories_dropdown_list_path(@my_module) %>">
+            <div class="dropdown repositories-assign-container" data-repositories-url="<%= my_module_repositories_dropdown_list_path(@my_module) %>">
               <a href="#" id="repositories-assign-button" class="btn btn-light btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                 <span><%= t('my_modules.assigned_items.assign_from') %></span>
                 <span class="sn-icon sn-icon-down"></span>
               </a>
-              <ul class="dropdown-menu repositories-dropdown-menu perfect-scrollbar" aria-labelledby="repositories-assign-button">
+              <ul class="dropdown-menu repositories-dropdown-menu perfect-scrollbar rounded !p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]" aria-labelledby="repositories-assign-button">
               </ul>
             </div>
           <% end %>
diff --git a/app/views/my_modules/repositories/_repositories_dropdown_list.html.erb b/app/views/my_modules/repositories/_repositories_dropdown_list.html.erb
index e33e411db..4e0f08cdc 100644
--- a/app/views/my_modules/repositories/_repositories_dropdown_list.html.erb
+++ b/app/views/my_modules/repositories/_repositories_dropdown_list.html.erb
@@ -4,17 +4,19 @@
       data-assign-url-modal="<%= assign_modal_my_module_repository_path(@my_module, repository) %>"
       data-update-url-modal="<%= update_modal_my_module_repository_path(@my_module, repository)%>" data-repository-id="<%= repository.id %>"
       data-rows-count="<%= repository.rows_count %>" >
-    <% if repository.shared_with?(current_team) %>
-      <span class="shared-icon">
-        <i class="sn-icon sn-icon sn-icon-users"></i>
-      </span>
-    <% end %>
-    <span class="name" data-rows-count="<%= repository.rows_count %>"><%= repository.name %></span>
-    <% if repository.rows_count.positive? %>
-      <span class="assigned-items">
-        <i class="fas fa-file-signature"></i>
-        <%= repository.rows_count %>
-      </span>
-    <% end %>
+    <span class="!px-3 !py-2.5 rounded hover:!bg-sn-super-light-grey !text-sn-blue block cursor-pointer">
+      <% if repository.shared_with?(current_team) %>
+        <span class="shared-icon">
+          <i class="sn-icon sn-icon sn-icon-users"></i>
+        </span>
+      <% end %>
+      <span class="name" data-rows-count="<%= repository.rows_count %>"><%= repository.name %></span>
+      <% if repository.rows_count.positive? %>
+        <span class="assigned-items">
+          <i class="fas fa-file-signature"></i>
+          <%= repository.rows_count %>
+        </span>
+      <% end %>
+    </span>
   </li>
 <% end %>