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

fix/Fixed dark mode styling bug with edit column and styling issues with toggle comments button

pull/2582/head
Muhammed Mustafa 2 years ago
parent
8b863ca3d8
commit
ce7ff76e94
2 changed files with 151 additions and 135 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. 277
      packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
  2. 9
      packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue

277
packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
Unescape View File

@ -46,9 +46,13 @@
<v-row> <v-row>
<v-col v-if="relation" cols="12"> <v-col v-if="relation" cols="12">
<div class="caption"> <div class="caption">
<p class="mb-1">Foreign Key</p> <p class="mb-1">
Foreign Key
</p>
<v-icon small class="mt-n1"> mdi-table </v-icon> <v-icon small class="mt-n1">
mdi-table
</v-icon>
<span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span> <span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span>
<v-icon <v-icon
v-ge="['columns', 'fk-delete']" v-ge="['columns', 'fk-delete']"
@ -71,7 +75,7 @@
item-value="name" item-value="name"
item-text="name" item-text="name"
class="caption ui-type nc-ui-dt-dropdown" class="caption ui-type nc-ui-dt-dropdown"
:class="{ 'primary lighten-5': newColumn.uidt }" :class="{ 'primary lighten-5': newColumn.uidt && !isDark }"
:label="$t('labels.columnType')" :label="$t('labels.columnType')"
dense dense
outlined outlined
@ -80,10 +84,15 @@
> >
<template #selection="{ item }"> <template #selection="{ item }">
<div> <div>
<v-icon color="grey darken-4" small class="mr-1"> <v-icon color="isDark? 'white'? 'grey darken-4'" small class="mr-1">
{{ item.icon }} {{ item.icon }}
</v-icon> </v-icon>
<span class="caption grey--text text--darken-4"> {{ item.name }}</span> <span
class="caption"
:class="{ 'grey--text text--darken-4': !isDark }"
>
{{ item.name }}
</span>
</div> </div>
</template> </template>
@ -120,7 +129,9 @@
outlined outlined
> >
<template #prepend> <template #prepend>
<v-icon small class="mx-2" color="warning"> mdi-alert-outline </v-icon> <v-icon small class="mx-2" color="warning">
mdi-alert-outline
</v-icon>
</template> </template>
Changing MultiSelect to SingleSelect can lead to errors when there are multiple values associated Changing MultiSelect to SingleSelect can lead to errors when there are multiple values associated
with a cell with a cell
@ -145,7 +156,9 @@
@click="advanceOptions = !advanceOptions" @click="advanceOptions = !advanceOptions"
> >
{{ advanceOptions ? $t('general.hideAll') : $t('general.showMore') }} {{ advanceOptions ? $t('general.hideAll') : $t('general.showMore') }}
<v-icon x-small color="grey"> mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline </v-icon> <v-icon x-small color="grey">
mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline
</v-icon>
</div> </div>
</v-col> </v-col>
@ -420,7 +433,7 @@
<div class="disabled-info" :class="{ 'd-none': !isEditDisabled }"> <div class="disabled-info" :class="{ 'd-none': !isEditDisabled }">
<v-alert dense type="warning" icon="info" class="caption mx-2" outlined> <v-alert dense type="warning" icon="info" class="caption mx-2" outlined>
This spreadsheet is connected to an SQLite DB.<br /> This spreadsheet is connected to an SQLite DB.<br>
For production please see For production please see
<a href="https://github.com/nocodb/nocodb#production-setup" target="_blank">here</a>. <a href="https://github.com/nocodb/nocodb#production-setup" target="_blank">here</a>.
</v-alert> </v-alert>
@ -452,23 +465,23 @@
</template> </template>
<script> <script>
import { MssqlUi, SqliteUi } from 'nocodb-sdk'; import { MssqlUi, SqliteUi } from 'nocodb-sdk'
import { UITypes, uiTypes } from '../helpers/uiTypes'; import { UITypes, uiTypes } from '../helpers/uiTypes'
import RollupOptions from './editColumn/RollupOptions'; import RollupOptions from './editColumn/RollupOptions'
import FormulaOptions from '~/components/project/spreadsheet/components/editColumn/FormulaOptions'; import FormulaOptions from '~/components/project/spreadsheet/components/editColumn/FormulaOptions'
import LookupOptions from '~/components/project/spreadsheet/components/editColumn/LookupOptions'; import LookupOptions from '~/components/project/spreadsheet/components/editColumn/LookupOptions'
import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions'; import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions'
import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions'; import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions'
import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'; import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions'; import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions'
import { validateColumnName } from '~/helpers'; import { validateColumnName } from '~/helpers'
import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions'; import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions'
import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions'; import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions'
import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions'; import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions'
import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions'; import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions'
import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions'; import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions'
const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]; const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
export default { export default {
name: 'EditColumn', name: 'EditColumn',
@ -484,7 +497,7 @@ export default {
CustomSelectOptions, CustomSelectOptions,
CurrencyOptions, CurrencyOptions,
DurationOptions, DurationOptions,
DateOptions, DateOptions
}, },
props: { props: {
nodes: Object, nodes: Object,
@ -493,7 +506,7 @@ export default {
editColumn: Boolean, editColumn: Boolean,
column: Object, column: Object,
columnIndex: Number, columnIndex: Number,
value: Boolean, value: Boolean
}, },
data: () => ({ data: () => ({
columnToValidate, columnToValidate,
@ -504,12 +517,12 @@ export default {
idType: null, idType: null,
idTypes: [ idTypes: [
{ value: 'AI', text: 'Auto increment number' }, { value: 'AI', text: 'Auto increment number' },
{ value: 'AG', text: 'Auto generated string' }, { value: 'AG', text: 'Auto generated string' }
], ]
}), }),
computed: { computed: {
isIDCol() { isIDCol() {
return this.column && this.column.uidt === UITypes.ID; return this.column && this.column.uidt === UITypes.ID
}, },
accordion() { accordion() {
return ![ return ![
@ -518,8 +531,8 @@ export default {
UITypes.Rollup, UITypes.Rollup,
UITypes.SpecificDBType, UITypes.SpecificDBType,
UITypes.Formula, UITypes.Formula,
UITypes.Duration, UITypes.Duration
].includes(this.newColumn && this.newColumn.uidt); ].includes(this.newColumn && this.newColumn.uidt)
}, },
uiTypes() { uiTypes() {
return [ return [
@ -528,44 +541,44 @@ export default {
? [ ? [
{ {
name: 'ID', name: 'ID',
icon: 'mdi-identifier', icon: 'mdi-identifier'
}, }
] ]
: []), : [])
]; ]
}, },
isEditDisabled() { isEditDisabled() {
return this.editColumn && this.sqlUi === SqliteUi && this.column.uidt !== UITypes.Duration; return this.editColumn && this.sqlUi === SqliteUi && this.column.uidt !== UITypes.Duration
}, },
isSQLite() { isSQLite() {
return this.sqlUi === SqliteUi; return this.sqlUi === SqliteUi
}, },
isMSSQL() { isMSSQL() {
return this.sqlUi === MssqlUi; return this.sqlUi === MssqlUi
}, },
dataTypes() { dataTypes() {
return this.sqlUi.getDataTypeListForUiType(this.newColumn, this.idType); return this.sqlUi.getDataTypeListForUiType(this.newColumn, this.idType)
}, },
isSelect() { isSelect() {
return this.newColumn && (this.newColumn.uidt === 'MultiSelect' || this.newColumn.uidt === 'SingleSelect'); return this.newColumn && (this.newColumn.uidt === 'MultiSelect' || this.newColumn.uidt === 'SingleSelect')
}, },
isRelation() { isRelation() {
return this.newColumn && this.newColumn.uidt === 'ForeignKey'; return this.newColumn && this.newColumn.uidt === 'ForeignKey'
}, },
isLinkToAnotherRecord() { isLinkToAnotherRecord() {
return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord'; return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord'
}, },
isLookup() { isLookup() {
return this.newColumn && this.newColumn.uidt === 'Lookup'; return this.newColumn && this.newColumn.uidt === 'Lookup'
}, },
isRating() { isRating() {
return this.newColumn && this.newColumn.uidt === UITypes.Rating; return this.newColumn && this.newColumn.uidt === UITypes.Rating
}, },
isCheckbox() { isCheckbox() {
return this.newColumn && this.newColumn.uidt === UITypes.Checkbox; return this.newColumn && this.newColumn.uidt === UITypes.Checkbox
}, },
isRollup() { isRollup() {
return this.newColumn && this.newColumn.uidt === 'Rollup'; return this.newColumn && this.newColumn.uidt === 'Rollup'
}, },
relation() { relation() {
return ( return (
@ -573,138 +586,138 @@ export default {
this.column && this.column &&
this.meta.belongsTo && this.meta.belongsTo &&
this.meta.belongsTo.find(bt => bt.column_name === this.column.column_name) this.meta.belongsTo.find(bt => bt.column_name === this.column.column_name)
); )
}, },
isVirtual() { isVirtual() {
return this.isLinkToAnotherRecord || this.isLookup || this.isRollup; return this.isLinkToAnotherRecord || this.isLookup || this.isRollup
}, },
isCurrency() { isCurrency() {
return this.newColumn && this.newColumn.uidt === UITypes.Currency; return this.newColumn && this.newColumn.uidt === UITypes.Currency
}, },
isDate() { isDate() {
return this.newColumn && this.newColumn.uidt === UITypes.Date; return this.newColumn && this.newColumn.uidt === UITypes.Date
}, }
}, },
watch: { watch: {
column() { column() {
this.genColumnData(); this.genColumnData()
}, }
}, },
async created() { async created() {
this.genColumnData(); this.genColumnData()
}, },
mounted() { mounted() {
this.focusInput(); this.focusInput()
}, },
methods: { methods: {
validateColumnName(v) { validateColumnName(v) {
return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql']); return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql'])
}, },
onRelColumnSelect(colMeta) { onRelColumnSelect(colMeta) {
Object.assign(this.newColumn, { Object.assign(this.newColumn, {
dt: colMeta.dt, dt: colMeta.dt,
dtxp: colMeta.dtxp, dtxp: colMeta.dtxp,
dtxs: colMeta.dtxs, dtxs: colMeta.dtxs,
un: colMeta.un, un: colMeta.un
}); })
}, },
genColumnData() { genColumnData() {
this.newColumn = this.column this.newColumn = this.column
? { ...this.column } ? { ...this.column }
: this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1); : this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1)
this.newColumn.cno = this.newColumn.column_name; this.newColumn.cno = this.newColumn.column_name
}, },
close() { close() {
this.$emit('close'); this.$emit('close')
this.newColumn = {}; this.newColumn = {}
}, },
async save() { async save() {
if (!this.$refs.form.validate()) { if (!this.$refs.form.validate()) {
return; return
} }
try { try {
if (this.newColumn.uidt === 'Formula') { if (this.newColumn.uidt === 'Formula') {
await this.$refs.formula.save(); await this.$refs.formula.save()
return this.$emit('saved'); return this.$emit('saved')
// return this.$toast.info('Coming Soon...').goAway(3000) // return this.$toast.info('Coming Soon...').goAway(3000)
} }
if (this.isLinkToAnotherRecord && this.$refs.relation) { if (this.isLinkToAnotherRecord && this.$refs.relation) {
await this.$refs.relation.saveRelation(); await this.$refs.relation.saveRelation()
return this.$emit('saved'); return this.$emit('saved')
} }
if (this.isLookup && this.$refs.lookup) { if (this.isLookup && this.$refs.lookup) {
return await this.$refs.lookup.save(); return await this.$refs.lookup.save()
} }
if (this.isRollup && this.$refs.rollup) { if (this.isRollup && this.$refs.rollup) {
return await this.$refs.rollup.save(); return await this.$refs.rollup.save()
} }
if (this.newColumn.uidt === 'Formula' && this.$refs.formula) { if (this.newColumn.uidt === 'Formula' && this.$refs.formula) {
return await this.$refs.formula.save(); return await this.$refs.formula.save()
} }
this.newColumn.table_name = this.nodes.table_name; this.newColumn.table_name = this.nodes.table_name
this.newColumn.title = this.newColumn.column_name; this.newColumn.title = this.newColumn.column_name
if (this.editColumn) { if (this.editColumn) {
await this.$api.dbTableColumn.update(this.column.id, this.newColumn); await this.$api.dbTableColumn.update(this.column.id, this.newColumn)
} else { } else {
if (this.newColumn.uidt === UITypes.ID) { if (this.newColumn.uidt === UITypes.ID) {
// based on id column type set autogenerated meta prop // based on id column type set autogenerated meta prop
if (this.isAutoGenId) { if (this.isAutoGenId) {
this.newColumn.meta = { this.newColumn.meta = {
ag: 'nc', ag: 'nc'
}; }
} }
} }
await this.$api.dbTableColumn.create(this.meta.id, this.newColumn); await this.$api.dbTableColumn.create(this.meta.id, this.newColumn)
} }
this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null); this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null)
} catch (e) { } catch (e) {
console.log(e); console.log(e)
this.$toast.error('Failed to save column: ' + e).goAway(3000); this.$toast.error('Failed to save column: ' + e).goAway(3000)
throw e; throw e
} }
this.$emit('close'); this.$emit('close')
this.$e('a:column:add', { datatype: this.newColumn.uidt }); this.$e('a:column:add', { datatype: this.newColumn.uidt })
}, },
onDataTypeChange() { onDataTypeChange() {
this.newColumn.rqd = false; this.newColumn.rqd = false
if (this.newColumn.uidt !== UITypes.ID) { if (this.newColumn.uidt !== UITypes.ID) {
this.newColumn.primaryKey = false; this.newColumn.primaryKey = false
} }
this.newColumn.ai = false; this.newColumn.ai = false
this.newColumn.cdf = null; this.newColumn.cdf = null
this.newColumn.un = false; this.newColumn.un = false
this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt); this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt); this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
this.newColumn.dtx = 'specificType'; this.newColumn.dtx = 'specificType'
const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]; const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) { if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
this.newColumn.dtxp = this.column.dtxp; this.newColumn.dtxp = this.column.dtxp
} }
if (this.isCurrency) { if (this.isCurrency) {
if (this.column?.uidt === UITypes.Currency) { if (this.column?.uidt === UITypes.Currency) {
this.newColumn.dtxp = this.column.dtxp; this.newColumn.dtxp = this.column.dtxp
this.newColumn.dtxs = this.column.dtxs; this.newColumn.dtxs = this.column.dtxs
} else { } else {
this.newColumn.dtxp = 19; this.newColumn.dtxp = 19
this.newColumn.dtxs = 2; this.newColumn.dtxs = 2
} }
} }
// this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn)); // this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn));
this.newColumn.altered = this.newColumn.altered || 2; this.newColumn.altered = this.newColumn.altered || 2
}, },
onUiOrIdTypeChange() { onUiOrIdTypeChange() {
const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn, this.idType); const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn, this.idType)
this.newColumn = { this.newColumn = {
...this.newColumn, ...this.newColumn,
meta: null, meta: null,
@ -714,77 +727,77 @@ export default {
cdf: null, cdf: null,
un: false, un: false,
dtx: 'specificType', dtx: 'specificType',
...colProp, ...colProp
}; }
this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt); this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt); this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]; const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) { if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
this.newColumn.dtxp = this.column.dtxp; this.newColumn.dtxp = this.column.dtxp
} }
if (columnToValidate.includes(this.newColumn.uidt)) { if (columnToValidate.includes(this.newColumn.uidt)) {
this.newColumn.meta = { this.newColumn.meta = {
validate: this.newColumn.meta && this.newColumn.meta.validate, validate: this.newColumn.meta && this.newColumn.meta.validate
}; }
} }
if (this.isCurrency) { if (this.isCurrency) {
if (this.column?.uidt === UITypes.Currency) { if (this.column?.uidt === UITypes.Currency) {
this.newColumn.dtxp = this.column.dtxp; this.newColumn.dtxp = this.column.dtxp
this.newColumn.dtxs = this.column.dtxs; this.newColumn.dtxs = this.column.dtxs
} else { } else {
this.newColumn.dtxp = 19; this.newColumn.dtxp = 19
this.newColumn.dtxs = 2; this.newColumn.dtxs = 2
} }
} }
this.newColumn.altered = this.newColumn.altered || 2; this.newColumn.altered = this.newColumn.altered || 2
}, },
focusInput() { focusInput() {
setTimeout(() => { setTimeout(() => {
if (this.$refs.column && this.$refs.column.$el) { if (this.$refs.column && this.$refs.column.$el) {
const el = this.$refs.column.$el.querySelector('input'); const el = this.$refs.column.$el.querySelector('input')
el.focus(); el.focus()
el.select(); el.select()
} }
}, 100); }, 100)
}, },
async deleteRelation(action = '', column) { async deleteRelation(action = '', column) {
try { try {
if (action === 'showDialog') { if (action === 'showDialog') {
this.relationDeleteDlg = true; this.relationDeleteDlg = true
} else if (action === 'hideDialog') { } else if (action === 'hideDialog') {
this.relationDeleteDlg = false; this.relationDeleteDlg = false
} else { } else {
const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [ const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
{ {
env: this.nodes.env, env: this.nodes.env,
dbAlias: this.nodes.dbAlias, dbAlias: this.nodes.dbAlias
}, },
this.relation.type === 'virtual' ? 'xcVirtualRelationDelete' : 'relationDelete', this.relation.type === 'virtual' ? 'xcVirtualRelationDelete' : 'relationDelete',
{ {
childColumn: this.relation.column_name, childColumn: this.relation.column_name,
childTable: this.nodes.table_name, childTable: this.nodes.table_name,
parentTable: this.relation.rtn, parentTable: this.relation.rtn,
parentColumn: this.relation.rcn, parentColumn: this.relation.rcn
}, }
]); ])
this.relationDeleteDlg = false; this.relationDeleteDlg = false
this.relation = null; this.relation = null
this.$toast.success('Foreign Key deleted successfully').goAway(3000); this.$toast.success('Foreign Key deleted successfully').goAway(3000)
this.$emit('onRelationDelete'); this.$emit('onRelationDelete')
} }
} catch (e) { } catch (e) {
console.log(e); console.log(e)
this.$toast.error('Foreign key relation delete failed' + e).goAway(3000); this.$toast.error('Foreign key relation delete failed' + e).goAway(3000)
throw e; throw e
} }
}, }
}, }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

