From 8dad6a3fd5b2b1e9fcd867cb17c8218f6f6b2b7f Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 13:04:11 -0700 Subject: [PATCH 01/46] Merge browse files from branch 'mobile' into open72 --- .../commonUI/browse/res/templates/browse.html | 31 +-- .../commonUI/browse/src/BrowseController.js | 43 +++- .../browse/test/BrowseControllerSpec.js | 122 +++++++++- .../general/res/sass/mobile/_layout.scss | 222 ++++++++++++++++++ 4 files changed, 400 insertions(+), 18 deletions(-) create mode 100644 platform/commonUI/general/res/sass/mobile/_layout.scss diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 3ac082fc59..2aadc0234e 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -19,30 +19,33 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
+ +
-
+
-
- - -
+
+
-
- -
-
- + -
+ + +
+
+ + +
+
m
+
+ diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js index 3ec38057fc..c61260a400 100644 --- a/platform/commonUI/browse/src/BrowseController.js +++ b/platform/commonUI/browse/src/BrowseController.js @@ -63,7 +63,6 @@ define( // path to new, addressed, path based on // domainObject $location.path(urlService.urlForLocation("browse", domainObject)); - } // Callback for updating the in-scope reference to the object @@ -126,6 +125,36 @@ define( navigateTo(domainObject); } } + + // 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(), + 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; + } + } + + function checkRoot() { + var parent = navigationService.getNavigation().getCapability('context').getParent(); + if (parent.getId() !== ROOT_ID) { + $scope.atRoot = false; + } else { + $scope.atRoot = true; + } + } // Load the root object, put it in the scope. // Also, load its immediate children, and (possibly) @@ -140,7 +169,13 @@ define( $scope.treeModel = { 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); @@ -151,6 +186,10 @@ define( $scope.$on("$destroy", function () { navigationService.removeListener(setNavigation); }); + + $scope.backArrow = navigateToParent; + + $scope.checkRoot = checkRoot; } diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js index ce9296c239..722b7b4132 100644 --- a/platform/commonUI/browse/test/BrowseControllerSpec.js +++ b/platform/commonUI/browse/test/BrowseControllerSpec.js @@ -39,6 +39,9 @@ define( mockUrlService, mockDomainObject, mockNextObject, + mockParentContext, + mockParent, + mockGrandparent, controller; function mockPromise(value) { @@ -52,7 +55,7 @@ define( beforeEach(function () { mockScope = jasmine.createSpyObj( "$scope", - [ "$on", "$watch" ] + [ "$on", "$watch", "treeSlide", "backArrow" ] ); mockRoute = { current: { params: {} } }; mockLocation = jasmine.createSpyObj( @@ -88,6 +91,17 @@ define( "nextObject", [ "getId", "getCapability", "getModel", "useCapability" ] ); + + + mockParentContext = jasmine.createSpyObj('context', ['getParent']); + mockParent = jasmine.createSpyObj( + "domainObject", + [ "getId", "getCapability", "getModel", "useCapability" ] + ); + mockGrandparent = jasmine.createSpyObj( + "domainObject", + [ "getId", "getCapability", "getModel", "useCapability" ] + ); mockObjectService.getObjects.andReturn(mockPromise({ ROOT: mockRootObject @@ -145,6 +159,13 @@ define( ); expect(mockScope.navigatedObject).toEqual(mockDomainObject); }); + + // Mocks the tree slide call that + // lets the html code know if the + // tree menu is open. + it("calls the treeSlide function", function () { + mockScope.treeSlide(); + }); it("releases its navigation listener when its scope is destroyed", function () { expect(mockScope.$on).toHaveBeenCalledWith( @@ -237,7 +258,104 @@ define( mockUrlService.urlForLocation(mockMode, mockNextObject) ); }); - + + it("checks if the user is current navigated to the root", function () { + var mockContext = jasmine.createSpyObj('context', ['getParent']); + + mockRoute.current.params.ids = "ROOT/mine"; + mockParent.getId.andReturn("ROOT"); + + mockDomainObject.getCapability.andCallFake(function (c) { + return c === 'context' && mockContext; + }); + + mockNavigationService.getNavigation.andReturn(mockDomainObject); + mockContext.getParent.andReturn(mockParent); + mockParent.getCapability.andCallFake(function (c) { + return c === 'context' && mockParentContext; + }); + mockParentContext.getParent.andReturn(mockGrandparent); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.checkRoot(); + + mockRoute.current.params.ids = "mine/junk"; + mockParent.getId.andReturn("mine"); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.checkRoot(); + }); + + // Mocks the back arrow call that + // 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']); + + 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); + mockParent.getCapability.andCallFake(function (c) { + return c === 'context' && mockParentContext; + }); + mockParentContext.getParent.andReturn(mockGrandparent); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.backArrow(); + + mockRoute.current.params.ids = "mine/lessjunk/morejunk"; + mockGrandparent.getId.andReturn("mine"); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.backArrow(); + + mockRoute.current.params.ids = "ROOT/mine"; + mockParent.getId.andReturn("ROOT"); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.backArrow(); + }); }); } ); diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss new file mode 100644 index 0000000000..3f4fc062d3 --- /dev/null +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -0,0 +1,222 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +// Wrapper of the entire 2 panes, only enacted on +// phone and tablet. Also for the panes + +.browse-wrapper, +.mobile-pane { + @include phoneandtablet { + position: absolute; + left: 0; top: 0; + right: 0; + white-space: nowrap; + } +} + +// Default views of the panels +// if in desktop browser +.desktop-browse { + @include desktop { + min-width: 150px; + max-width: 800px; + width: $desktopMenuSize; + } +} + +// When the tree is hidden, these are the +// classes used for the left menu and the +// right representation. +.browse-hidetree { + // NOTE: DISABLED SELECTION + // Selection disabled in both panes + // causing cut/copy/paste menu to + // not appear. Should me moved in + // future to properly work + @include phoneandtablet { + @include user-select(none); + } + // Sets the left tree menu when the tree + // is hidden. + .mobile-pane.left-menu { + @include phoneandtablet { + @include trans-prop-nice(opacity, .4s); + opacity: 0; + right: 100% !important; + width: auto !important; + overflow-y: hidden; + overflow-x: hidden; + } + } + + // Sets the right represenation when + // the tree is hidden. + .mobile-pane.right-repr { + @include phoneandtablet { + @include slMenuTransitions; + left: auto !important; + width: 100% !important; + } + } +} + +.mobile-tree-holder { + top: 30px; +} + +// When the tree is shown, these are +// the classes used for the left menu +// and the right menu (for each device & +// orientation combination, separate +// parameters are used) +.browse-showtree { + // NOTE: DISABLED SELECTION + // Selection disabled in both panes + // causing cut/copy/paste menu to + // not appear. Should me moved in + // future to properly work + @include phoneandtablet { + @include user-select(none); + } + // Sets the left tree menu when the tree + // is shown. + .mobile-pane.left-menu { + @include phoneandtablet { + @include trans-prop-nice(opacity, .4s); + opacity: 1; + display: block !important; + width: auto !important; + } + // On both phones and tablets, the amount of + // space allowed for the right pane is specified + @include phonePortrait { + right: $phoneRepSizePortrait !important; + } + @include phoneLandscape { + right: $phoneRepSizeLandscape !important; + } + @include tabletPortrait { + right: $tabletRepSizePortrait !important; + } + @include tabletLandscape { + right: $tabletRepSizeLandscape !important; + } + } + // Sets the right represenation when + // the tree is shown. + .mobile-pane.right-repr { + @include phoneandtablet { + @include slMenuTransitions; + left: auto !important; + } + // On both phones and tablets, the width of + // the right pane is specified + @include phonePortrait { + width: $phoneRepSizePortrait !important; + } + @include phoneLandscape { + width: $phoneRepSizeLandscape !important; + } + @include tabletPortrait { + width: $tabletRepSizePortrait !important; + } + @include tabletLandscape { + width: $tabletRepSizeLandscape !important; + } + } +} + +// Button position is set as absolute with transitions +.button-pos { + @include phoneandtablet { + position: absolute; + } +} + +// Object header must be moved +// over to make space for the +// hamburger icon +.object-header { + @include phoneandtablet { + position: relative; + left: 44px; + .label { + .context-available { + opacity: 1 !important; + } + } + } +} + +.desktop-hide { + @include desktop { + display: none; + } +} + +// Hides objects on phone and tablet +.mobile-hide { + @include phoneandtablet { + display: none; + } +} + +.mobile-important-hide { + @include phoneandtablet { + 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; + } +} + +// Hides objects only on the phone +.phone-hide { + @include phone { + display: none; + } +} + +.tree-holder { + @include phoneandtablet { + overflow-x: hidden !important; + } +} +.mobile-disable-select { + @include phoneandtablet { + @include user-select(none); + } +} From ffd80ed42b4cee620d0bbf1bf6c57403ad169ff3 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 13:12:37 -0700 Subject: [PATCH 02/46] [Treeview] Style Changed indentation in the html --- .../commonUI/browse/res/templates/browse.html | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 2aadc0234e..1a4d096bdf 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -20,10 +20,15 @@ at runtime from the About dialog for additional information. --> -
- -
- +
+ + +
+
- + +
-
- +
+
-
m
+
+ m +
- + +
From 9c912b62d35a0d9dfd1b1ffcd340c52c026c7745 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 15:08:27 -0700 Subject: [PATCH 03/46] [Treeview] Modified left splitter Added a 'button' (which does not work yet). It sticks out of the splitter like a tab. --- .../browse/res/templates/browse-object.html | 9 ++ .../commonUI/browse/res/templates/browse.html | 47 +++++++---- .../commonUI/browse/src/BrowseController.js | 2 + .../general/res/css/theme-espresso.css | 84 +++++++++++++++++-- platform/commonUI/general/res/sass/_main.scss | 2 + .../general/res/sass/tree/_layout.scss | 48 +++++++++++ .../general/res/sass/tree/_splitter.scss | 28 +++++++ 7 files changed, 194 insertions(+), 26 deletions(-) create mode 100644 platform/commonUI/general/res/sass/tree/_layout.scss create mode 100644 platform/commonUI/general/res/sass/tree/_splitter.scss diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index 6730d5a186..e4bb9e3150 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -20,7 +20,14 @@ at runtime from the About dialog for additional information. --> +
+ +
+ < +
+
@@ -37,6 +44,7 @@ ng-model="representation">
+
@@ -44,4 +52,5 @@ mct-object="representation.selected.key && domainObject">
+ diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 1a4d096bdf..3db3e3a71f 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -23,39 +23,52 @@
+ -
+ +
+ +
+
- - + + +
-
-
- - -
-
- m -
-
+ +
+
+ + +
+ +
+ +
+
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js index c61260a400..a9d86e28d9 100644 --- a/platform/commonUI/browse/src/BrowseController.js +++ b/platform/commonUI/browse/src/BrowseController.js @@ -191,6 +191,8 @@ define( $scope.checkRoot = checkRoot; + // TODO: shale sarah bleh + $scope.ngModel.leftPaneStatus = true; } return BrowseController; diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 5c6b8af3bd..f4f2e22a77 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -92,7 +92,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -113,38 +113,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -685,6 +685,47 @@ mct-container { .vscroll { overflow-y: auto; } +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/* line 26, ../sass/tree/_layout.scss */ +.object-browse-bar { + position: relative; } + /* line 29, ../sass/tree/_layout.scss */ + .object-browse-bar .left-pane-tabs { + position: relative; + cursor: pointer; + left: -12px; + width: 14px; + height: 20px; + line-height: 20px; + font-size: 12px; + top: 1px; + border-radius: 2px; + background-color: lightgrey; + border: 1px solid grey; } + /* line 45, ../sass/tree/_layout.scss */ + .object-browse-bar .items-select { + margin-left: 10px; } + /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -4689,6 +4730,31 @@ input[type="text"] { .edit-area .splitter { top: 0; } +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/* line 26, ../sass/tree/_splitter.scss */ +.browse-area .splitter { + top: 0; } + /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 5866aee700..7688be469e 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -31,6 +31,7 @@ @import "global"; @import "fonts"; @import "user-environ/layout"; +@import "tree/layout"; @import "fixed-position"; @import "about"; @import "text"; @@ -64,6 +65,7 @@ @import "user-environ/tool-bar"; @import "helpers/bubbles"; @import "helpers/splitter"; +@import "tree/splitter"; @import "helpers/wait-spinner"; @import "properties"; @import "autoflow"; diff --git a/platform/commonUI/general/res/sass/tree/_layout.scss b/platform/commonUI/general/res/sass/tree/_layout.scss new file mode 100644 index 0000000000..1e7da8c061 --- /dev/null +++ b/platform/commonUI/general/res/sass/tree/_layout.scss @@ -0,0 +1,48 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +// Added by shale on 08/19/2015. Styling for the collapsible tree view. + +// Move buttons close to the splitter bar +.object-browse-bar { + position: relative; + + .left-pane-tabs { + position: relative; + cursor: pointer; + + left: -12px; + width: 14px; + height: 20px; + line-height: 20px; + font-size: 12px; + top: 1px; + + border-radius: 2px; + background-color: lightgrey; + border: 1px solid grey; + } + + .items-select { + margin-left: 10px; + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/tree/_splitter.scss b/platform/commonUI/general/res/sass/tree/_splitter.scss new file mode 100644 index 0000000000..67b6802df4 --- /dev/null +++ b/platform/commonUI/general/res/sass/tree/_splitter.scss @@ -0,0 +1,28 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +// Added by shale on 08/19/2015. Styling for the collapsible tree view. + +// Make the splitter bar vertically span to the top +.browse-area .splitter { + top: 0; +} From 2b00b71da93e31650903595eca3bdd26c22a0062 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 15:45:17 -0700 Subject: [PATCH 04/46] [Treeview] Error fixing Trying to get mctSplitter error to be fixed. Reverting to an extent. --- .../browse/res/templates/browse-object.html | 3 +- .../commonUI/browse/res/templates/browse.html | 6 +-- .../commonUI/browse/src/BrowseController.js | 45 +------------------ 3 files changed, 5 insertions(+), 49 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index e4bb9e3150..0291555b5e 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -23,8 +23,7 @@
-
+
<
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 3db3e3a71f..ab3331565b 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -34,8 +34,7 @@ anchor='left'> -
+
+ key="'browse-object'">
-
- - - - -
- -
- -
+
+ +
+ +
+ + +
- - -
- - - - -
-
- + +
+
+
-
-
@@ -70,4 +50,3 @@
- diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js index 3ec38057fc..b10079a4e8 100644 --- a/platform/commonUI/browse/src/BrowseController.js +++ b/platform/commonUI/browse/src/BrowseController.js @@ -140,7 +140,14 @@ define( $scope.treeModel = { selectedObject: navigationService.getNavigation() }; - + + /* + // Provide a model for the left pane + $scope.paneModel = { + selectedObject: navigationService.getNavigation() + }; + */ + // Listen for changes in navigation state. navigationService.addListener(setNavigation); diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js index 722b7b4132..ce9296c239 100644 --- a/platform/commonUI/browse/test/BrowseControllerSpec.js +++ b/platform/commonUI/browse/test/BrowseControllerSpec.js @@ -39,9 +39,6 @@ define( mockUrlService, mockDomainObject, mockNextObject, - mockParentContext, - mockParent, - mockGrandparent, controller; function mockPromise(value) { @@ -55,7 +52,7 @@ define( beforeEach(function () { mockScope = jasmine.createSpyObj( "$scope", - [ "$on", "$watch", "treeSlide", "backArrow" ] + [ "$on", "$watch" ] ); mockRoute = { current: { params: {} } }; mockLocation = jasmine.createSpyObj( @@ -91,17 +88,6 @@ define( "nextObject", [ "getId", "getCapability", "getModel", "useCapability" ] ); - - - mockParentContext = jasmine.createSpyObj('context', ['getParent']); - mockParent = jasmine.createSpyObj( - "domainObject", - [ "getId", "getCapability", "getModel", "useCapability" ] - ); - mockGrandparent = jasmine.createSpyObj( - "domainObject", - [ "getId", "getCapability", "getModel", "useCapability" ] - ); mockObjectService.getObjects.andReturn(mockPromise({ ROOT: mockRootObject @@ -159,13 +145,6 @@ define( ); expect(mockScope.navigatedObject).toEqual(mockDomainObject); }); - - // Mocks the tree slide call that - // lets the html code know if the - // tree menu is open. - it("calls the treeSlide function", function () { - mockScope.treeSlide(); - }); it("releases its navigation listener when its scope is destroyed", function () { expect(mockScope.$on).toHaveBeenCalledWith( @@ -258,104 +237,7 @@ define( mockUrlService.urlForLocation(mockMode, mockNextObject) ); }); - - it("checks if the user is current navigated to the root", function () { - var mockContext = jasmine.createSpyObj('context', ['getParent']); - - mockRoute.current.params.ids = "ROOT/mine"; - mockParent.getId.andReturn("ROOT"); - - mockDomainObject.getCapability.andCallFake(function (c) { - return c === 'context' && mockContext; - }); - - mockNavigationService.getNavigation.andReturn(mockDomainObject); - mockContext.getParent.andReturn(mockParent); - mockParent.getCapability.andCallFake(function (c) { - return c === 'context' && mockParentContext; - }); - mockParentContext.getParent.andReturn(mockGrandparent); - - controller = new BrowseController( - mockScope, - mockRoute, - mockLocation, - mockObjectService, - mockNavigationService - ); - - mockScope.checkRoot(); - - mockRoute.current.params.ids = "mine/junk"; - mockParent.getId.andReturn("mine"); - - controller = new BrowseController( - mockScope, - mockRoute, - mockLocation, - mockObjectService, - mockNavigationService - ); - - mockScope.checkRoot(); - }); - - // Mocks the back arrow call that - // 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']); - - 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); - mockParent.getCapability.andCallFake(function (c) { - return c === 'context' && mockParentContext; - }); - mockParentContext.getParent.andReturn(mockGrandparent); - - controller = new BrowseController( - mockScope, - mockRoute, - mockLocation, - mockObjectService, - mockNavigationService - ); - - mockScope.backArrow(); - - mockRoute.current.params.ids = "mine/lessjunk/morejunk"; - mockGrandparent.getId.andReturn("mine"); - - controller = new BrowseController( - mockScope, - mockRoute, - mockLocation, - mockObjectService, - mockNavigationService - ); - - mockScope.backArrow(); - - mockRoute.current.params.ids = "ROOT/mine"; - mockParent.getId.andReturn("ROOT"); - - controller = new BrowseController( - mockScope, - mockRoute, - mockLocation, - mockObjectService, - mockNavigationService - ); - - mockScope.backArrow(); - }); + }); } ); diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss deleted file mode 100644 index 3f4fc062d3..0000000000 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ /dev/null @@ -1,222 +0,0 @@ -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web is licensed under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * Open MCT Web includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ - -// Wrapper of the entire 2 panes, only enacted on -// phone and tablet. Also for the panes - -.browse-wrapper, -.mobile-pane { - @include phoneandtablet { - position: absolute; - left: 0; top: 0; - right: 0; - white-space: nowrap; - } -} - -// Default views of the panels -// if in desktop browser -.desktop-browse { - @include desktop { - min-width: 150px; - max-width: 800px; - width: $desktopMenuSize; - } -} - -// When the tree is hidden, these are the -// classes used for the left menu and the -// right representation. -.browse-hidetree { - // NOTE: DISABLED SELECTION - // Selection disabled in both panes - // causing cut/copy/paste menu to - // not appear. Should me moved in - // future to properly work - @include phoneandtablet { - @include user-select(none); - } - // Sets the left tree menu when the tree - // is hidden. - .mobile-pane.left-menu { - @include phoneandtablet { - @include trans-prop-nice(opacity, .4s); - opacity: 0; - right: 100% !important; - width: auto !important; - overflow-y: hidden; - overflow-x: hidden; - } - } - - // Sets the right represenation when - // the tree is hidden. - .mobile-pane.right-repr { - @include phoneandtablet { - @include slMenuTransitions; - left: auto !important; - width: 100% !important; - } - } -} - -.mobile-tree-holder { - top: 30px; -} - -// When the tree is shown, these are -// the classes used for the left menu -// and the right menu (for each device & -// orientation combination, separate -// parameters are used) -.browse-showtree { - // NOTE: DISABLED SELECTION - // Selection disabled in both panes - // causing cut/copy/paste menu to - // not appear. Should me moved in - // future to properly work - @include phoneandtablet { - @include user-select(none); - } - // Sets the left tree menu when the tree - // is shown. - .mobile-pane.left-menu { - @include phoneandtablet { - @include trans-prop-nice(opacity, .4s); - opacity: 1; - display: block !important; - width: auto !important; - } - // On both phones and tablets, the amount of - // space allowed for the right pane is specified - @include phonePortrait { - right: $phoneRepSizePortrait !important; - } - @include phoneLandscape { - right: $phoneRepSizeLandscape !important; - } - @include tabletPortrait { - right: $tabletRepSizePortrait !important; - } - @include tabletLandscape { - right: $tabletRepSizeLandscape !important; - } - } - // Sets the right represenation when - // the tree is shown. - .mobile-pane.right-repr { - @include phoneandtablet { - @include slMenuTransitions; - left: auto !important; - } - // On both phones and tablets, the width of - // the right pane is specified - @include phonePortrait { - width: $phoneRepSizePortrait !important; - } - @include phoneLandscape { - width: $phoneRepSizeLandscape !important; - } - @include tabletPortrait { - width: $tabletRepSizePortrait !important; - } - @include tabletLandscape { - width: $tabletRepSizeLandscape !important; - } - } -} - -// Button position is set as absolute with transitions -.button-pos { - @include phoneandtablet { - position: absolute; - } -} - -// Object header must be moved -// over to make space for the -// hamburger icon -.object-header { - @include phoneandtablet { - position: relative; - left: 44px; - .label { - .context-available { - opacity: 1 !important; - } - } - } -} - -.desktop-hide { - @include desktop { - display: none; - } -} - -// Hides objects on phone and tablet -.mobile-hide { - @include phoneandtablet { - display: none; - } -} - -.mobile-important-hide { - @include phoneandtablet { - 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; - } -} - -// Hides objects only on the phone -.phone-hide { - @include phone { - display: none; - } -} - -.tree-holder { - @include phoneandtablet { - overflow-x: hidden !important; - } -} -.mobile-disable-select { - @include phoneandtablet { - @include user-select(none); - } -} From 8108a3b81c6ea5de763db546ef1aa2a829b6879b Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 16:02:49 -0700 Subject: [PATCH 06/46] [Treeview] Html style --- .../commonUI/browse/res/templates/browse.html | 33 +++++++++++++------ 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 43c74d0241..7eb3e8b3a3 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -20,15 +20,23 @@ at runtime from the About dialog for additional information. --> -
- -
- -
- +
+ + + + +
+ + +
+ + +
+ +
-
- +
+
+
From 4a730f875f149a965801c0ee1d25e6f1bec16b7e Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 16:29:51 -0700 Subject: [PATCH 07/46] [Treeview] Clicking toggles model property Clicking on the pane tab icon toggles ngModel.pane --- platform/commonUI/browse/res/templates/browse-object.html | 3 ++- platform/commonUI/browse/res/templates/browse.html | 5 +++-- platform/commonUI/browse/src/BrowseController.js | 2 -- platform/commonUI/browse/src/BrowseObjectController.js | 6 ++++++ 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index 0291555b5e..cac386f410 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -23,7 +23,8 @@
-
+
<
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 7eb3e8b3a3..15fca34e3e 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -50,8 +50,9 @@
- +
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js index b10079a4e8..b24eb1dba1 100644 --- a/platform/commonUI/browse/src/BrowseController.js +++ b/platform/commonUI/browse/src/BrowseController.js @@ -141,12 +141,10 @@ define( selectedObject: navigationService.getNavigation() }; - /* // Provide a model for the left pane $scope.paneModel = { selectedObject: navigationService.getNavigation() }; - */ // Listen for changes in navigation state. navigationService.addListener(setNavigation); diff --git a/platform/commonUI/browse/src/BrowseObjectController.js b/platform/commonUI/browse/src/BrowseObjectController.js index 1826120458..8b65e19db1 100644 --- a/platform/commonUI/browse/src/BrowseObjectController.js +++ b/platform/commonUI/browse/src/BrowseObjectController.js @@ -64,8 +64,14 @@ define( } } + $scope.ngModel.pane = true; + $scope.$watch('domainObject', setViewForDomainObject); $scope.$watch('representation.selected.key', updateQueryParam); + + $scope.log = function (c) { + console.log(c); + }; } return BrowseObjectController; From e44e50823e88f17de6013c805903b91cad1d8752 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 16:44:42 -0700 Subject: [PATCH 08/46] [Treeview] Treeview collapse Clicking on the pane tab now will make the treeview invisible, and set the width to 0. BUT, this does not immediately move the splitter bar, though it does go to the correct width if clicked. Needs more work. --- platform/commonUI/browse/res/templates/browse.html | 3 ++- .../commonUI/general/res/css/theme-espresso.css | 13 ++++++++++--- .../commonUI/general/res/sass/tree/_layout.scss | 13 +++++++++++++ 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 15fca34e3e..f13f331edb 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -31,7 +31,8 @@ -
+
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index f4f2e22a77..e2e98dde27 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -706,10 +706,17 @@ mct-container { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 26, ../sass/tree/_layout.scss */ +/* line 29, ../sass/tree/_layout.scss */ +.pane.right.inactive, +.pane.left.inactive { + visibility: hidden; + width: 0 !important; + min-width: 0 !important; } + +/* line 39, ../sass/tree/_layout.scss */ .object-browse-bar { position: relative; } - /* line 29, ../sass/tree/_layout.scss */ + /* line 42, ../sass/tree/_layout.scss */ .object-browse-bar .left-pane-tabs { position: relative; cursor: pointer; @@ -722,7 +729,7 @@ mct-container { border-radius: 2px; background-color: lightgrey; border: 1px solid grey; } - /* line 45, ../sass/tree/_layout.scss */ + /* line 58, ../sass/tree/_layout.scss */ .object-browse-bar .items-select { margin-left: 10px; } diff --git a/platform/commonUI/general/res/sass/tree/_layout.scss b/platform/commonUI/general/res/sass/tree/_layout.scss index 1e7da8c061..10019566d4 100644 --- a/platform/commonUI/general/res/sass/tree/_layout.scss +++ b/platform/commonUI/general/res/sass/tree/_layout.scss @@ -22,6 +22,19 @@ // Added by shale on 08/19/2015. Styling for the collapsible tree view. +.pane.right, +.pane.left { + //color: pink; + + &.inactive { + // Don't want visibility hidden later, because create button + visibility: hidden; + //color: aqua; + width: 0 !important; + min-width: 0 !important; + } +} + // Move buttons close to the splitter bar .object-browse-bar { position: relative; From 29b1cfa89041f05d3aaec95827c897d2834e6cc9 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 16:47:12 -0700 Subject: [PATCH 09/46] [Treeview] Rename variable for clarity paneModel's pane to leftPane, for clarity once a right pane is added. --- platform/commonUI/browse/res/templates/browse-object.html | 2 +- platform/commonUI/browse/res/templates/browse.html | 2 +- platform/commonUI/browse/src/BrowseObjectController.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index cac386f410..19838026ef 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -24,7 +24,7 @@
+ ng-click="ngModel.leftPane = !ngModel.leftPane; log(ngModel.pane)"> <
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index f13f331edb..24199578c6 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -32,7 +32,7 @@
+ ng-class='{inactive: !paneModel.leftPane}'> diff --git a/platform/commonUI/browse/src/BrowseObjectController.js b/platform/commonUI/browse/src/BrowseObjectController.js index 8b65e19db1..1c811cceda 100644 --- a/platform/commonUI/browse/src/BrowseObjectController.js +++ b/platform/commonUI/browse/src/BrowseObjectController.js @@ -64,7 +64,7 @@ define( } } - $scope.ngModel.pane = true; + $scope.ngModel.leftPane = true; $scope.$watch('domainObject', setViewForDomainObject); $scope.$watch('representation.selected.key', updateQueryParam); From 62f7ca5a0aa9b712c3326f5dbe5da8ccdcb03426 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 19 Aug 2015 16:57:11 -0700 Subject: [PATCH 10/46] [Treeview] Treeview collapse toggle Clicking on the pane tab now toggles the treeview. --- .../commonUI/browse/res/templates/browse.html | 7 +++++-- .../general/res/css/theme-espresso.css | 18 +++++++++++----- .../general/res/sass/tree/_layout.scss | 21 +++++++++++++++---- 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 24199578c6..5187d15d02 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -46,9 +46,12 @@
- + + -
+