From 827cb27f28d89fbcc9cd8ad6e518eebfcb3d4c87 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 21 Jul 2015 16:19:59 -0700
Subject: [PATCH] [Mobile] Menu

Added margin to top of tree list items.
Also removed hovering Info coming
up on mobile devices.
---
 platform/commonUI/general/res/css/tree.css    | 45 ++++++++++---------
 .../general/res/sass/mobile/_tree.scss        |  3 +-
 .../general/res/templates/tree-node.html      |  8 ++--
 platform/commonUI/inspect/bundle.json         |  1 +
 .../inspect/src/gestures/InfoGesture.js       | 31 +++++++------
 5 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index ddffb9899b..2dd23415b9 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -309,13 +309,11 @@ ul.tree {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 22, ../sass/mobile/_tree.scss */
   .test-tree-words {
-    margin-bottom: 4px;
-    margin-bottom: 4px;
     width: 100%;
     text-overflow: ellipsis; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 31, ../sass/mobile/_tree.scss */
+  /* line 29, ../sass/mobile/_tree.scss */
   ul.tree {
     margin: 0;
     padding: 0; }
@@ -324,24 +322,27 @@ ul.tree {
       list-style-type: none;
       margin: 0;
       padding: 0; }
-    /* line 40, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .label {
-      left: 3px; }
-      /* line 44, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label .type-icon .alert {
-        right: auto;
-        left: 9px; }
-      /* line 49, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label .title-label {
-        left: 20px; }
-    /* line 54, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .context-trigger {
-      right: 3px; }
-    /* line 58, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .view-control {
-      position: absolute;
-      right: 5px;
-      font-size: 1.5em; }
-    /* line 67, ../sass/mobile/_tree.scss */
+    /* line 33, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item {
+      margin-top: 3px; }
+      /* line 39, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label {
+        left: 3px; }
+        /* line 43, ../sass/mobile/_tree.scss */
+        ul.tree li span.tree-item .label .type-icon .alert {
+          right: auto;
+          left: 9px; }
+        /* line 48, ../sass/mobile/_tree.scss */
+        ul.tree li span.tree-item .label .title-label {
+          left: 20px; }
+      /* line 53, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .context-trigger {
+        right: 3px; }
+      /* line 57, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .view-control {
+        position: absolute;
+        right: 5px;
+        font-size: 1.5em; }
+    /* line 66, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index a0e428fd1c..c50d9f71d1 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -21,8 +21,6 @@
  *****************************************************************************/
 .test-tree-words {
     @include phoneandtablet {
-        margin-bottom: 4px;
-        margin-bottom: 4px;
         width: 100%;
         text-overflow: ellipsis;
     }
@@ -36,6 +34,7 @@ ul.tree {
                 $runningItemW: 0;
                 $customMargin: auto;
                 $runningItemW: $interiorMargin + $treeVCW;
+                margin-top: $interiorMarginSm;
 
                 .label {
                     left: 3px;
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 2e4c48ec3a..03b6808dca 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -29,18 +29,20 @@
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+                          toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span
 	            class='ui-symbol view-control'
                 mct-object="domainObject"
                 ng-model="ngModel"
-				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+                          toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined || treeNode.checkMobile()"
 				>
                 {{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}}
-            </span>            
+            </span>
         </span>
         <span
 			class="tree-item-subtree"
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index 51244b2bf2..7a2123486b 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -24,6 +24,7 @@
                 "implementation": "gestures/InfoGesture.js",
                 "depends": [
                     "$timeout",
+                    "queryService",
                     "infoService",
                     "INFO_HOVER_DELAY"
                 ]
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 879cc2ac36..c40a2baac2 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -38,7 +38,7 @@ define(
          * @param {DomainObject} domainObject the domain object for which to
          *        show information
          */
-        function InfoGesture($timeout, infoService, DELAY, element, domainObject) {
+        function InfoGesture($timeout, queryService, infoService, DELAY, element, domainObject) {
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
@@ -75,21 +75,26 @@ define(
                 // Also need to track position during hover
                 element.on('mousemove', trackPosition);
 
-                // Show the bubble, after a suitable delay (if mouse has
-                // left before this time is up, this will be canceled.)
-                pendingBubble = $timeout(function () {
-                    dismissBubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        mousePosition
-                    );
-                    element.off('mousemove', trackPosition);
-                    pendingBubble = undefined;
-                }, DELAY);
+                // Checks if you are on a mobile device, if the device is
+                // mobile, then hovering is not done.
+                if (!queryService.isMobile()) {
+                    // Show the bubble, after a suitable delay (if mouse has
+                    // left before this time is up, this will be canceled.)
+                    pendingBubble = $timeout(function () {
+                        dismissBubble = infoService.display(
+                            "info-table",
+                            domainObject.getModel().name,
+                            domainObject.useCapability('metadata'),
+                            mousePosition
+                        );
+                        element.off('mousemove', trackPosition);
 
+                        pendingBubble = undefined;
+                    }, DELAY);
+                }
                 element.on('mouseleave', hideBubble);
             }
+            
 
             // Show bubble (on a timeout) on mouse over
             element.on('mouseenter', showBubble);