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

refactor(nc-gui): survey and form page styles

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
9fcc623382
commit
cd71692441
4 changed files with 85 additions and 82 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. 18
      packages/nc-gui/pages/[projectType]/form/[viewId].vue
  2. 15
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  3. 92
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  4. 42
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

18
packages/nc-gui/pages/[projectType]/form/[viewId].vue
Unescape View File

@ -41,3 +41,21 @@ if (!notFound.value) {
<NuxtPage /> <NuxtPage />
</NuxtLayout> </NuxtLayout>
</template> </template>
<style lang="scss" scoped>
:deep(.nc-cell-attachment) {
@apply p-0;
.nc-attachment-cell {
@apply px-4 min-h-[75px] w-full h-full;
.nc-attachment {
@apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
}
.nc-attachment-cell-dropzone {
@apply rounded bg-gray-400/75;
}
}
}
</style>

15
packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
Unescape View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports' import { openLink, useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow() const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
@ -28,12 +28,17 @@ watch(
<div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin"> <div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
<NuxtPage /> <NuxtPage />
<div class="self-end text-xs text-gray-400 mx-auto my-4 flex justify-center gap-2 items-center"> <button
<div class="bg-primary bg-opacity-100 rounded"> type="button"
class="cursor-pointer self-end text-xs text-gray-400 hover:text-primary mx-auto my-4 flex justify-center gap-2 items-center"
@click="openLink('https://github.com/nocodb/nocodb')"
>
<span class="bg-primary bg-opacity-100 rounded">
<img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" /> <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</div> </span>
Powered by NocoDB Powered by NocoDB
</div> </button>
<a-modal <a-modal
v-model:visible="passwordDlg" v-model:visible="passwordDlg"

92
packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
Unescape View File

@ -59,56 +59,50 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
</GeneralOverlay> </GeneralOverlay>
<div class="nc-form-wrapper"> <div class="nc-form-wrapper">
<div class="nc-form h-full max-w-3/4 mx-auto"> <div class="nc-form h-full px-6 lg:(max-w-3/4 mx-auto px-0)">
<div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2"> <div class="flex flex-col gap-6">
<div class="flex nc-form-column-label"> <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
<SmartsheetHeaderVirtualCell <div class="flex nc-form-column-label">
v-if="isVirtualCol(field)" <SmartsheetHeaderVirtualCell
:column="{ ...field, title: field.label || field.title }" v-if="isVirtualCol(field)"
:required="isRequired(field, field.required)" :column="{ ...field, title: field.label || field.title }"
:hide-menu="true" :required="isRequired(field, field.required)"
/> :hide-menu="true"
/>
<SmartsheetHeaderCell
v-else <SmartsheetHeaderCell
:column="{ ...field, title: field.label || field.title }" v-else
:required="isRequired(field, field.required)" :column="{ ...field, title: field.label || field.title }"
:hide-menu="true" :required="isRequired(field, field.required)"
/> :hide-menu="true"
</div> />
</div>
<div v-if="isVirtualCol(field)" class="mt-0">
<SmartsheetVirtualCell <div>
class="mt-0 nc-input" <SmartsheetVirtualCell
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" v-if="isVirtualCol(field)"
:column="field" class="mt-0 nc-input"
/> :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div> />
<template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]"> <SmartsheetCell
<div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500"> v-else
{{ error.$message }} v-model="formState[field.title]"
</div> class="nc-input"
</template> :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
</div> :column="field"
:edit-enabled="true"
<div v-else class="mt-0"> />
<SmartsheetCell
v-model="formState[field.title]" <div class="flex flex-col gap-2 text-gray-500 text-[0.75rem] my-2 px-1">
class="nc-input" <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" {{ error.$message }}
:column="field" </div>
:edit-enabled="true"
/> {{ field.description }}
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
<div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div> </div>
</template> </div>
</div> </div>
</div> </div>

42
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
Unescape View File

@ -89,6 +89,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
<template> <template>
<div class="w-full h-full flex flex-col justify-center items-center"> <div class="w-full h-full flex flex-col justify-center items-center">
<template v-if="sharedFormView">
<div class="flex-1" />
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
<h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
</template>
<Transition :name="`slide-${transitionName}`" mode="out-in"> <Transition :name="`slide-${transitionName}`" mode="out-in">
<div <div
ref="el" ref="el"
@ -112,24 +120,16 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
/> />
</div> </div>
<div v-if="isVirtualCol(field)"> <div>
<SmartsheetVirtualCell <SmartsheetVirtualCell
v-if="isVirtualCol(field)"
class="mt-0 nc-input" class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field" :column="field"
/> />
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
<div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div>
<div v-else>
<SmartsheetCell <SmartsheetCell
v-else
v-model="formState[field.title]" v-model="formState[field.title]"
class="nc-input" class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
@ -137,7 +137,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
:edit-enabled="true" :edit-enabled="true"
/> />
<div class="flex flex-col gap-2 text-gray-500 text-xs my-2 px-1"> <div class="flex flex-col gap-2 text-gray-500 text-[0.75rem] my-2 px-1">
<div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500"> <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
{{ error.$message }} {{ error.$message }}
</div> </div>
@ -206,6 +206,8 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</div> </div>
</Transition> </Transition>
<div v-if="sharedFormView" class="flex-1" />
<div class="absolute bottom-12 right-12 flex flex-col"> <div class="absolute bottom-12 right-12 flex flex-col">
<div>{{ index + 1 }} / {{ formColumns?.length }}</div> <div>{{ index + 1 }} / {{ formColumns?.length }}</div>
</div> </div>
@ -226,20 +228,4 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
@apply mr-2; @apply mr-2;
} }
} }
:deep(.nc-cell-attachment) {
@apply p-0;
.nc-attachment-cell {
@apply px-4 min-h-[75px] w-full h-full;
.nc-attachment {
@apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
}
.nc-attachment-cell-dropzone {
@apply rounded bg-gray-400/75;
}
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save