IOTMAPCOMP-189 - taille des popups

Orange-OpenSource · Jun 11, 2021 · f871f32 · f871f32
1 parent f43b590
commit f871f32
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/src/iotMapManager/css/popup.css b/src/iotMapManager/css/popup.css
@@ -61,15 +61,15 @@
 
 /* CLUSTER POPUP */
 
-.iotmap-cluster-popup-table {
+.iotmap-cluster-big-popup-table {
   width: 100%;
   text-align: left;
 }
-.iotmap-cluster-popup-body-cell {
+.iotmap-cluster-big-popup-body-cell {
   text-align: left;
   font-size: 14px;
 }
-.iotmap-cluster-popup-body-bullet {
+.iotmap-cluster-big-popup-body-bullet {
   width: 20px;
   text-align: center;
 }
@@ -82,7 +82,7 @@
   color: #FF7900;
 }
 
-.iotmap-clustericon > .iotmap-cluster-popup {
+.iotmap-clustericon > .iotmap-cluster-popup, .iotmap-cluster-big-popup {
   position: absolute;
   bottom:0px;
   left: 0px;
@@ -98,6 +98,27 @@
 
 
 .iotmap-clustericon:hover > .iotmap-cluster-popup {
+  position: absolute;
+  bottom:-25px;
+  left:-75px;
+  width: 200px;
+  box-sizing: border-box;
+  max-height: 600px;
+  height: auto;
+  border-radius: 10px;
+  opacity: 1;
+
+  background-color: white;
+  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.7);
+  overflow: hidden;
+  padding: 10px 15px 30px;
+  font-family: 'Helvetica Neue', 'helvetica';
+  font-weight: bold;
+  text-align: left;
+  z-index: 0;
+}
+
+.iotmap-clustericon:hover > .iotmap-cluster-big-popup {
   position: absolute;
   bottom:-25px;
   left:-115px;
@@ -118,21 +139,21 @@
   z-index: 0;
 }
 
-.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-title {
+.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-title, .iotmap-cluster-big-popup .iotmap-pop-up-title {
   font-size: 20px;
 }
 
-.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-title-icon {
+.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-title-icon, .iotmap-cluster-big-popup .iotmap-pop-up-title-icon {
   font-size: 20px;
   margin-right: 15px;
 }
 
-.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-bullet {
+.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-bullet, .iotmap-cluster-big-popup .iotmap-pop-up-bullet {
   font-size: 12px;
   color: transparent;
 }
 
-.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-body {
+.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-body, .iotmap-cluster-big-popup .iotmap-pop-up-body {
   font-size: 12px;
 }
 

diff --git a/src/iotMapManager/src/iot-map-icons.ts b/src/iotMapManager/src/iot-map-icons.ts
@@ -88,7 +88,9 @@ export function getManualClusterIcon (cluster: IotCluster, config: IotMapConfig)
 
   // popup
   const layerTemp = config.layerTemplates[cluster.layer]
-  let popup = `<div class='iotmap-cluster-popup'>`
+  const nbCols = (cluster.colNumber ?? layerTemp?.popupColNumber) ?? 1
+
+  let popup = (nbCols > 1) ? `<div class='iotmap-cluster-big-popup'>` : `<div class='iotmap-cluster-popup'>`
 
   // popup title
   if (layerTemp !== undefined) {
@@ -101,10 +103,10 @@ export function getManualClusterIcon (cluster: IotCluster, config: IotMapConfig)
   }
 
   // popup body
-  popup += `<table class='iotmap-cluster-popup-table'>`
+  popup += `<table class='iotmap-cluster-big-popup-table'>`
   popup += `<tr>`
   let elemNum = 1
-  const nbCols = (cluster.colNumber ?? layerTemp?.popupColNumber) ?? 1
+
   const nbRows = Math.round(cluster.aggregation.length / nbCols)
 
   for (let row = 1; row <= nbRows; row++) {
@@ -116,8 +118,8 @@ export function getManualClusterIcon (cluster: IotCluster, config: IotMapConfig)
         const url = currentAgreg.url ?? ''
         const urlTarget = currentAgreg.urlTarget ?? ''
 
-        popup += `<td class='iotmap-cluster-popup-body-bullet'><span >${bullet}</span></td>`
-        popup += `<td class='iotmap-cluster-popup-body-cell'><span >`
+        popup += `<td class='iotmap-cluster-big-popup-body-bullet'><span >${bullet}</span></td>`
+        popup += `<td class='iotmap-cluster-big-popup-body-cell'><span >`
         popup += (url !== '') ? (`<a href='${url}` + ((urlTarget !== '') ? `' target='${urlTarget}` : '') + `'>`) : ''
         popup += `${currentAgreg.count} ${(currentAgreg.count === 1) ? currentAgreg.singularState : currentAgreg.pluralState} </span></td>`
         popup += (url !== '') ? `</a>` : ''