mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-12 15:25:59 +00:00
fix(app): refactor icons (#428)
This commit is contained in:
Anton Tranelis
GitHub
parent
719e1e16b5
commit
2ee10f0f55
@ -56,6 +56,7 @@ import MapContainer from './pages/MapContainer'
|
||||
import { getBottomRoutes, routes } from './routes/sidebar'
|
||||
import { config } from './config'
|
||||
import { InviteApi } from './api/inviteApi'
|
||||
import { MapPinIcon } from '@heroicons/react/24/solid'
|
||||
|
||||
const userApi = new UserApi()
|
||||
const inviteApi = new InviteApi(userApi)
|
||||
@ -139,14 +140,19 @@ function App() {
|
||||
?.filter((l: LayerProps) => l.listed)
|
||||
.map((l: LayerProps) => ({
|
||||
path: '/' + l.name, // url
|
||||
icon: (
|
||||
icon: l.markerIcon?.image ? (
|
||||
<SVG
|
||||
src={`${config.apiUrl}assets/${l.markerIcon.image_outline ?? l.markerIcon.image}`}
|
||||
className='tw:w-6 tw:h-6'
|
||||
style={{
|
||||
width: `${(l.markerIcon.size ?? 18) * 1.3}px`,
|
||||
height: `${(l.markerIcon.size ?? 18) * 1.3}px`,
|
||||
}}
|
||||
preProcessor={(code: string) =>
|
||||
code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<MapPinIcon className='tw:w-6 tw:h-6' />
|
||||
),
|
||||
name: l.name, // name that appear in Sidebar
|
||||
color: l.menuColor,
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
"template": "{{id}}"
|
||||
},
|
||||
"readonly": false,
|
||||
"required": true,
|
||||
"required": false,
|
||||
"sort": 2,
|
||||
"special": [
|
||||
"m2o"
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"name": "markerShape",
|
||||
"table": "layers",
|
||||
"data_type": "character varying",
|
||||
"default_value": null,
|
||||
"default_value": "circle",
|
||||
"max_length": 255,
|
||||
"numeric_precision": null,
|
||||
"numeric_scale": null,
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
{
|
||||
"collection": "marker_icons",
|
||||
"field": "image_outline",
|
||||
"type": "uuid",
|
||||
"meta": {
|
||||
"collection": "marker_icons",
|
||||
"conditions": null,
|
||||
"display": null,
|
||||
"display_options": null,
|
||||
"field": "image_outline",
|
||||
"group": null,
|
||||
"hidden": false,
|
||||
"interface": "file-image",
|
||||
"note": null,
|
||||
"options": {
|
||||
"folder": "f255d3a7-8ecc-4ee0-b584-dee753317415"
|
||||
},
|
||||
"readonly": false,
|
||||
"required": false,
|
||||
"sort": 4,
|
||||
"special": [
|
||||
"file"
|
||||
],
|
||||
"translations": null,
|
||||
"validation": null,
|
||||
"validation_message": null,
|
||||
"width": "half"
|
||||
},
|
||||
"schema": {
|
||||
"name": "image_outline",
|
||||
"table": "marker_icons",
|
||||
"data_type": "uuid",
|
||||
"default_value": null,
|
||||
"max_length": null,
|
||||
"numeric_precision": null,
|
||||
"numeric_scale": null,
|
||||
"is_nullable": true,
|
||||
"is_unique": false,
|
||||
"is_indexed": false,
|
||||
"is_primary_key": false,
|
||||
"is_generated": false,
|
||||
"generation_expression": null,
|
||||
"has_auto_increment": false,
|
||||
"foreign_key_table": "directus_files",
|
||||
"foreign_key_column": "id"
|
||||
}
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
{
|
||||
"collection": "marker_icons",
|
||||
"field": "size_outline",
|
||||
"type": "decimal",
|
||||
"meta": {
|
||||
"collection": "marker_icons",
|
||||
"conditions": null,
|
||||
"display": null,
|
||||
"display_options": null,
|
||||
"field": "size_outline",
|
||||
"group": null,
|
||||
"hidden": false,
|
||||
"interface": "input",
|
||||
"note": null,
|
||||
"options": null,
|
||||
"readonly": false,
|
||||
"required": false,
|
||||
"sort": 5,
|
||||
"special": null,
|
||||
"translations": null,
|
||||
"validation": null,
|
||||
"validation_message": null,
|
||||
"width": "half"
|
||||
},
|
||||
"schema": {
|
||||
"name": "size_outline",
|
||||
"table": "marker_icons",
|
||||
"data_type": "numeric",
|
||||
"default_value": null,
|
||||
"max_length": null,
|
||||
"numeric_precision": 10,
|
||||
"numeric_scale": 5,
|
||||
"is_nullable": true,
|
||||
"is_unique": false,
|
||||
"is_indexed": false,
|
||||
"is_primary_key": false,
|
||||
"is_generated": false,
|
||||
"generation_expression": null,
|
||||
"has_auto_increment": false,
|
||||
"foreign_key_table": null,
|
||||
"foreign_key_column": null
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
{
|
||||
"collection": "marker_icons",
|
||||
"field": "image_outline",
|
||||
"related_collection": "directus_files",
|
||||
"meta": {
|
||||
"junction_field": null,
|
||||
"many_collection": "marker_icons",
|
||||
"many_field": "image_outline",
|
||||
"one_allowed_collections": null,
|
||||
"one_collection": "directus_files",
|
||||
"one_collection_field": null,
|
||||
"one_deselect_action": "nullify",
|
||||
"one_field": null,
|
||||
"sort_field": null
|
||||
},
|
||||
"schema": {
|
||||
"table": "marker_icons",
|
||||
"column": "image_outline",
|
||||
"foreign_key_table": "directus_files",
|
||||
"foreign_key_column": "id",
|
||||
"constraint_name": "marker_icons_image_outline_foreign",
|
||||
"on_update": "NO ACTION",
|
||||
"on_delete": "SET NULL"
|
||||
}
|
||||
}
|
||||
@ -64,7 +64,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='tw:p-1.5 tw:rounded-selector tw:text-white'
|
||||
className='tw:p-1.5 tw:rounded-selector tw:text-white tw:h-9 tw:w-9 tw:flex tw:items-center tw:justify-center'
|
||||
style={{ backgroundColor: route.color ?? '#777' }}
|
||||
>
|
||||
{route.icon}
|
||||
|
||||
@ -41,6 +41,9 @@ export const Layer = ({
|
||||
const setItemsApi = useSetItemsApi()
|
||||
const setItemsData = useSetItemsData()
|
||||
|
||||
// Ensure markerShape has a valid value, default to 'circle' if null or empty
|
||||
const normalizedMarkerShape = markerShape || 'circle'
|
||||
|
||||
const addTag = useAddTag()
|
||||
const [newTagsToAdd] = useState<Tag[]>([])
|
||||
const [tagsReady] = useState<boolean>(false)
|
||||
@ -55,7 +58,7 @@ export const Layer = ({
|
||||
menuText,
|
||||
menuColor,
|
||||
markerIcon,
|
||||
markerShape,
|
||||
markerShape: normalizedMarkerShape,
|
||||
markerDefaultColor,
|
||||
markerDefaultColor2,
|
||||
api,
|
||||
@ -79,7 +82,7 @@ export const Layer = ({
|
||||
menuText,
|
||||
menuColor,
|
||||
markerIcon,
|
||||
markerShape,
|
||||
markerShape: normalizedMarkerShape,
|
||||
markerDefaultColor,
|
||||
markerDefaultColor2,
|
||||
api,
|
||||
@ -116,7 +119,7 @@ export const Layer = ({
|
||||
name,
|
||||
markerDefaultColor,
|
||||
markerDefaultColor2,
|
||||
markerShape,
|
||||
markerShape: normalizedMarkerShape,
|
||||
markerIcon,
|
||||
menuText,
|
||||
}}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
||||
import { MapPinIcon } from '@heroicons/react/24/solid'
|
||||
import { useState } from 'react'
|
||||
import SVG from 'react-inlinesvg'
|
||||
|
||||
@ -94,13 +95,18 @@ export default function AddButton({
|
||||
e.preventDefault()
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={appState.assetsApi.url + layer.markerIcon.image}
|
||||
style={{
|
||||
filter: 'invert(100%) brightness(200%)',
|
||||
width: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
|
||||
}}
|
||||
/>
|
||||
{layer.markerIcon?.image ? (
|
||||
<img
|
||||
src={appState.assetsApi.url + layer.markerIcon.image}
|
||||
style={{
|
||||
filter: 'invert(100%) brightness(200%)',
|
||||
width: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
|
||||
height: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<MapPinIcon className='tw:w-6 tw:h-6' style={{ color: '#ffffff' }} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -184,7 +184,7 @@ export const SearchControl = () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item.layer?.markerIcon.image ? (
|
||||
{item.layer?.markerIcon?.image ? (
|
||||
<div
|
||||
className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center'
|
||||
data-cy='search-item-icon'
|
||||
|
||||
@ -40,7 +40,7 @@ const MarkerIconFactory = (
|
||||
) => {
|
||||
if (icon)
|
||||
return divIcon({
|
||||
html: `<div class="svg-container">${createSvg(shape, color1, color2)}<img class="overlay-svg" style="width: ${icon.size ? icon.size : '12.5'}px; filter: invert(1) brightness(2);" src="${`${assetsURL ?? ''}` + icon.image}"></div>`,
|
||||
html: `<div class="svg-container">${createSvg(shape, color1, color2)}<img class="overlay-svg" style="width: ${icon.size ? icon.size : '12.5'}px; height: ${icon.size ? icon.size : '12.5'}px; filter: invert(1) brightness(2);" src="${`${assetsURL ?? ''}` + icon.image}"></div>`,
|
||||
iconAnchor: [17, 40],
|
||||
popupAnchor: [0, -40],
|
||||
iconSize: new Point(40, 46),
|
||||
|
||||
4
lib/src/types/LayerProps.d.ts
vendored
4
lib/src/types/LayerProps.d.ts
vendored
@ -13,8 +13,8 @@ export interface LayerProps {
|
||||
name: string
|
||||
menuColor: string
|
||||
menuText: string
|
||||
markerIcon: MarkerIcon
|
||||
markerShape: string
|
||||
markerIcon?: MarkerIcon
|
||||
markerShape?: string
|
||||
markerDefaultColor: string
|
||||
markerDefaultColor2?: string
|
||||
api?: ItemsApi<Item>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user