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

feat(nc-gui): kanban style

pull/3818/head
Wing-Kam Wong 2 years ago
parent
a03d52b325
commit
59c777d30e
7 changed files with 30 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      packages/nc-gui/components/cell/Decimal.vue
  2. 4
      packages/nc-gui/components/cell/Float.vue
  3. 4
      packages/nc-gui/components/cell/Integer.vue
  4. 9
      packages/nc-gui/components/cell/MultiSelect.vue
  5. 9
      packages/nc-gui/components/cell/SingleSelect.vue
  6. 9
      packages/nc-gui/components/smartsheet-header/Cell.vue
  7. 9
      packages/nc-gui/components/smartsheet/Kanban.vue

4
packages/nc-gui/components/cell/Decimal.vue
Unescape View File

@ -27,12 +27,12 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
v-if="editEnabled"
:ref="focus"
v-model="vModel"
class="outline-none p-0 border-none w-full h-full prose-sm"
class="outline-none p-0 border-none w-full h-full text-sm"
type="number"
step="0.1"
@blur="editEnabled = false"
/>
<span v-else class="prose-sm">{{ vModel }}</span>
<span v-else class="text-sm">{{ vModel }}</span>
</template>
<style scoped lang="scss">

4
packages/nc-gui/components/cell/Float.vue
Unescape View File

@ -27,12 +27,12 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
v-if="editEnabled"
:ref="focus"
v-model="vModel"
class="outline-none p-0 border-none w-full h-full prose-sm"
class="outline-none p-0 border-none w-full h-full text-sm"
type="number"
step="0.1"
@blur="editEnabled = false"
/>
<span v-else class="prose-sm">{{ vModel }}</span>
<span v-else class="text-sm">{{ vModel }}</span>
</template>
<style scoped lang="scss">

4
packages/nc-gui/components/cell/Integer.vue
Unescape View File

