IOTMAPCOMP-181 - retaillage des ombres.

Orange-OpenSource · Jun 18, 2021 · c9aee42 · c9aee42
1 parent 5c9bc6c
commit c9aee42
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 20 deletions.
diff --git a/src/iotMapManager/css/markers.css b/src/iotMapManager/css/markers.css
@@ -86,24 +86,6 @@
   line-height:50px;
 }
 
-.iotmap-markericon .iotmap-shadowSelected{
-  position: absolute;
-  top:0px;
-  left:-10px;
-  width:70px;
-  height: 70px;
-  z-index: 5;
-}
-
-.iotmap-markericon .iotmap-shadowUnselected{
-  position: absolute;
-  top:-20px;
-  left:-20px;
-  width:70px;
-  height: 70px;
-  z-index: 5;
-}
-
 /********************
   CLUSTERS
  ********************/

diff --git a/src/iotMapManager/css/shadows.css b/src/iotMapManager/css/shadows.css
@@ -0,0 +1,69 @@
+/*
+* Software Name : IotMapManager
+* Version: 2.5.1
+* SPDX-FileCopyrightText: Copyright (c) 2020 Orange
+* SPDX-License-Identifier: MIT
+*
+* This software is distributed under the MIT License,
+* the text of which is available at https://github.com/Orange-OpenSource/IOT-Map-Component/blob/master/LICENSE
+* or see the "license.txt" file for more details.
+*
+* Author: S. Gateau
+* Software description: provide markers, tabs, clusters and paths dedicated to iot projects using mapping
+*/
+
+/* shadows.css */
+
+.iotmap-markericon .iotmap-selected-circle-shadow {
+  position: absolute;
+  top: 42px;
+  left:-10px;
+  width:70px;
+  height: 26px;
+  z-index: 5;
+}
+
+.iotmap-markericon .iotmap-selected-square-shadow {
+  position: absolute;
+  top: 42px;
+  left:-10px;
+  width:70px;
+  height: 24px;
+  z-index: 5;
+}
+
+.iotmap-markericon .iotmap-circle-shadow {
+  position: absolute;
+  top:-18px;
+  left:-18px;
+  width: 66px;
+  height: 66px;
+  z-index: 5;
+}
+
+.iotmap-markericon .iotmap-circle-pin-shadow {
+  position: absolute;
+  top:24px;
+  left:-20px;
+  width:70px;
+  height: 24px;
+  z-index: 5;
+}
+
+.iotmap-markericon .iotmap-square-shadow {
+  position: absolute;
+  top:-20px;
+  left:-20px;
+  width:70px;
+  height: 70px;
+  z-index: 5;
+}
+
+.iotmap-markericon .iotmap-square-pin-shadow {
+  position: absolute;
+  top:24px;
+  left:-20px;
+  width:70px;
+  height: 26px;
+  z-index: 5;
+}
diff --git a/src/iotMapManager/img/MOB_CIR_PIN_Shadow.png b/src/iotMapManager/img/MOB_CIR_PIN_Shadow.png
diff --git a/src/iotMapManager/img/MOB_CIR_SEL_Shadow.png b/src/iotMapManager/img/MOB_CIR_SEL_Shadow.png
diff --git a/src/iotMapManager/img/MOB_CIR_Shadow.png b/src/iotMapManager/img/MOB_CIR_Shadow.png
diff --git a/src/iotMapManager/img/POI_SQR_PIN_Shadow.png b/src/iotMapManager/img/POI_SQR_PIN_Shadow.png
diff --git a/src/iotMapManager/img/POI_SQR_SEL_Shadow.png b/src/iotMapManager/img/POI_SQR_SEL_Shadow.png
diff --git a/src/iotMapManager/img/POI_SQR_Shadow.png b/src/iotMapManager/img/POI_SQR_Shadow.png
diff --git a/src/iotMapManager/iot-map-manager.css b/src/iotMapManager/iot-map-manager.css
@@ -18,6 +18,7 @@
 @import './css/markers.css';
 @import './css/popup.css';
 @import './css/tabs.css';
+@import './css/shadows.css';
 
 
 
diff --git a/src/iotMapManager/src/iot-map-icons.ts b/src/iotMapManager/src/iot-map-icons.ts
@@ -390,6 +390,7 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
   let svgGauge = ``
   let svgDirection = ``
   let shadowFile = ''
+  let shadowClass = ''
 
   const markerConfig = (selected)
     ? config.markers.size.selected
@@ -412,16 +413,24 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
       svgShape = `<path ${svg.selFunColour} fill='${funColor}'/>`
       svgBG = svg.selFunBg
     }
-    shadowFile = (marker.shape.type === ShapeType.circle) ? mobCirSelShadow : poiSqrSelShadow
+    if (marker.shape.type === ShapeType.circle) {
+      shadowFile = mobCirSelShadow
+      shadowClass = 'iotmap-selected-circle-shadow'
+    } else {
+      shadowFile = poiSqrSelShadow
+      shadowClass = 'iotmap-selected-square-shadow'
+    }
   } else if (marker.shape.type === ShapeType.circle) {
     if (marker.shape.anchored) {
       svgBorder = svg.pinBorder
       svgShape = `<path ${svg.pinStdColour} fill='${funColor}'/>`
       shadowFile = mobCirPinShadow
+      shadowClass = 'iotmap-circle-pin-shadow'
     } else {
       svgBorder = svg.border
       svgShape = `<circle ${svg.stdColour} fill='${funColor}'/>`
       shadowFile = mobCirShadow
+      shadowClass = 'iotmap-circle-shadow'
     }
   } else if (marker.shape.type === ShapeType.square) {
     if (marker.shape.anchored) {
@@ -434,6 +443,7 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
         svgBG = svg.pinFunBg
       }
       shadowFile = poiSqrPinShadow
+      shadowClass = 'iotmap-square-pin-shadow'
     } else {
       if (marker.shape.plain) {
         svgBorder = svg.border
@@ -444,6 +454,7 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
         svgBG = svg.funBg
       }
       shadowFile = poiSqrShadow
+      shadowClass = 'iotmap-square-shadow'
     }
   }
 
@@ -497,7 +508,7 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
   }
 
   // shadow
-  const imgShadow = `<img class='${((selected) ? 'iotmap-shadowSelected' : 'iotmap-shadowUnselected')}' src='${shadowFile}'/>`
+  const imgShadow = `<img class=${shadowClass} src='${shadowFile}'/>`
 
   // tabs
   let tab = ``