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 * 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,
|
||||||
}
|
};
|
||||||
|
@ -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">
|
||||||
|
@ -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 {
|
||||||
|
@ -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",
|
||||||
|
Loading…
Reference in New Issue
Block a user