mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
fix(lib): fix icons in ´SearchControl´ (#431)
Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
This commit is contained in:
Anton Tranelis
GitHub
parent
8391532d83
commit
c808fdd470
@ -11,7 +11,7 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
||||||
import FlagIcon from '@heroicons/react/24/outline/FlagIcon'
|
import FlagIcon from '@heroicons/react/24/outline/FlagIcon'
|
||||||
import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon'
|
import MapPinIcon from '@heroicons/react/24/outline/MapPinIcon'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { LatLng, LatLngBounds, marker } from 'leaflet'
|
import { LatLng, LatLngBounds, marker } from 'leaflet'
|
||||||
import { useRef, useState } from 'react'
|
import { useRef, useState } from 'react'
|
||||||
@ -167,56 +167,85 @@ export const SearchControl = () => {
|
|||||||
{itemsResults.length > 0 && tagsResults.length > 0 && (
|
{itemsResults.length > 0 && tagsResults.length > 0 && (
|
||||||
<hr className='tw:opacity-50'></hr>
|
<hr className='tw:opacity-50'></hr>
|
||||||
)}
|
)}
|
||||||
{itemsResults.slice(0, 5).map((item) => (
|
{itemsResults.slice(0, 5).map((item) => {
|
||||||
<div
|
// Calculate color using the same logic as PopupView
|
||||||
key={item.id}
|
const itemTags =
|
||||||
className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row'
|
item.text
|
||||||
data-cy='search-item-result'
|
?.match(/#[^\s#]+/g)
|
||||||
onClick={() => {
|
?.map((tag) =>
|
||||||
const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1]
|
tags.find((t) => t.name.toLowerCase() === tag.slice(1).toLowerCase()),
|
||||||
.marker
|
)
|
||||||
if (marker) {
|
.filter(Boolean) ?? []
|
||||||
navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
|
|
||||||
} else {
|
let color1 = item.layer?.markerDefaultColor ?? '#777'
|
||||||
navigate(
|
if (item.color) {
|
||||||
'item/' + item.id + '?' + new URLSearchParams(window.location.search),
|
color1 = item.color
|
||||||
)
|
} else if (itemTags[0]) {
|
||||||
}
|
color1 = itemTags[0].color
|
||||||
}}
|
}
|
||||||
>
|
|
||||||
{item.layer?.markerIcon?.image ? (
|
return (
|
||||||
<div
|
<div
|
||||||
className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center'
|
key={item.id}
|
||||||
data-cy='search-item-icon'
|
className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row tw:items-center tw:gap-2'
|
||||||
>
|
data-cy='search-item-result'
|
||||||
<SVG
|
onClick={() => {
|
||||||
src={appState.assetsApi.url + item.layer.markerIcon.image}
|
const marker = Object.entries(leafletRefs).find(
|
||||||
className='tw:text-current tw:mr-2 tw:mt-0'
|
(r) => r[1].item === item,
|
||||||
style={{ width: `${(item.layer.markerIcon.size ?? 18) * 1.2}px` }}
|
)?.[1].marker
|
||||||
preProcessor={(code: string): string => {
|
if (marker) {
|
||||||
code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
|
navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
|
||||||
code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
|
} else {
|
||||||
return code
|
navigate(
|
||||||
}}
|
'item/' + item.id + '?' + new URLSearchParams(window.location.search),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.layer?.markerIcon?.image ? (
|
||||||
|
<div
|
||||||
|
className='tw:p-1.5 tw:rounded-selector tw:text-white tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:overflow-hidden'
|
||||||
|
style={{ backgroundColor: color1 }}
|
||||||
|
data-cy='search-item-icon'
|
||||||
|
>
|
||||||
|
<SVG
|
||||||
|
src={appState.assetsApi.url + item.layer.markerIcon.image}
|
||||||
|
className='tw:text-current tw:max-w-full tw:max-h-full'
|
||||||
|
style={{
|
||||||
|
width: `${item.layer.markerIcon.size ?? 18}px`,
|
||||||
|
height: `${item.layer.markerIcon.size ?? 18}px`,
|
||||||
|
}}
|
||||||
|
preProcessor={(code: string): string => {
|
||||||
|
code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
|
||||||
|
code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
|
||||||
|
return code
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className='tw:w-7 tw:h-7 tw:flex-shrink-0'
|
||||||
|
data-cy='search-item-icon-placeholder'
|
||||||
/>
|
/>
|
||||||
</div>
|
)}
|
||||||
) : (
|
<div className='tw:flex tw:flex-col tw:min-w-0'>
|
||||||
<div className='tw:w-7' data-cy='search-item-icon-placeholder' />
|
<div className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'>
|
||||||
)}
|
{item.name}
|
||||||
<div>
|
</div>
|
||||||
<div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
|
<div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'>
|
||||||
{item.name}
|
{item.text}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
))}
|
})}
|
||||||
{Array.from(geoResults).length > 0 &&
|
{Array.from(geoResults).length > 0 &&
|
||||||
(itemsResults.length > 0 || tagsResults.length > 0) && (
|
(itemsResults.length > 0 || tagsResults.length > 0) && (
|
||||||
<hr className='tw:opacity-50'></hr>
|
<hr className='tw:opacity-50'></hr>
|
||||||
)}
|
)}
|
||||||
{Array.from(geoResults).map((geo) => (
|
{Array.from(geoResults).map((geo) => (
|
||||||
<div
|
<div
|
||||||
className='tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer'
|
className='tw:flex tw:flex-row tw:items-center tw:hover:font-bold tw:cursor-pointer tw:gap-2'
|
||||||
data-cy='search-geo-result'
|
data-cy='search-geo-result'
|
||||||
key={Math.random()}
|
key={Math.random()}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -249,19 +278,21 @@ export const SearchControl = () => {
|
|||||||
hide()
|
hide()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MagnifyingGlassIcon
|
<div className='tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0'>
|
||||||
className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5'
|
<MapPinIcon
|
||||||
data-cy='search-geo-icon'
|
className='tw:text-current tw:w-5 tw:h-5'
|
||||||
/>
|
data-cy='search-geo-icon'
|
||||||
<div>
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='tw:flex tw:flex-col tw:min-w-0'>
|
||||||
<div
|
<div
|
||||||
className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
|
className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
|
||||||
data-cy='search-geo-name'
|
data-cy='search-geo-name'
|
||||||
>
|
>
|
||||||
{geo?.properties.name ? geo?.properties.name : value}
|
{geo?.properties.name ? geo?.properties.name : value}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
|
className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
|
||||||
data-cy='search-geo-details'
|
data-cy='search-geo-details'
|
||||||
>
|
>
|
||||||
{geo?.properties?.city && `${capitalizeFirstLetter(geo?.properties?.city)}, `}{' '}
|
{geo?.properties?.city && `${capitalizeFirstLetter(geo?.properties?.city)}, `}{' '}
|
||||||
@ -281,7 +312,7 @@ export const SearchControl = () => {
|
|||||||
))}
|
))}
|
||||||
{isGeoCoordinate(value) && (
|
{isGeoCoordinate(value) && (
|
||||||
<div
|
<div
|
||||||
className='tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer'
|
className='tw:flex tw:flex-row tw:items-center tw:hover:font-bold tw:cursor-pointer tw:gap-2'
|
||||||
data-cy='search-coordinate-result'
|
data-cy='search-coordinate-result'
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
marker(
|
marker(
|
||||||
@ -306,19 +337,21 @@ export const SearchControl = () => {
|
|||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<FlagIcon
|
<div className='tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0'>
|
||||||
className='tw:text-current tw:mr-2 tw:mt-0 tw:w-4'
|
<FlagIcon
|
||||||
data-cy='search-coordinate-icon'
|
className='tw:text-current tw:w-5 tw:h-5'
|
||||||
/>
|
data-cy='search-coordinate-icon'
|
||||||
<div>
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='tw:flex tw:flex-col tw:min-w-0'>
|
||||||
<div
|
<div
|
||||||
className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
|
className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
|
||||||
data-cy='search-coordinate-text'
|
data-cy='search-coordinate-text'
|
||||||
>
|
>
|
||||||
{value}
|
{value}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
|
className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
|
||||||
data-cy='search-coordinate-label'
|
data-cy='search-coordinate-label'
|
||||||
>
|
>
|
||||||
{'Coordiante'}
|
{'Coordiante'}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user