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

Truncate long option names in dropdown select [SCI-10307]

Browse source
This commit is contained in:
wandji20 2024-03-03 18:13:09 +01:00
parent 74e1478c07
commit be3a858de8
5 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/vue/my_modules/list.vue
View file

@ -338,7 +338,7 @@ export default {
usersFilterRenderer(option) {
return `<div class="flex items-center gap-2">
<img src="${option[2].avatar_url}" class="rounded-full w-6 h-6" />
<span>${option[1]}</span>
<span title="${option[1]}" class="truncate">${option[1]}</span>
</div>`;
}
}

2
app/javascript/vue/projects/list.vue
View file

@ -245,7 +245,7 @@ export default {
usersFilterRenderer(option) {
return `<div class="flex items-center gap-2">
<img src="${option[2].avatar_url}" class="rounded-full w-6 h-6" />
<span>${option[1]}</span>
<span title="${option[1]}" class="truncate">${option[1]}</span>
</div>`;
},
nameRenderer(params) {

2
app/javascript/vue/protocols/table.vue
View file

@ -342,7 +342,7 @@ export default {
usersFilterRenderer(option) {
return `<div class="flex items-center gap-2">
<img src="${option[2].avatar_url}" class="rounded-full w-6 h-6" />
<span>${option[1]}</span>
<span class="truncate" title="${option[1]}">${option[1]}</span>
</div>`;
}
}

2
app/javascript/vue/shared/filters/filter_dropdown.vue
View file

@ -19,7 +19,7 @@
<i class="sn-icon sn-icon-close"></i>
</button>
</div>
<div class="max-h-[40vh] px-3.5 overflow-y-auto">
<div class="max-h-[40vh] px-3.5 overflow-y-auto max-w-[400px]">
<div v-for="filter in filters" :key="filter.key">
<Component
:is="`${filter.type}Filter`"

6
app/javascript/vue/shared/select_dropdown.vue
View file

@ -69,14 +69,14 @@
:class="[sizeClass, {'!bg-sn-super-light-blue': valueSelected(option[0])}]"
>
<div v-if="withCheckboxes"
class="sn-checkbox-icon"
class="sn-checkbox-icon shrink-0"
:class="{
'checked': valueSelected(option[0]),
'unchecked': !valueSelected(option[0]),
}"
></div>
<div v-if="optionRenderer" v-html="optionRenderer(option)"></div>
<div v-else >{{ option[1] }}</div>
<div class="truncate" v-if="optionRenderer" v-html="optionRenderer(option)"></div>
<div class="truncate" v-else >{{ option[1] }}</div>
</div>
</template>
<div v-if="filteredOptions.length === 0" class="text-sn-grey text-center py-2.5">