Add tooltip to the trash buttons + fix tooltips not working on link buttons

This commit is contained in:
MathieuG-P
2024-12-19 21:39:44 +01:00
parent b82b5e00cd
commit 38f8103040
11 changed files with 36 additions and 24 deletions
+2 -1
View File
@@ -806,7 +806,8 @@
"add-folder": "Ordner hinzufügen",
"link-folder": "Ordner verknüpfen",
"unlink-folder": "Ordner-Verknüpfung aufheben",
"link-all": "Alle verlinken"
"link-all": "Alle verlinken",
"remove-from-the-list": "Aus der Liste entfernen"
}
},
"adding-shared-folder": {
+2 -1
View File
@@ -806,7 +806,8 @@
"add-folder": "Add Folder",
"link-folder": "Link Folder",
"unlink-folder": "Unlink Folder",
"link-all": "Link all"
"link-all": "Link all",
"remove-from-the-list": "Remove from the list"
}
},
"adding-shared-folder": {
+2 -1
View File
@@ -806,7 +806,8 @@
"add-folder": "Añadir Carpeta",
"link-folder": "Enlazar Carpeta",
"unlink-folder": "Desenlazar Carpeta",
"link-all": "Enlazar todo"
"link-all": "Enlazar todo",
"remove-from-the-list": "Eliminar de la lista"
}
},
"adding-shared-folder": {
+2 -1
View File
@@ -807,7 +807,8 @@
"add-folder": "Ajouter un dossier",
"link-folder": "Lier le dossier",
"unlink-folder": "Délier le dossier",
"link-all": "Tout lier"
"link-all": "Tout lier",
"remove-from-the-list": "Retirer de la liste"
}
},
"adding-shared-folder": {
+2 -1
View File
@@ -806,7 +806,8 @@
"add-folder": "フォルダーを追加",
"link-folder": "フォルダーをリンク",
"unlink-folder": "フォルダーのリンクを解除",
"link-all": "すべてリンク"
"link-all": "すべてリンク",
"remove-from-the-list": "リストから削除"
}
},
"adding-shared-folder": {
+2 -1
View File
@@ -806,7 +806,8 @@
"add-folder": "폴더 추가",
"link-folder": "폴더 연결",
"unlink-folder": "폴더 연결 해제",
"link-all": "모두 연결"
"link-all": "모두 연결",
"remove-from-the-list": "목록에서 제거"
}
},
"adding-shared-folder": {
+2 -1
View File
@@ -806,7 +806,8 @@
"add-folder": "Добавить папку",
"link-folder": "Связать папку",
"unlink-folder": "Отвязать папку",
"link-all": "Связать всё"
"link-all": "Связать всё",
"remove-from-the-list": "Удалить из списка"
}
},
"adding-shared-folder": {
+2 -1
View File
@@ -806,7 +806,8 @@
"add-folder": "新增文件夾",
"link-folder": "關聯文件夾",
"unlink-folder": "取消關聯文件夾",
"link-all": "關聯所有"
"link-all": "關聯所有",
"remove-from-the-list": "從列表中移除"
}
},
"adding-shared-folder": {
+2 -1
View File
@@ -806,7 +806,8 @@
"add-folder": "添加文件夹",
"link-folder": "关联文件夹",
"unlink-folder": "取消关联文件夹",
"link-all": "关联所有"
"link-all": "关联所有",
"remove-from-the-list": "从列表中移除"
}
},
"adding-shared-folder": {
@@ -216,7 +216,7 @@ const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {
{name}
</span>
<div className="flex flex-row gap-1.5">
<Tippy placement="left" content={t.text(`modals.shared-folders.buttons.${state === FolderLinkState.Linked ? "unlink-folder" : "link-folder"}`)} arrow={false}>
<Tippy placement="top" theme="default" content={t.text(`modals.shared-folders.buttons.${state === FolderLinkState.Linked ? "unlink-folder" : "link-folder"}`)}>
<LinkButton
className="p-0.5 h-7 shrink-0 aspect-square blur-0 cursor-pointer hover:brightness-75"
state={state}
@@ -241,15 +241,17 @@ const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {
);
}
return (
<BsmButton
className="aspect-square h-7 rounded-md p-1"
icon="trash"
withBar={false}
onClick={e => {
e.preventDefault();
onDelete?.();
}}
/>
<Tippy content={t.text("modals.shared-folders.buttons.remove-from-the-list")} theme="default" hideOnClick={false} placement="top">
<BsmButton
className="aspect-square h-7 rounded-md p-1"
icon="trash"
withBar={false}
onClick={e => {
e.preventDefault();
onDelete?.();
}}
/>
</Tippy>
);
})()}
</div>
@@ -1,9 +1,9 @@
import { motion } from "framer-motion";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { BsmIcon } from "../svgs/bsm-icon.component";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import { useTranslationV2 } from "renderer/hooks/use-translation.hook";
import { FolderLinkState } from "renderer/services/version-folder-linker.service";
import React from "react";
import React, { forwardRef } from "react";
export type LinkBtnProps = {
className?: string;
@@ -12,8 +12,8 @@ export type LinkBtnProps = {
onClick?: () => unknown;
};
export function LinkButton({className, title, state, onClick}: LinkBtnProps) {
const t = useTranslation();
export const LinkButton = forwardRef<HTMLDivElement, LinkBtnProps>(({className, title, state, onClick}, forwardedRef) => {
const { text: t } = useTranslationV2();
const color = useThemeColor("first-color");
const disabled = state === FolderLinkState.Processing || state === FolderLinkState.Pending;
@@ -41,6 +41,7 @@ export function LinkButton({className, title, state, onClick}: LinkBtnProps) {
return (
<motion.div
ref={forwardedRef}
variants={{ hover: { rotate: 22.5 }, tap: { rotate: 45 } }}
whileHover="hover"
whileTap="tap"
@@ -55,4 +56,4 @@ export function LinkButton({className, title, state, onClick}: LinkBtnProps) {
<BsmIcon className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45 brightness-150" icon={state === FolderLinkState.Linked ? "link" : "unlink"} style={{ color: btnColor() }} />
</motion.div>
);
}
});