antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +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-non-null-assertion */
import { useState } from 'react'
import SVG from 'react-inlinesvg'
import PlusSVG from '#assets/plus.svg'
import { useAppState } from '#components/AppShell/hooks/useAppState'
import { useLayers } from '#components/Map/hooks/useLayers'
import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
export default function AddButton({
triggerAction,
@ -15,6 +17,9 @@ export default function AddButton({
const layers = useLayers()
const hasUserPermission = useHasUserPermission()
const appState = useAppState()
const { width } = useWindowDimensions()
const isMobile = width < 768
const [isOpen, setIsOpen] = useState(false)
const canAddItems = () => {
let canAdd = false
@ -33,10 +38,17 @@ export default function AddButton({
return (
<>
{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
tabIndex={0}
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' />
</label>
@ -48,16 +60,21 @@ export default function AddButton({
layer.listed && (
<li key={layer.name}>
<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
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'
style={{ backgroundColor: layer.menuColor || '#777' }}
onClick={() => {
triggerAction(layer)
setIsOpen(false)
}}
onTouchEnd={(e) => {
triggerAction(layer)
setIsOpen(false)
e.preventDefault()
}}
>