[Mobile] Hide Back Button

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.

platform/commonUI/browse/res/templates/back-arrow.html

@@ -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>

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -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>

platform/commonUI/browse/src/BrowseController.js

@@ -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.
@@ -171,6 +192,8 @@ define(
             
             $scope.backArrow = navigateToParent;
             
+            $scope.checkRoot = checkRoot;
+
         }
 
         return BrowseController;

platform/commonUI/general/res/css/theme-espresso.css

@@ -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 */
+  /* line 183, ../sass/mobile/_layout.scss */
-  .mobile-unhide {
+  .mobile-important-hide {
-    display: inline-block; } }
+    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 */
+  /* line 218, ../sass/mobile/_layout.scss */
-  .disable-select {
+  .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;

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

@@ -180,10 +180,26 @@
     }
 }
 
-// Hides objects on phone and tablet
+.mobile-important-hide {
-.mobile-unhide {
     @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);
     }

platform/commonUI/general/res/templates/bottombar.html

@@ -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"

platform/commonUI/general/res/templates/menu/context-menu.html

@@ -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>