zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #223 from Zagrios/hotfix/double-click-on-model-to-download

Browse Source 
[hotfix] add double click to download model
This commit is contained in:
MathieuG-P
2023-05-24 23:03:44 +02:00
committed by GitHub
parent cebf83be7d 3bdbcfcfae
commit 03d4d14edd
3 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/modal/modal-types/models/download-models-modal.component.tsx
+1
View File
@@ -182,6 +182,7 @@ export const DownloadModelsModal: ModalComponent<void, {version: BSVersion, type
callbackValue={model}
isDownloading={equal(currentDownload, {model, version} as ModelDownload)}
onDownload={!isModelOwned(model) ? handleDownloadModel: undefined}
onDoubleClick={(!isModelOwned(model)) ? handleDownloadModel: undefined}
onCancelDownload={modelPendingDownload(model) ? handleCancelDownload : undefined}
/>
))}
src/renderer/components/models-management/model-item.component.tsx
+24 -12
View File
@@ -1,5 +1,5 @@
import equal from "fast-deep-equal";
import { memo, useState } from "react";
import { memo, useRef, useState } from "react";
import { MSModel, MSModelType } from "shared/models/models/model-saber.model";
import { BsmImage } from "../shared/bsm-image.component";
import { motion } from "framer-motion";
@@ -16,6 +16,7 @@ import { BsmButton } from "../shared/bsm-button.component";
import { BsmBasicSpinner } from "../shared/bsm-basic-spinner/bsm-basic-spinner.component";
import { isValidUrl } from "shared/helpers/url.helpers";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import useDoubleClick from "use-double-click";
type Props<T> = {
selected?: boolean,
@@ -26,7 +27,8 @@ type Props<T> = {
onDelete?: (value: T) => void,
onDownload?: (value: T) => void,
onCancelDownload?: (value: T) => void
} & Partial<MSModel> & Partial<BsmLocalModel> & Omit<React.ComponentProps<"li">, "id">
onDoubleClick?: (value: T) => void
} & Partial<MSModel> & Partial<BsmLocalModel> & Omit<React.ComponentProps<"li">, "id" | "onDoubleClick">
function modelItem<T = unknown>(props: Props<T>) {
@@ -34,6 +36,14 @@ function modelItem<T = unknown>(props: Props<T>) {
const color = useThemeColor("first-color");
const [hovered, setHovered] = useState(false);
const [idContentCopied, setIdContentCopied] = useState<string>(null);
const ref = useRef();
useDoubleClick({
ref,
latency: props.onDoubleClick ? 200 : 0,
onSingleClick: (e) => props?.onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>),
onDoubleClick: () => props?.onDoubleClick?.(props.callbackValue)
});
const modelPageUrl = (() => {
if(!props.id){ return null; }
@@ -88,18 +98,20 @@ function modelItem<T = unknown>(props: Props<T>) {
}
return (
<motion.li className={`relative flex-grow min-w-[16rem] h-64 cursor-pointer ${props.className ?? ""}`} onHoverStart={() => setHovered(() => true)} onHoverEnd={() => setHovered(() => false)} onClick={props.onClick}>
<motion.li className={`relative flex-grow min-w-[16rem] h-64 cursor-pointer ${props.className ?? ""}`} onHoverStart={() => setHovered(() => true)} onHoverEnd={() => setHovered(() => false)}>
<GlowEffect visible={props.selected || hovered}/>
<div className="absolute top-0 left-0 w-full h-full rounded-lg overflow-hidden blur-none bg-black shadow-sm shadow-black">
<BsmImage className={`absolute top-0 left-0 w-full h-full object-cover ${props.type === MSModelType.Avatar ? "object-top" : ""}`} image={thumbnailUrl} placeholder={defaultImage} loading="lazy"/>
<div className="absolute top-0 right-0 h-full w-0 flex flex-col items-end gap-1 pt-1.5 pr-1.5">
{!props.isDownloading ? (
actionButtons().map((button, index) => (
<BsmButton key={index} className="w-8 h-8 p-1 rounded-md transition-transform duration-150 shadow-black shadow-sm" style={{transitionDelay: `${index * 50}ms`, transform: hovered ? "translate(0%)" : "translate(150%)"}} icon={button.icon} iconColor={button.iconColor} onClick={e => {e.stopPropagation(); e.preventDefault(); button.action();}} withBar={false}/>
))
): (
<BsmBasicSpinner className="w-7 h-7 p-1 rounded-md bg-main-color-2 flex items-center justify-center shadow-black shadow-sm" spinnerClassName="brightness-200" thikness="3.5px" style={{color}}/>
)}
<div ref={ref} className="contents">
<BsmImage className={`absolute top-0 left-0 w-full h-full object-cover ${props.type === MSModelType.Avatar ? "object-top" : ""}`} image={thumbnailUrl} placeholder={defaultImage} loading="lazy"/>
<div className="absolute top-0 right-0 h-full w-0 flex flex-col items-end gap-1 pt-1.5 pr-1.5">
{!props.isDownloading ? (
actionButtons().map((button, index) => (
<BsmButton key={index} className="w-8 h-8 p-1 rounded-md transition-transform duration-150 shadow-black shadow-sm" style={{transitionDelay: `${index * 50}ms`, transform: hovered ? "translate(0%)" : "translate(150%)"}} icon={button.icon} iconColor={button.iconColor} onClick={e => {e.stopPropagation(); e.preventDefault(); button.action();}} withBar={false}/>
))
): (
<BsmBasicSpinner className="w-7 h-7 p-1 rounded-md bg-main-color-2 flex items-center justify-center shadow-black shadow-sm" spinnerClassName="brightness-200" thikness="3.5px" style={{color}}/>
)}
</div>
</div>
<motion.div className="absolute top-[83%] left-0 w-full h-full px-2 flex flex-col gap-1.5 bg-main-color-3 bg-opacity-60 backdrop-blur-md transition-all delay-150 hover:top-0 group" onClick={e =>{e.stopPropagation(); e.preventDefault()}}>
<div className="w-full flex justify-center items-center mt-1.5">
src/renderer/services/models-management/models-downloader.service.ts
+3 -2
View File
@@ -8,6 +8,7 @@ import { DownloadModelsModal } from "renderer/components/modal/modal-types/model
import { ProgressBarService } from "../progress-bar.service";
import { Progression } from "main/helpers/fs.helpers";
import { ProgressionInterface } from "shared/models/progress-bar";
import equal from "fast-deep-equal";
export class ModelsDownloaderService {
@@ -59,11 +60,11 @@ export class ModelsDownloaderService {
}
public addModelToDownload(model: ModelDownload): ModelDownload{
public addModelToDownload(model: ModelDownload): void{
if(this.queue$.value.some(m => equal(m, model))){ return null; }
const queue = this.queue$.value;
queue.push(model);
this.queue$.next([...queue]);
return model;
}
public removeFromDownloadQueue(download: ModelDownload){