Browse Source

refactor(gui-v2): styling & use classes

pull/2828/head
Wing-Kam Wong 2 years ago
parent
commit
a51ba23fee
  1. 24
      packages/nc-gui-v2/components/template/Editor.vue

24
packages/nc-gui-v2/components/template/Editor.vue

@ -305,6 +305,7 @@ const importTemplate = async () => {
<a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" noStyle> <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" noStyle>
<a-input <a-input
v-model:value="table.table_name" v-model:value="table.table_name"
size="large"
style="max-width: 300px" style="max-width: 300px"
hide-details hide-details
@click="(e) => e.stopPropagation()" @click="(e) => e.stopPropagation()"
@ -312,8 +313,12 @@ const importTemplate = async () => {
@keydown.enter="setEditableTn(tableIdx, false)" @keydown.enter="setEditableTn(tableIdx, false)"
/> />
</a-form-item> </a-form-item>
<span v-else class="font-weight-bold text-lg" @click="(e) => (e.stopPropagation(), setEditableTn(tableIdx, true))"> <span
<MdiTableIcon class="text-primary" style="margin-bottom: -5px" /> v-else
class="font-weight-bold text-lg flex items-center gap-2"
@click="(e) => (e.stopPropagation(), setEditableTn(tableIdx, true))"
>
<MdiTableIcon class="text-primary" />
{{ table.table_name }} {{ table.table_name }}
</span> </span>
</template> </template>
@ -323,12 +328,7 @@ const importTemplate = async () => {
<!-- TODO: i18n --> <!-- TODO: i18n -->
<span>Delete Table</span> <span>Delete Table</span>
</template> </template>
<MdiDeleteOutlineIcon <MdiDeleteOutlineIcon v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" />
v-if="data.tables.length > 1"
class="text-lg"
style="margin-right: 25px"
@click.stop="deleteTable(tableIdx)"
/>
</a-tooltip> </a-tooltip>
</template> </template>
@ -363,6 +363,7 @@ const importTemplate = async () => {
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]"> <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
<a-input <a-input
v-model:value="record.column_name" v-model:value="record.column_name"
size="large"
:ref=" :ref="
(el) => { (el) => {
inputRefs[record.key] = el inputRefs[record.key] = el
@ -375,6 +376,7 @@ const importTemplate = async () => {
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]"> <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
<a-auto-complete <a-auto-complete
v-model:value="record.uidt" v-model:value="record.uidt"
size="large"
:options="uiTypeOptions" :options="uiTypeOptions"
:filter-option="filterOption" :filter-option="filterOption"
style="width: 200px" style="width: 200px"
@ -384,7 +386,7 @@ const importTemplate = async () => {
<template v-else-if="column.key === 'dtxp'"> <template v-else-if="column.key === 'dtxp'">
<a-form-item v-if="isSelect(record)"> <a-form-item v-if="isSelect(record)">
<a-input v-model:value="record.dtxp" /> <a-input v-model:value="record.dtxp" size="large" />
</a-form-item> </a-form-item>
</template> </template>
@ -394,7 +396,7 @@ const importTemplate = async () => {
<!-- TODO: i18n --> <!-- TODO: i18n -->
<span>Primary Value</span> <span>Primary Value</span>
</template> </template>
<span style="margin-right: 15px"> <span class="mr-3">
<MdiKeyStarIcon class="text-lg" /> <MdiKeyStarIcon class="text-lg" />
</span> </span>
</a-tooltip> </a-tooltip>
@ -413,7 +415,7 @@ const importTemplate = async () => {
</template> </template>
</template> </template>
</a-table> </a-table>
<div class="text-center" style="margin-top: 15px"> <div class="text-center mt-5">
<a-tooltip bottom> <a-tooltip bottom>
<template #title> <template #title>
<!-- TODO: i18n --> <!-- TODO: i18n -->

Loading…
Cancel
Save