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

fix(lib): fix icons in ´SearchControl´ (#431)

Browse Source 
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
This commit is contained in:
Anton Tranelis 2025-11-11 14:39:29 +01:00 committed by GitHub
parent 8391532d83
commit c808fdd470
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
View File

@ -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,14 +167,32 @@ 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) => {
// Calculate color using the same logic as PopupView
const itemTags =
item.text
?.match(/#[^\s#]+/g)
?.map((tag) =>
tags.find((t) => t.name.toLowerCase() === tag.slice(1).toLowerCase()),
)
.filter(Boolean) ?? []
let color1 = item.layer?.markerDefaultColor ?? '#777'
if (item.color) {
color1 = item.color
} else if (itemTags[0]) {
color1 = itemTags[0].color
}
return (
<div <div
key={item.id} key={item.id}
className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row' className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row tw:items-center tw:gap-2'
data-cy='search-item-result' data-cy='search-item-result'
onClick={() => { onClick={() => {
const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1] const marker = Object.entries(leafletRefs).find(
.marker (r) => r[1].item === item,
)?.[1].marker
if (marker) { if (marker) {
navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`) navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
} else { } else {
@ -186,13 +204,17 @@ export const SearchControl = () => {
> >
{item.layer?.markerIcon?.image ? ( {item.layer?.markerIcon?.image ? (
<div <div
className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center' 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' data-cy='search-item-icon'
> >
<SVG <SVG
src={appState.assetsApi.url + item.layer.markerIcon.image} src={appState.assetsApi.url + item.layer.markerIcon.image}
className='tw:text-current tw:mr-2 tw:mt-0' className='tw:text-current tw:max-w-full tw:max-h-full'
style={{ width: `${(item.layer.markerIcon.size ?? 18) * 1.2}px` }} style={{
width: `${item.layer.markerIcon.size ?? 18}px`,
height: `${item.layer.markerIcon.size ?? 18}px`,
}}
preProcessor={(code: string): string => { preProcessor={(code: string): string => {
code = code.replace(/fill=".*?"/g, 'fill="currentColor"') code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"') code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
@ -201,22 +223,29 @@ export const SearchControl = () => {
/> />
</div> </div>
) : ( ) : (
<div className='tw:w-7' data-cy='search-item-icon-placeholder' /> <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:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'> <div className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'>
{item.name} {item.name}
</div> </div>
<div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'>
{item.text}
</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
className='tw:text-current tw:w-5 tw:h-5'
data-cy='search-geo-icon' 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 = () => {
) )
}} }}
> >
<div className='tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0'>
<FlagIcon <FlagIcon
className='tw:text-current tw:mr-2 tw:mt-0 tw:w-4' className='tw:text-current tw:w-5 tw:h-5'
data-cy='search-coordinate-icon' 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'}