mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 23:16:15 +08:00
Fix issue with long column names in item card [SCI-9546] (#6488)
This commit is contained in:
parent
1709abaa9e
commit
18f9d43a80
|
@ -7,9 +7,8 @@
|
||||||
|
|
||||||
<div id="sticky-header-wrapper" class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[78px] pt-6">
|
<div id="sticky-header-wrapper" class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[78px] pt-6">
|
||||||
<div class="header flex w-full h-[30px] pr-6">
|
<div class="header flex w-full h-[30px] pr-6">
|
||||||
<h4 class="item-name my-auto truncate text-xl" :title="defaultColumns?.name">
|
<h4 class="item-name my-auto truncate text-xl" :title="repositoryRowName">
|
||||||
{{ defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
|
{{ repositoryRowName }}
|
||||||
{{ defaultColumns?.name }}
|
|
||||||
</h4>
|
</h4>
|
||||||
<i id="close-icon" @click="toggleShowHideSidebar(currentItemUrl)"
|
<i id="close-icon" @click="toggleShowHideSidebar(currentItemUrl)"
|
||||||
class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
|
class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
|
||||||
|
@ -286,6 +285,11 @@ export default {
|
||||||
created() {
|
created() {
|
||||||
window.repositoryItemSidebarComponent = this;
|
window.repositoryItemSidebarComponent = this;
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
repositoryRowName() {
|
||||||
|
return this.defaultColumns?.archived ? `${I18n.t('labels.archived')} ${this.defaultColumns?.name}` : this.defaultColumns?.name;
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// Add a click event listener to the document
|
// Add a click event listener to the document
|
||||||
document.addEventListener('click', this.handleOutsideClick);
|
document.addEventListener('click', this.handleOutsideClick);
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-asset-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-asset-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
|
<div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
|
||||||
class="w-fit cursor-pointer text-sn-science-blue relative">
|
class="w-full cursor-pointer text-sn-science-blue relative">
|
||||||
<a class="file-preview-link" :id="modalPreviewLinkId" data-no-turbolink="true"
|
<a class="w-full inline-block file-preview-link truncate" :id="modalPreviewLinkId" data-no-turbolink="true"
|
||||||
data-id="true" data-status="asset-present" :data-preview-url=this?.preview_url :href=this?.url>
|
data-id="true" data-status="asset-present" :data-preview-url=this?.preview_url :href=this?.url>
|
||||||
{{ file_name }}
|
{{ file_name }}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-checklist-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-checklist-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="allChecklistItems.length > 0">
|
<div v-if="allChecklistItems.length > 0">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-date-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-date-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="start_time?.formatted && end_time?.formatted"
|
<div v-if="start_time?.formatted && end_time?.formatted"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-date-time-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-date-time-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="start_time?.formatted && end_time?.formatted"
|
<div v-if="start_time?.formatted && end_time?.formatted"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-date-time-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-date-time-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-date-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-date-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-list-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-list-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="text" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
<div v-if="text" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-number-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-number-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5 flex justify-between">
|
<div class="font-inter text-sm font-semibold leading-5 flex justify-between">
|
||||||
<div>{{ colName }}</div>
|
<div class="truncate w-4/5">{{ colName }}</div>
|
||||||
<div @click="toggleExpandContent" v-show="expendable" class="font-normal leading-5 btn-text-link">
|
<div @click="toggleExpandContent" v-show="expendable" class="font-normal leading-5 btn-text-link">
|
||||||
{{ this.contentExpanded ? i18n.t('repositories.item_card.repository_number_value.collapse') :
|
{{ this.contentExpanded ? i18n.t('repositories.item_card.repository_number_value.collapse') :
|
||||||
i18n.t('repositories.item_card.repository_number_value.expand') }}
|
i18n.t('repositories.item_card.repository_number_value.expand') }}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-status-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-status-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="status && icon"
|
<div v-if="status && icon"
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-stock-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-stock-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5 relative">
|
<div class="font-inter text-sm font-semibold leading-5 relative">
|
||||||
<span>{{ colName }}</span>
|
<span class="truncate w-full inline-block pr-[50px]">{{ colName }}</span>
|
||||||
<a style="text-decoration: none;" class="absolute right-0 btn-text-link font-normal export-consumption-button"
|
<a style="text-decoration: none;" class="absolute right-0 btn-text-link font-normal export-consumption-button"
|
||||||
v-if="permissions?.can_export_repository_stock === true && colVal?.stock_formatted" :data-rows="JSON.stringify([repositoryRowId])"
|
v-if="permissions?.can_export_repository_stock === true && colVal?.stock_formatted" :data-rows="JSON.stringify([repositoryRowId])"
|
||||||
:data-object-id="repositoryId">
|
:data-object-id="repositoryId">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-text-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-text-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5 flex justify-between">
|
<div class="font-inter text-sm font-semibold leading-5 flex justify-between">
|
||||||
<div>{{ colName }}</div>
|
<div class="truncate w-4/5">{{ colName }}</div>
|
||||||
<div @click="toggleExpandContent" v-show="expendable" class="font-normal leading-5 btn-text-link">
|
<div @click="toggleExpandContent" v-show="expendable" class="font-normal leading-5 btn-text-link">
|
||||||
{{ this.contentExpanded ? i18n.t('repositories.item_card.repository_text_value.collapse') :
|
{{ this.contentExpanded ? i18n.t('repositories.item_card.repository_text_value.collapse') :
|
||||||
i18n.t('repositories.item_card.repository_text_value.expand') }}
|
i18n.t('repositories.item_card.repository_text_value.expand') }}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-time-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-time-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="start_time?.formatted && end_time?.formatted"
|
<div v-if="start_time?.formatted && end_time?.formatted"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="repository-time-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
<div id="repository-time-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||||
<div class="font-inter text-sm font-semibold leading-5">
|
<div class="font-inter text-sm font-semibold leading-5 truncate">
|
||||||
{{ colName }}
|
{{ colName }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
||||||
|
|
Loading…
Reference in a new issue