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

feat(nc-gui): dark mode for forms and survey pages

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
a31764d2b4
commit
34a0e707e7
3 changed files with 54 additions and 30 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. 58
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  2. 12
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  3. 14
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

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

@ -1,10 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports' import { useDark, useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow() const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
const route = useRoute() const route = useRoute()
const isDark = useDark()
const { setTheme } = useTheme() const { setTheme } = useTheme()
watch( watch(
@ -21,15 +23,29 @@ watch(
}, },
{ immediate: true }, { immediate: true },
) )
const onClick = () => {
isDark.value = !isDark.value
}
</script> </script>
<template> <template>
<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="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"
>
<NuxtPage /> <NuxtPage />
<GeneralPoweredBy /> <GeneralPoweredBy />
<div class=""></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)"
@click="onClick"
>
<Transition name="slide-left" duration="250" mode="out-in">
<MaterialSymbolsDarkModeOutline v-if="isDark" />
<MaterialSymbolsLightModeOutline v-else />
</Transition>
</div>
<a-modal <a-modal
v-model:visible="passwordDlg" v-model:visible="passwordDlg"
@ -58,27 +74,33 @@ watch(
</template> </template>
<style lang="scss"> <style lang="scss">
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
@apply dark:text-white color-transition;
}
.nc-form-view { .nc-form-view {
.nc-input { .nc-input {
@apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary; @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary dark:border-slate-200;
}
.submit {
@apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
&::after { input {
@apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary; @apply dark:(bg-slate-300 text-slate-900);
content: '';
z-index: -1;
} }
}
}
&:hover::after { .nc-cell {
@apply transform scale-110 ring ring-accent; @apply dark:bg-slate-300;
}
&:active::after { .nc-attachment-cell > div {
@apply ring ring-accent; @apply dark:(bg-slate-100);
}
} }
} }
</style> </style>

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

@ -21,12 +21,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<template> <template>
<div <div
class="bg-white relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)" class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
> >
<template v-if="sharedFormView"> <template v-if="sharedFormView">
<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 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center">
{{ sharedFormView.subheading }}
</h2>
<a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" /> <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
@ -40,7 +42,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
:message="sharedFormView.success_msg || 'Successfully submitted form data'" :message="sharedFormView.success_msg || 'Successfully submitted form data'"
/> />
<p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4"> <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds New form will be loaded after {{ secondsRemain }} seconds
</p> </p>
@ -95,7 +97,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
:edit-enabled="true" :edit-enabled="true"
/> />
<div class="flex flex-col gap-2 text-gray-500 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>
@ -107,7 +109,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
</div> </div>
<div class="text-center mt-4"> <div class="text-center mt-4">
<button type="submit" class="submit" @click="submitForm"> <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
</div> </div>

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

@ -112,7 +112,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
<div <div
ref="el" ref="el"
:key="field.title" :key="field.title"
class="bg-white flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)" class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
> >
<div v-if="field && !submitted" class="flex flex-col gap-2"> <div v-if="field && !submitted" class="flex flex-col gap-2">
<div class="flex nc-form-column-label"> <div class="flex nc-form-column-label">
@ -148,7 +148,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
:edit-enabled="true" :edit-enabled="true"
/> />
<div class="flex flex-col gap-2 text-gray-500 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>
@ -170,7 +170,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
<div class="flex-1"> <div class="flex-1">
<div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4"> <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
<button type="submit" class="submit !px-4 !py-2 prose-sm" @click="submitForm"> <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
</div> </div>
@ -204,7 +204,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
:message="sharedFormView.success_msg || 'Successfully submitted form data'" :message="sharedFormView.success_msg || 'Successfully submitted form data'"
/> />
<p v-if="sharedFormView?.show_blank_form" class="text-xs text-gray-500 text-center my-4"> <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds New form will be loaded after {{ secondsRemain }} seconds
</p> </p>
@ -225,14 +225,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss">
:global(html, body) { :global(html, body) {
@apply overscroll-x-none; @apply overscroll-x-none;
} }
:deep(.nc-form-column-label) { .nc-form-column-label {
> * { > * {
@apply !prose-lg; @apply !prose-lg dark:text-slate-300;
} }
.nc-icon { .nc-icon {

Write Preview
Loading…
Cancel
Save