From 9d6520542b8c1511c099e6c6578a791e77e2eae7 Mon Sep 17 00:00:00 2001
From: roemhildtg <roemhildtg@gmail.com>
Date: Mon, 27 Feb 2017 14:41:04 -0600
Subject: [PATCH] Move expand click node to the entire control row to more
 easily expand/collapse Control

 - Move sublayer menu for dynamic layers to hamburger style menu with indent
---
 .../gis/dijit/LayerControl/controls/_Control.js |  8 +++++++-
 .../LayerControl/controls/_DynamicFolder.js     | 10 ++++++++--
 .../LayerControl/controls/_DynamicSublayer.js   | 14 ++++++++++----
 .../controls/templates/Control.html             |  4 ++--
 .../LayerControl/controls/templates/Folder.html |  8 ++++----
 .../controls/templates/Sublayer.html            | 17 +++++++++++------
 6 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/viewer/js/gis/dijit/LayerControl/controls/_Control.js b/viewer/js/gis/dijit/LayerControl/controls/_Control.js
index e9086017a..4975b12d3 100644
--- a/viewer/js/gis/dijit/LayerControl/controls/_Control.js
+++ b/viewer/js/gis/dijit/LayerControl/controls/_Control.js
@@ -147,7 +147,13 @@ define([
             domConst.destroy(this.expandNode);
         },
         // set layer visibility and update icon
-        _setLayerVisibility: function (layer, checkNode) {
+        _setLayerVisibility: function (layer, checkNode, event) {
+
+            // prevent click event from bubbling
+            if (event.stopPropagation) {
+                event.stopPropagation();
+            }
+
             if (layer.visible) {
                 this._setLayerCheckbox(layer, checkNode);
                 layer.hide();
diff --git a/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js b/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js
index 584a3c9a4..15a601720 100644
--- a/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js
+++ b/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js
@@ -56,7 +56,13 @@ define([
             } else {
                 this._setSublayerCheckbox(false, checkNode);
             }
-            this._handlers.push(on(checkNode, 'click', lang.hitch(this, function () {
+            this._handlers.push(on(checkNode, 'click', lang.hitch(this, function (event) {
+
+                // prevent click event from bubbling
+                if (event.stopPropagation) {
+                    event.stopPropagation();
+                }
+
                 if (domAttr.get(checkNode, 'data-checked') === 'checked') {
                     this._setSublayerCheckbox(false, checkNode);
                 } else {
@@ -124,4 +130,4 @@ define([
         }
     });
     return _DynamicFolder;
-});
\ No newline at end of file
+});
diff --git a/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js b/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js
index 3cce73151..c8f3880b0 100644
--- a/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js
+++ b/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js
@@ -66,7 +66,13 @@ define([
             } else {
                 this._setSublayerCheckbox(false, checkNode);
             }
-            this._handlers.push(on(checkNode, 'click', lang.hitch(this, function () {
+            this._handlers.push(on(checkNode, 'click', lang.hitch(this, function (event) {
+
+                // prevent click event from bubbling
+                if (event.stopPropagation) {
+                    event.stopPropagation();
+                }
+
                 if (domAttr.get(checkNode, 'data-checked') === 'checked') {
                     this._setSublayerCheckbox(false, checkNode);
                 } else {
@@ -84,15 +90,15 @@ define([
             //set up menu
             if (this.control.controlOptions.menu &&
                     this.control.controlOptions.menu.length) {
-                domClass.add(this.labelNode, 'menuLink');
-                domClass.add(this.iconNode, 'menuLink');
                 this.menu = new Menu({
                     contextMenuForWindow: false,
-                    targetNodeIds: [this.labelNode],
+                    targetNodeIds: [this.menuClickNode],
                     leftClickToOpen: true
                 });
                 array.forEach(this.control.controlOptions.menu, lang.hitch(this, '_addMenuItem'));
                 this.menu.startup();
+            } else {
+                domClass.add(this.menuClickNode, 'hidden');
             }
         },
         _addMenuItem: function (menuItem) {
diff --git a/viewer/js/gis/dijit/LayerControl/controls/templates/Control.html b/viewer/js/gis/dijit/LayerControl/controls/templates/Control.html
index 5836fe4b0..e7e224030 100644
--- a/viewer/js/gis/dijit/LayerControl/controls/templates/Control.html
+++ b/viewer/js/gis/dijit/LayerControl/controls/templates/Control.html
@@ -1,7 +1,7 @@
 <div class="layerControl">
     <table class="layerControlTable">
-        <tr>
-            <td data-dojo-attach-point="expandClickNode" class="layerControlTableExpand">
+        <tr data-dojo-attach-point="expandClickNode">
+            <td class="layerControlTableExpand">
                 <i data-dojo-attach-point="expandIconNode" class="fa ${icons.expand} layerControlIcon"></i>
             </td>
             <td class="layerControlTableCheck">
diff --git a/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html b/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html
index 628438952..c62a97f34 100644
--- a/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html
+++ b/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html
@@ -1,7 +1,7 @@
-<div>
-    <table>
-        <tr>
-            <td data-dojo-attach-point="expandClickNode" class="layerControlTableExpand">
+<div class="layerControl layerControlFolder">
+    <table class="layerControlTable">
+        <tr data-dojo-attach-point="expandClickNode">
+            <td class="layerControlTableExpand">
                 <i data-dojo-attach-point="expandIconNode" class="fa ${icons.folder} layerControlIcon"></i>
             </td>
             <td class="layerControlTableCheck">
diff --git a/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html b/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html
index 8e5b82ea6..6d2a2b464 100644
--- a/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html
+++ b/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html
@@ -1,7 +1,7 @@
-<div>
-    <table>
-        <tr>
-            <td data-dojo-attach-point="expandClickNode" class="layerControlTableExpand">
+<div class="layerControl layerControlSublayer">
+    <table class="layerControlTable">
+        <tr data-dojo-attach-point="expandClickNode">
+            <td class="layerControlTableExpand">
                 <i data-dojo-attach-point="expandIconNode" class="fa ${icons.expand} layerControlIcon"></i>
             </td>
             <td class="layerControlTableCheck">
@@ -9,9 +9,14 @@
             </td>
             <td class="layerControlTableLabel">
                 <span data-dojo-attach-point="labelNode"></span>
-                <span data-dojo-attach-point="iconNode"></span>
+                <span data-dojo-attach-point="iconNode" class="icon-extra"></span>
+            <td class="layerControlTableUpdate">
+                <i data-dojo-attach-point="layerUpdateNode" class="fa ${icons.update} fa-spin layerControlUpdateIcon" style="display:none;"></i>
+            </td>
+            <td data-dojo-attach-point="menuClickNode" class="layerControlTableMenu">
+                <i data-dojo-attach-point="menuNode" class="fa ${icons.menu} layerControlMenuIcon"></i>
             </td>
         </tr>
     </table>
-    <div data-dojo-attach-point="expandNode" class="layerControlIndent" style="display:none;">${i18n.noLegend}</div>
+    <div data-dojo-attach-point="expandNode" class="layerControlIndent layerControlExpand" style="display:none;"></div>
 </div>