1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-30 18:24:27 +01:00

Add reset and hide modal

This commit is contained in:
Nayam Amarshe 2023-09-03 14:46:48 +05:30
parent eb1e467a67
commit b4ebfdf871
10 changed files with 122 additions and 16 deletions

View File

@ -1,7 +1,7 @@
{
"name": "upscayl",
"private": true,
"version": "2.7.5",
"version": "2.8.0",
"productName": "Upscayl",
"homepage": "https://github.com/TGS963/upscayl",
"contributors": [
@ -56,7 +56,6 @@
"appId": "org.upscayl.app",
"artifactName": "${name}-${version}-${os}-${arch}.${ext}",
"asar": true,
"notarize": false,
"afterSign": "scripts/notarize.js",
"extraFiles": [
{
@ -97,6 +96,7 @@
"hardenedRuntime": true,
"entitlements": "resources/entitlements.mac.plist",
"entitlementsInherit": "resources/entitlements.mac.plist",
"notarize": false,
"gatekeeperAssess": false,
"target": [
{

View File

@ -13,3 +13,8 @@ export const rememberOutputFolderAtom = atomWithStorage<boolean>(
"rememberOutputFolder",
false
);
export const dontShowCloudModalAtom = atomWithStorage<boolean>(
"dontShowCloudModal",
false
);

View File

@ -6,7 +6,8 @@ export default function Header({ version }: { version: string }) {
href="https://github.com/upscayl/upscayl"
target="_blank"
className={`outline-none focus-visible:ring-2`}
data-tip="Star us on GitHub 😁">
data-tooltip-id="tooltip"
data-tooltip-content="Star us on GitHub 😁">
<div className="flex items-center gap-3 px-5 py-5">
<img src="icon.png" className="inline-block w-14" alt="Upscayl Logo" />
<div className="flex flex-col justify-center">

View File

@ -5,13 +5,38 @@ import { doc, setDoc } from "firebase/firestore";
const nameRegex = /^[A-Za-z\s.'-]+$/;
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
export const UpscaylCloudModal = ({ show, setShow }) => {
export const UpscaylCloudModal = ({ show, setShow, setDontShowCloudModal }) => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
return (
<dialog className={`modal ${show && "modal-open"}`}>
<div className="modal-box flex flex-col text-center items-center gap-4">
<button
className="absolute top-2 right-4 btn btn-circle"
onClick={() => setShow(false)}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24">
<rect
x="0"
y="0"
width="24"
height="24"
fill="none"
stroke="none"
/>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="1.5"
d="m8.464 15.535l7.072-7.07m-7.072 0l7.072 7.07"
/>
</svg>
</button>
<p className="badge badge-neutral text-xs">Coming soon!</p>
<p className="text-2xl font-semibold">Introducing Upscayl Cloud!</p>
<p className="w-9/12 font-medium text-lg">
@ -46,11 +71,15 @@ export const UpscaylCloudModal = ({ show, setShow }) => {
email,
});
} catch (error) {
alert("Error joining the waitlist. Please try again...");
alert(
`Thank you ${name}! It seems that your email has already been registered :D If that's not the case, please try again.`
);
return;
}
setName("");
setEmail("");
setDontShowCloudModal(true);
setShow(false);
alert(
"Thank you for joining the waitlist! We will notify you when Upscayl Cloud is ready for you."
);
@ -79,6 +108,16 @@ export const UpscaylCloudModal = ({ show, setShow }) => {
className="bg-success text-success-content rounded-2xl px-4 py-2">
Join the waitlist
</button>
<button
className="text-xs text-base-content/50"
onClick={() => {
setDontShowCloudModal(true);
setShow(false);
}}
type="button">
DON'T SHOW AGAIN
</button>
</form>
</div>

View File

@ -0,0 +1,20 @@
import React from "react";
import commands from "../../../electron/commands";
export function ResetSettings() {
return (
<div className="flex flex-col items-start gap-2">
<p className="text-sm font-medium">RESET UPSCAYL</p>
<button
className="btn-primary btn"
onClick={async () => {
localStorage.clear();
alert(
"Upscayl has been reset. Please close this window and open Upscayl again."
);
}}>
RESET UPSCAYL
</button>
</div>
);
}

View File

@ -14,6 +14,8 @@ import { modelsListAtom } from "../../atoms/modelsListAtom";
import useLog from "../hooks/useLog";
import { QualityInput } from "./QualityInput";
import ToggleOverwrite from "./ToggleOverwrite";
import { UpscaylCloudModal } from "../UpscaylCloudModal";
import { ResetSettings } from "./ResetSettings";
interface IProps {
batchMode: boolean;
@ -28,6 +30,9 @@ interface IProps {
overwrite: boolean;
setOverwrite: (arg: any) => void;
os: "linux" | "mac" | "win" | undefined;
show: boolean;
setShow: React.Dispatch<React.SetStateAction<boolean>>;
setDontShowCloudModal: React.Dispatch<React.SetStateAction<boolean>>;
}
function SettingsTab({
@ -43,6 +48,9 @@ function SettingsTab({
overwrite,
setOverwrite,
os,
show,
setShow,
setDontShowCloudModal,
}: IProps) {
// STATES
const [currentModel, setCurrentModel] = useState<{
@ -195,6 +203,23 @@ function SettingsTab({
customModelsPath={customModelsPath}
setCustomModelsPath={setCustomModelsPath}
/>
{/* RESET SETTINGS */}
<ResetSettings />
<button
className="mb-5 rounded-btn p-1 mx-5 bg-success shadow-lg shadow-success/40 text-slate-50 animate-pulse text-sm"
onClick={() => {
setShow(true);
}}>
Introducing Upscayl Cloud
</button>
<UpscaylCloudModal
show={show}
setShow={setShow}
setDontShowCloudModal={setDontShowCloudModal}
/>
</div>
);
}

View File

@ -1,4 +1,4 @@
"use client"
"use client";
import { useState, useEffect, useCallback } from "react";
import commands from "../../electron/commands";
import { ReactCompareSlider } from "react-compare-slider";
@ -13,7 +13,11 @@ import SettingsTab from "../components/settings-tab";
import { useAtom } from "jotai";
import { logAtom } from "../atoms/logAtom";
import { modelsListAtom } from "../atoms/modelsListAtom";
import { batchModeAtom, scaleAtom } from "../atoms/userSettingsAtom";
import {
batchModeAtom,
dontShowCloudModalAtom,
scaleAtom,
} from "../atoms/userSettingsAtom";
import useLog from "../components/hooks/useLog";
import { UpscaylCloudModal } from "../components/UpscaylCloudModal";
@ -47,6 +51,9 @@ const Home = () => {
const [logData, setLogData] = useAtom(logAtom);
const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
const [scale] = useAtom(scaleAtom);
const [dontShowCloudModal, setDontShowCloudModal] = useAtom(
dontShowCloudModalAtom
);
const [showCloudModal, setShowCloudModal] = useState(false);
@ -458,12 +465,17 @@ const Home = () => {
return (
<div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
<div className={`flex h-screen w-128 flex-col bg-base-100`}>
<UpscaylCloudModal show={showCloudModal} setShow={setShowCloudModal} />
<UpscaylCloudModal
show={showCloudModal}
setShow={setShowCloudModal}
setDontShowCloudModal={setDontShowCloudModal}
/>
{window.electron.platform === "mac" && (
<div className="pt-8 mac-titlebar"></div>
)}
{/* HEADER */}
<Header version={version} />
{!dontShowCloudModal && (
<button
className="mb-5 rounded-btn p-1 mx-5 bg-success shadow-lg shadow-success/40 text-slate-50 animate-pulse text-sm"
onClick={() => {
@ -471,6 +483,7 @@ const Home = () => {
}}>
Introducing Upscayl Cloud
</button>
)}
<Tabs selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
@ -509,6 +522,9 @@ const Home = () => {
overwrite={overwrite}
setOverwrite={setOverwrite}
os={os}
show={showCloudModal}
setShow={setShowCloudModal}
setDontShowCloudModal={setDontShowCloudModal}
/>
)}
{/* )} */}