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

Fix text and number columns expend/collapse scroller issues [SCI-9545] (#6468)

Browse source
This commit is contained in:
Soufiane 2023-10-19 09:47:04 +02:00 • committed by GitHub
parent 54daf91701
commit 9de448141e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,13 +2,13 @@
<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 @click="toggleExpandContent" 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') :
i18n.t('repositories.item_card.repository_number_value.expand') }}
</div>
</div>
<div v-if="colVal" ref="numberRef"
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 min-h-[20px] overflow-scroll"
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 min-h-[20px] overflow-y-auto"
:class="{ 'max-h-[60px]': !contentExpanded, 'max-h-[600px]': contentExpanded }">
{{ colVal }}
</div>
@ -25,11 +25,18 @@ export default {
data_type: String,
colId: Number,
colName: String,
colVal: Number
colVal: String
},
mounted() {
this.$nextTick(() => {
const textHeight = this.$refs.numberRef.scrollHeight
this.expendable = textHeight > 60 // 60px
})
},
data() {
return {
contentExpanded: false
contentExpanded: false,
expendable: false,
}
},
methods: {

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

@ -2,13 +2,14 @@
<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 @click="toggleExpandContent" 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') :
i18n.t('repositories.item_card.repository_text_value.expand') }}
</div>
</div>
<div v-if="edit" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 min-h-[20px] overflow-scroll"
:class="{ 'max-h-[60px]': !contentExpanded, 'max-h-[600px]': contentExpanded }" ref="textRef">
<div v-if="edit" ref="textRef" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 overflow-y-auto"
:class="{ 'max-h-[60px]': !contentExpanded,
'max-h-[600px]': contentExpanded }">
{{ edit }}
</div>
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
@ -24,7 +25,8 @@ export default {
return {
edit: null,
view: null,
contentExpanded: false
contentExpanded: false,
expendable: false
}
},
props: {
@ -43,6 +45,12 @@ export default {
this.edit = this.colVal.edit
this.view = this.colVal.view
}
},
mounted() {
this.$nextTick(() => {
const textHeight = this.$refs.textRef.scrollHeight
this.expendable = textHeight > 60 // 60px
})
},
}
</script>