ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-30 15:59:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Mobile] Menu

Browse Source 
Added margin to top of tree list items.
Also removed hovering Info coming
up on mobile devices.
This commit is contained in:
Shivam Dave 2015-07-21 16:19:59 -07:00
parent 0842f464db
commit 827cb27f28
5 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
platform/commonUI/general/res/css/tree.css
View File

@ -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) { @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 */ /* line 22, ../sass/mobile/_tree.scss */
.test-tree-words { .test-tree-words {
margin-bottom: 4px;
margin-bottom: 4px;
width: 100%; width: 100%;
text-overflow: ellipsis; } } 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) { @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 { ul.tree {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
@ -324,24 +322,27 @@ ul.tree {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 40, ../sass/mobile/_tree.scss */ /* line 33, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label { ul.tree li span.tree-item {
left: 3px; } margin-top: 3px; }
/* line 44, ../sass/mobile/_tree.scss */ /* line 39, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label .type-icon .alert { ul.tree li span.tree-item .label {
right: auto; left: 3px; }
left: 9px; } /* line 43, ../sass/mobile/_tree.scss */
/* line 49, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label .type-icon .alert {
ul.tree li span.tree-item .label .title-label { right: auto;
left: 20px; } left: 9px; }
/* line 54, ../sass/mobile/_tree.scss */ /* line 48, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .context-trigger { ul.tree li span.tree-item .label .title-label {
right: 3px; } left: 20px; }
/* line 58, ../sass/mobile/_tree.scss */ /* line 53, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .view-control { ul.tree li span.tree-item .context-trigger {
position: absolute; right: 3px; }
right: 5px; /* line 57, ../sass/mobile/_tree.scss */
font-size: 1.5em; } ul.tree li span.tree-item .view-control {
/* line 67, ../sass/mobile/_tree.scss */ position: absolute;
right: 5px;
font-size: 1.5em; }
/* line 66, ../sass/mobile/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 3px; } } margin-left: 3px; } }

3
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@ -21,8 +21,6 @@
*****************************************************************************/ *****************************************************************************/
.test-tree-words { .test-tree-words {
@include phoneandtablet { @include phoneandtablet {
margin-bottom: 4px;
margin-bottom: 4px;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -36,6 +34,7 @@ ul.tree {
$runningItemW: 0; $runningItemW: 0;
$customMargin: auto; $customMargin: auto;
$runningItemW: $interiorMargin + $treeVCW; $runningItemW: $interiorMargin + $treeVCW;
margin-top: $interiorMarginSm;
.label { .label {
left: 3px; left: 3px;

6
platform/commonUI/general/res/templates/tree-node.html
View File

@ -29,14 +29,16 @@
key="'label'" key="'label'"
mct-object="domainObject" mct-object="domainObject"
ng-model="ngModel" 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> </mct-representation>
<span <span
class='ui-symbol view-control' class='ui-symbol view-control'
mct-object="domainObject" mct-object="domainObject"
ng-model="ngModel" 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()" ng-if="model.composition !== undefined || treeNode.checkMobile()"
> >
{{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}} {{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}}

1
platform/commonUI/inspect/bundle.json
View File

@ -24,6 +24,7 @@
"implementation": "gestures/InfoGesture.js", "implementation": "gestures/InfoGesture.js",
"depends": [ "depends": [
"$timeout", "$timeout",
"queryService",
"infoService", "infoService",
"INFO_HOVER_DELAY" "INFO_HOVER_DELAY"
] ]

31
platform/commonUI/inspect/src/gestures/InfoGesture.js
View File

@ -38,7 +38,7 @@ define(
* @param {DomainObject} domainObject the domain object for which to * @param {DomainObject} domainObject the domain object for which to
* show information * show information
*/ */
function InfoGesture($timeout, infoService, DELAY, element, domainObject) { function InfoGesture($timeout, queryService, infoService, DELAY, element, domainObject) {
var dismissBubble, var dismissBubble,
pendingBubble, pendingBubble,
mousePosition, mousePosition,
@ -75,22 +75,27 @@ define(
// Also need to track position during hover // Also need to track position during hover
element.on('mousemove', trackPosition); element.on('mousemove', trackPosition);
// Show the bubble, after a suitable delay (if mouse has // Checks if you are on a mobile device, if the device is
// left before this time is up, this will be canceled.) // mobile, then hovering is not done.
pendingBubble = $timeout(function () { if (!queryService.isMobile()) {
dismissBubble = infoService.display( // Show the bubble, after a suitable delay (if mouse has
"info-table", // left before this time is up, this will be canceled.)
domainObject.getModel().name, pendingBubble = $timeout(function () {
domainObject.useCapability('metadata'), dismissBubble = infoService.display(
mousePosition "info-table",
); domainObject.getModel().name,
element.off('mousemove', trackPosition); domainObject.useCapability('metadata'),
pendingBubble = undefined; mousePosition
}, DELAY); );
element.off('mousemove', trackPosition);
pendingBubble = undefined;
}, DELAY);
}
element.on('mouseleave', hideBubble); element.on('mouseleave', hideBubble);
} }
// Show bubble (on a timeout) on mouse over // Show bubble (on a timeout) on mouse over
element.on('mouseenter', showBubble); element.on('mouseenter', showBubble);