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

playlist tab wip

Browse Source
This commit is contained in:
MathieuG-P
2022-12-10 15:29:33 +01:00
parent c4d942eb2e
commit 3be2100160
2 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+23 -18
View File
@@ -11,6 +11,8 @@ import { MapsManagerService } from "renderer/services/maps-manager.service"
import { motion, Variants } from "framer-motion";
import ReactTooltip from 'react-tooltip';
import { MapsDownloaderService } from "renderer/services/maps-downloader.service"
import { BsmImage } from "../shared/bsm-image.component"
import wipGif from "../../../../assets/images/gifs/wip.gif"
type Props = {
version?: BSVersion
@@ -74,24 +76,24 @@ export function MapsPlaylistsPanel({version}: Props) {
return (
<li className="relative text-center text-lg font-bold hover:backdrop-brightness-75 flex justify-center items-center content-center" onClick={props.onClick}>
<span>{text}</span>
<div className="h-full flex absolute right-0 top-0 gap-1.5 items-center pr-2">
<motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" data-tip data-for="add-tooltip">
<span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: addMapColor}}/>
<BsmButton className="p-0.5 absolute top-0 left-0 h-full w-full !bg-transparent" iconClassName="" icon="add" withBar={false} style={{color: addMapColor}} onClick={e => {e.stopPropagation(); onClickAdd(index)}}/>
</motion.div>
<ReactTooltip id="add-tooltip" effect="solid" padding="5px">
<span className="whitespace-nowrap">Ajouté des maps</span> {/* TODO TRANSLATE */}
</ReactTooltip>
{!!version && (
<motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" title={mapsLinked ? "Délier les maps" : "Lier les maps"}>
<span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: linkedColor}}/>
<BsmButton className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45" iconClassName="" icon={mapsLinked ? "link" : "unlink"} withBar={false} style={{color: linkedColor}} onClick={e => {e.stopPropagation(); onClickLink(index)}}/>
{index === 0 &&(
<div className="h-full flex absolute right-0 top-0 gap-1.5 items-center pr-2">
<motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" data-tip data-for="add-tooltip">
<span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: addMapColor}}/>
<BsmButton className="p-0.5 absolute top-0 left-0 h-full w-full !bg-transparent" iconClassName="" icon="add" withBar={false} style={{color: addMapColor}} onClick={e => {e.stopPropagation(); onClickAdd(index)}}/>
</motion.div>
)}
</div>
<ReactTooltip id="add-tooltip" effect="solid" padding="5px">
<span className="whitespace-nowrap">Ajouté des maps</span> {/* TODO TRANSLATE */}
</ReactTooltip>
{!!version && (
<motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" title={mapsLinked ? "Délier les maps" : "Lier les maps"}>
<span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: linkedColor}}/>
<BsmButton className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45" iconClassName="" icon={mapsLinked ? "link" : "unlink"} withBar={false} style={{color: linkedColor}} onClick={e => {e.stopPropagation(); onClickLink(index)}}/>
</motion.div>
)}
</div>
)}
</li>
)
@@ -125,7 +127,10 @@ export function MapsPlaylistsPanel({version}: Props) {
<TabNavBar className="!rounded-none shadow-sm" tabsText={["misc.maps", "Playlists"]} onTabChange={setTabIndex} renderTab={renderTab}/>
<div className="w-full grow min-h-0 flex flex-row items-center transition-transform duration-300" style={{transform: `translate(${-(tabIndex * 100)}%, 0)`}}>
<LocalMapsListPanel ref={mapsRef} className="w-full h-full shrink-0 flex flex-col" version={version} filter={mapFilter} search={mapSearch}/>
<div>b</div>
<div className="w-full h-full shrink-0 flex flex-col justify-center items-center content-center gap-2 overflow-hidden">
<BsmImage className="rounded-md" image={wipGif}/>
<span>Work in progress</span>
</div>
</div>
</div>
</div>
src/renderer/components/shared/bsm-image.component.tsx
+1 -1
View File
@@ -3,6 +3,6 @@ import { CSSProperties } from "react";
export function BsmImage({className, image, errorImage, placeholder, loading, style}: {className?: string, image: string, errorImage?: string, placeholder?: string, loading?: "lazy"|"eager", style?: CSSProperties}) {
return (
<img className={`${className} pointer-events-none`} src={image} loading={loading} onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = errorImage || "" }} style={{...style, backgroundImage: `url(${placeholder})`, backgroundSize: "cover"}} alt=""/>
<img className={`${className} pointer-events-none`} src={image} loading={loading} onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = errorImage || "" }} style={{...style, backgroundImage: placeholder && `url(${placeholder})`, backgroundSize: "cover"}} alt=""/>
)
}