Browse Source

refactor: suggested changes

pull/9314/head
Pranav C 3 months ago
parent
commit
b6d2e54385
  1. 4
      packages/nc-gui/components/account/setup/AppIcon.vue
  2. 11
      packages/nc-gui/components/account/setup/Config.vue
  3. 20
      packages/nc-gui/components/nc/form-builder/index.vue

4
packages/nc-gui/components/account/setup/AppIcon.vue

@ -8,8 +8,6 @@ defineProps<{
</script> </script>
<template> <template>
<img v-if="app.title !== 'SMTP'" class="icon" :alt="app.title" :src="app.logo" /> <img v-if="app.title !== 'SMTP'" class="object-contain" :alt="app.title" :src="app.logo" />
<GeneralIcon v-else class="text-gray-500" icon="mail" /> <GeneralIcon v-else class="text-gray-500" icon="mail" />
</template> </template>
<style scoped lang="scss"></style>

11
packages/nc-gui/components/account/setup/Config.vue

@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import dayjs from 'dayjs'
const props = defineProps<{ const props = defineProps<{
id: string id: string
modelValue?: boolean modelValue?: boolean
@ -131,7 +133,7 @@ const isValid = computed(() => {
<a href="httpd://docs.nocodb.com" rel="noopener noreferrer" target="_blank" class="!no-underline !text-current"> <a href="httpd://docs.nocodb.com" rel="noopener noreferrer" target="_blank" class="!no-underline !text-current">
<GeneralIcon icon="bookOpen" class="text-gray-500" /> <GeneralIcon icon="bookOpen" class="text-gray-500" />
Workspace Setup Application Setup
</a> </a>
<a <a
v-for="doc of plugin.formDetails?.docs || []" v-for="doc of plugin.formDetails?.docs || []"
@ -144,6 +146,13 @@ const isValid = computed(() => {
<GeneralIcon icon="bookOpen" class="text-gray-500" /> <GeneralIcon icon="bookOpen" class="text-gray-500" />
{{ doc.title }} {{ doc.title }}
</a> </a>
<NcDivider />
<div class="text-gray-500 text-capitalize">Modified on</div>
<div class="">
{{ dayjs(plugin.created_at).format('DD MMM YYYY HH:mm') }}
</div>
</div> </div>
</div> </div>
</div> </div>

20
packages/nc-gui/components/nc/form-builder/index.vue

@ -59,13 +59,18 @@ const setFormState = (path: string, value: any) => {
</template> </template>
<template v-if="field.type === FormBuilderInputType.Input"> <template v-if="field.type === FormBuilderInputType.Input">
<a-input <a-input
autocomplete="off"
class="!w-full" class="!w-full"
:value="deepReference(field.model)" :value="deepReference(field.model)"
@update:value="setFormState(field.model, $event)" @update:value="setFormState(field.model, $event)"
/> />
</template> </template>
<template v-else-if="field.type === FormBuilderInputType.Password"> <template v-else-if="field.type === FormBuilderInputType.Password">
<a-input-password :value="deepReference(field.model)" @update:value="setFormState(field.model, $event)" /> <a-input-password
autocomplete="off"
:value="deepReference(field.model)"
@update:value="setFormState(field.model, $event)"
/>
</template> </template>
<template v-else-if="field.type === FormBuilderInputType.Select"> <template v-else-if="field.type === FormBuilderInputType.Select">
<NcSelect <NcSelect
@ -122,6 +127,7 @@ const setFormState = (path: string, value: any) => {
:deep(.ant-collapse-header) { :deep(.ant-collapse-header) {
@apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex; @apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex;
} }
:deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) { :deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
@apply !right-0; @apply !right-0;
} }
@ -162,9 +168,11 @@ const setFormState = (path: string, value: any) => {
.nc-form-section { .nc-form-section {
@apply flex flex-col gap-3; @apply flex flex-col gap-3;
} }
.nc-form-section-title { .nc-form-section-title {
@apply text-sm font-bold text-gray-800; @apply text-sm font-bold text-gray-800;
} }
.nc-form-section-body { .nc-form-section-body {
@apply flex flex-col gap-3; @apply flex flex-col gap-3;
} }
@ -179,9 +187,11 @@ const setFormState = (path: string, value: any) => {
&:not(:hover):not(:focus):not(:disabled) { &:not(:hover):not(:focus):not(:disabled) {
@apply shadow-default; @apply shadow-default;
} }
&:hover:not(:focus):not(:disabled) { &:hover:not(:focus):not(:disabled) {
@apply shadow-hover; @apply shadow-hover;
} }
&:focus { &:focus {
@apply shadow-error ring-0; @apply shadow-error ring-0;
} }
@ -192,34 +202,42 @@ const setFormState = (path: string, value: any) => {
&:not(:hover):not(:focus-within):not(:disabled) { &:not(:hover):not(:focus-within):not(:disabled) {
@apply shadow-default; @apply shadow-default;
} }
&:hover:not(:focus-within):not(:disabled) { &:hover:not(:focus-within):not(:disabled) {
@apply shadow-hover; @apply shadow-hover;
} }
&:focus-within { &:focus-within {
@apply shadow-error ring-0; @apply shadow-error ring-0;
} }
} }
} }
&:not(.ant-form-item-has-error) { &:not(.ant-form-item-has-error) {
&:not(:has(.ant-input-password)) .ant-input { &:not(:has(.ant-input-password)) .ant-input {
&:not(:hover):not(:focus):not(:disabled) { &:not(:hover):not(:focus):not(:disabled) {
@apply shadow-default border-gray-200; @apply shadow-default border-gray-200;
} }
&:hover:not(:focus):not(:disabled) { &:hover:not(:focus):not(:disabled) {
@apply border-gray-200 shadow-hover; @apply border-gray-200 shadow-hover;
} }
&:focus { &:focus {
@apply shadow-selected ring-0; @apply shadow-selected ring-0;
} }
} }
.ant-input-number, .ant-input-number,
.ant-input-affix-wrapper.ant-input-password { .ant-input-affix-wrapper.ant-input-password {
&:not(:hover):not(:focus-within):not(:disabled) { &:not(:hover):not(:focus-within):not(:disabled) {
@apply shadow-default border-gray-200; @apply shadow-default border-gray-200;
} }
&:hover:not(:focus-within):not(:disabled) { &:hover:not(:focus-within):not(:disabled) {
@apply border-gray-200 shadow-hover; @apply border-gray-200 shadow-hover;
} }
&:focus-within { &:focus-within {
@apply shadow-selected ring-0; @apply shadow-selected ring-0;
} }

Loading…
Cancel
Save