mirror of
https://github.com/upscayl/upscayl.git
synced 2024-11-12 01:40:53 +01:00
Fix pane
This commit is contained in:
parent
3fcb32c125
commit
ded51941fe
@ -1,10 +1,10 @@
|
||||
import * as React from "react"
|
||||
import { type DialogProps } from "@radix-ui/react-dialog"
|
||||
import { Command as CommandPrimitive } from "cmdk"
|
||||
import { Search } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import { type DialogProps } from "@radix-ui/react-dialog";
|
||||
import { Command as CommandPrimitive } from "cmdk";
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog"
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
|
||||
const Command = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive>,
|
||||
@ -14,12 +14,12 @@ const Command = React.forwardRef<
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Command.displayName = CommandPrimitive.displayName
|
||||
));
|
||||
Command.displayName = CommandPrimitive.displayName;
|
||||
|
||||
interface CommandDialogProps extends DialogProps {}
|
||||
|
||||
@ -32,8 +32,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
|
||||
</Command>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const CommandInput = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Input>,
|
||||
@ -45,14 +45,14 @@ const CommandInput = React.forwardRef<
|
||||
ref={ref}
|
||||
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",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
));
|
||||
|
||||
CommandInput.displayName = CommandPrimitive.Input.displayName
|
||||
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
||||
|
||||
const CommandList = React.forwardRef<
|
||||
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)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
));
|
||||
|
||||
CommandList.displayName = CommandPrimitive.List.displayName
|
||||
CommandList.displayName = CommandPrimitive.List.displayName;
|
||||
|
||||
const CommandEmpty = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Empty>,
|
||||
@ -76,9 +76,9 @@ const CommandEmpty = React.forwardRef<
|
||||
className="py-6 text-center text-sm"
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
));
|
||||
|
||||
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
|
||||
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
||||
|
||||
const CommandGroup = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Group>,
|
||||
@ -88,13 +88,13 @@ const CommandGroup = React.forwardRef<
|
||||
ref={ref}
|
||||
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",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
));
|
||||
|
||||
CommandGroup.displayName = CommandPrimitive.Group.displayName
|
||||
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
||||
|
||||
const CommandSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Separator>,
|
||||
@ -105,8 +105,8 @@ const CommandSeparator = React.forwardRef<
|
||||
className={cn("-mx-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
|
||||
));
|
||||
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
||||
|
||||
const CommandItem = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Item>,
|
||||
@ -115,14 +115,14 @@ const CommandItem = React.forwardRef<
|
||||
<CommandPrimitive.Item
|
||||
ref={ref}
|
||||
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",
|
||||
className
|
||||
"relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
));
|
||||
|
||||
CommandItem.displayName = CommandPrimitive.Item.displayName
|
||||
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
||||
|
||||
const CommandShortcut = ({
|
||||
className,
|
||||
@ -132,13 +132,13 @@ const CommandShortcut = ({
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
CommandShortcut.displayName = "CommandShortcut"
|
||||
);
|
||||
};
|
||||
CommandShortcut.displayName = "CommandShortcut";
|
||||
|
||||
export {
|
||||
Command,
|
||||
@ -150,4 +150,4 @@ export {
|
||||
CommandItem,
|
||||
CommandShortcut,
|
||||
CommandSeparator,
|
||||
}
|
||||
};
|
||||
|
@ -2,7 +2,7 @@ import { useAtom, useAtomValue } from "jotai";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import { themeChange } from "theme-change";
|
||||
import { modelsListAtom } from "../../../atoms/modelsListAtom";
|
||||
import { TModelsList, modelsListAtom } from "../../../atoms/modelsListAtom";
|
||||
import useLog from "../../hooks/useLog";
|
||||
import {
|
||||
noImageProcessingAtom,
|
||||
@ -14,20 +14,8 @@ import {
|
||||
import { featureFlags } from "@common/feature-flags";
|
||||
import getModelScale from "@common/check-model-scale";
|
||||
import COMMAND from "@common/commands";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { ChevronsUpDownIcon } from "lucide-react";
|
||||
import Select from "react-select";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface IProps {
|
||||
selectImageHandler: () => Promise<void>;
|
||||
@ -65,10 +53,7 @@ function LeftPaneImageSteps({
|
||||
setModel,
|
||||
setGpuId,
|
||||
}: IProps) {
|
||||
const [currentModel, setCurrentModel] = useState<{
|
||||
label: string;
|
||||
value: string;
|
||||
}>({
|
||||
const [currentModel, setCurrentModel] = useState<TModelsList[0]>({
|
||||
label: null,
|
||||
value: null,
|
||||
});
|
||||
@ -223,45 +208,9 @@ function LeftPaneImageSteps({
|
||||
<p className="step-heading">Step 2</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
|
||||
onMenuOpen={() => setOpen(true)}
|
||||
onMenuClose={() => setOpen(false)}
|
||||
options={modelOptions}
|
||||
components={{
|
||||
IndicatorSeparator: () => null,
|
||||
@ -271,10 +220,13 @@ function LeftPaneImageSteps({
|
||||
handleModelChange(e);
|
||||
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"
|
||||
value={currentModel}
|
||||
/> */}
|
||||
/>
|
||||
|
||||
{!batchMode && (
|
||||
<div className="mt-4 flex items-center gap-1">
|
||||
|
@ -89,7 +89,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
@ -16,6 +16,20 @@ module.exports = {
|
||||
prefix: "",
|
||||
theme: {
|
||||
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: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
|
Loading…
Reference in New Issue
Block a user