[Mobile] Info Button

Added info button to grid/list items
on mobile. When the button is pressed,
info bubble appears for 750ms or the
same infobutton is pressed to dismiss
immediately.

platform/commonUI/browse/res/templates/items/grid-item.html

@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- For selected, add class 'selected' to outer div -->
-<div class='item grid-item' ng-click='action.perform("navigate")'>
-    <div class="contents abs">
+<div class='item grid-item'>
+    <div class="contents abs mobile-grid-nav" ng-click='action.perform("navigate")'>
         <div class='top-bar bar abs'>
             <div class='left abs'>
                 <mct-include key="_checkbox"></mct-include>
@@ -44,4 +44,7 @@
             </div>
         </div>
     </div>
-</div>
+    <div class="contents abs mobile-info">
+        <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
+    </div>
+</div>

platform/commonUI/general/res/css/items.css

@@ -367,21 +367,33 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 35, ../sass/mobile/_item.scss */
+  /* line 34, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .mobile-grid-nav {
+    top: 0px;
+    bottom: 0px;
+    right: 50px; }
+  /* line 39, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .mobile-info {
+    text-align: center;
+    width: 50px;
+    right: 0px;
+    left: auto;
+    font-size: 1.5em; }
+  /* line 47, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar.bottom-bar.abs {
     top: 0px;
     height: auto; }
-  /* line 41, ../sass/mobile/_item.scss */
+  /* line 54, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-type {
     font-size: 30px;
     top: 0px;
     left: 0px;
     text-align: left;
     height: auto; }
-  /* line 48, ../sass/mobile/_item.scss */
+  /* line 61, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-open {
     display: none; }
-  /* line 52, ../sass/mobile/_item.scss */
+  /* line 65, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
     margin-left: 30px; } }
 @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) {
@@ -389,14 +401,17 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 62, ../sass/mobile/_item.scss */
+    /* line 74, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-info {
+      line-height: 25px; }
+    /* line 78, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       line-height: 40px; }
-    /* line 66, ../sass/mobile/_item.scss */
+    /* line 82, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 70, ../sass/mobile/_item.scss */
+    /* line 86, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -405,15 +420,18 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 81, ../sass/mobile/_item.scss */
+    /* line 96, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-info {
+      line-height: 38px; }
+    /* line 100, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 86, ../sass/mobile/_item.scss */
+    /* line 105, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 90, ../sass/mobile/_item.scss */
+    /* line 109, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }

platform/commonUI/general/res/sass/mobile/_item.scss

@@ -31,11 +31,24 @@
             $dHei: $ueBrowseGridItemLg;
             @include phoneandtablet {
                 $dWid: 100%;
+                .mobile-grid-nav {
+                    top: 0px;
+                    bottom: 0px;
+                    right: 50px;
+                }
+                .mobile-info {
+                    text-align: center;
+                    width: 50px;
+                    right: 0px;
+                    left: auto;
+                    font-size: 1.5em;
+                }
                 .bar {
                     &.bottom-bar.abs {
                         top: 0px;
                         height: auto;
                     }
+                    
                 }
                 .item-main {
                     .item-type {
@@ -51,13 +64,16 @@
                 }
                 .title, .details {
                     margin-left: $mobile-listIcon;
-                }             
+                }
             }
 
             @include phone {
                 $dHei: $phone-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-info {
+                    line-height: $phone-itemHeight * .5;
+                }
                 .item-main {
                     .item-type {
                         line-height: $phone-itemHeight * .8;
@@ -77,6 +93,9 @@
                 $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-info {
+                    line-height: $tablet-itemHeight * .57;
+                }
                 .item-main {
                     .item-type {
                         font-size: $mobile-listIcon;

platform/commonUI/inspect/bundle.json

@@ -9,6 +9,13 @@
                 "key": "info-bubble",
                 "templateUrl": "info-bubble.html"
             }
+        ],      
+        "controllers": [
+            {
+                "key": "InfoController",
+                "implementation": "controllers/InfoController.js",
+                "depends": [ "$scope", "$timeout", "infoService" ]
+            }
         ],
         "containers": [
             {
@@ -41,12 +48,18 @@
                     "$rootScope"
                 ]
             }
-        ],
+        ],  
         "constants": [
             {
                 "key": "INFO_HOVER_DELAY",
                 "value": 2000
             }
+        ],
+        "representations": [
+            {
+                "key": "info-button",
+                "templateUrl": "templates/info-button.html"
+            }
         ]
     }
 }

platform/commonUI/inspect/res/templates/info-button.html

@@ -0,0 +1,25 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<div ng-controller="InfoController" ng-click='tryToDis($event)'>
+    <a class='ui-symbol icon mobile-info'>i</a>
+</div>

platform/commonUI/inspect/src/controllers/InfoController.js

@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining InfoController.
+ */
+define(
+    [],
+    function () {
+        "use strict";
+        function InfoController($scope, $timeout, infoService) {
+            var touchPosition,
+                bubble;
+            function trackPosition(event) {
+                // Record mouse position, so bubble can be shown at latest
+                // mouse position (not just where the mouse entered)
+                touchPosition = [ event.pageX, event.pageY ];
+            }
+            
+            function display(event) {
+                var domainObject = $scope.domainObject;
+                console.log(domainObject.getId());
+                trackPosition(event);
+                
+                if(!bubble) {
+                    bubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        touchPosition
+                    );
+                } else {
+                    bubble();
+                    bubble = undefined;
+                }
+                
+                $timeout(function () {
+                // If a bubble is showing, dismiss it after timeout
+                    if (bubble) {
+                        bubble();
+                        bubble = undefined;
+                    }
+                }, 750);
+            }
+            $scope.tryToDis = display;
+        }
+        return InfoController;
+    }
+);