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

feat(gui-v2): add flipping card to sidebar

pull/2837/head
braks 2 years ago
parent
033dfaba0b
commit
960fc6fec6
1 changed files with 132 additions and 111 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. 243
      packages/nc-gui-v2/components/smartsheet/Sidebar.vue

243
packages/nc-gui-v2/components/smartsheet/Sidebar.vue
Unescape View File

@ -22,6 +22,7 @@ import MdiTrashCan from '~icons/mdi/trash-can'
import MdiContentCopy from '~icons/mdi/content-copy' import MdiContentCopy from '~icons/mdi/content-copy'
import MdiXml from '~icons/mdi/xml' import MdiXml from '~icons/mdi/xml'
import MdiHook from '~icons/mdi/hook' import MdiHook from '~icons/mdi/hook'
import MdiHeartsCard from '~icons/mdi/cards-heart'
const meta = inject(MetaInj, ref()) const meta = inject(MetaInj, ref())
@ -274,144 +275,164 @@ function onApiSnippet() {
<template> <template>
<a-layout-sider class="shadow" :width="toggleDrawer ? 0 : 250"> <a-layout-sider class="shadow" :width="toggleDrawer ? 0 : 250">
<div class="flex flex-col h-full"> <a-menu class="h-full relative" :selected-keys="selected">
<a-menu class="flex-1" :selected-keys="selected"> <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
<h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
<a-menu-item
<a-menu-item v-for="(view, i) of views"
v-for="(view, i) of views" :key="view.id"
:key="view.id" class="group !flex !items-center !h-[30px]"
class="group !flex !items-center !h-[30px]" @dblclick="onDblClick(i)"
@dblclick="onDblClick(i)" @click="onClick(view)"
@click="onClick(view)" >
> <div v-t="['a:view:open', { view: view.type }]" class="text-xs flex items-center w-full gap-2">
<div v-t="['a:view:open', { view: view.type }]" class="text-xs flex items-center w-full gap-2"> <component :is="viewIcons[view.type].icon" :class="`text-${viewIcons[view.type].color}`" />
<component :is="viewIcons[view.type].icon" :class="`text-${viewIcons[view.type].color}`" />
<a-input
<a-input v-if="isEditing === i"
v-if="isEditing === i" :ref="setInputRef"
:ref="setInputRef" v-model:value="view.title"
v-model:value="view.title" @blur="onCancel(i)"
@blur="onCancel(i)" @keydown="onKeyDown($event, i)"
@keydown="onKeyDown($event, i)" />
/> <div v-else>{{ view.alias || view.title }}</div>
<div v-else>{{ view.alias || view.title }}</div>
<div class="flex-1" />
<div class="flex-1" />
<template v-if="isEditing !== i">
<template v-if="isEditing !== i"> <div class="flex items-center gap-1">
<div class="flex items-center gap-1"> <a-tooltip placement="left">
<template #title>
{{ $t('activity.copyView') }}
</template>
<MdiContentCopy class="hidden group-hover:block text-gray-500" @click.stop="onDuplicate(i)" />
</a-tooltip>
<a-popconfirm
placement="left"
:title="$t('msg.info.deleteProject')"
:ok-text="$t('general.yes')"
:cancel-text="$t('general.no')"
@confirm="onDelete(i)"
>
<a-tooltip placement="left"> <a-tooltip placement="left">
<template #title> <template #title>
{{ $t('activity.copyView') }} {{ $t('activity.deleteView') }}
</template> </template>
<MdiContentCopy class="hidden group-hover:block text-gray-500" @click.stop="onDuplicate(i)" /> <MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop />
</a-tooltip> </a-tooltip>
</a-popconfirm>
</div>
</template>
</div>
</a-menu-item>
<a-popconfirm <a-divider class="my-2" />
placement="left"
:title="$t('msg.info.deleteProject')"
:ok-text="$t('general.yes')"
:cancel-text="$t('general.no')"
@confirm="onDelete(i)"
>
<a-tooltip placement="left">
<template #title>
{{ $t('activity.deleteView') }}
</template>
<MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop />
</a-tooltip>
</a-popconfirm>
</div>
</template>
</div>
</a-menu-item>
<a-divider class="my-2" />
<h3 class="px-3 text-xs font-semibold">{{ $t('activity.createView') }}</h3> <h3 class="px-3 text-xs font-semibold">{{ $t('activity.createView') }}</h3>
<a-menu-item key="grid" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GRID)"> <a-menu-item key="grid" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GRID)">
<a-tooltip placement="left"> <a-tooltip placement="left">
<template #title> <template #title>
{{ $t('msg.info.addView.grid') }} {{ $t('msg.info.addView.grid') }}
</template> </template>
<div class="text-xs flex items-center h-full w-full gap-2"> <div class="text-xs flex items-center h-full w-full gap-2">
<component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" /> <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" />
<div>{{ $t('objects.viewType.grid') }}</div> <div>{{ $t('objects.viewType.grid') }}</div>
<div class="flex-1" /> <div class="flex-1" />
<MdiPlusIcon class="group-hover:text-primary" /> <MdiPlusIcon class="group-hover:text-primary" />
</div> </div>
</a-tooltip> </a-tooltip>
</a-menu-item> </a-menu-item>
<a-menu-item key="gallery" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GALLERY)"> <a-menu-item key="gallery" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GALLERY)">
<a-tooltip placement="left"> <a-tooltip placement="left">
<template #title> <template #title>
{{ $t('msg.info.addView.gallery') }} {{ $t('msg.info.addView.gallery') }}
</template> </template>
<div class="text-xs flex items-center h-full w-full gap-2"> <div class="text-xs flex items-center h-full w-full gap-2">
<component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" /> <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" />
<div>{{ $t('objects.viewType.gallery') }}</div> <div>{{ $t('objects.viewType.gallery') }}</div>
<div class="flex-1" /> <div class="flex-1" />
<MdiPlusIcon class="group-hover:text-primary" /> <MdiPlusIcon class="group-hover:text-primary" />
</div> </div>
</a-tooltip> </a-tooltip>
</a-menu-item> </a-menu-item>
<a-menu-item v-if="!isView" key="form" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.FORM)"> <a-menu-item v-if="!isView" key="form" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.FORM)">
<a-tooltip placement="left"> <a-tooltip placement="left">
<template #title> <template #title>
{{ $t('msg.info.addView.form') }} {{ $t('msg.info.addView.form') }}
</template> </template>
<div class="text-xs flex items-center h-full w-full gap-2"> <div class="text-xs flex items-center h-full w-full gap-2">
<component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" /> <component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" />
<div>{{ $t('objects.viewType.form') }}</div> <div>{{ $t('objects.viewType.form') }}</div>
<div class="flex-1" /> <div class="flex-1" />
<MdiPlusIcon class="group-hover:text-primary" /> <MdiPlusIcon class="group-hover:text-primary" />
</div> </div>
</a-tooltip> </a-tooltip>
</a-menu-item> </a-menu-item>
<div class="flex flex-col gap-4 mt-8"> <div class="flex flex-col gap-4 mt-8">
<button <button
class="flex items-center gap-2 w-full mx-3 p-4 rounded bordered !bg-primary text-white transform translate-x-4 hover:translate-x-0 transition duration-150 ease" class="flex items-center gap-2 w-full mx-3 p-4 rounded bordered !bg-primary text-white transform translate-x-4 hover:translate-x-0 transition duration-150 ease"
@click="onApiSnippet" @click="onApiSnippet"
> >
<MdiXml />Get API Snippet <MdiXml />Get API Snippet
</button> </button>
<button <button
class="flex items-center gap-2 w-full mx-3 p-4 rounded border-1 border-solid border-black transform translate-x-4 hover:translate-x-0 transition duration-150 ease" class="flex items-center gap-2 w-full mx-3 p-4 rounded border-1 border-solid border-black transform translate-x-4 hover:translate-x-0 transition duration-150 ease"
@click="onApiSnippet" @click="onApiSnippet"
> >
<MdiHook />{{ $t('objects.webhooks') }} <MdiHook />{{ $t('objects.webhooks') }}
</button> </button>
</div> </div>
<general-flipping-card class="my-4 h-[250px] w-[250px]"> <general-flipping-card class="my-4 h-[250px] w-[250px]" :triggers="['click', { duration: 15000 }]">
<template #front> <template #front>
<div class="flex h-full w-full gap-6 flex-col">
<general-social /> <general-social />
<a v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank"> 🚀 We are Hiring! 🚀 </a> <div>
</template> <a
</general-flipping-card> v-t="['e:hiring']"
</a-menu> class="p-4 bg-primary/75 rounded accent-pink-500 shadow bordered border-primary text-white"
</div> href="https://angel.co/company/nocodb"
target="_blank"
>
🚀 We are Hiring! 🚀
</a>
</div>
</div>
</template>
<template #back>
<a
href="https://github.com/sponsors/nocodb"
target="_blank"
class="flex items-center gap-2 w-full mx-3 p-4 rounded bordered !bg-primary text-white transform translate-x-4 hover:translate-x-0 transition duration-150 ease"
>
<MdiHeartsCard class="text-red-500" />
{{ $t('activity.sponsorUs') }}
</a>
</template>
</general-flipping-card>
</a-menu>
<DlgViewCreate v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" /> <DlgViewCreate v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" />
</a-layout-sider> </a-layout-sider>

Write Preview
Loading…
Cancel
Save