scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 14:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix issue with long column names in item card [SCI-9546] (#6488)

Browse source
This commit is contained in:
wandji 2023-10-19 10:23:36 +01:00 committed by GitHub
parent 1709abaa9e
commit 18f9d43a80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
View file

@ -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 class="header flex w-full h-[30px] pr-6">
<h4 class="item-name my-auto truncate text-xl" :title="defaultColumns?.name">
{{ defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
{{ defaultColumns?.name }}
<h4 class="item-name my-auto truncate text-xl" :title="repositoryRowName">
{{ repositoryRowName }}
</h4>
<i id="close-icon" @click="toggleShowHideSidebar(currentItemUrl)"
class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
@ -286,6 +285,11 @@ export default {
created() {
window.repositoryItemSidebarComponent = this;
},
computed: {
repositoryRowName() {
return this.defaultColumns?.archived ? `${I18n.t('labels.archived')} ${this.defaultColumns?.name}` : this.defaultColumns?.name;
}
},
mounted() {
// Add a click event listener to the document
document.addEventListener('click', this.handleOutsideClick);

6
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
View file

@ -1,11 +1,11 @@
<template>
<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 }}
</div>
<div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
class="w-fit cursor-pointer text-sn-science-blue relative">
<a class="file-preview-link" :id="modalPreviewLinkId" data-no-turbolink="true"
class="w-full cursor-pointer text-sn-science-blue relative">
<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>
{{ file_name }}
</a>

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="allChecklistItems.length > 0">

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateRangeValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="start_time?.formatted && end_time?.formatted"

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeRangeValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="start_time?.formatted && end_time?.formatted"

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="text" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryNumberValue.vue
View file

@ -1,7 +1,7 @@
<template>
<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>{{ colName }}</div>
<div class="truncate w-4/5">{{ colName }}</div>
<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') :
i18n.t('repositories.item_card.repository_number_value.expand') }}

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="status && icon"

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStockValue.vue
View file

@ -1,7 +1,7 @@
<template>
<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">
<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"
v-if="permissions?.can_export_repository_stock === true && colVal?.stock_formatted" :data-rows="JSON.stringify([repositoryRowId])"
:data-object-id="repositoryId">

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTextValue.vue
View file

@ -1,7 +1,7 @@
<template>
<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>{{ colName }}</div>
<div class="truncate w-4/5">{{ colName }}</div>
<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') :
i18n.t('repositories.item_card.repository_text_value.expand') }}

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeRangeValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="start_time?.formatted && end_time?.formatted"

2
app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeValue.vue
View file

@ -1,6 +1,6 @@
<template>
<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 }}
</div>
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">