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

change add map button style

Browse Source
This commit is contained in:
MathieuG-P
2022-12-10 17:19:32 +01:00
parent 47474f5c11
commit 77f6db9b6c
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+14 -11
View File
@@ -9,11 +9,12 @@ import { BsmButton } from "../shared/bsm-button.component"
import { useThemeColor } from "renderer/hooks/use-theme-color.hook"
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"
import { OsDiagnosticService } from "renderer/services/os-diagnostic.service"
import { useObservable } from "renderer/hooks/use-observable.hook"
import { BsmIcon } from "../svgs/bsm-icon.component"
type Props = {
version?: BSVersion
@@ -30,6 +31,7 @@ export function MapsPlaylistsPanel({version}: Props) {
const [mapSearch, setMapSearch] = useState("");
const [playlistSearch, setPlaylistSearch] = useState("");
const [mapsLinked, setMapsLinked] = useState(false);
const isOnline = useObservable(osDiagnostic.isOnline$);
const color = useThemeColor("first-color");
const mapsRef = useRef<any>();
@@ -62,7 +64,6 @@ export function MapsPlaylistsPanel({version}: Props) {
const renderTab = (props: DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>, text: string, index: number): JSX.Element => {
const linkedColor = mapsLinked ? color : "red";
const addMapColor = color;
const onClickLink = (index: number) => {
if(index === 0){ handleMapsLinkClick(); }
@@ -79,15 +80,17 @@ export function MapsPlaylistsPanel({version}: Props) {
<span>{text}</span>
{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>
<ReactTooltip id="add-tooltip" effect="solid" padding="5px">
<span className="whitespace-nowrap">Ajouté des maps</span> {/* TODO TRANSLATE */}
</ReactTooltip>
{(!!version && osDiagnostic.isOnline) && (
{isOnline && (
<motion.div whileHover={"hover"} whileTap={"tap"} className="relative h-[calc(100%-5px)] flex flex-row justify-center items-center shrink-0 rounded-full overflow-hidden pr-2" style={{color}} onClick={e => {e.stopPropagation(); onClickAdd(index)}}>
<span className="absolute top-0 left-0 h-full w-full opacity-20" style={{backgroundColor: "currentcolor"}}/>
<motion.div className="h-full p-0.5" variants={variants}>
<BsmIcon className="block h-full aspect-square" icon="add"/>
</motion.div>
<span className="text-sm brightness-150">Ajouter</span>
</motion.div>
)}
{(!!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)}}/>