github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
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
4d407c5a40 ed78f5ec6d
commit
27c8b08ae4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

@ -64,6 +64,8 @@ const {
const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, _isReadonly) const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, _isReadonly)
const active = inject(ActiveCellInj, ref(false))
const isReadonly = computed(() => { const isReadonly = computed(() => {
return isLockedMode.value || _isReadonly.value return isLockedMode.value || _isReadonly.value
}) })
@ -147,7 +149,8 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
:style="{ :style="{
height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`, 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 /> <LazyCellAttachmentCarousel />
@ -166,20 +169,19 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
<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 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" data-testid="attachment-cell-file-picker-button"
@click.stop="open" @click.stop="open"
> >
<component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> <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> <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 <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]"
/> />
<div <div
v-if="!visibleItems.length" v-if="!visibleItems.length"
class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs" 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) Add file(s)
</div> </div>
</div> </div>
</a-tooltip> </NcTooltip>
</div> </div>
<div v-else class="flex" /> <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"> <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
<a-tooltip placement="bottom"> <NcTooltip placement="bottom">
<template #title> <template #title>
<div class="text-center w-full">{{ item.title }}</div> <div class="text-center w-full">{{ item.title }}</div>
</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" :class="{'ml-2':active}" @click.stop="selectedImage = item">
<LazyCellAttachmentImage <LazyCellAttachmentImage
class="max-h-[1.8rem] max-w-[1.8rem]" class="max-h-[1.8rem] max-w-[1.8rem]"
:alt="item.title || `#${i}`" :alt="item.title || `#${i}`"
@ -215,29 +217,30 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
/> />
</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" :class="{'ml-2':active}" @click="openAttachment(item)">
<component :is="FileIcon(item.icon)" v-if="item.icon" /> <component :is="FileIcon(item.icon)" v-if="item.icon" />
<IcOutlineInsertDriveFile v-else /> <IcOutlineInsertDriveFile v-else />
</div> </div>
</a-tooltip> </NcTooltip>
</template> </template>
</div> </div>
<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 }" /> <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> <template #title> View attachments</template>
<component <component
:is="iconMap.expand" :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" @click.stop="modalVisible = true"
/> />
</a-tooltip> </NcTooltip>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save