Browse Source

chore(nc-gui): styles

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
commit
46147cca70
  1. 19
      packages/nc-gui/components/cell/attachment/index.vue
  2. 4
      packages/nc-gui/components/general/PoweredBy.vue
  3. 12
      packages/nc-gui/components/smartsheet/Form.vue
  4. 22
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  5. 2
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  6. 20
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

19
packages/nc-gui/components/cell/attachment/index.vue

@ -156,7 +156,7 @@ watch(
<div <div
v-if="!isReadonly" v-if="!isReadonly"
:class="{ 'mx-auto px-4': !visibleItems.length }" :class="{ 'mx-auto px-4': !visibleItems.length }"
class="group cursor-pointer flex gap-1 items-center active:ring rounded border-1 p-1 hover:(bg-primary bg-opacity-10)" class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
@click.stop="open" @click.stop="open"
> >
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
@ -165,9 +165,16 @@ watch(
<template #title> Click or drop a file into cell </template> <template #title> Click or drop a file into cell </template>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120) text-gray-500 text-[10px]" /> <MaterialSymbolsAttachFile
class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
/>
<div v-if="!visibleItems.length" class="group-hover:text-primary text-gray-500 text-xs">Add file(s)</div> <div
v-if="!visibleItems.length"
class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"
>
Add file(s)
</div>
</div> </div>
</a-tooltip> </a-tooltip>
</div> </div>
@ -208,14 +215,16 @@ watch(
</template> </template>
</div> </div>
<div class="group cursor-pointer flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"> <div
class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
>
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<a-tooltip v-else placement="bottom"> <a-tooltip v-else placement="bottom">
<template #title> View attachments </template> <template #title> View attachments </template>
<MdiArrowExpand <MdiArrowExpand
class="select-none transform group-hover:(text-accent scale-120) text-[10px] text-gray-500" class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
@click.stop="modalVisible = true" @click.stop="modalVisible = true"
/> />
</a-tooltip> </a-tooltip>

4
packages/nc-gui/components/general/PoweredBy.vue

@ -5,13 +5,13 @@ import { openLink } from '#imports'
<template> <template>
<button <button
type="button" 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" class="cursor-pointer group text-xs text-slate-500 hover:text-primary dark:hover:text-white dark:text-slate-300 mx-auto my-4 flex justify-center gap-2 items-center"
@click="openLink('https://github.com/nocodb/nocodb')" @click="openLink('https://github.com/nocodb/nocodb')"
> >
<span class="bg-primary bg-opacity-100 rounded"> <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" />
</span> </span>
Powered by NocoDB <span class="color-transition transform group-hover:(scale-103)">Powered by NocoDB</span>
</button> </button>
</template> </template>

12
packages/nc-gui/components/smartsheet/Form.vue

@ -413,8 +413,7 @@ watch(view, (nextView) => {
<button <button
v-if="hiddenColumns.length" v-if="hiddenColumns.length"
type="button" type="button"
class="nc-form-add-all color-transition hover:text-primary" class="nc-form-add-all color-transition bg-white transform hover:(text-primary bg-primary bg-opacity-5 ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 border-b-2 border-slate-300 shadow-sm rounded"
style="border-bottom: 2px solid rgb(218, 218, 218)"
@click="addAllColumns" @click="addAllColumns"
> >
<!-- Add all --> <!-- Add all -->
@ -424,8 +423,7 @@ watch(view, (nextView) => {
<button <button
v-if="localColumns.length" v-if="localColumns.length"
type="button" type="button"
class="nc-form-remove-all color-transition hover:text-primary" class="nc-form-remove-all color-transition bg-white transform hover:(text-primary bg-primary bg-opacity-5 ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 border-b-2 border-slate-300 shadow-sm rounded"
style="border-bottom: 2px solid rgb(218, 218, 218)"
@click="removeAllColumns" @click="removeAllColumns"
> >
<!-- Remove all --> <!-- Remove all -->
@ -519,7 +517,7 @@ watch(view, (nextView) => {
}" }"
> >
<a-form ref="formRef" :model="formState" class="nc-form" no-style> <a-form ref="formRef" :model="formState" class="nc-form" no-style>
<a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8 py-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }"> <a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
<!-- Header --> <!-- Header -->
<div v-if="isEditable" class="px-4"> <div v-if="isEditable" class="px-4">
<a-form-item v-if="isEditable"> <a-form-item v-if="isEditable">
@ -700,9 +698,9 @@ watch(view, (nextView) => {
</Draggable> </Draggable>
<div class="justify-center flex mt-6"> <div class="justify-center flex mt-6">
<a-button type="primary" class="flex items-center gap-2 nc-form-submit" size="large" @click="submitForm"> <button type="submit" class="scaling-btn nc-form-submit" @click="submitForm">
{{ $t('general.submit') }} {{ $t('general.submit') }}
</a-button> </button>
</div> </div>
</a-card> </a-card>
</a-form> </a-form>

22
packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

@ -31,11 +31,13 @@ const onClick = () => {
<template> <template>
<div <div
class="color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin" class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] pt-12"
> >
<NuxtPage /> <NuxtPage />
<GeneralPoweredBy /> <div class="flex w-full items-end mt-12">
<GeneralPoweredBy />
</div>
<div <div
class="flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)" class="flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
@ -90,14 +92,24 @@ p {
.nc-input { .nc-input {
@apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary dark:border-slate-200; @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary dark:border-slate-200;
input { input,
@apply dark:(bg-slate-300 text-slate-900); &.nc-virtual-cell,
> div {
@apply dark:(bg-slate-400 text-slate-900);
.nc-icon {
@apply dark:text-slate-900;
}
.chip {
@apply dark:(bg-slate-700 text-white);
}
} }
} }
} }
.nc-cell { .nc-cell {
@apply dark:bg-slate-300; @apply dark:bg-slate-400;
.nc-attachment-cell > div { .nc-attachment-cell > div {
@apply dark:(bg-slate-100); @apply dark:(bg-slate-100);

2
packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@ -98,7 +98,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
/> />
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1"> <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 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>

20
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@ -35,7 +35,7 @@ const steps = computed(() => {
}, [] as string[]) }, [] as string[])
}) })
const { index, goToPrevious, goToNext, isFirst, isLast, steps: _steps } = useStepper(steps) const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
const isTransitioning = ref(false) const isTransitioning = ref(false)
@ -63,8 +63,14 @@ const transition = (direction: 'left' | 'right') => {
const goNext = async () => { const goNext = async () => {
if (isLast.value) return if (isLast.value) return
const isValid = await v$.value.localState[field.value!.title!].$validate() if (!field.value || !field.value.title) return
if (!isValid) return
const validationField = v$.value.localState[field.value.title]
if (validationField) {
const isValid = await validationField.$validate()
if (!isValid) return
}
transition('left') transition('left')
@ -99,13 +105,15 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</script> </script>
<template> <template>
<div class="w-full h-full flex flex-col justify-center items-center"> <div class="w-full flex flex-auto flex-col justify-center items-center">
<template v-if="sharedFormView"> <template v-if="sharedFormView">
<div class="flex-1" /> <div class="flex-1" />
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1> <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> <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
{{ sharedFormView.subheading }}
</h2>
</template> </template>
<Transition :name="`slide-${transitionName}`" mode="out-in"> <Transition :name="`slide-${transitionName}`" mode="out-in">
@ -149,7 +157,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
/> />
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1"> <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 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>

Loading…
Cancel
Save