From 3f135a9e12eab2625d7e75f7617dc52858f30835 Mon Sep 17 00:00:00 2001
From: Gregor Lasnibat <gregor@scinote.net>
Date: Wed, 29 Nov 2023 10:59:24 +0100
Subject: [PATCH] (fix) Hover and mouse pointer on item card is not correct
 [SCI-9791]

---
 .../stylesheets/shared/datetime_picker.scss   |  2 +-
 .../RepositoryItemSidebar.vue                 | 28 +++++++++++--------
 .../RepositoryAssetValue.vue                  |  4 +--
 .../repository_values/RepositoryListValue.vue |  2 +-
 .../RepositoryStatusValue.vue                 |  2 +-
 .../vue/shared/checklist_select.vue           |  2 +-
 app/javascript/vue/shared/select_search.vue   |  2 +-
 7 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/shared/datetime_picker.scss b/app/assets/stylesheets/shared/datetime_picker.scss
index 188e66532..714ddb1af 100644
--- a/app/assets/stylesheets/shared/datetime_picker.scss
+++ b/app/assets/stylesheets/shared/datetime_picker.scss
@@ -137,7 +137,7 @@
   --dp-secondary-color: var(--sn-grey);
   --dp-border-color: var(--sn-light-grey);
   --dp-menu-border-color: var(--sn-light-grey);
-  --dp-border-color-hover: var(--sn-light-grey);
+  --dp-border-color-hover: var(--sn-sleepy-grey);
   --dp-disabled-color: var(--sn-super-light-grey);
   --dp-scroll-bar-background: var(--sn-white);
   --dp-scroll-bar-color: var(--sn-grey);
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 635e0f2e3..1bc1a3954 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -14,7 +14,7 @@
             <repository-item-sidebar-title v-if="defaultColumns"
               :editable="permissions?.can_manage && !defaultColumns?.archived" :name="defaultColumns.name"
               @update="update"></repository-item-sidebar-title>
-            <i id="close-icon" @click="toggleShowHideSidebar(currentItemUrl)"
+            <i id="close-icon" @click="toggleShowHideSidebar(null)"
               class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
           </div>
           <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px mt-6 mr-6"></div>
@@ -27,7 +27,7 @@
 
           <div v-else class="flex flex-1 flex-grow-1 justify-between" ref="scrollSpyContent" id="scrollSpyContent">
 
-            <div id="left-col" class="flex flex-col gap-4">
+            <div id="left-col" class="flex flex-col gap-4 max-w-[350px]">
 
               <!-- INFORMATION -->
               <section id="information-section">
@@ -312,23 +312,27 @@ export default {
         this.isShowing = true;
         this.loadRepositoryRow(repositoryRowUrl);
         this.currentItemUrl = repositoryRowUrl;
-        return
+        return;
+      }
+      // same item click
+      if (repositoryRowUrl === this.currentItemUrl) {
+        if (this.isShowing) {
+          this.toggleShowHideSidebar(null);
+        }
+        return;
       }
       // explicit close (from emit)
-      else if (repositoryRowUrl === null) {
+      if (repositoryRowUrl === null) {
         this.isShowing = false;
         this.currentItemUrl = null;
         this.myModuleId = null;
-        return
+        return;
       }
       // click on a different item - if the item card is already showing should just fetch new data
-      else {
-        this.isShowing = true;
-        this.myModuleId = myModuleId;
-        this.loadRepositoryRow(repositoryRowUrl);
-        this.currentItemUrl = repositoryRowUrl;
-        return
-      }
+      this.isShowing = true;
+      this.myModuleId = myModuleId;
+      this.loadRepositoryRow(repositoryRowUrl);
+      this.currentItemUrl = repositoryRowUrl;
     },
     loadRepositoryRow(repositoryRowUrl) {
       this.dataLoading = true
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
index 9163efca6..b6db0ea7f 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
@@ -5,10 +5,10 @@
         {{ colName }}
       </div>
       <a v-if="!file_name && (!uploading || error) && canEdit"
-        class="btn-text-link font-normal" @click="openFileChooser">
+        class="btn-text-link font-normal min-w-fit pl-4" @click="openFileChooser">
         {{ i18n.t('repositories.item_card.repository_asset_value.add_asset') }}
       </a>
-      <div v-if="file_name && !uploading && canEdit" class="flex whitespace-nowrap gap-4 pl-4">
+      <div v-if="file_name && !uploading && canEdit" class="flex whitespace-nowrap gap-4 min-w-fit pl-4">
         <a class="btn-text-link font-normal" @click="openFileChooser">
           {{ i18n.t('general.replace') }}
         </a>
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
index 6d6a8be98..a3da0f20c 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
@@ -17,7 +17,7 @@
         :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :searchPlaceholder="i18n.t('repositories.item_card.dropdown_placeholder')"
-        customClass="!h-[38px] !pl-3"
+        customClass="!h-[38px] !pl-3 sci-cursor-edit"
         optionsClassName="max-h-[300px]"
       ></select-search>
       <div v-else-if="text"
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
index 8079afd23..f46489aad 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
@@ -17,7 +17,7 @@
         :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :searchPlaceholder="i18n.t('repositories.item_card.dropdown_placeholder')"
-        customClass="!h-[38px] !pl-2"
+        customClass="!h-[38px] !pl-2 sci-cursor-edit"
         optionsClassName="max-h-[300px]"
       ></select-search>
       <div v-else-if="status && icon"
diff --git a/app/javascript/vue/shared/checklist_select.vue b/app/javascript/vue/shared/checklist_select.vue
index c92dd8ae7..edd279dad 100644
--- a/app/javascript/vue/shared/checklist_select.vue
+++ b/app/javascript/vue/shared/checklist_select.vue
@@ -48,7 +48,7 @@
               <input v-model="selectedValues" :value="option.id" :id="option.id" type="checkbox" class="sci-checkbox project-card-selector">
               <label :for="option.id" class="sci-checkbox-label"></label>
             </div>
-            <span class="text-ellipsis overflow-hidden max-h-[4rem] ml-1">{{ option.label }}</span>
+            <span :title="option.label" class="text-ellipsis overflow-hidden max-h-[4rem] ml-1 whitespace-normal line-clamp-3">{{ option.label }}</span>
           </div>
         </div>
         <template v-else>
diff --git a/app/javascript/vue/shared/select_search.vue b/app/javascript/vue/shared/select_search.vue
index d0aea0be0..d4c758b2c 100644
--- a/app/javascript/vue/shared/select_search.vue
+++ b/app/javascript/vue/shared/select_search.vue
@@ -1,6 +1,6 @@
 <template>
   <Select
-    class="sn-select sn-select--search"
+    class="sn-select sn-select--search hover:border-sn-sleepy-grey"
     :class="customClass"
     :className="className"
     :optionsClassName="optionsClassName"