antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-04-06 01:25:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

show allways tooltips on mobile

Browse Source
This commit is contained in:
Anton Tranelis 2025-10-12 09:27:15 +02:00
parent e42406eb72
commit c7572f6b74
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
lib/src/Components/Map/Subcomponents/AddButton.tsx
View File

@ -1,11 +1,13 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable @typescript-eslint/no-non-null-assertion */
import { useState } from 'react'
import SVG from 'react-inlinesvg' import SVG from 'react-inlinesvg'
import PlusSVG from '#assets/plus.svg' import PlusSVG from '#assets/plus.svg'
import { useAppState } from '#components/AppShell/hooks/useAppState' import { useAppState } from '#components/AppShell/hooks/useAppState'
import { useLayers } from '#components/Map/hooks/useLayers' import { useLayers } from '#components/Map/hooks/useLayers'
import { useHasUserPermission } from '#components/Map/hooks/usePermissions' import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
export default function AddButton({ export default function AddButton({
triggerAction, triggerAction,
@ -15,6 +17,9 @@ export default function AddButton({
const layers = useLayers() const layers = useLayers()
const hasUserPermission = useHasUserPermission() const hasUserPermission = useHasUserPermission()
const appState = useAppState() const appState = useAppState()
const { width } = useWindowDimensions()
const isMobile = width < 768
const [isOpen, setIsOpen] = useState(false)
const canAddItems = () => { const canAddItems = () => {
let canAdd = false let canAdd = false
@ -33,10 +38,17 @@ export default function AddButton({
return ( return (
<> <>
{canAddItems() ? ( {canAddItems() ? (
<div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'> <div
className={`tw:dropdown tw:dropdown-top tw:dropdown-end ${!isMobile ? 'tw:dropdown-hover' : ''} tw:z-500 tw:absolute tw:right-4 tw:bottom-4 ${isOpen ? 'tw:dropdown-open' : ''}`}
>
<label <label
tabIndex={0} tabIndex={0}
className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg tw:shadow tw:bg-base-100' className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg tw:shadow tw:bg-base-100'
onClick={() => {
if (isMobile) {
setIsOpen(!isOpen)
}
}}
> >
<SVG src={PlusSVG} className='tw:h-5 tw:w-5' /> <SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
</label> </label>
@ -48,16 +60,21 @@ export default function AddButton({
layer.listed && ( layer.listed && (
<li key={layer.name}> <li key={layer.name}>
<a> <a>
<div className='tw:tooltip tw:tooltip-left' data-tip={layer.menuText}> <div
className={`tw:tooltip tw:tooltip-left ${isMobile ? 'tw:tooltip-open' : ''}`}
data-tip={layer.menuText}
>
<button <button
tabIndex={0} tabIndex={0}
className='tw:z-500 tw:border-0 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden tw:flex tw:items-center tw:justify-center' className='tw:z-500 tw:border-0 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden tw:flex tw:items-center tw:justify-center'
style={{ backgroundColor: layer.menuColor || '#777' }} style={{ backgroundColor: layer.menuColor || '#777' }}
onClick={() => { onClick={() => {
triggerAction(layer) triggerAction(layer)
setIsOpen(false)
}} }}
onTouchEnd={(e) => { onTouchEnd={(e) => {
triggerAction(layer) triggerAction(layer)
setIsOpen(false)
e.preventDefault() e.preventDefault()
}} }}
> >