Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Icon as components and littwin-blue

Browse Source
This commit is contained in:
ISA
2025-09-15 11:52:20 +02:00
parent e35216daf5
commit 1a046f8212
24 changed files with 216 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/mainComponent/MapComponent.js
View File

@@ -7,6 +7,14 @@ import "leaflet-contextmenu";
import "leaflet.smooth_marker_bouncing";
import "react-toastify/dist/ReactToastify.css";
import { Icon } from "@iconify/react";
import EditIcon from "@/components/icons/material-symbols/EditIcon";
import EditOffIcon from "@/components/icons/material-symbols/EditOffIcon";
import SearchIcon from "@/components/icons/material-symbols/SearchIcon";
import MenuIcon from "@/components/icons/material-symbols/MenuIcon";
import InfoIcon from "@/components/icons/material-symbols/InfoIcon";
import AlarmIcon from "@/components/icons/material-symbols/AlarmIcon";
import MapMarkerIcon from "@/components/icons/material-symbols/MapMarkerIcon";
import ExpandIcon from "@/components/icons/material-symbols/ExpandIcon";
import PoiUpdateModal from "@/components/pois/poiUpdateModal/PoiUpdateModal.js";
import { ToastContainer, toast } from "react-toastify";
import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
@@ -1136,7 +1144,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
className="rounded-full bg-white/90 hover:bg-white shadow p-1"
title="Alarm"
>
<Icon icon="mdi:alarm-light-outline" className="h-8 w-8 text-blue-900" />
<AlarmIcon className="h-8 w-8" />
</button>
{/* Marker-Icon (line-md) */}
<button
@@ -1145,7 +1153,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
className="rounded-full bg-white/90 hover:bg-white shadow p-1"
title="Marker"
>
<Icon icon="line-md:map-marker-filled" className="h-8 w-8 text-blue-900" />
<MapMarkerIcon className="h-8 w-8" />
</button>
{/*Lupe: Koordinatensuche ein-/ausblenden */}
<button
@@ -1158,7 +1166,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
showCoordinateInput ? "Koordinatensuche ausblenden" : "Koordinatensuche einblenden"
}
>
<Icon icon="material-symbols:search-rounded" className="h-8 w-8 text-blue-900" />
<SearchIcon className="h-8 w-8" />
</button>
<button
onClick={toggleEditMode}
@@ -1177,18 +1185,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}
disabled={!hasEditRight}
>
<Icon
icon={editMode ? "material-symbols:edit-off-rounded" : "material-symbols:edit-rounded"}
className="h-8 w-8 text-blue-900"
/>
{editMode ? <EditOffIcon className="h-8 w-8" /> : <EditIcon className="h-8 w-8" />}
</button>
{/* Expand: Karte auf Standardansicht */}
<button
onClick={handleExpandClick}
aria-label="Karte auf Standardansicht"
className="rounded-full bg-white/90 hover:bg-white shadow p-1"
className="rounded-full bg-white/90 hover:bg-white shadow p-1 "
title="Karte auf Standardansicht"
>
<img src="/img/expand-icon.svg" alt="Expand" className="h-8 w-8" />
<ExpandIcon className="h-8 w-8" />
</button>
{/* Lupe: Koordinaten-Suche ein-/ausblenden */}
<button
@@ -1197,7 +1203,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
className="rounded-full bg-white/90 hover:bg-white shadow p-1"
title={showLayersPanel ? "Layer-Panel ausblenden" : "Layer-Panel einblenden"}
>
<Icon icon="material-symbols:menu-rounded" className="h-8 w-8 text-blue-900" />
<MenuIcon className="h-8 w-8" />
</button>
<button
@@ -1206,9 +1212,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
className="rounded-full bg-white/90 hover:bg-white shadow p-1"
title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
>
<Icon
icon="material-symbols:info-rounded"
className="text-blue-900 h-8 w-8 pr-1"
<InfoIcon
className="h-8 w-8 pr-1"
title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
/>
</button>
@@ -1226,11 +1231,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
</div>
<div>
<button onClick={openVersionInfoModal}>
<Icon
icon="material-symbols:info-rounded"
className="text-blue-900 h-8 w-8 pr-1"
title="Weitere Infos"
/>
<InfoIcon className="h-8 w-8 pr-1" title="Weitere Infos" />
</button>
</div>
</div>