mirror of
https://github.com/Zagrios/bs-manager.git
synced 2026-07-03 14:08:25 +02:00
Merge pull request #397 from Zagrios/feature/maps-tooltips/392
Feature/maps tooltips/392
This commit is contained in:
Shidorien
@@ -56,7 +56,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
|
||||
const renderDurationLabel = (sec: number): JSX.Element => {
|
||||
const textValue = (() => {
|
||||
if (sec === MIN_DURATION) {
|
||||
return t("maps.map-filter-panel.duration");
|
||||
return MIN_DURATION;
|
||||
}
|
||||
if (sec === MAX_DURATION) {
|
||||
return "∞";
|
||||
@@ -72,7 +72,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
|
||||
const renderNpsLabel = (nps: number): JSX.Element => {
|
||||
const textValue = (() => {
|
||||
if (nps === MIN_NPS) {
|
||||
return "NPS";
|
||||
return MIN_NPS;
|
||||
}
|
||||
if (nps === MAX_NPS) {
|
||||
return "∞";
|
||||
@@ -167,9 +167,11 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
|
||||
|
||||
return !playlist ? (
|
||||
<motion.div ref={ref} className={`${className} bg-light-main-color-2 dark:bg-main-color-3`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
|
||||
<div className="w-full h-6 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-2">
|
||||
<BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
|
||||
<BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
|
||||
<div className="w-full h-6 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-1">
|
||||
<BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
|
||||
<BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
|
||||
<span className=" text-sm font-bold text-center mt-2.5">{t("maps.map-filter-panel.nps")}</span>
|
||||
<span className=" text-sm font-bold text-center mt-2.5">{t("maps.map-filter-panel.duration")}</span>
|
||||
</div>
|
||||
<div className="w-full h-full flex gap-x-2">
|
||||
<section className="shrink-0">
|
||||
@@ -180,7 +182,6 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
|
||||
<span className="grow capitalize">{translateMapSpecificity(specificity)}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<h2 className="my-1 uppercase text-sm">{t("maps.map-filter-panel.requirements")}</h2>
|
||||
{MAP_REQUIREMENTS.map(requirement => (
|
||||
<div key={requirement} className="flex justify-start items-center h-[22px] z-20 relative py-0.5 cursor-pointer" onClick={() => handleCheckbox(requirement)}>
|
||||
|
||||
@@ -21,6 +21,7 @@ import useDoubleClick from "use-double-click";
|
||||
import { GlowEffect } from "../shared/glow-effect.component";
|
||||
import { useDelayedState } from "renderer/hooks/use-delayed-state.hook";
|
||||
import { useService } from "renderer/hooks/use-service.hook";
|
||||
import Tippy from "@tippyjs/react";
|
||||
|
||||
export type ParsedMapDiff = { type: BsvMapDifficultyType; name: string; stars: number };
|
||||
|
||||
@@ -51,7 +52,6 @@ export type MapItemProps<T = unknown> = {
|
||||
};
|
||||
|
||||
export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, ranked, bpm, duration, likes, createdAt, selected, downloading, showOwned, callBackParam, onDelete, onDownload, onSelected, onCancelDownload, onDoubleClick }: MapItemProps) => {
|
||||
|
||||
const linkOpener = useService(LinkOpenerService);
|
||||
const audioPlayer = useService(AudioPlayerService);
|
||||
|
||||
@@ -156,25 +156,25 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
|
||||
return (
|
||||
<motion.li className="relative h-[100px] w-[400px] min-w-[370px] shrink-0 grow basis-0 text-white group cursor-pointer" onHoverStart={() => setHovered(true)} onHoverEnd={() => setHovered(false)} style={{ zIndex: hovered && 5, transform: "translateZ(0) scale(1.0, 1.0)", backfaceVisibility: "hidden" }}>
|
||||
<GlowEffect visible={hovered || (selected && !!onSelected)} />
|
||||
<AnimatePresence>
|
||||
{(diffsPanelHovered || bottomBarHovered) && (
|
||||
<motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
|
||||
{Array.from(diffs.entries()).map(([charac, diffSet]) => (
|
||||
<ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
|
||||
{diffSet.map(({ type, name, stars }) => (
|
||||
<li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
|
||||
<BsmIcon className="h-full w-fit p-px" icon={charac} />
|
||||
<span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[type] }}>
|
||||
{stars ? <span className="h-full block brightness-[.25]">★ {stars}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(type)}</span>}
|
||||
</span>
|
||||
<span className="text-sm leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
))}
|
||||
</motion.ul>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<AnimatePresence>
|
||||
{(diffsPanelHovered || bottomBarHovered) && (
|
||||
<motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
|
||||
{Array.from(diffs.entries()).map(([charac, diffSet]) => (
|
||||
<ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
|
||||
{diffSet.map(({ type, name, stars }) => (
|
||||
<li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
|
||||
<BsmIcon className="h-full w-fit p-px" icon={charac} />
|
||||
<span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[type] }}>
|
||||
{stars ? <span className="h-full block brightness-[.25]">★ {stars}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(type)}</span>}
|
||||
</span>
|
||||
<span className="text-sm leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
))}
|
||||
</motion.ul>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div className="h-full w-full relative pl-[100px] rounded-md overflow-hidden flex flex-row justify-end">
|
||||
<div className={`absolute top-0 left-0 h-full aspect-square cursor-pointer ${showOwned && "border-l-[5px]"}`} style={{ borderColor: showOwned && color }}>
|
||||
<BsmImage className="w-full h-full object-cover" image={coverUrl} placeholder={defaultImage} errorImage={defaultImage} loading="lazy" />
|
||||
@@ -246,46 +246,66 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
|
||||
|
||||
<div className="flex flex-col justify-center items-center gap-1 w-full h-full overflow-hidden opacity-0 group-hover:opacity-100">
|
||||
{onDelete && !downloading && (
|
||||
<BsmButton
|
||||
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
|
||||
iconClassName="w-full h-full brightness-75 dark:brightness-200"
|
||||
iconColor={color}
|
||||
icon="trash"
|
||||
withBar={false}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onDelete(callBackParam);
|
||||
}}
|
||||
/>
|
||||
<Tippy content={t("maps.map-item.delete")} placement="left" theme="default">
|
||||
<div>
|
||||
<BsmButton
|
||||
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
|
||||
iconClassName="w-full h-full brightness-75 dark:brightness-200"
|
||||
iconColor={color}
|
||||
icon="trash"
|
||||
withBar={false}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onDelete(callBackParam);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tippy>
|
||||
)}
|
||||
{onDownload && !downloading && (
|
||||
<BsmButton
|
||||
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
|
||||
iconClassName="w-full h-full brightness-75 dark:brightness-200"
|
||||
iconColor={color}
|
||||
icon="download"
|
||||
withBar={false}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onDownload(callBackParam);
|
||||
}}
|
||||
/>
|
||||
<Tippy content={t("maps.map-item.download")} placement="left" theme="default">
|
||||
<div>
|
||||
<BsmButton
|
||||
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
|
||||
iconClassName="w-full h-full brightness-75 dark:brightness-200"
|
||||
iconColor={color}
|
||||
icon="download"
|
||||
withBar={false}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onDownload(callBackParam);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tippy>
|
||||
)}
|
||||
{onCancelDownload && !downloading && (
|
||||
<BsmButton
|
||||
className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
|
||||
iconClassName="w-full h-full brightness-75 dark:brightness-200"
|
||||
iconColor="red"
|
||||
icon="cross"
|
||||
withBar={false}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onCancelDownload(callBackParam);
|
||||
}}
|
||||
/>
|
||||
<Tippy content={t("maps.map-item.cancel-download")} placement="left" theme="default">
|
||||
<div>
|
||||
<BsmButton
|
||||
className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
|
||||
iconClassName="w-full h-full brightness-75 dark:brightness-200"
|
||||
iconColor="red"
|
||||
icon="cross"
|
||||
withBar={false}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onCancelDownload(callBackParam);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tippy>
|
||||
)}
|
||||
{downloading && <BsmBasicSpinner className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2 flex items-center justify-center" spinnerClassName="brightness-75 dark:brightness-200" style={{ color }} thikness="3px" />}
|
||||
{downloading &&
|
||||
<Tippy content={t("maps.map-item.downloading")} placement="left" theme="default">
|
||||
<div>
|
||||
<BsmBasicSpinner className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2 flex items-center justify-center" spinnerClassName="brightness-75 dark:brightness-200" style={{ color }} thikness="3px" />
|
||||
</div>
|
||||
</Tippy>
|
||||
}
|
||||
{previewUrl && (
|
||||
<Tippy content={t("maps.map-item.preview")} placement="left" theme="default">
|
||||
<div>
|
||||
<BsmButton
|
||||
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
|
||||
iconClassName="w-full h-full brightness-75 dark:brightness-200"
|
||||
@@ -297,8 +317,12 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
|
||||
openPreview();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tippy>
|
||||
)}
|
||||
{mapId && (
|
||||
<Tippy content={t("maps.map-item.bsr-code")} placement="left" theme="default">
|
||||
<div>
|
||||
<BsmButton
|
||||
className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
|
||||
iconClassName="w-full h-full brightness-75 dark:brightness-200"
|
||||
@@ -310,6 +334,8 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
|
||||
copyBsr();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tippy>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,6 +78,24 @@
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~='default'] {
|
||||
@apply bg-neutral-900;
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~='default'][data-placement^='top'] > .tippy-arrow::before {
|
||||
@apply border-t-neutral-900
|
||||
}
|
||||
.tippy-box[data-theme~='default'][data-placement^='bottom'] > .tippy-arrow::before {
|
||||
@apply border-b-neutral-900
|
||||
}
|
||||
.tippy-box[data-theme~='default'][data-placement^='left'] > .tippy-arrow::before {
|
||||
@apply border-l-neutral-900
|
||||
}
|
||||
.tippy-box[data-theme~='default'][data-placement^='right'] > .tippy-arrow::before {
|
||||
@apply border-r-neutral-900
|
||||
}
|
||||
|
||||
@keyframes glowing {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
|
||||
Reference in New Issue
Block a user