Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

hide popover on scroll

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-06-07 17:42:43 +02:00
parent 53906d5475
commit e0072e92ba
3 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
vuejs/client/input.css
View file

@ -194,6 +194,7 @@ body {
appearance-none border border-gray-300 bg-white bg-contain bg-center
mt-1 bg-no-repeat align-top transition-all disabled:bg-gray-400
disabled:border-gray-400/0 dark:disabled:bg-gray-800
disabled:cursor-not-allowed
dark:disabled:border-gray-800/0 disabled:text-gray-700
dark:disabled:text-gray-300;
}
@ -207,7 +208,8 @@ body {
}
.select-btn {
@apply relative dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 duration-300 ease-in-out dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 hover:border-gray-600 focus:border-gray-600 flex justify-between align-middle items-center text-left text-sm leading-5.6 w-full rounded-lg border border-solid border-gray-400 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500;
@apply relative dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 disabled:cursor-not-allowed
dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 duration-300 ease-in-out dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 hover:border-gray-600 focus:border-gray-600 flex justify-between align-middle items-center text-left text-sm leading-5.6 w-full rounded-lg border border-solid border-gray-400 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500;
}
.select-btn-name {
@ -225,9 +227,11 @@ body {
.open.select-dropdown-container {
@apply z-[20] opacity-100;
}
.close.select-dropdown-container {
@apply -z-10 opacity-0 pointer-events-none;
}
.select-dropdown-btn {
@apply border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-normal dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300;
}
@ -249,7 +253,8 @@ body {
}
.input-regular {
@apply hover:border-gray-600 outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-gray-300/0 dark:focus:border-gray-600/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 text-sm leading-5.6 ease-in block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 dark:disabled:text-gray-300 disabled:text-gray-700;
@apply hover:border-gray-600 outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-gray-300/0 dark:focus:border-gray-600/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 text-sm leading-5.6 ease-in block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:cursor-not-allowed
disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 dark:disabled:text-gray-300 disabled:text-gray-700;
}
.input-regular-container {

2
vuejs/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

11
vuejs/client/src/components/Widget/Popover.vue
View file

@ -1,5 +1,5 @@
<script setup>
import { reactive, ref, onMounted, defineProps } from "vue";
import { reactive, ref, watch, defineProps } from "vue";
import { contentIndex } from "@utils/tabindex.js";
import { v4 as uuidv4 } from "uuid";
import Icons from "@components/Widget/Icons.vue";
@ -121,6 +121,15 @@ function hidePopover() {
popover.isHover = false;
popover.isOpen = false;
}
// Close select dropdown when clicked outside element
watch(popover, () => {
if (popover.isOpen) {
window.addEventListener("scroll", hidePopover, true);
} else {
window.removeEventListener("scroll", hidePopover, true);
}
});
</script>
<template>