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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/modal/modal-types/share-folders-modal.component.tsx
+12 -10
View File
@@ -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>
src/renderer/components/shared/link-button.component.tsx
+6 -5
View File
@@ -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>
);
}
});