clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-04-25 03:25:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: invert shared view ask password modal background colors in dark mode

Browse Source
This commit is contained in:
Ramesh Mane
2026-01-12 13:24:19 +05:30
parent a57611e43a
commit e0bfd00227
2 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/nc-gui/components/shared-view/AskPassword.vue
View File

@@ -20,6 +20,8 @@ const route = useRoute()
const { loadSharedView } = useSharedView()
const { isDark } = useTheme()
const formState = ref({ password: undefined })
const passwordError = ref<string | null>(null)
@@ -68,7 +70,7 @@ const bgImageName = computed(() => {
:class="{ active: vModel }"
:mask-closable="false"
:mask-style="{
backgroundColor: 'rgba(255, 255, 255, 0.64)',
backgroundColor: 'rgba(var(--color-base-white), 0.64)',
backdropFilter: 'blur(8px)',
}"
>
@@ -114,5 +116,11 @@ const bgImageName = computed(() => {
</div>
</NcModal>
<img alt="view image" :src="bgImageName" class="fixed inset-0 w-full h-full" />
<img alt="view image" :src="bgImageName" class="fixed inset-0 w-full h-full" :class="{ 'bg-view-image--dark': isDark }" />
</template>
<style lang="scss" scoped>
.bg-view-image--dark {
filter: invert(1) hue-rotate(180deg);
}
</style>

16
packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue
View File

@@ -12,6 +12,8 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
const route = useRoute()
const { isDark } = useTheme()
const { loadSharedView, sharedView, sharedViewMeta, meta, notFound, password, passwordDlg, passwordError } =
useProvideSharedFormStore(route.params.viewId as string)
@@ -67,7 +69,7 @@ const focus: VNodeRef = (el: typeof InputPassword) => {
:mask-closable="false"
wrap-class-name="nc-modal-shared-form-password-dlg"
:mask-style="{
backgroundColor: 'rgba(255, 255, 255, 0.64)',
backgroundColor: 'rgba(var(--color-base-white), 0.64)',
backdropFilter: 'blur(8px)',
}"
@close="passwordDlg = false"
@@ -112,12 +114,22 @@ const focus: VNodeRef = (el: typeof InputPassword) => {
</div>
</a-modal>
<img v-if="passwordDlg" alt="view image" src="~/assets/img/views/form.png" class="fixed inset-0 w-full h-full" />
<img
v-if="passwordDlg"
alt="view image"
src="~/assets/img/views/form.png"
class="fixed inset-0 w-full h-full"
:class="{ 'bg-view-image--dark': isDark }"
/>
</NuxtLayout>
</div>
</template>
<style lang="scss" scoped>
.bg-view-image--dark {
filter: invert(1) hue-rotate(180deg);
}
:deep(.nc-cell-attachment) {
@apply p-0;