Browse Source

Merge pull request #5952 from nocodb/refactor/5951-general-ui-ux

General UI/UX - enhancement/bugs
pull/6004/head
Raju Udava 1 year ago committed by GitHub
parent
commit
e54f85c838
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 23
      packages/nc-gui/components/cell/attachment/index.vue
  2. 11
      packages/nc-gui/components/smartsheet/header/Icon.vue
  3. 24
      packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
  4. 6
      packages/nc-gui/composables/useExpandedFormStore.ts

23
packages/nc-gui/components/cell/attachment/index.vue

@ -2,6 +2,7 @@
import { onKeyDown } from '@vueuse/core' import { onKeyDown } from '@vueuse/core'
import { useProvideAttachmentCell } from './utils' import { useProvideAttachmentCell } from './utils'
import { useSortable } from './sort' import { useSortable } from './sort'
import { RowHeightInj } from '~/context'
import { import {
ActiveCellInj, ActiveCellInj,
CurrentCellInj, CurrentCellInj,
@ -129,11 +130,16 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
} }
} }
}) })
const rowHeight = inject(RowHeightInj, ref(1.8))
</script> </script>
<template> <template>
<div <div
ref="attachmentCellRef" ref="attachmentCellRef"
:style="{
height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
}"
class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1" class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"
> >
<LazyCellAttachmentCarousel /> <LazyCellAttachmentCarousel />
@ -153,7 +159,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
<div <div
v-if="!isReadonly" v-if="!isReadonly"
:class="{ 'mx-auto px-4': !visibleItems.length }" :class="{ 'mx-auto px-4': !visibleItems.length }"
class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)" class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
data-testid="attachment-cell-file-picker-button" data-testid="attachment-cell-file-picker-button"
@click.stop="open" @click.stop="open"
> >
@ -162,7 +168,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
<a-tooltip v-else placement="bottom"> <a-tooltip v-else placement="bottom">
<template #title> Click or drop a file into cell</template> <template #title> Click or drop a file into cell</template>
<div class="flex items-center gap-2"> <div class="flex items-center gap-1">
<MaterialSymbolsAttachFile <MaterialSymbolsAttachFile
class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]" class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
/> />
@ -183,7 +189,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
<div <div
ref="sortableRef" ref="sortableRef"
:class="{ dragging }" :class="{ dragging }"
class="flex cursor-pointer justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto" class="flex cursor-pointer justify-center items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
:style="{
maxHeight: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
}"
> >
<template v-for="(item, i) of visibleItems" :key="item.url || item.title"> <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
<a-tooltip placement="bottom"> <a-tooltip placement="bottom">
@ -192,7 +201,11 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
</template> </template>
<div v-if="isImage(item.title, item.mimetype ?? item.type)"> <div v-if="isImage(item.title, item.mimetype ?? item.type)">
<div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item"> <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
<LazyCellAttachmentImage :alt="item.title || `#${i}`" :srcs="getPossibleAttachmentSrc(item)" /> <LazyCellAttachmentImage
class="max-h-[1.8rem] max-w-[1.8rem]"
:alt="item.title || `#${i}`"
:srcs="getPossibleAttachmentSrc(item)"
/>
</div> </div>
</div> </div>
<div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)"> <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">
@ -229,7 +242,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
.nc-cell { .nc-cell {
.nc-attachment-cell { .nc-attachment-cell {
.nc-attachment { .nc-attachment {
@apply w-[50px] h-[50px] min-h-[50px] min-w-[50px] ring-1 ring-gray-300 rounded; @apply w-[1.8rem] h-[1.8rem] min-h-[1.8rem] min-w-[1.8rem] ring-1 ring-gray-300 rounded;
} }
.ghost, .ghost,

11
packages/nc-gui/components/smartsheet/header/Icon.vue

@ -0,0 +1,11 @@
<script lang="ts" setup>
import { ColumnType, isVirtualCol } from 'nocodb-sdk'
const { column } = defineProps<{ column: ColumnType }>()
</script>
<template>
<SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" :column-meta="column" />
<SmartsheetHeaderCellIcon v-else :column-meta="column" />
</template>

24
packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { isSystemColumn } from 'nocodb-sdk'
import type { TableType } from 'nocodb-sdk' import type { TableType } from 'nocodb-sdk'
import { import {
ActiveViewInj, ActiveViewInj,
@ -27,10 +28,15 @@ const searchDropdown = ref(null)
onClickOutside(searchDropdown, () => (isDropdownOpen.value = false)) onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
const columns = computed(() => const columns = computed(() =>
(meta.value as TableType)?.columns?.map((column) => ({ (meta.value as TableType)?.columns
value: column.id, ?.filter((c) => {
label: column.title, return !isSystemColumn(c)
})), })
.map((column) => ({
value: column.id,
label: column.title,
column,
})),
) )
watch( watch(
@ -65,10 +71,16 @@ function onPressEnter() {
:open="isDropdownOpen" :open="isDropdownOpen"
size="small" size="small"
:dropdown-match-select-width="false" :dropdown-match-select-width="false"
:options="columns"
dropdown-class-name="!py-0 !rounded nc-dropdown-toolbar-search-field-option" dropdown-class-name="!py-0 !rounded nc-dropdown-toolbar-search-field-option"
class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0" class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
/> >
<a-select-option v-for="op of columns" :key="op.value" :value="op.value">
<div class="flex items-center -ml-1 gap-2">
<SmartsheetHeaderIcon class="" :column="op.column" />
{{ op.label }}
</div>
</a-select-option>
</a-select>
</div> </div>
<a-input <a-input

6
packages/nc-gui/composables/useExpandedFormStore.ts

@ -267,7 +267,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
addOrEditStackRow(row.value, isNewRow) addOrEditStackRow(row.value, isNewRow)
} }
message.success(`${displayValue.value || 'Row'} updated successfully.`) // trim the display value if greater than 20chars
const trimmedDisplayValue =
displayValue.value && displayValue.value?.length > 20 ? `${displayValue.value?.substring(0, 20)}...` : displayValue.value
message.success(`${trimmedDisplayValue || 'Row'} updated successfully.`)
changedColumns.value = new Set() changedColumns.value = new Set()
} catch (e: any) { } catch (e: any) {

Loading…
Cancel
Save