From 3c6c420023c43a87309d17630b7b2d45c31c18b0 Mon Sep 17 00:00:00 2001 From: Shivam Dave Date: Tue, 28 Jul 2015 15:08:14 -0700 Subject: [PATCH 1/3] [Mobile] Back Arrow Back Arrow implemented by getting parent and then navigating to it. --- platform/commonUI/browse/bundle.json | 1 + .../browse/res/templates/back-arrow.html | 2 +- .../res/templates/browse/object-header.html | 2 +- .../commonUI/browse/src/BrowseController.js | 18 ++++++++++++++---- .../general/res/css/theme-espresso.css | 9 +++++++-- .../general/res/sass/mobile/_layout.scss | 7 +++++++ .../general/src/services/UrlService.js | 10 ---------- 7 files changed, 31 insertions(+), 18 deletions(-) diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json index 1e41b57c7a..6852c3e8e6 100644 --- a/platform/commonUI/browse/bundle.json +++ b/platform/commonUI/browse/bundle.json @@ -85,6 +85,7 @@ }, { "key": "back-arrow", + "uses": [ "type", "action" ], "templateUrl": "templates/back-arrow.html" } ], diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html index 5e54b06185..ceb3df0ef2 100644 --- a/platform/commonUI/browse/res/templates/back-arrow.html +++ b/platform/commonUI/browse/res/templates/back-arrow.html @@ -22,6 +22,6 @@ + ng-click='backArrow()'> < diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 8687646271..884f4fa888 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -21,7 +21,7 @@ -->
- + {{type.getGlyph()}} {{parameters.mode}} {{type.getName()}} diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js index b7e8e796ff..cc4f06b243 100644 --- a/platform/commonUI/browse/src/BrowseController.js +++ b/platform/commonUI/browse/src/BrowseController.js @@ -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; } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 4cb2a1336b..f0109afbbf 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -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; } } diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index b7704681e7..c36d513671 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -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 { diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js index 3363dc1d49..edb5f6235b 100644 --- a/platform/commonUI/general/src/services/UrlService.js +++ b/platform/commonUI/general/src/services/UrlService.js @@ -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 }; } From a073ef69ac7d436070bfd90b5c1d94a57ddf40b6 Mon Sep 17 00:00:00 2001 From: Shivam Dave Date: Tue, 28 Jul 2015 15:15:42 -0700 Subject: [PATCH 2/3] [Mobile] Back Arrow Shifted Back Arrow down to align with header. --- platform/commonUI/browse/res/templates/back-arrow.html | 2 +- platform/commonUI/general/res/css/theme-espresso.css | 10 +++++----- platform/commonUI/general/res/sass/mobile/_layout.scss | 6 ------ 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html index ceb3df0ef2..b4003a8a9b 100644 --- a/platform/commonUI/browse/res/templates/back-arrow.html +++ b/platform/commonUI/browse/res/templates/back-arrow.html @@ -23,5 +23,5 @@ - < + < diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index f0109afbbf..394e6ac721 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -891,27 +891,27 @@ mct-container { opacity: 1 !important; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 176, ../sass/mobile/_layout.scss */ + /* line 170, ../sass/mobile/_layout.scss */ .desktop-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 183, ../sass/mobile/_layout.scss */ + /* line 177, ../sass/mobile/_layout.scss */ .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), 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 */ + /* line 184, ../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 */ + /* line 191, ../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 203, ../sass/mobile/_layout.scss */ + /* line 197, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } } diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index c36d513671..806c7547f3 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -167,12 +167,6 @@ } } -.mobile-back-arrow { -// display: none !important; -// font-size: 0.8em; -} - - .desktop-hide { @include desktop { display: none; From 356fa73c919360b3e513ddc044f32bd720a56deb Mon Sep 17 00:00:00 2001 From: Shivam Dave Date: Tue, 28 Jul 2015 15:55:22 -0700 Subject: [PATCH 3/3] [Mobile] Tests Test created for backArrow that spies on all objects used to find parent. --- .../browse/test/BrowseControllerSpec.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js index 339eb7febd..181121574a 100644 --- a/platform/commonUI/browse/test/BrowseControllerSpec.js +++ b/platform/commonUI/browse/test/BrowseControllerSpec.js @@ -249,6 +249,39 @@ define( // lets the html code know the back // arrow navigation needs to be done it("calls the backArrow function", function () { + var mockContext = jasmine.createSpyObj('context', ['getParent']), + mockParent = jasmine.createSpyObj( + "domainObject", + [ "getId", "getCapability", "getModel", "useCapability" ] + ); + mockNavigationService = jasmine.createSpyObj( + "navigationService", + [ + "getNavigation", + "setNavigation", + "addListener", + "removeListener" + ] + ); + + mockRoute.current.params.ids = "mine/junk"; + mockParent.getId.andReturn("mine"); + + mockDomainObject.getCapability.andCallFake(function (c) { + return c === 'context' && mockContext; + }); + + mockNavigationService.getNavigation.andReturn(mockDomainObject); + mockContext.getParent.andReturn(mockParent); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + mockScope.backArrow(); }); });