9
packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<v-card width="1000" max-width="100%"> <v-card width="1000" max-width="100%">
<v-toolbar height="55" class="elevation-1"> <v-toolbar height="55" class="elevation-1">
<div class="d-100 d-flex"> <div class="header d-100 d-flex">
<h5 class="title text-center"> <h5 class="title text-center">
<v-icon :color="iconColor"> mdi-table-arrow-right </v-icon> <v-icon :color="iconColor"> mdi-table-arrow-right </v-icon>
@ -17,10 +17,9 @@
<v-btn small text @click="reload"> <v-btn small text @click="reload">
<v-icon small> mdi-reload </v-icon> <v-icon small> mdi-reload </v-icon>
</v-btn> </v-btn>
<x-icon <x-icon
v-if="!isNew && _isUIAllowed('rowComments')" v-if="!isNew && _isUIAllowed('rowComments')"
icon-class="mr-2" icon-class="ml-1 mr-2 px-1 py-1"
tooltip="Toggle comments" tooltip="Toggle comments"
small small
text text
@ -671,6 +670,10 @@ h5 {
background: var(--v-backgroundColorDefault-base); background: var(--v-backgroundColorDefault-base);
} }
.header {
display: flex;
align-items: center;
}
.nc-chip { .nc-chip {
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;

Write Preview
Loading…
Cancel
Save