antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

added tooltips

Browse Source
This commit is contained in:
Anton 2023-09-03 11:13:51 +02:00
parent abc0c79e74
commit b746c45d2d
3 changed files with 489 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

888
dependency-graph.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 98 KiB

14
src/Components/Map/Layer.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react' import * as React from 'react'
import { Marker } from 'react-leaflet' import { Marker, Tooltip } from 'react-leaflet'
import { Item, LayerProps } from '../../types' import { Item, LayerProps } from '../../types'
import MarkerIconFactory from '../../Utils/MarkerIconFactory' import MarkerIconFactory from '../../Utils/MarkerIconFactory'
import { ItemViewPopup } from './Subcomponents/ItemViewPopup' import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
@ -48,8 +48,8 @@ export const Layer = (props: LayerProps) => {
? item : ? item :
item.name.toLowerCase().includes(searchPhrase.toLowerCase()) item.name.toLowerCase().includes(searchPhrase.toLowerCase())
}). }).
map((place: Item) => { map((item: Item) => {
const tags = place.tags; const tags = item.tags;
let color1 = "#666"; let color1 = "#666";
let color2 = "RGBA(35, 31, 32, 0.2)"; let color2 = "RGBA(35, 31, 32, 0.2)";
@ -60,20 +60,20 @@ export const Layer = (props: LayerProps) => {
color2 = tags[1].color; color2 = tags[1].color;
} }
return ( return (
<Marker icon={MarkerIconFactory(props.markerShape, color1, color2, props.markerIcon)} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}> <Marker icon={MarkerIconFactory(props.markerShape, color1, color2, props.markerIcon)} key={item.id} position={[item.position.coordinates[1], item.position.coordinates[0]]}>
{ {
(props.children && React.Children.toArray(props.children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemView") ? (props.children && React.Children.toArray(props.children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemView") ?
React.Children.toArray(props.children).map((child) => React.Children.toArray(props.children).map((child) =>
React.isValidElement(child) && child.props.__TYPE === "ItemView" ? React.isValidElement(child) && child.props.__TYPE === "ItemView" ?
<ItemViewPopup key={place.id} item={place} setItemFormPopup={props.setItemFormPopup} >{child}</ItemViewPopup> <ItemViewPopup key={item.id} item={item} setItemFormPopup={props.setItemFormPopup} >{child}</ItemViewPopup>
: "" : ""
) )
: :
<> <>
<ItemViewPopup item={place} setItemFormPopup={props.setItemFormPopup} /> <ItemViewPopup item={item} setItemFormPopup={props.setItemFormPopup} />
</>) </>)
} }
<Tooltip offset={[0,-38]} direction='top'>{item.name}</Tooltip>
</Marker> </Marker>
); );
}) })

7
src/Components/Map/UtopiaMap.css
View File

@ -54,3 +54,10 @@
color: theme('colors.base-content'); color: theme('colors.base-content');
} }
.leaflet-tooltip {
border-radius: 1em;
transition: opacity 500ms;
transition-delay: 50ms;
}