github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

chore(gui-v2): update attachment cell styles

pull/2972/head
braks 2 years ago
parent
72172bf6cf
commit
629838c874
2 changed files with 52 additions and 54 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. 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
Unescape View File

@ -70,10 +70,10 @@ onKeyDown('Escape', () => {
<div <div
v-if="!isReadonly && !dragging" v-if="!isReadonly && !dragging"
:class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']" :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" /> <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>
<div ref="sortableRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6"> <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
Unescape View File

@ -60,78 +60,76 @@ onKeyDown('Escape', () => {
</script> </script>
<template> <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 /> <Carousel />
<template v-if="!isReadonly && !dragging && isOverDropZone"> <template v-if="!isReadonly && !dragging && isOverDropZone">
<div <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 <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
</div> </div>
</template> </template>
<template v-else> <div
<div v-if="!isReadonly"
v-if="!isReadonly" :class="{ 'mx-auto px-4': !visibleItems.length }"
: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"
class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10" @click.stop="open"
@click.stop="open" >
> <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<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-2">
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" /> <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 v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div>
</div> </div>
</a-tooltip> </a-tooltip>
</div> </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 <div
ref="sortableRef" v-for="(item, i) of visibleItems"
:class="{ dragging }" :id="item.url"
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" :key="item.url || item.title"
class="nc-attachment flex-auto flex items-center justify-center min-w-[45px] w-[45px] border-1"
> >
<div <a-tooltip placement="bottom">
v-for="(item, i) of visibleItems" <template #title>
:id="item.url" <div class="text-center w-full">{{ item.title }}</div>
:key="item.url || item.title" </template>
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>
<div class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"> <img
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> 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"> <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
<template #title> View attachments </template>
<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> </a-tooltip>
</div> </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> </template>
<Modal /> <Modal />

Write Preview
Loading…
Cancel
Save