Browse Source

Merge pull request #6286 from nocodb/fix-expand-icon

fix(nc-gui): expand icon made visible on click
pull/6317/head
Raju Udava 1 year ago committed by GitHub
parent
commit
27c8b08ae4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 30
      packages/nc-gui/components/cell/TextArea.vue
  2. 31
      packages/nc-gui/components/cell/attachment/index.vue

30
packages/nc-gui/components/cell/TextArea.vue

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, IsExpandedFormOpenInj, RowHeightInj, inject, useVModel } from '#imports'
import { EditModeInj, IsExpandedFormOpenInj, RowHeightInj, inject, useVModel, iconMap, ActiveCellInj } from '#imports'
const props = defineProps<{
modelValue?: string | number
@ -32,6 +32,8 @@ const isVisible = ref(false)
const inputWrapperRef = ref<HTMLElement | null>(null)
const inputRef = ref<HTMLTextAreaElement | null>(null)
const active = inject(ActiveCellInj, ref(false))
watch(isVisible, () => {
if (isVisible.value) {
setTimeout(() => {
@ -86,21 +88,21 @@ onClickOutside(inputWrapperRef, (e) => {
<span v-else>{{ vModel }}</span>
<NcButton
class="!absolute right-0 bottom-0 nc-long-text-toggle-expand !duration-0"
:class="{
'top-1': rowHeight !== 1,
'mt-2': editEnabled,
'top-0.15': rowHeight === 1,
'!hidden': isExpandedFormOpen,
}"
type="text"
size="xsmall"
<div
v-if="active"
class="!absolute right-0 bottom-0 h-6 w-5 group cursor-pointer flex justify-end gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
:class="{'right-2 bottom-2':editEnabled}"
data-testid="attachment-cell-file-picker-button"
@click.stop="isVisible = !isVisible"
>
<GeneralIcon v-if="isVisible" icon="shrink" class="nc-long-text-toggle-expand h-3.75 w-3.75 !text-xs" />
<GeneralIcon v-else icon="expand" class="nc-long-text-toggle-expand h-3.75 w-3.75 !text-xs" />
</NcButton>
<NcTooltip placement="bottom">
<template #title>Expand</template>
<component
:is="iconMap.expand"
class="transform dark:(!text-white) group-hover:(!text-grey-800 scale-120) text-gray-500 text-xs"
/>
</NcTooltip>
</div>
</div>
<template #overlay>
<div ref="inputWrapperRef" class="flex flex-col min-w-120 min-h-70 py-3 pl-3 pr-1 expanded-cell-input">

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

@ -64,6 +64,8 @@ const {
const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, _isReadonly)
const active = inject(ActiveCellInj, ref(false))
const isReadonly = computed(() => {
return isLockedMode.value || _isReadonly.value
})
@ -147,7 +149,8 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
: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 color-transition flex items-center"
:class="{'justify-center': !active, 'justify-between': active}"
>
<LazyCellAttachmentCarousel />
@ -166,20 +169,19 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
<div
v-if="!isReadonly"
:class="{ 'mx-auto px-4': !visibleItems.length }"
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)"
class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
data-testid="attachment-cell-file-picker-button"
@click.stop="open"
>
<component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<a-tooltip v-else placement="bottom">
<NcTooltip placement="bottom">
<template #title> Click or drop a file into cell</template>
<div class="flex items-center gap-1">
<div v-if="active || !visibleItems.length" class="flex items-center gap-1">
<MaterialSymbolsAttachFile
class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
/>
<div
v-if="!visibleItems.length"
class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"
@ -187,7 +189,7 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
Add file(s)
</div>
</div>
</a-tooltip>
</NcTooltip>
</div>
<div v-else class="flex" />
@ -202,12 +204,12 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
}"
>
<template v-for="(item, i) of visibleItems" :key="item.url || item.title">
<a-tooltip placement="bottom">
<NcTooltip placement="bottom">
<template #title>
<div class="text-center w-full">{{ item.title }}</div>
</template>
<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" :class="{'ml-2':active}" @click.stop="selectedImage = item">
<LazyCellAttachmentImage
class="max-h-[1.8rem] max-w-[1.8rem]"
:alt="item.title || `#${i}`"
@ -215,29 +217,30 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
/>
</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" :class="{'ml-2':active}" @click="openAttachment(item)">
<component :is="FileIcon(item.icon)" v-if="item.icon" />
<IcOutlineInsertDriveFile v-else />
</div>
</a-tooltip>
</NcTooltip>
</template>
</div>
<div
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)"
v-if="active"
class="h-6 w-5 group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
>
<component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<a-tooltip v-else placement="bottom">
<NcTooltip v-else placement="bottom">
<template #title> View attachments</template>
<component
:is="iconMap.expand"
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-grey-800 scale-120) text-gray-500 text-[0.75rem]"
@click.stop="modalVisible = true"
/>
</a-tooltip>
</NcTooltip>
</div>
</template>

Loading…
Cancel
Save