1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-12 01:40:53 +01:00
This commit is contained in:
Nayam Amarshe 2024-04-20 16:41:03 +05:30
parent 3fcb32c125
commit ded51941fe
4 changed files with 59 additions and 93 deletions

View File

@ -1,10 +1,10 @@
import * as React from "react" import * as React from "react";
import { type DialogProps } from "@radix-ui/react-dialog" import { type DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk" import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react" import { Search } from "lucide-react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
import { Dialog, DialogContent } from "@/components/ui/dialog" import { Dialog, DialogContent } from "@/components/ui/dialog";
const Command = React.forwardRef< const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>, React.ElementRef<typeof CommandPrimitive>,
@ -14,12 +14,12 @@ const Command = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className className,
)} )}
{...props} {...props}
/> />
)) ));
Command.displayName = CommandPrimitive.displayName Command.displayName = CommandPrimitive.displayName;
interface CommandDialogProps extends DialogProps {} interface CommandDialogProps extends DialogProps {}
@ -32,8 +32,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
</Command> </Command>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
) );
} };
const CommandInput = React.forwardRef< const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>, React.ElementRef<typeof CommandPrimitive.Input>,
@ -45,14 +45,14 @@ const CommandInput = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className className,
)} )}
{...props} {...props}
/> />
</div> </div>
)) ));
CommandInput.displayName = CommandPrimitive.Input.displayName CommandInput.displayName = CommandPrimitive.Input.displayName;
const CommandList = React.forwardRef< const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>, React.ElementRef<typeof CommandPrimitive.List>,
@ -63,9 +63,9 @@ const CommandList = React.forwardRef<
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
{...props} {...props}
/> />
)) ));
CommandList.displayName = CommandPrimitive.List.displayName CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty = React.forwardRef< const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>, React.ElementRef<typeof CommandPrimitive.Empty>,
@ -76,9 +76,9 @@ const CommandEmpty = React.forwardRef<
className="py-6 text-center text-sm" className="py-6 text-center text-sm"
{...props} {...props}
/> />
)) ));
CommandEmpty.displayName = CommandPrimitive.Empty.displayName CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
const CommandGroup = React.forwardRef< const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>, React.ElementRef<typeof CommandPrimitive.Group>,
@ -88,13 +88,13 @@ const CommandGroup = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className className,
)} )}
{...props} {...props}
/> />
)) ));
CommandGroup.displayName = CommandPrimitive.Group.displayName CommandGroup.displayName = CommandPrimitive.Group.displayName;
const CommandSeparator = React.forwardRef< const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>, React.ElementRef<typeof CommandPrimitive.Separator>,
@ -105,8 +105,8 @@ const CommandSeparator = React.forwardRef<
className={cn("-mx-1 h-px bg-border", className)} className={cn("-mx-1 h-px bg-border", className)}
{...props} {...props}
/> />
)) ));
CommandSeparator.displayName = CommandPrimitive.Separator.displayName CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
const CommandItem = React.forwardRef< const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>, React.ElementRef<typeof CommandPrimitive.Item>,
@ -115,14 +115,14 @@ const CommandItem = React.forwardRef<
<CommandPrimitive.Item <CommandPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent",
className className,
)} )}
{...props} {...props}
/> />
)) ));
CommandItem.displayName = CommandPrimitive.Item.displayName CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({ const CommandShortcut = ({
className, className,
@ -132,13 +132,13 @@ const CommandShortcut = ({
<span <span
className={cn( className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground", "ml-auto text-xs tracking-widest text-muted-foreground",
className className,
)} )}
{...props} {...props}
/> />
) );
} };
CommandShortcut.displayName = "CommandShortcut" CommandShortcut.displayName = "CommandShortcut";
export { export {
Command, Command,
@ -150,4 +150,4 @@ export {
CommandItem, CommandItem,
CommandShortcut, CommandShortcut,
CommandSeparator, CommandSeparator,
} };

View File

@ -2,7 +2,7 @@ import { useAtom, useAtomValue } from "jotai";
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { Tooltip } from "react-tooltip"; import { Tooltip } from "react-tooltip";
import { themeChange } from "theme-change"; import { themeChange } from "theme-change";
import { modelsListAtom } from "../../../atoms/modelsListAtom"; import { TModelsList, modelsListAtom } from "../../../atoms/modelsListAtom";
import useLog from "../../hooks/useLog"; import useLog from "../../hooks/useLog";
import { import {
noImageProcessingAtom, noImageProcessingAtom,
@ -14,20 +14,8 @@ import {
import { featureFlags } from "@common/feature-flags"; import { featureFlags } from "@common/feature-flags";
import getModelScale from "@common/check-model-scale"; import getModelScale from "@common/check-model-scale";
import COMMAND from "@common/commands"; import COMMAND from "@common/commands";
import { Button } from "@/components/ui/button"; import Select from "react-select";
import { import { cn } from "@/lib/utils";
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
} from "@/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { ChevronsUpDownIcon } from "lucide-react";
interface IProps { interface IProps {
selectImageHandler: () => Promise<void>; selectImageHandler: () => Promise<void>;
@ -65,10 +53,7 @@ function LeftPaneImageSteps({
setModel, setModel,
setGpuId, setGpuId,
}: IProps) { }: IProps) {
const [currentModel, setCurrentModel] = useState<{ const [currentModel, setCurrentModel] = useState<TModelsList[0]>({
label: string;
value: string;
}>({
label: null, label: null,
value: null, value: null,
}); });
@ -223,45 +208,9 @@ function LeftPaneImageSteps({
<p className="step-heading">Step 2</p> <p className="step-heading">Step 2</p>
<p className="mb-2 text-sm">Select Model</p> <p className="mb-2 text-sm">Select Model</p>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="default"
role="combobox"
aria-expanded={open}
className="w-[200px] justify-between truncate transition-all group-hover:w-full group-active:w-full focus:w-full"
>
<p className="truncate">
{currentModel.value
? modelOptions.find(
(modelOption) => modelOption.value === currentModel.value,
)?.label
: "Select model..."}
</p>
<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent>
<Command>
<CommandInput placeholder="Search framework..." className="h-9" />
<CommandEmpty>No framework found.</CommandEmpty>
<CommandGroup>
{modelOptions?.map(({ value, label }) => {
return (
<CommandItem
key={value.toString()}
value={value.toString()}
>
{label.toString()}
</CommandItem>
);
})}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
{/*
<Select <Select
onMenuOpen={() => setOpen(true)}
onMenuClose={() => setOpen(false)}
options={modelOptions} options={modelOptions}
components={{ components={{
IndicatorSeparator: () => null, IndicatorSeparator: () => null,
@ -271,10 +220,13 @@ function LeftPaneImageSteps({
handleModelChange(e); handleModelChange(e);
setCurrentModel({ label: e.label, value: e.value }); setCurrentModel({ label: e.label, value: e.value });
}} }}
className="react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full" className={cn(
"react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full",
open && "!w-full",
)}
classNamePrefix="react-select" classNamePrefix="react-select"
value={currentModel} value={currentModel}
/> */} />
{!batchMode && ( {!batchMode && (
<div className="mt-4 flex items-center gap-1"> <div className="mt-4 flex items-center gap-1">

View File

@ -89,7 +89,7 @@
} }
.react-select-container .react-select__control--menu-is-open { .react-select-container .react-select__control--menu-is-open {
@apply bg-primary-content text-primary-content; @apply bg-primary text-primary-content;
} }
.react-select-container .react-select__single-value { .react-select-container .react-select__single-value {
@ -105,7 +105,7 @@
} }
.react-select-container .react-select__option { .react-select-container .react-select__option {
@apply my-1 cursor-pointer break-all rounded-md bg-primary text-primary-content hover:bg-primary-content hover:text-primary-content; @apply my-1 cursor-pointer break-all rounded-md bg-primary text-primary-content hover:bg-primary-content/20 hover:text-primary-content;
} }
.react-select-container .react-select__option--is-selected { .react-select-container .react-select__option--is-selected {

View File

@ -16,6 +16,20 @@ module.exports = {
prefix: "", prefix: "",
theme: { theme: {
extend: { extend: {
animation: {
marquee: "marquee 25s linear infinite",
marquee2: "marquee2 25s linear infinite",
},
keyframes: {
marquee: {
"0%": { transform: "translateX(0%)" },
"100%": { transform: "translateX(-100%)" },
},
marquee2: {
"0%": { transform: "translateX(100%)" },
"100%": { transform: "translateX(0%)" },
},
},
container: { container: {
center: true, center: true,
padding: "2rem", padding: "2rem",