mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.3 KiB
70 lines
2.3 KiB
<script setup lang="ts"> |
|
import type { GridType } from 'nocodb-sdk' |
|
import { ActiveViewInj, IsLockedInj, ReloadViewDataHookInj, inject, ref, useMenuCloseOnEsc } from '#imports' |
|
|
|
const view = inject(ActiveViewInj, ref()) |
|
const isLocked = inject(IsLockedInj, ref(false)) |
|
const reloadDataHook = inject(ReloadViewDataHookInj) |
|
|
|
const { $api } = useNuxtApp() |
|
|
|
const open = ref(false) |
|
|
|
const updateRowHeight = (rh: number) => { |
|
if (view.value?.id) { |
|
try { |
|
$api.dbView.gridUpdate(view.value.id, { |
|
row_height: rh, |
|
}) |
|
;(view.value.view as GridType).row_height = rh |
|
|
|
message.success('View updated successfully!') |
|
|
|
reloadDataHook?.trigger() |
|
|
|
open.value = false |
|
} catch (e) { |
|
message.error('There was an error while updating view!') |
|
} |
|
} |
|
} |
|
|
|
useMenuCloseOnEsc(open) |
|
</script> |
|
|
|
<template> |
|
<a-dropdown v-model:visible="open" offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-height-menu"> |
|
<div> |
|
<a-button v-e="['c:row-height']" class="nc-height-menu-btn nc-toolbar-btn" :disabled="isLocked"> |
|
<div class="flex items-center gap-1"> |
|
<MdiTableRowHeight /> |
|
|
|
<!-- Row Height --> |
|
<span class="text-capitalize !text-sm font-weight-normal">Row Height</span> |
|
<MdiMenuDown class="text-grey" /> |
|
</div> |
|
</a-button> |
|
</div> |
|
<template #overlay> |
|
<div class="w-full bg-gray-50 shadow-lg menu-filter-dropdown !border" data-testid="nc-height-menu"> |
|
<div class="text-gray-500 !text-xs px-4 py-2">Select a row height</div> |
|
<div class="flex flex-col w-full text-sm" @click.stop> |
|
<div class="flex items-center py-1 px-2 hover:bg-gray-200" @click="updateRowHeight(0)"> |
|
<MdiSizeS class="text-xl mr-3" />Short |
|
</div> |
|
<div class="flex items-center py-1 px-2 hover:bg-gray-200" @click="updateRowHeight(1)"> |
|
<MdiSizeM class="text-xl mr-3" />Medium |
|
</div> |
|
<div class="flex items-center py-1 px-2 hover:bg-gray-200" @click="updateRowHeight(2)"> |
|
<MdiSizeL class="text-xl mr-3" />Tall |
|
</div> |
|
<div class="flex items-center py-1 px-2 hover:bg-gray-200" @click="updateRowHeight(3)"> |
|
<MdiSizeXl class="text-xl mr-3" />Extra |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
</a-dropdown> |
|
</template> |
|
|
|
<style scoped></style>
|
|
|