(fix) Hover and mouse pointer on item card is not correct [SCI-9791]

This commit is contained in:
Gregor Lasnibat 2023-11-29 10:59:24 +01:00
parent 843cff8e1a
commit 3f135a9e12
7 changed files with 23 additions and 19 deletions

View file

@ -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);

View file

@ -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

View file

@ -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>

View file

@ -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"

View file

@ -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"

View file

@ -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>

View file

@ -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"