diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html index e64afd4a9f..2a1cc38f00 100644 --- a/platform/commonUI/browse/res/templates/items/grid-item.html +++ b/platform/commonUI/browse/res/templates/items/grid-item.html @@ -20,8 +20,8 @@ at runtime from the About dialog for additional information. --> -
-
+
+
@@ -44,4 +44,7 @@
-
\ No newline at end of file +
+ +
+
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 85e93a1611..bf9ca44a5f 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/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; } } diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss index 15d792a576..d5a5a1a45a 100644 --- a/platform/commonUI/general/res/sass/mobile/_item.scss +++ b/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; diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json index 7a2123486b..f629272e99 100644 --- a/platform/commonUI/inspect/bundle.json +++ b/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" + } ] } } \ No newline at end of file diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html new file mode 100644 index 0000000000..e602b2c0b1 --- /dev/null +++ b/platform/commonUI/inspect/res/templates/info-button.html @@ -0,0 +1,25 @@ + + +
+ i +
diff --git a/platform/commonUI/inspect/src/controllers/InfoController.js b/platform/commonUI/inspect/src/controllers/InfoController.js new file mode 100644 index 0000000000..464d0ba6ac --- /dev/null +++ b/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; + } +); \ No newline at end of file