ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 17:33:23 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Mobile] Hide Back Button

Browse Source 
When you are at the highest level the
back button fades out and is unclickable.
When you are able to go up a level the
back button appears/fades in and is
pressable. Also removed the object type
name from the header.
This commit is contained in:
Shivam Dave 2015-07-29 11:13:09 -07:00
parent 28a2a5b92a
commit 7e35e55f0b
7 changed files with 92 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
platform/commonUI/browse/res/templates/back-arrow.html
View File

@ -22,6 +22,7 @@
<!-- Back Arrow Icon used on mobile-->
<span ng-controller="BrowseController"
ng-click='backArrow()'>
ng-click='backArrow()'
ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
<a class='type-icon icon ui-symbol'>&lt;</a>
</span>

2
platform/commonUI/browse/res/templates/browse/object-header.html
View File

@ -24,7 +24,7 @@
<mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
<span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
<span class='type-name'>{{type.getName()}}</span>
<span class='type-name mobile-important-hide'>{{type.getName()}}</span>
<span class='title-label'>{{model.name}}</span>
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
</span>

25
platform/commonUI/browse/src/BrowseController.js
View File

@ -132,10 +132,31 @@ define(
// is not the root, then user is navigated to
// parent
function navigateToParent() {
var parent = navigationService.getNavigation().getCapability('context').getParent();
var parent = navigationService.getNavigation().getCapability('context').getParent(),
grandparent;
if (parent.getId() !== ROOT_ID) {
grandparent = parent.getCapability('context').getParent().getId();
navigateTo(parent);
if (grandparent && grandparent !== ROOT_ID) {
$scope.atRoot = false;
} else {
$scope.atRoot = true;
}
} else {
$scope.atRoot = true;
}
console.log($scope.atRoot);
}
function checkRoot() {
var parent = navigationService.getNavigation().getCapability('context').getParent(),
grandparent;
if (parent.getId() !== ROOT_ID) {
$scope.atRoot = false;
} else {
$scope.atRoot = true;
}
console.log($scope.atRoot);
}
// Load the root object, put it in the scope.
@ -170,6 +191,8 @@ define(
});
$scope.backArrow = navigateToParent;
$scope.checkRoot = checkRoot;
}

50
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -901,23 +901,59 @@ mct-container {
display: none; } }
@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 184, ../sass/mobile/_layout.scss */
.mobile-unhide {
display: inline-block; } }
/* line 183, ../sass/mobile/_layout.scss */
.mobile-important-hide {
display: none !important; } }
@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 189, ../sass/mobile/_layout.scss */
.mobile-back-hide {
pointer-events: none;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
opacity: 0; } }
@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 198, ../sass/mobile/_layout.scss */
.mobile-back-unhide {
pointer-events: all;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
opacity: 1; } }
@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) {
/* line 191, ../sass/mobile/_layout.scss */
/* line 207, ../sass/mobile/_layout.scss */
.phone-hide {
display: none; } }
@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 197, ../sass/mobile/_layout.scss */
/* line 213, ../sass/mobile/_layout.scss */
.tree-holder {
overflow-x: hidden !important; } }
@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 202, ../sass/mobile/_layout.scss */
.disable-select {
/* line 218, ../sass/mobile/_layout.scss */
.mobile-disable-select {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;

24
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -180,10 +180,26 @@
}
}
// Hides objects on phone and tablet
.mobile-unhide {
.mobile-important-hide {
@include phoneandtablet {
display: inline-block;
display: none !important;
}
}
.mobile-back-hide {
@include phoneandtablet {
pointer-events: none;
@include trans-prop-nice(opacity, .4s);
opacity: 0;
}
}
// Hides objects on phone and tablet
.mobile-back-unhide {
@include phoneandtablet {
pointer-events: all;
@include trans-prop-nice(opacity, .4s);
opacity: 1;
}
}
@ -199,7 +215,7 @@
overflow-x: hidden !important;
}
}
.disable-select {
.mobile-disable-select {
@include phoneandtablet {
@include user-select(none);
}

2
platform/commonUI/general/res/templates/bottombar.html
View File

@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div class='abs bottom-bar ue-bottom-bar disable-select' ng-controller="BottomBarController as bar">
<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
<div id='status' class='status-holder'>
<mct-include ng-repeat="indicator in bar.getIndicators()"
ng-model="indicator.ngModel"

2
platform/commonUI/general/res/templates/menu/context-menu.html
View File

@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div class="menu-element context-menu-wrapper disable-select" ng-controller="ContextMenuController">
<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
<div class="menu context-menu dropdown">
<ul>