Browse Source

enhancement: show scrollbar in fields menu

re #2181

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2183/head
Pranav C 3 years ago
parent
commit
eabe37c6a6
  1. 100
      packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue

100
packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue

@ -96,53 +96,57 @@
</template>-->
</v-text-field>
</v-list-item>
<draggable
v-model="fields"
@start="drag = true"
@end="drag = false"
@change="onMove($event)"
<div
class="nc-fields-list py-1"
>
<template v-for="(field, i) in fields">
<v-list-item
v-show="
(!fieldFilter ||
(field.title || '')
.toLowerCase()
.includes(fieldFilter.toLowerCase())) &&
!(
!showSystemFieldsLoc &&
systemColumnsIds.includes(field.fk_column_id)
)
"
:key="field.id"
dense
>
<v-checkbox
v-model="field.show"
class="mt-0 pt-0"
<draggable
v-model="fields"
@start="drag = true"
@end="drag = false"
@change="onMove($event)"
>
<template v-for="(field, i) in fields">
<v-list-item
v-show="
(!fieldFilter ||
(field.title || '')
.toLowerCase()
.includes(fieldFilter.toLowerCase())) &&
!(
!showSystemFieldsLoc &&
systemColumnsIds.includes(field.fk_column_id)
)
"
:key="field.id"
dense
hide-details
@click.stop
@change="saveOrUpdate(field, i)"
>
<template #label>
<v-icon small class="mr-1">
{{ field.icon }}
</v-icon>
<span class="caption">{{ field.title }}</span>
</template>
</v-checkbox>
<v-spacer />
<v-icon
small
color="grey"
:class="`align-self-center drag-icon nc-child-draggable-icon-${field}`"
>
mdi-drag
</v-icon>
</v-list-item>
</template>
</draggable>
<v-checkbox
v-model="field.show"
class="mt-0 pt-0"
dense
hide-details
@click.stop
@change="saveOrUpdate(field, i)"
>
<template #label>
<v-icon small class="mr-1">
{{ field.icon }}
</v-icon>
<span class="caption">{{ field.title }}</span>
</template>
</v-checkbox>
<v-spacer />
<v-icon
small
color="grey"
:class="`align-self-center drag-icon nc-child-draggable-icon-${field}`"
>
mdi-drag
</v-icon>
</v-list-item>
</template>
</draggable>
</div>
<v-divider class="my-2" />
<v-list-item v-if="!isPublic" dense>
@ -459,7 +463,7 @@ export default {
'order',
(this.fields[event.moved.newIndex - 1].order +
this.fields[event.moved.newIndex + 1].order) /
2
2
)
}
this.saveOrUpdate(
@ -504,4 +508,10 @@ export default {
.drag-icon {
cursor: all-scroll; /*cursor: grab;*/
}
.nc-fields-list {
height: auto;
max-height: 500px;
overflow-y: auto;
}
</style>

Loading…
Cancel
Save