hrms-bangkok/hrms-edm
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: truncate long name

Browse source
This commit is contained in:
Methapon2001 2023-11-29 15:27:25 +07:00
parent 6d8b8600ac
commit 8badbc4a22
No known key found for this signature in database
GPG key ID: 849924FEF46BD132
1 changed files with 8 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

25
Services/client/src/components/TreeExplorer.vue
View file

@ -15,10 +15,8 @@ const props = withDefaults(
}>(),
{
level: 0,
}
},
)
const MAX_NAME_LENGTH = 20
</script>
<template>
@ -39,14 +37,10 @@ const MAX_NAME_LENGTH = 20
level === 1
? 'mdi-file-cabinet'
: level === 2
? 'inbox'
: 'o_folder_open'
"
:label="
folder.name.length > MAX_NAME_LENGTH
? folder.name.slice(0, MAX_NAME_LENGTH) + '...'
: folder.name
? 'inbox'
: 'o_folder_open'
"
:label="folder.name"
class="text-overflow-handle"
v-model="folder.status"
>
@ -60,16 +54,13 @@ const MAX_NAME_LENGTH = 20
</div>
</template>
<style lang="scss">
.q-item[aria-expanded='true'] {
<style lang="scss" scoped>
:deep(.q-item[aria-expanded='true']) {
color: $primary;
}
.q-item[aria-expanded='true'] .q-icon {
color: $primary;
}
.text-overflow-handle {
.text-overflow-handle,
:deep(.q-item__label) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;