@ -31,12 +31,12 @@ function onKeyDown(evt: KeyboardEvent) {
v-if="editEnabled"
:ref="focus"
v-model="vModel"
class="outline-none p-0 border-none w-full h-full prose-sm"
class="outline-none p-0 border-none w-full h-full text-sm"
type="number"
@blur="editEnabled = false"
@keydown="onKeyDown"
/>
<span v-else class="prose-sm">{{ vModel }}</span>
<span v-else class="text-sm">{{ vModel }}</span>
</template>
<style scoped lang="scss">

9
packages/nc-gui/components/cell/MultiSelect.vue
Unescape View File

@ -4,6 +4,7 @@ import type { SelectOptionsType } from 'nocodb-sdk'
import {
ActiveCellInj,
ColumnInj,
IsKanbanInj,
ReadonlyInj,
computed,
h,
@ -38,6 +39,8 @@ const aselect = ref<typeof AntSelect>()
const isOpen = ref(false)
const isKanban = inject(IsKanbanInj, ref(false))
const options = computed<SelectOptionsType[]>(() => {
if (column?.value.colOptions) {
const opts = column.value.colOptions
@ -140,7 +143,7 @@ watch(isOpen, (n, _o) => {
>
<a-select-option v-for="op of options" :key="op.id" :value="op.title" @click.stop>
<a-tag class="rounded-tag" :color="op.color">
<span class="text-slate-500">{{ op.title }}</span>
<span class="text-slate-500" :class="{ 'text-sm': isKanban }">{{ op.title }}</span>
</a-tag>
</a-select-option>
<template #tagRender="{ value: val, onClose }">
@ -153,7 +156,7 @@ watch(isOpen, (n, _o) => {
:close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
@close="onClose"
>
<span class="w-full text-slate-500">{{ val }}</span>
<span class="w-full text-slate-500" :class="{ 'text-sm': isKanban }">{{ val }}</span>
</a-tag>
</template>
</a-select>
@ -187,7 +190,7 @@ watch(isOpen, (n, _o) => {
border-radius: 12px;
}
:deep(.ant-tag) {
@apply "rounded-tag";
@apply "rounded-tag" my-[2px];
}
:deep(.ant-tag-close-icon) {
@apply "text-slate-500";

9
packages/nc-gui/components/cell/SingleSelect.vue
Unescape View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { Select as AntSelect } from 'ant-design-vue'
import type { SelectOptionsType } from 'nocodb-sdk'
import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
interface Props {
modelValue?: string | undefined
@ -21,6 +21,8 @@ const aselect = ref<typeof AntSelect>()
const isOpen = ref(false)
const isKanban = inject(IsKanbanInj, ref(false))
const vModel = computed({
get: () => modelValue,
set: (val) => emit('update:modelValue', val || null),
@ -80,7 +82,7 @@ watch(isOpen, (n, _o) => {
>
<a-select-option v-for="op of options" :key="op.title" :value="op.title" @click.stop>
<a-tag class="rounded-tag" :color="op.color">
<span class="text-slate-500">{{ op.title }}</span>
<span class="text-slate-500" :class="{ 'text-sm': isKanban }">{{ op.title }}</span>
</a-tag>
</a-select-option>
</a-select>
@ -88,8 +90,7 @@ watch(isOpen, (n, _o) => {
<style scoped lang="scss">
.rounded-tag {
padding: 0px 12px;
border-radius: 12px;
@apply py-0 px-[12px] rounded-[12px];
}
:deep(.ant-tag) {
@apply "rounded-tag";

9
packages/nc-gui/components/smartsheet-header/Cell.vue
Unescape View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import { ColumnInj, IsFormInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
import { ColumnInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean | number; hideMenu?: boolean }>()
@ -8,6 +8,8 @@ const hideMenu = toRef(props, 'hideMenu')
const isForm = inject(IsFormInj, ref(false))
const isKanban = inject(IsKanbanInj, ref(false))
const column = toRef(props, 'column')
const { isUIAllowed } = useUIPermission()
@ -18,7 +20,10 @@ const editColumnDropdown = ref(false)
</script>
<template>
<div class="flex items-center w-full text-xs text-gray-500 font-weight-medium" :class="{ 'h-full': column }">
<div
class="flex items-center w-full text-xs text-gray-500 font-weight-medium"
:class="{ 'h-full': column, '!text-gray-400': isKanban }"
>
<SmartsheetHeaderCellIcon v-if="column" />
<span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
<span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>

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

@ -329,7 +329,7 @@ onMounted(async () => {
class="flex flex-col rounded-lg w-full"
>
<div v-if="!isRowEmpty(record, col)" class="flex flex-row w-full justify-start pt-2">
<div class="w-full text-gray-600">
<div class="w-full text-gray-400">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
</div>
@ -337,17 +337,19 @@ onMounted(async () => {
<div
v-if="!isRowEmpty(record, col)"
class="flex flex-row w-full items-center justify-start"
:class="{ 'pt-2 pl-2': col.uidt !== UITypes.SingleSelect }"
:class="{ 'pt- pl-2': col.uidt !== UITypes.SingleSelect }"
>
<LazySmartsheetVirtualCell
v-if="isVirtualCol(col)"
v-model="record.row[col.title]"
class="text-sm pt-1"
:column="col"
:row="record"
/>
<LazySmartsheetCell
v-else
v-model="record.row[col.title]"
class="text-sm pt-1"
:column="col"
:edit-enabled="false"
:read-only="true"
@ -364,6 +366,7 @@ onMounted(async () => {
<a-layout-footer>
<div v-if="formattedData[stack.title] && countByStack[stack.title] >= 0" class="mt-5 text-center">
<mdi-plus
v-if="!isPublic"
class="text-pint-500 text-lg text-primary cursor-pointer"
@click="openNewRecordFormHook.trigger(stack.title === 'uncategorized' ? null : stack.title)"
/>
@ -387,7 +390,7 @@ onMounted(async () => {
>
<div class="items-center justify-between" @click="handleCollapseStack(stackIdx)">
<a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="!w-[150px] pl-5" :paragraph="false" />
<div v-else class="nc-kanban-data-count mt-[7px] mx-[10px]">
<div v-else class="nc-kanban-data-count mt-[12px] mx-[10px]">
<div class="float-right flex gap-2 items-center cursor-pointer font-bold">
<LazyGeneralTruncateText>{{ stack.title }}</LazyGeneralTruncateText>
<mdi-menu-down class="text-grey text-lg" />

Write Preview
Loading…
Cancel
Save