Browse Source

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

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
commit
34a0e707e7
  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

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

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

@ -21,12 +21,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<template>
<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">
<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" />
@ -40,7 +42,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
: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
</p>
@ -95,7 +97,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
: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">
{{ error.$message }}
</div>
@ -107,7 +109,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
</div>
<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') }}
</button>
</div>

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

@ -112,7 +112,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
<div
ref="el"
: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 class="flex nc-form-column-label">
@ -148,7 +148,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
: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">
{{ error.$message }}
</div>
@ -170,7 +170,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
<div class="flex-1">
<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') }}
</button>
</div>
@ -204,7 +204,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
: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
</p>
@ -225,14 +225,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</div>
</template>
<style lang="scss" scoped>
<style lang="scss">
:global(html, body) {
@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 {

Loading…
Cancel
Save