mirror of
https://github.com/upscayl/upscayl.git
synced 2025-01-19 01:24:09 +01:00
Update toasts
This commit is contained in:
Nayam Amarshe
parent
b51f259d21
commit
a397f1bc99
@ -15,7 +15,8 @@ export function CompressionInput({
|
||||
{compression > 0 && (
|
||||
<p className="text-xs text-base-content/80">
|
||||
PNG compression is lossless, so it might not reduce the file size
|
||||
significantly. JPG and WebP compression is lossy.
|
||||
significantly and higher compression values might affect the
|
||||
performance. JPG and WebP compression is lossy.
|
||||
</p>
|
||||
)}
|
||||
<input
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import * as React from "react"
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ToastProvider = ToastPrimitives.Provider
|
||||
const ToastProvider = ToastPrimitives.Provider;
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||
@ -15,12 +15,12 @@ const ToastViewport = React.forwardRef<
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||
));
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
||||
|
||||
const toastVariants = cva(
|
||||
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||
@ -35,8 +35,8 @@ const toastVariants = cva(
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
@ -49,9 +49,9 @@ const Toast = React.forwardRef<
|
||||
className={cn(toastVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Toast.displayName = ToastPrimitives.Root.displayName
|
||||
);
|
||||
});
|
||||
Toast.displayName = ToastPrimitives.Root.displayName;
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
@ -60,13 +60,13 @@ const ToastAction = React.forwardRef<
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
className
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||
));
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
@ -75,16 +75,16 @@ const ToastClose = React.forwardRef<
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
className
|
||||
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
className,
|
||||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
))
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||
));
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
@ -95,8 +95,8 @@ const ToastTitle = React.forwardRef<
|
||||
className={cn("text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||
));
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
@ -107,12 +107,12 @@ const ToastDescription = React.forwardRef<
|
||||
className={cn("text-sm opacity-90", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||
));
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
||||
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
||||
|
||||
export {
|
||||
type ToastProps,
|
||||
@ -124,4 +124,4 @@ export {
|
||||
ToastDescription,
|
||||
ToastClose,
|
||||
ToastAction,
|
||||
}
|
||||
};
|
||||
|
||||
@ -5,11 +5,11 @@ import {
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport,
|
||||
} from "@/components/ui/toast"
|
||||
import { useToast } from "@/components/ui/use-toast"
|
||||
} from "@/components/ui/toast";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
|
||||
export function Toaster() {
|
||||
const { toasts } = useToast()
|
||||
const { toasts } = useToast();
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
@ -25,9 +25,9 @@ export function Toaster() {
|
||||
{action}
|
||||
<ToastClose />
|
||||
</Toast>
|
||||
)
|
||||
);
|
||||
})}
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -40,7 +40,12 @@ import {
|
||||
import { NewsModal } from "@/components/NewsModal";
|
||||
import { newsAtom, showNewsModalAtom } from "@/atoms/newsAtom";
|
||||
import matter from "gray-matter";
|
||||
import { PanelLeftCloseIcon, PanelRightCloseIcon } from "lucide-react";
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
PanelLeftCloseIcon,
|
||||
PanelRightCloseIcon,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { ToastAction } from "@/components/ui/toast";
|
||||
@ -125,9 +130,22 @@ const Home = () => {
|
||||
title: "GPU Error",
|
||||
description: `GPU error occurred. Please read the wiki for troubleshooting! ${data})`,
|
||||
action: (
|
||||
<a href="https://github.com/upscayl/upscayl/wiki/" target="_blank">
|
||||
<div className="flex flex-col gap-2">
|
||||
<ToastAction
|
||||
altText="Copy Error"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(data);
|
||||
}}
|
||||
>
|
||||
Copy Error
|
||||
</ToastAction>
|
||||
<a
|
||||
href="https://github.com/upscayl/upscayl/wiki/"
|
||||
target="_blank"
|
||||
>
|
||||
<ToastAction altText="Open Wiki">Troubleshoot</ToastAction>
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
resetImagePaths();
|
||||
@ -135,11 +153,24 @@ const Home = () => {
|
||||
if (batchMode) return;
|
||||
toast({
|
||||
title: "Read/Write Error",
|
||||
description: `Make sure that the path is correct and you have proper read/write permissions (${data})`,
|
||||
description: `Make sure that the path is correct and you have proper read/write permissions \n(${data})`,
|
||||
action: (
|
||||
<a href="https://github.com/upscayl/upscayl/wiki/" target="_blank">
|
||||
<div className="flex flex-col gap-2">
|
||||
<ToastAction
|
||||
altText="Copy Error"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(data);
|
||||
}}
|
||||
>
|
||||
Copy Error
|
||||
</ToastAction>
|
||||
<a
|
||||
href="https://github.com/upscayl/upscayl/wiki/"
|
||||
target="_blank"
|
||||
>
|
||||
<ToastAction altText="Open Wiki">Troubleshoot</ToastAction>
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
resetImagePaths();
|
||||
@ -574,12 +605,12 @@ const Home = () => {
|
||||
{/* SIDEBAR BUTTON */}
|
||||
<button
|
||||
className={cn(
|
||||
"fixed left-0 top-1/2 z-50 -translate-y-1/2 rounded-r-full bg-base-100 p-4 ",
|
||||
"fixed left-0 top-1/2 z-[999] -translate-y-1/2 rounded-r-full bg-base-100 p-4 ",
|
||||
showSidebar ? "hidden" : "",
|
||||
)}
|
||||
onClick={() => setShowSidebar((prev) => !prev)}
|
||||
>
|
||||
<PanelRightCloseIcon />
|
||||
<ChevronRightIcon />
|
||||
</button>
|
||||
|
||||
{/* LEFT PANE */}
|
||||
@ -587,10 +618,10 @@ const Home = () => {
|
||||
className={`relative flex h-screen min-w-[350px] max-w-[350px] flex-col bg-base-100 ${showSidebar ? "" : "hidden"}`}
|
||||
>
|
||||
<button
|
||||
className="absolute -right-0 top-1/2 z-50 -translate-y-1/2 translate-x-1/2 rounded-full bg-base-100 p-4"
|
||||
className="absolute -right-0 top-1/2 z-[999] -translate-y-1/2 translate-x-1/2 rounded-full bg-base-100 p-4"
|
||||
onClick={() => setShowSidebar((prev) => !prev)}
|
||||
>
|
||||
<PanelLeftCloseIcon />
|
||||
<ChevronLeftIcon />
|
||||
</button>
|
||||
|
||||
{/* UPSCAYL CLOUD MODAL */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user