Merge pull request #218 from Malvoz/debug-mode-css

Update debug mode styles

Author: prushforth

src/mapml.css

@@ -74,9 +74,12 @@
   border-style: inherit;
 }
 
+.mapml-contextmenu,
+.mapml-debug,
 .leaflet-bar,
 .leaflet-control-layers,
-.mapml-contextmenu,
+.leaflet-popup-content-wrapper,
+.leaflet-tooltip-pane .leaflet-tooltip,
 .leaflet-touch .leaflet-control-layers,
 .leaflet-touch .leaflet-bar {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgb(0, 0, 0, 0.3);
@@ -224,6 +227,45 @@
   margin: 5px 0;
 }
 
+/*
+ * Debug mode.
+ */
+
+.mapml-debug {
+  contain: content;
+  max-height: 100%;
+  max-width: 100%;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #fff;
+  cursor: default;
+}
+
+.mapml-debug-banner {
+  margin-left: 4px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.mapml-debug-panel,
+.mapml-debug-grid {
+  font-family: monospace;
+}
+
+.mapml-debug-panel {
+  margin-top: 4px;
+}
+
+.mapml-debug-tile {
+  text-indent: 6px;
+  line-height: 1.8;
+}
+
+.mapml-debug-coordinates {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
 /*
  * User interaction.
  */
@@ -236,7 +278,8 @@
 
 /* Disable text selection in controls. */
 .leaflet-control,
-.mapml-contextmenu {
+.mapml-contextmenu,
+.mapml-debug {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -303,27 +346,3 @@ summary {
 .leaflet-container .leaflet-control-container {
   visibility: unset!important;
 }
-.mapml-debug-panel {
-  max-height: 100%;
-  max-width: 100%;
-  box-shadow: 0 1px 7px rgba(0,0,0,0.4);
-  -webkit-border-radius: 4px;
-          border-radius: 4px;
-  padding: 4px 0;
-  background-color: #fff;
-  cursor: default;
-  -webkit-user-select: none;
-     -moz-user-select: none;    
-      -ms-user-select: none;
-          user-select: none;
-}
-
-.mapml-debug-coordinates{
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
-.mapml-debug-title{
-  padding-left: 4px;
-  padding-right: 4px;
-}

src/mapml/handlers/ContextMenu.js

@@ -104,7 +104,7 @@ export var ContextMenu = L.Handler.extend({
     this._keyboardEvent = false;
 
     this._container = L.DomUtil.create("div", "mapml-contextmenu", map._container);
-    this._container.style.zIndex = 10000;
+    this._container.style.zIndex = 10001;
     this._container.style.position = "absolute";
 
     this._container.style.width = "150px";
@@ -114,7 +114,7 @@ export var ContextMenu = L.Handler.extend({
     }
 
     this._coordMenu = L.DomUtil.create("div", "mapml-contextmenu mapml-submenu", this._container);
-    this._coordMenu.style.zIndex = 10000;
+    this._coordMenu.style.zIndex = 10001;
     this._coordMenu.style.position = "absolute";
 
     this._coordMenu.style.width = "80px";
@@ -130,7 +130,7 @@ export var ContextMenu = L.Handler.extend({
     this._items[7].el = this._createItem(this._container, this._items[7]);
 
     this._layerMenu = L.DomUtil.create("div", "mapml-contextmenu mapml-layer-menu", map._container);
-    this._layerMenu.style.zIndex = 10000;
+    this._layerMenu.style.zIndex = 10001;
     this._layerMenu.style.position = "absolute";
     this._layerMenu.style.width = "150px";
     for (let i = 0; i < this._layerItems.length; i++) {

src/mapml/layers/DebugLayer.js

@@ -1,15 +1,29 @@
 export var DebugOverlay = L.Layer.extend({
 
   onAdd: function (map) {
-    this._container = L.DomUtil.create("div", "mapml-debug", map._container);
-
-    //adds a control panel
-    /*  this._controlPanel = L.DomUtil.create("div", "mapml-debug-control mapml-debug-panel", this._container);
-        let toggleGridBtn = document.createElement('button'), gridBtnText = document.createTextNode("Toggle Grid");
-        toggleGridBtn.appendChild(gridBtnText);
-        toggleGridBtn.overlay = this;
-        L.DomEvent.on(toggleGridBtn, 'click',this._toggleGrid);
-        this._controlPanel.appendChild(toggleGridBtn); */
+    
+    let mapSize = map.getSize();
+    
+    //conditionally show container for debug panel/banner only when the map has enough space for it
+    if (mapSize.x > 400 || mapSize.y > 300) {
+      this._container = L.DomUtil.create("div", "mapml-debug", map._container);
+
+      //adds a control panel
+      /*  this._controlPanel = L.DomUtil.create("div", "mapml-debug-control mapml-debug-panel", this._container);
+          let toggleGridBtn = document.createElement('button'), gridBtnText = document.createTextNode("Toggle Grid");
+          toggleGridBtn.appendChild(gridBtnText);
+          toggleGridBtn.overlay = this;
+          L.DomEvent.on(toggleGridBtn, 'click',this._toggleGrid);
+          this._controlPanel.appendChild(toggleGridBtn); */
+          
+      this._container.style.width = 150;
+      this._container.style.zIndex = 10000;
+      this._container.style.position = "absolute";
+      this._container.style.top = "auto";
+      this._container.style.bottom = "10px";
+      this._container.style.left = "10px";
+      this._container.style.right = "auto";
+    }
 
     this._grid = debugGrid({
       className: "mapml-debug-grid",
@@ -56,17 +70,13 @@ export var DebugPanel = L.Layer.extend({
 
     //conditionally show debug panel only when the map has enough space for it
     if (mapSize.x > 400 || mapSize.y > 300) {
+      this._title = L.DomUtil.create("div", "mapml-debug-banner", this.options.pane);
+      this._title.innerHTML = "Debug mode";
+      
       map.debug = {};
       map.debug._infoContainer = this._debugContainer = L.DomUtil.create("div", "mapml-debug-panel", this.options.pane);
 
       let infoContainer = map.debug._infoContainer;
-      infoContainer.style.zIndex = 10000;
-      infoContainer.style.width = 150;
-      infoContainer.style.position = "absolute";
-      infoContainer.style.top = "auto";
-      infoContainer.style.bottom = "4px";
-      infoContainer.style.right = "auto";
-      infoContainer.style.left = "4px";
 
       map.debug._tileCoord = L.DomUtil.create("div", "mapml-debug-coordinates", infoContainer);
       map.debug._tileMatrixCoord = L.DomUtil.create("div", "mapml-debug-coordinates", infoContainer);
@@ -78,14 +88,6 @@ export var DebugPanel = L.Layer.extend({
       this._map.on("mousemove", this._updateCoords);
     }
 
-    this._title = L.DomUtil.create("div", "mapml-debug-banner", this.options.pane);
-    this._title.innerHTML = "DEBUG MODE";
-    this._title.style.zIndex = 10000;
-    this._title.style.position = "absolute";
-    this._title.style.top = "4px";
-    this._title.style.bottom = "auto";
-    this._title.style.left = "auto";
-    this._title.style.right = "4px";
   },
   onRemove: function () {
     L.DomUtil.remove(this._title);