diff --git a/src/iotMapManager/css/popup.css b/src/iotMapManager/css/popup.css index 336647cd..e1c60997 100644 --- 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 index 86695c40..f2d9b11f 100644 --- 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 = `
${bullet} | ` - popup += `` + popup += ` | ${bullet} | ` + popup += `` popup += (url !== '') ? (``) : '' popup += `${currentAgreg.count} ${(currentAgreg.count === 1) ? currentAgreg.singularState : currentAgreg.pluralState} | ` popup += (url !== '') ? `` : ''