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

feat(nc-gui): revise kanban styles & apply windicss

pull/3818/head
Wing-Kam Wong 2 years ago
parent
292998384d
commit
46c857811d
1 changed files with 110 additions and 118 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. 228
      packages/nc-gui/components/smartsheet/Kanban.vue

228
packages/nc-gui/components/smartsheet/Kanban.vue
Unescape View File

@ -130,7 +130,7 @@ openNewRecordFormHook?.on(async () => {
<template> <template>
<!-- TODO: add loading component when formattedData is not ready --> <!-- TODO: add loading component when formattedData is not ready -->
<div v-if="formattedData" class="flex h-full"> <div v-if="formattedData" class="flex h-full">
<div class="nc-kanban-container flex grid gap-2 my-4 px-3"> <div class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-auto">
<Draggable <Draggable
v-model="groupingFieldColOptions" v-model="groupingFieldColOptions"
class="flex gap-5" class="flex gap-5"
@ -139,99 +139,108 @@ openNewRecordFormHook?.on(async () => {
draggable=".nc-kanban-stack" draggable=".nc-kanban-stack"
> >
<template #item="{ element: stack }"> <template #item="{ element: stack }">
<a-card :key="stack.id" class="nc-kanban-stack mx-4" head-style="padding-bottom: 0px;" body-style="padding: 0px 20px;"> <a-card
<template #title> :key="stack.id"
<div class="nc-kanban-stack-head"> class="nc-kanban-stack mx-4 !bg-[#f0f2f5] flex flex-col min-w-[280px] h-full rounded-[12px]"
<span v-if="stack.order === 0" class="text-slate-500">{{ stack.title }}</span> head-style="padding-bottom: 0px;"
<a-tag v-else class="!px-[12px] !rounded-[12px]" :color="stack.color"> body-style="padding: 0px 20px; height: 100%;"
<span class="text-slate-500">{{ stack.title }}</span> >
</a-tag> <a-layout>
</div> <a-layout-header>
</template> <div class="nc-kanban-stack-head justify-center w-full items-center flex">
<div class="nc-kanban-list flex flex-col"> <div v-if="stack.order === 0" class="text-slate-500 font-bold">{{ stack.title }}</div>
<Draggable <div v-else>
v-model="formattedData[stack.title]" <a-tag class="!rounded-[12px]" :color="stack.color">
item-key="row.Id" <span class="text-slate-500">{{ stack.title }}</span>
draggable=".nc-kanban-item" </a-tag>
group="kanban-card" </div>
class="h-full" </div>
@change="onMove($event, stack.title)" </a-layout-header>
> <a-layout-content class="overflow-y-hidden">
<template #item="{ element: record }"> <div class="nc-kanban-list h-full overflow-y-auto">
<div class="nc-kanban-item py-2"> <Draggable
<Row :row="record"> v-model="formattedData[stack.title]"
<a-card item-key="row.Id"
hoverable draggable=".nc-kanban-item"
:data-stack="stack.title" group="kanban-card"
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]" class="h-full"
@click="expandFormClick($event, record)" @change="onMove($event, stack.title)"
> >
<!-- <template #cover> --> <template #item="{ element: record }">
<!-- <a-carousel --> <div class="nc-kanban-item py-2">
<!-- v-if="!reloadAttachments && attachments(record).length" --> <Row :row="record">
<!-- autoplay --> <a-card
<!-- class="gallery-carousel" --> hoverable
<!-- arrows --> :data-stack="stack.title"
<!-- > --> class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
<!-- <template #customPaging> --> @click="expandFormClick($event, record)"
<!-- <a> --> >
<!-- <div class="pt-[12px]"><div></div></div> --> <!-- <template #cover> -->
<!-- </a> --> <!-- <a-carousel -->
<!-- </template> --> <!-- v-if="!reloadAttachments && attachments(record).length" -->
<!-- <template #prevArrow> --> <!-- autoplay -->
<!-- <div style="z-index: 1"></div> --> <!-- class="gallery-carousel" -->
<!-- </template> --> <!-- arrows -->
<!-- <template #nextArrow> --> <!-- > -->
<!-- <div style="z-index: 1"></div> --> <!-- <template #customPaging> -->
<!-- </template> --> <!-- <a> -->
<!-- <img --> <!-- <div class="pt-[12px]"><div></div></div> -->
<!-- v-for="(attachment, index) in attachments(record)" --> <!-- </a> -->
<!-- :key="`carousel-${record.row.id}-${index}`" --> <!-- </template> -->
<!-- class="h-52" --> <!-- <template #prevArrow> -->
<!-- :src="attachment.url" --> <!-- <div style="z-index: 1"></div> -->
<!-- /> --> <!-- </template> -->
<!-- </a-carousel> --> <!-- <template #nextArrow> -->
<!-- </template> --> <!-- <div style="z-index: 1"></div> -->
<!-- </template> -->
<!-- <img -->
<!-- v-for="(attachment, index) in attachments(record)" -->
<!-- :key="`carousel-${record.row.id}-${index}`" -->
<!-- class="h-52" -->
<!-- :src="attachment.url" -->
<!-- /> -->
<!-- </a-carousel> -->
<!-- </template> -->
<div <div
v-for="col in fieldsWithoutCover" v-for="col in fieldsWithoutCover"
:key="`record-${record.row.id}-${col.id}`" :key="`record-${record.row.id}-${col.id}`"
class="flex flex-col space-y-1 px-2 mb-3 bg-gray-50 rounded-lg w-full" class="flex flex-col space-y-1 px-2 mb-3 bg-gray-50 rounded-lg w-full"
> >
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5"> <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
<div class="w-full text-gray-600"> <div class="w-full text-gray-600">
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" /> <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<SmartsheetHeaderCell v-else :column="col" :hide-menu="true" /> <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
</div> </div>
</div> </div>
<div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start"> <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
<div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div> <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
<template v-else> <template v-else>
<SmartsheetVirtualCell <SmartsheetVirtualCell
v-if="isVirtualCol(col)" v-if="isVirtualCol(col)"
v-model="record.row[col.title]" v-model="record.row[col.title]"
:column="col" :column="col"
:row="record" :row="record"
/> />
<SmartsheetCell <SmartsheetCell
v-else v-else
v-model="record.row[col.title]" v-model="record.row[col.title]"
:column="col" :column="col"
:edit-enabled="false" :edit-enabled="false"
:read-only="true" :read-only="true"
/> />
</template> </template>
</div> </div>
</div> </div>
</a-card> </a-card>
</Row> </Row>
</div> </div>
</template> </template>
</Draggable> </Draggable>
</div> </div>
<a-card-meta> </a-layout-content>
<template #description> <a-layout-footer>
<div class="mt-5 text-center"> <div class="mt-5 text-center">
<mdi-plus class="text-pint-500 text-lg text-primary cursor-pointer" @click="openNewRecordFormHook.trigger()" /> <mdi-plus class="text-pint-500 text-lg text-primary cursor-pointer" @click="openNewRecordFormHook.trigger()" />
<div class="nc-kanban-data-count"> <div class="nc-kanban-data-count">
@ -239,8 +248,8 @@ openNewRecordFormHook?.on(async () => {
{{ formattedData[stack.title]?.length !== 1 ? $t('objects.records') : $t('objects.record') }} {{ formattedData[stack.title]?.length !== 1 ? $t('objects.records') : $t('objects.record') }}
</div> </div>
</div> </div>
</template> </a-layout-footer>
</a-card-meta> </a-layout>
</a-card> </a-card>
</template> </template>
</Draggable> </Draggable>
@ -257,31 +266,14 @@ openNewRecordFormHook?.on(async () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
// TODO: windicss // override ant design style
.nc-kanban-container { .a-layout,
overflow-x: scroll; .ant-layout-header,
overflow-y: hidden; .ant-layout-content {
display: flex; @apply !bg-[#f0f2f5];
}
.nc-kanban-stack-head {
display: flex;
align-items: center;
width: 100%;
}
.nc-kanban-stack {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 12px;
height: 100%;
min-width: 280px;
display: flex;
flex-direction: column;
} }
.nc-kanban-list { .ant-layout-header {
overflow-y: scroll; @apply !h-[64px];
min-height: 500px;
height: 520px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save