Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-12 01:40:53 +01:00
Code Releases Wiki Activity

Fix scroll

Browse Source
This commit is contained in:
Nayam Amarshe 2024-04-19 00:15:12 +05:30
parent 833a76159f
commit 9f35d103f2
3 changed files with 55 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
renderer/components/settings-tab/index.tsx
View File

@ -23,6 +23,7 @@ import { UpscaylCloudModal } from "../UpscaylCloudModal";
import { ResetSettings } from "./ResetSettings";
import { featureFlags } from "@common/feature-flags";
import TurnOffNotificationsToggle from "./TurnOffNotificationsToggle";
import { cn } from "@/lib/utils";
interface IProps {
batchMode: boolean;
@ -68,9 +69,8 @@ function SettingsTab({
const [customModelsPath, setCustomModelsPath] = useAtom(customModelsPathAtom);
const modelOptions = useAtomValue(modelsListAtom);
const [scale, setScale] = useAtom(scaleAtom);
const [noImageProcessing, setNoImageProcessing] = useAtom(
noImageProcessingAtom,
);
const [enableScrollbar, setEnableScrollbar] = useState(true);
const [timeoutId, setTimeoutId] = useState(null);
const { logit } = useLog();
@ -152,8 +152,39 @@ function SettingsTab({
/Upscayl\/([\d\.]+\d+)/,
)[1];
function disableScrolling() {
if (timeoutId !== null) {
clearTimeout(timeoutId);
}
setTimeoutId(
setTimeout(function () {
setEnableScrollbar(false);
}, 1000),
);
}
function enableScrolling() {
if (timeoutId !== null) {
clearTimeout(timeoutId);
}
setEnableScrollbar(true);
}
return (
<div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto overflow-x-hidden p-5">
<div
className={cn(
"animate-step-in animate z-50 flex h-screen flex-col gap-7 overflow-y-auto overflow-x-hidden p-5",
enableScrollbar ? "" : "hide-scrollbar",
)}
onScroll={() => {
if (enableScrollbar) disableScrolling();
}}
onWheel={() => {
enableScrolling();
}}
>
<div className="flex flex-col gap-2 text-sm font-medium uppercase">
<p>Having issues?</p>
<a
@ -161,7 +192,7 @@ function SettingsTab({
href="https://github.com/upscayl/upscayl/wiki/"
target="_blank"
>
GET HELP!
GET HELP
</a>
{featureFlags.APP_STORE_BUILD && (
<a

2
renderer/pages/index.tsx
View File

@ -532,6 +532,7 @@ const Home = () => {
>
<PanelRightCloseIcon />
</button>
{/* LEFT PANE */}
<div
className={`relative flex h-screen min-w-[350px] max-w-[350px] flex-col bg-base-100 ${showSidebar ? "" : "hidden"}`}
@ -542,6 +543,7 @@ const Home = () => {
>
<PanelLeftCloseIcon />
</button>
{/* UPSCAYL CLOUD MODAL */}
{featureFlags.SHOW_UPSCAYL_CLOUD_INFO && (
<UpscaylCloudModal

26
renderer/styles/globals.css
View File

@ -45,20 +45,28 @@
font-family: "Poppins", sans-serif;
}
.hide-scrollbar::-webkit-scrollbar-track {
@apply bg-transparent;
}
.hide-scrollbar::-webkit-scrollbar-thumb {
@apply bg-transparent;
}
::-webkit-scrollbar {
@apply w-3;
}
::-webkit-scrollbar-track {
@apply bg-base-300/80 rounded-full;
@apply rounded-full bg-base-300/30;
}
::-webkit-scrollbar-thumb {
@apply bg-base-content/20 rounded-full;
@apply rounded-full bg-base-content/20;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-base-content/50 rounded-full;
@apply rounded-full bg-base-content/50;
}
}
@ -85,11 +93,11 @@
}
.react-select-container .react-select__single-value {
@apply text-primary-content text-sm font-semibold uppercase;
@apply text-sm font-semibold uppercase text-primary-content;
}
.react-select-container .react-select__input-container {
@apply text-primary-content text-sm font-semibold uppercase;
@apply text-sm font-semibold uppercase text-primary-content;
}
.react-select-container .react-select__menu {
@ -97,11 +105,11 @@
}
.react-select-container .react-select__option {
@apply text-primary-content hover:bg-primary-focus hover:text-primary-content my-1 cursor-pointer break-all rounded-md bg-primary;
@apply my-1 cursor-pointer break-all rounded-md bg-primary text-primary-content hover:bg-primary-focus hover:text-primary-content;
}
.react-select-container .react-select__option--is-selected {
@apply text-accent-content bg-accent;
@apply bg-accent text-accent-content;
}
.outline-title {
@ -147,11 +155,11 @@
}
[data-theme="upscayl"] .react-select-container .react-select__single-value {
@apply text-primary-content font-medium normal-case;
@apply font-medium normal-case text-primary-content;
}
[data-theme="upscayl"] .react-select-container .react-select__input-container {
@apply text-primary-content text-xs font-medium normal-case;
@apply text-xs font-medium normal-case text-primary-content;
}
[data-theme="upscayl"] .react-select-container .react-select__menu {