Browse Source

chore(gui-v2): update attachment cell styles

pull/2972/head
braks 2 years ago
parent
commit
629838c874
  1. 4
      packages/nc-gui-v2/components/cell/attachment/Modal.vue
  2. 102
      packages/nc-gui-v2/components/cell/attachment/index.vue

4
packages/nc-gui-v2/components/cell/attachment/Modal.vue

@ -70,10 +70,10 @@ onKeyDown('Escape', () => {
<div
v-if="!isReadonly && !dragging"
:class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-blue-100/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-gray-700/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
<div class="text-3xl text-primary">Drop here</div>
<div class="text-white text-3xl">Drop here</div>
</div>
<div ref="sortableRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">

102
packages/nc-gui-v2/components/cell/attachment/index.vue

@ -60,78 +60,76 @@ onKeyDown('Escape', () => {
</script>
<template>
<div ref="dropZoneRef" class="nc-attachment-cell flex-1 color-transition flex items-center justify-between gap-1">
<div ref="dropZoneRef" class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
<Carousel />
<template v-if="!isReadonly && !dragging && isOverDropZone">
<div
class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gray-700/75 text-white"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
</div>
</template>
<template v-else>
<div
v-if="!isReadonly"
:class="{ 'mx-auto px-4': !visibleItems.length }"
class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
@click.stop="open"
>
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<div
v-if="!isReadonly"
:class="{ 'mx-auto px-4': !visibleItems.length }"
class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
@click.stop="open"
>
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<a-tooltip v-else placement="bottom">
<template #title> Click or drop a file into cell </template>
<a-tooltip v-else placement="bottom">
<template #title> Click or drop a file into cell </template>
<div class="flex items-center gap-2">
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
<div class="flex items-center gap-2">
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
<div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div>
</div>
</a-tooltip>
</div>
<div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div>
</div>
</a-tooltip>
</div>
<template v-if="visibleItems.length">
<template v-if="visibleItems.length">
<div
ref="sortableRef"
:class="{ dragging }"
class="flex gap-2 py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
>
<div
ref="sortableRef"
:class="{ dragging }"
class="h-full w-full flex flex-wrap flex-col gap-2 content-start py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
v-for="(item, i) of visibleItems"
:id="item.url"
:key="item.url || item.title"
class="nc-attachment flex-auto flex items-center justify-center min-w-[45px] w-[45px] border-1"
>
<div
v-for="(item, i) of visibleItems"
:id="item.url"
:key="item.url || item.title"
class="nc-attachment flex-auto flex items-center justify-center w-[45px] border-1"
>
<a-tooltip placement="bottom">
<template #title>
<div class="text-center w-full">{{ item.title }}</div>
</template>
<img
v-if="isImage(item.title, item.mimetype)"
:alt="item.title || `#${i}`"
:src="item.url || item.data"
@click="selectImage(item)"
/>
<component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
<IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
</a-tooltip>
</div>
</div>
<a-tooltip placement="bottom">
<template #title>
<div class="text-center w-full">{{ item.title }}</div>
</template>
<div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<img
v-if="isImage(item.title, item.mimetype)"
:alt="item.title || `#${i}`"
:src="item.url || item.data"
@click="selectImage(item)"
/>
<a-tooltip v-else placement="bottom">
<template #title> View attachments </template>
<component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
<MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" />
<IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
</a-tooltip>
</div>
</template>
</div>
<div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10">
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<a-tooltip v-else placement="bottom">
<template #title> View attachments </template>
<MaterialArrowExpandIcon class="transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" />
</a-tooltip>
</div>
</template>
<Modal />

Loading…
Cancel
Save