clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-04-25 02:55:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use css variables

Browse Source
This commit is contained in:
Amit Joki
2025-01-11 23:09:07 +05:30
parent 62a7844a1b
commit 691909ce3d
4 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/nc-gui/components/virtual-cell/QrCode.vue
View File

@@ -43,13 +43,14 @@ const qrCodeLarge = useQRCode(qrValue, {
const modalVisible = ref(false)
const showQrModal = (ev?: Event) => {
if (!showQrCode.value) return
ev?.stopPropagation()
modalVisible.value = true
}
const handleModalOkClick = () => (modalVisible.value = false)
const { metaColumnById } = useViewColumnsOrThrow()
const meta = inject(MetaInj)
const valueFieldId = computed(() => column?.value.colOptions?.fk_qr_value_column_id)
const { showClearNonEditableFieldWarning } = useShowNotEditableWarning({ onEnter: showQrModal })
@@ -82,12 +83,12 @@ const copyAsPng = async () => {
<template #title>
<div class="flex gap-2 items-center w-full">
<h1 class="font-weight-700 m-0">{{ column?.title }}</h1>
<div class="h-5 px-1 bg-[#e7e7e9] rounded-md justify-center items-center flex">
<component :is="cellIcon(metaColumnById?.[valueFieldId])" class="h-4" />
<div class="text-[#4a5268] text-sm font-medium">{{ metaColumnById?.[valueFieldId]?.title }}</div>
<div class="h-5 px-1 bg-nc-bg-gray-medium text-nc-content-gray-subtle2 rounded-md justify-center items-center flex">
<component :is="cellIcon(meta?.columnsById?.[valueFieldId])" class="h-4" />
<div class="text-sm font-medium">{{ meta?.columnsById?.[valueFieldId]?.title }}</div>
</div>
<div class="flex-1"></div>
<NcButton class="nc-qrcode-close !w-7 !h-7" type="text" size="xsmall" @click="modalVisible = false">
<NcButton class="nc-qrcode-close !px-1" type="text" size="xs" @click="modalVisible = false">
<GeneralIcon class="text-md text-gray-700 h-4 w-4" icon="close" />
</NcButton>
</div>

19
packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
View File

@@ -11,7 +11,7 @@ const column = inject(ColumnInj)
const barcodeValue: ComputedRef<string> = computed(() => String(cellValue?.value ?? ''))
const { metaColumnById } = useViewColumnsOrThrow()
const meta = inject(MetaInj)
const valueFieldId = computed(() => column?.value.colOptions?.fk_barcode_value_column_id)
const tooManyCharsForBarcode = computed(() => barcodeValue.value.length > maxNumberOfAllowedCharsForBarcodeValue)
@@ -20,10 +20,6 @@ const modalVisible = ref(false)
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
const showBarcodeModal = () => {
modalVisible.value = true
}
const barcodeMeta = computed(() => {
return {
barcodeFormat: 'CODE128',
@@ -37,6 +33,11 @@ const showBarcode = computed(
() => barcodeValue?.value.length > 0 && !tooManyCharsForBarcode.value && barcodeValue?.value !== 'ERR!',
)
const showBarcodeModal = () => {
if (!showBarcode.value) return
modalVisible.value = true
}
const { showClearNonEditableFieldWarning } = useShowNotEditableWarning({ onEnter: showBarcodeModal })
const rowHeight = inject(RowHeightInj, ref(undefined))
@@ -59,12 +60,12 @@ const cellIcon = (column: ColumnType) =>
<template #title>
<div class="flex gap-2 items-center w-full">
<h1 class="font-weight-700 m-0">{{ column?.title }}</h1>
<div class="h-5 px-1 bg-[#e7e7e9] rounded-md justify-center items-center flex">
<component :is="cellIcon(metaColumnById?.[valueFieldId])" class="h-4" />
<div class="text-[#4a5268] text-sm font-medium">{{ metaColumnById?.[valueFieldId]?.title }}</div>
<div class="h-5 px-1 bg-nc-bg-gray-medium text-nc-content-gray-subtle2 rounded-md justify-center items-center flex">
<component :is="cellIcon(meta?.columnsById?.[valueFieldId])" class="h-4" />
<div class="text-sm font-medium">{{ meta?.columnsById?.[valueFieldId]?.title }}</div>
</div>
<div class="flex-1"></div>
<NcButton class="nc-barcode-close !w-7 !h-7" type="text" size="xsmall" @click="modalVisible = false">
<NcButton class="nc-barcode-close !px-1" type="text" size="xs" @click="modalVisible = false">
<GeneralIcon class="text-md text-gray-700 h-4 w-4" icon="close" />
</NcButton>
</div>

3
packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
View File

@@ -75,8 +75,7 @@ onMounted(generate)
'mt-8 mb-4': showDownload,
}"
data-testid="barcode"
:data-barcode-value="barcodeValue"
@click="onBarcodeClick"
@click="onBarcodeClick"
></svg>
<slot v-if="errorForCurrentInput" name="barcodeRenderError" />
<div v-if="props.showDownload" class="flex justify-end gap-2 py-2 px-3">

4
tests/playwright/pages/Dashboard/BarcodeOverlay/index.ts
View File

@@ -15,8 +15,8 @@ export class BarcodeOverlay extends BasePage {
}
async verifyBarcodeSvgValue(expectedValue: string) {
const foundBarcodeSvg = await this.get().getByTestId('barcode');
await expect(foundBarcodeSvg).toHaveAttribute('data-barcode-value', expectedValue);
const foundBarcodeSvg = await this.get().getByTestId('barcode').innerHTML();
expect(foundBarcodeSvg).toContain(expectedValue);
}
async clickCloseButton() {