mirror of
https://github.com/nasa/openmct.git
synced 2025-02-01 00:45:41 +00:00
[Mobile] Menu
Added margin to top of tree list items. Also removed hovering Info coming up on mobile devices.
This commit is contained in:
Shivam Dave
parent
0842f464db
commit
827cb27f28
@ -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; } }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
"implementation": "gestures/InfoGesture.js",
|
||||
"depends": [
|
||||
"$timeout",
|
||||
"queryService",
|
||||
"infoService",
|
||||
"INFO_HOVER_DELAY"
|
||||
]
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user