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

Use Tippy for tooltip

Browse Source
This commit is contained in:
Unifox
2025-02-07 22:40:15 -07:00
parent 37538f60b5
commit 187174aa5e
3 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/shared/file-size-text.tsx
+11 -5
View File
@@ -1,3 +1,4 @@
import Tippy from "@tippyjs/react";
import { CSSProperties } from "react";
type Props = {
@@ -22,11 +23,16 @@ export function FileSizeText({ fileSize, wantInfoStyle }: Props) {
};
return (
<span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover/mod:brightness-90 ${(isLargeMod ? "text-red-400 group/tooltip" : (isMediumMod ? "text-yellow-400 group/tooltip" : "") || "")}`} style={wantInfoStyle}>
{getFormattedSize()}
<span className={`opacity-0 group-hover/tooltip:opacity-100 text-center py-[5px] px-0 rounded-[6px] top-[7%] right-[105%] transition-opacity duration-500 absolute bg-black after:absolute after:top-[50%] after:left-full after:-mt-[5px] after:border-5 after:border-solid after:border-t-transparent after:border-r-transparent after:border-b-transparent after:border-l-black ${(isLargeMod ? `w-[160px] text-red-400` : (isMediumMod ? `w-[140px] text-yellow-400` : "") || "")}`}>
{(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")}
<Tippy
content={(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")}
placement="left"
theme={`${(isLargeMod ? `red` : (isMediumMod ? `yellow` : "") || "")}`}
className={`${isLargeMod || isMediumMod ? `` : `opacity-0`}`}
delay={[50, 0]} >
<span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${(isLargeMod ? "text-red-400" : (isMediumMod ? "text-yellow-400" : "") || "")}`} style={wantInfoStyle}>
{getFormattedSize()}
</span>
</span>
</Tippy>
);
}
src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
+8 -8
View File
@@ -53,27 +53,27 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele
};
return (
<li ref={clickRef} className={`${className} group/mod`}>
<div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-2 border-r-0 z-[1] group-hover/mod:brightness-90" style={wantInfoStyle}>
<li ref={clickRef} className={`${className} group`}>
<div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-2 border-r-0 z-[1] group-hover:brightness-90" style={wantInfoStyle}>
<BsmCheckbox className="h-full aspect-square z-[1] relative bg-inherit" onChange={() => onChange(!isChecked)} disabled={mod.mod.category === BbmCategories.Core || isDependency || disabled} checked={isChecked} />
</div>
<span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2 blur-none group-hover/mod:brightness-90" style={wantInfoStyle}>
<span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2 blur-none group-hover:brightness-90" style={wantInfoStyle}>
{mod.mod.name}
</span>
<span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover/mod:brightness-90 ${installedVersion && isOutDated && "text-red-400 line-through"} ${installedVersion && !isOutDated && "text-green-400"}`} style={wantInfoStyle}>
<span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${installedVersion && isOutDated && "text-red-400 line-through"} ${installedVersion && !isOutDated && "text-green-400"}`} style={wantInfoStyle}>
{installedVersion || "-"}
</span>
<span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover/mod:brightness-90" style={wantInfoStyle}>
<span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>
{mod.version.modVersion}
</span>
<FileSizeText fileSize={mod.version.fileSize} wantInfoStyle={wantInfoStyle} />
<span title={striptags(mod.mod?.description ?? "", { tagReplacementText: " " })} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2 group-hover/mod:brightness-90" style={wantInfoStyle}>
<span title={striptags(mod.mod?.description ?? "", { tagReplacementText: " " })} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>
{striptags(mod.mod?.summary ?? "", { tagReplacementText: " " })}
</span>
<div className="h-full bg-inherit flex items-center justify-center mr-3 rounded-r-md pr-2 border-t-2 border-b-2 border-r-2 group-hover/mod:brightness-90" style={wantInfoStyle}>
<div className="h-full bg-inherit flex items-center justify-center mr-3 rounded-r-md pr-2 border-t-2 border-b-2 border-r-2 group-hover:brightness-90" style={wantInfoStyle}>
{installedVersion && (
<BsmButton
className="z-[1] h-7 w-7 p-[5px] rounded-full group-hover/mod:brightness-90"
className="z-[1] h-7 w-7 p-[5px] rounded-full group-hover:brightness-90"
icon="trash"
disabled={disabled}
withBar={false}
src/renderer/index.css
+16
View File
@@ -114,6 +114,22 @@
@apply border-r-neutral-900;
}
.tippy-box[data-theme~='red'] {
@apply bg-neutral-900;
@apply text-red-400;
}
.tippy-box[data-theme~='red'][data-placement^='left'] > .tippy-arrow::before {
@apply border-l-neutral-900;
}
.tippy-box[data-theme~='yellow'] {
@apply bg-neutral-900;
@apply text-yellow-400;
}
.tippy-box[data-theme~='yellow'][data-placement^='left'] > .tippy-arrow::before {
@apply border-l-neutral-900;
}
.bg-theme-1 { @apply bg-light-main-color-1 dark:bg-main-color-1; }
.bg-theme-2 { @apply bg-light-main-color-2 dark:bg-main-color-2; }
.bg-theme-3 { @apply bg-light-main-color-3 dark:bg-main-color-3; }