mirror of
https://github.com/Zagrios/bs-manager.git
synced 2026-07-03 14:08:25 +02:00
Merge pull request #204 from Zagrios/feature/add-link-all-folders-button
Feature/add link all folders button
This commit is contained in:
MathieuG-P
@@ -586,7 +586,8 @@
|
||||
"buttons": {
|
||||
"add-folder": "Ordner Hinzufügen",
|
||||
"link-folder": "Ordner Verknüpfen",
|
||||
"unlink-folder": "Ordner Verknüpfung Aufheben"
|
||||
"unlink-folder": "Ordner Verknüpfung Aufheben",
|
||||
"link-all": "Alle verlinken"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -586,7 +586,8 @@
|
||||
"buttons": {
|
||||
"add-folder": "Add Folder",
|
||||
"link-folder": "Link Folder",
|
||||
"unlink-folder": "Unlink Folder"
|
||||
"unlink-folder": "Unlink Folder",
|
||||
"link-all": "Link all"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -585,7 +585,8 @@
|
||||
"buttons": {
|
||||
"add-folder": "Añadir Carpeta",
|
||||
"link-folder": "Enlazar Carpeta",
|
||||
"unlink-folder": "Desenlazar Carpeta"
|
||||
"unlink-folder": "Desenlazar Carpeta",
|
||||
"link-all": "Enlazar todo"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -585,7 +585,8 @@
|
||||
"buttons": {
|
||||
"add-folder": "Ajouter un dossier",
|
||||
"link-folder": "Lier le dossier",
|
||||
"unlink-folder": "Délier le dossier"
|
||||
"unlink-folder": "Délier le dossier",
|
||||
"link-all": "Tout lier"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -67,6 +67,10 @@ export const ShareFoldersModal: ModalComponent<void, BSVersion> = ({ data }) =>
|
||||
setFolders((prev) => prev.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
const linkAll = () => {
|
||||
folders.forEach(relativeFolder => linker.linkVersionFolder({ version: data, relativeFolder, type: VersionLinkerActionType.Link }))
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="w-full max-w-md ">
|
||||
<h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.shared-folders.title")}</h1>
|
||||
@@ -76,14 +80,16 @@ export const ShareFoldersModal: ModalComponent<void, BSVersion> = ({ data }) =>
|
||||
<FolderItem key={index} version={data} relativeFolder={folder} onDelete={() => {removeFolder(index)}}/>
|
||||
))}
|
||||
</ul>
|
||||
<div className="w-full h-12 rounded-md flex justify-center items-center cursor-pointer bg-light-main-color-1 dark:bg-main-color-1 hover:bg-light-main-color-3 hover:dark:bg-main-color-3" onClick={addFolder}>
|
||||
<BsmIcon className="aspect-square h-8" icon="add"/>
|
||||
<span className="font-bold">{t("modals.shared-folders.buttons.add-folder")}</span>
|
||||
<div className="grid grid-flow-col gap-3 grid-cols-2">
|
||||
<BsmButton icon="add" className="h-8 rounded-md flex justify-center items-center font-bold bg-light-main-color-1 dark:bg-main-color-1" iconClassName="h-6 aspect-square text-current" onClick={addFolder} withBar={false} text="modals.shared-folders.buttons.add-folder"/>
|
||||
<BsmButton icon="link" className="h-8 rounded-md flex justify-center items-center font-bold" typeColor="primary" iconClassName="h-6 aspect-square text-current -rotate-45" onClick={linkAll} withBar={false} text="modals.shared-folders.buttons.link-all"/>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
// -------- FOLDER ITEM --------
|
||||
|
||||
type FolderProps = {
|
||||
version: BSVersion;
|
||||
relativeFolder: string;
|
||||
@@ -111,8 +117,9 @@ const FolderItem = ({version, relativeFolder, onDelete}: FolderProps) => {
|
||||
const [linked, setLinked] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if(pending){ return; }
|
||||
loadFolderIsLinked();
|
||||
}, [version, relativeFolder]);
|
||||
}, [version, relativeFolder, pending]);
|
||||
|
||||
const loadFolderIsLinked = () => {
|
||||
linker.isVersionFolderLinked(version, relativeFolder).toPromise().then(setLinked);
|
||||
@@ -124,13 +131,14 @@ const FolderItem = ({version, relativeFolder, onDelete}: FolderProps) => {
|
||||
version,
|
||||
relativeFolder,
|
||||
type: VersionLinkerActionType.Unlink,
|
||||
}).then(loadFolderIsLinked);
|
||||
})
|
||||
}
|
||||
|
||||
return linker.linkVersionFolder({
|
||||
version,
|
||||
relativeFolder,
|
||||
type: VersionLinkerActionType.Link,
|
||||
}).then(loadFolderIsLinked);
|
||||
})
|
||||
}
|
||||
|
||||
const cancelLink = () => {
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
|
||||
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
|
||||
import { getCorrectTextColor } from "renderer/helpers/correct-text-color";
|
||||
|
||||
type BsmButtonType = "primary"|"success"|"cancel"|"error";
|
||||
type BsmButtonType = "primary"|"secondary"|"success"|"cancel"|"error";
|
||||
|
||||
type Props = {
|
||||
className?: string,
|
||||
@@ -36,7 +36,7 @@ export function BsmButton({className, style, imgClassName, iconClassName, icon,
|
||||
const ref = useRef(null);
|
||||
useClickOutside(ref, onClickOutside);
|
||||
|
||||
const primaryColor = typeColor === "primary" && useThemeColor("first-color");
|
||||
const primaryColor = typeColor === "primary" ? useThemeColor("first-color") : typeColor === "secondary" ? secondColor : undefined;
|
||||
|
||||
const textColor = (() => {
|
||||
if(primaryColor){ return getCorrectTextColor(primaryColor); }
|
||||
@@ -57,7 +57,7 @@ export function BsmButton({className, style, imgClassName, iconClassName, icon,
|
||||
return (
|
||||
<div ref={ref} onClick={handleClick} title={t(title)} className={`${className} overflow-hidden cursor-pointer group ${(!withBar && !disabled && (!!typeColor || !!color)) && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, backgroundColor: primaryColor || color}}>
|
||||
{ image && <BsmImage image={image} className={imgClassName}/> }
|
||||
{ icon && <BsmIcon icon={icon} className={iconClassName ?? "h-full w-full text-gray-800 dark:text-white"} style={{color: iconColor}}/> }
|
||||
{ icon && <BsmIcon icon={icon} className={iconClassName ?? "h-full w-full text-gray-800 dark:text-white"} style={{color: iconColor || textColor}}/> }
|
||||
{text && (type === "submit" ? <button type="submit" className={textClassName || "h-full w-full"} style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span className={textClassName} style={{...(!!textColor && {color: `${textColor}`})}}>{t(text)}</span>)}
|
||||
{ withBar && (
|
||||
<div className="absolute bottom-0 left-0 w-full h-1 bg-current" style={{color: secondColor}}>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
|
||||
|
||||
export function LinkIcon(props: {className?: string, style?: CSSProperties}) {
|
||||
return (
|
||||
<svg className={props.className} style={props.style} stroke="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" strokeWidth="48" strokeLinecap="round" strokeLinejoin="round">
|
||||
<svg className={props.className} style={props.style} stroke="currentColor" fill="none" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" strokeWidth="48" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M200.66,352H144a96,96,0,0,1,0-192h55.41"/>
|
||||
<path d="M312.59,160H368a96,96,0,0,1,0,192H311.34"/>
|
||||
<line x1="169.07" x2="344.93" y1="256" y2="256"/>
|
||||
|
||||
Reference in New Issue
Block a user