From 46c857811dafe10a7ad7050886aee46a3141d358 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 12 Sep 2022 14:24:50 +0800
Subject: [PATCH] feat(nc-gui): revise kanban styles & apply windicss

---
 .../nc-gui/components/smartsheet/Kanban.vue   | 228 +++++++++---------
 1 file changed, 110 insertions(+), 118 deletions(-)

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