[Mobile] Back Arrow

Back Arrow implemented
by getting parent and then
navigating to it.
This commit is contained in:
Shivam Dave 2015-07-28 15:08:14 -07:00
parent 2a4943f584
commit 3c6c420023
7 changed files with 31 additions and 18 deletions

View File

@ -85,6 +85,7 @@
},
{
"key": "back-arrow",
"uses": [ "type", "action" ],
"templateUrl": "templates/back-arrow.html"
}
],

View File

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

View File

@ -21,7 +21,7 @@
-->
<div class='object-header object-header-mobile'>
<span class="label s-label">
<mct-representation key="'back-arrow'" mct-object='domainObject'></mct-representation>
<mct-representation 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>

View File

@ -126,8 +126,16 @@ define(
}
}
function updateRouteBackArrow() {
// console.log("Back Arrow");
// Uses the current navigation to get the
// current ContextCapability, then the
// parent is gotten from that. If the parent
// is not the root, then user is navigated to
// parent
function navigateToParent() {
var parent = navigationService.getNavigation().getCapability('context').getParent();
if (parent.getId() !== ROOT_ID) {
navigateTo(parent);
}
}
// Load the root object, put it in the scope.
@ -144,10 +152,12 @@ define(
selectedObject: navigationService.getNavigation()
};
// SlideMenu boolean used to hide and show
// tree menu
$scope.treeSlide = function () {
$scope.treeClass = !$scope.treeClass;
};
// Listen for changes in navigation state.
navigationService.addListener(setNavigation);
@ -159,7 +169,7 @@ define(
navigationService.removeListener(setNavigation);
});
$scope.backArrow = updateRouteBackArrow;
$scope.backArrow = navigateToParent;
}

View File

@ -900,13 +900,18 @@ mct-container {
.mobile-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) {
@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 190, ../sass/mobile/_layout.scss */
.mobile-unhide {
display: inline-block; } }
@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 197, ../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 196, ../sass/mobile/_layout.scss */
/* line 203, ../sass/mobile/_layout.scss */
.tree-holder {
overflow-x: hidden !important; } }

View File

@ -186,6 +186,13 @@
}
}
// Hides objects on phone and tablet
.mobile-unhide {
@include phoneandtablet {
display: inline-block;
}
}
// Hides objects only on the phone
.phone-hide {
@include phone {

View File

@ -55,14 +55,6 @@ define(
return path;
}
// function idForLevelArrow(domainObject) {
// var context = domainObject &&
// domainObject.getCapability('context'),
// objectPath = context ? context.getPath() : [],
// id = objectPath[objectPath.length - 2];
// return id;
// }
// Uses the Url for the current location
// from the urlForLocation function and
// includes the view and the index path
@ -93,8 +85,6 @@ define(
* to get the path of
*/
urlForLocation: urlForLocation
// idForLevelArrow: idForLevelArrow
};
}