IGNITE-8488 Web Console: Fixed scrolling issues in bs-select-menu.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/381448ea Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/381448ea Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/381448ea Branch: refs/heads/master Commit: 381448ea74dc64bf5ebcf5201ed75def058ffae9 Parents: fe6e70e Author: Ilya Borisov <klast...@gmail.com> Authored: Mon May 21 16:24:50 2018 +0700 Committer: Alexey Kuznetsov <akuznet...@apache.org> Committed: Mon May 21 16:24:50 2018 +0700 ---------------------------------------------------------------------- .../app/components/bs-select-menu/controller.js | 5 +- .../app/components/bs-select-menu/index.js | 2 + .../app/components/bs-select-menu/index.spec.js | 67 + .../app/components/bs-select-menu/style.scss | 18 +- .../app/components/bs-select-menu/template.pug | 3 +- .../transcludeToBody.directive.js | 50 + .../components/cluster-selector/template.pug | 4 +- modules/web-console/frontend/package-lock.json | 8166 ++++++++++-------- modules/web-console/frontend/package.json | 2 +- 9 files changed, 4937 insertions(+), 3380 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/381448ea/modules/web-console/frontend/app/components/bs-select-menu/controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/bs-select-menu/controller.js b/modules/web-console/frontend/app/components/bs-select-menu/controller.js index f8c0171..70346ed 100644 --- a/modules/web-console/frontend/app/components/bs-select-menu/controller.js +++ b/modules/web-console/frontend/app/components/bs-select-menu/controller.js @@ -18,8 +18,11 @@ export default class { static $inject = ['$scope']; + /** + * @param {ng.IScope} $scope + */ constructor($scope) { - Object.assign(this, {$scope}); + this.$scope = $scope; } areAllSelected() { http://git-wip-us.apache.org/repos/asf/ignite/blob/381448ea/modules/web-console/frontend/app/components/bs-select-menu/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/bs-select-menu/index.js b/modules/web-console/frontend/app/components/bs-select-menu/index.js index e64e1fa..a9bafb2 100644 --- a/modules/web-console/frontend/app/components/bs-select-menu/index.js +++ b/modules/web-console/frontend/app/components/bs-select-menu/index.js @@ -18,7 +18,9 @@ import angular from 'angular'; import directive from './directive'; +import {directive as transcludeToBody} from './transcludeToBody.directive'; export default angular .module('ignite-console.bs-select-menu', []) + .directive('bssmTranscludeToBody', transcludeToBody) .directive('bsSelectMenu', directive); http://git-wip-us.apache.org/repos/asf/ignite/blob/381448ea/modules/web-console/frontend/app/components/bs-select-menu/index.spec.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/bs-select-menu/index.spec.js b/modules/web-console/frontend/app/components/bs-select-menu/index.spec.js new file mode 100644 index 0000000..9b9fa39 --- /dev/null +++ b/modules/web-console/frontend/app/components/bs-select-menu/index.spec.js @@ -0,0 +1,67 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + +import 'mocha'; +import {assert} from 'chai'; +import angular from 'angular'; +import componentModule from './index.js'; + +suite('bs-select-menu', () => { + /** @type {ng.IScope} */ + let $scope; + /** @type {ng.ICompileService} */ + let $compile; + + setup(() => { + angular.module('test', [componentModule.name]); + angular.mock.module('test'); + angular.mock.inject((_$rootScope_, _$compile_) => { + $compile = _$compile_; + $scope = _$rootScope_.$new(); + }); + }); + + test('Create/destroy', () => { + $scope.$matches = []; + $scope.show = false; + const el = angular.element(` + <div ng-if='show'> + <bs-select-menu></bs-select-menu> + </div> + `); + + const overlay = () => document.body.querySelector('.bssm-click-overlay'); + + $compile(el)($scope); + $scope.$digest(); + assert.notOk(overlay(), 'No overlay on init'); + + $scope.show = true; + $scope.$isShown = true; + $scope.$digest(); + assert.ok(overlay(), 'Adds overlay to body on show'); + + $scope.show = false; + $scope.$digest(); + assert.notOk(overlay(), 'Removes overlay when element is removed from DOM'); + + $scope.show = true; + $scope.$isShown = false; + $scope.$digest(); + assert.notOk(overlay(), 'Removes overlay menu is closed'); + }); +}); http://git-wip-us.apache.org/repos/asf/ignite/blob/381448ea/modules/web-console/frontend/app/components/bs-select-menu/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/bs-select-menu/style.scss b/modules/web-console/frontend/app/components/bs-select-menu/style.scss index 4c071f6..02f9b5c 100644 --- a/modules/web-console/frontend/app/components/bs-select-menu/style.scss +++ b/modules/web-console/frontend/app/components/bs-select-menu/style.scss @@ -75,15 +75,6 @@ } } - .bssm-click-overlay { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - } - [class*='bssm-multiple'] { .bssm-active-indicator { display: initial; @@ -100,3 +91,12 @@ } } } + +.bssm-click-overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1999; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/381448ea/modules/web-console/frontend/app/components/bs-select-menu/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/bs-select-menu/template.pug b/modules/web-console/frontend/app/components/bs-select-menu/template.pug index c8c6eaa..d878063 100644 --- a/modules/web-console/frontend/app/components/bs-select-menu/template.pug +++ b/modules/web-console/frontend/app/components/bs-select-menu/template.pug @@ -43,4 +43,5 @@ ul.bs-select-menu( ng-src='{{ $isActive($index) ? "/images/checkbox-active.svg" : "/images/checkbox.svg" }}' ) span.bssm-item-text(ng-bind-html='match.label') - .bssm-click-overlay(ng-click='$hide()') + bssm-transclude-to-body(ng-if='$isShown') + .bssm-click-overlay(ng-click='$hide()') http://git-wip-us.apache.org/repos/asf/ignite/blob/381448ea/modules/web-console/frontend/app/components/bs-select-menu/transcludeToBody.directive.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/bs-select-menu/transcludeToBody.directive.js b/modules/web-console/frontend/app/components/bs-select-menu/transcludeToBody.directive.js new file mode 100644 index 0000000..b415719 --- /dev/null +++ b/modules/web-console/frontend/app/components/bs-select-menu/transcludeToBody.directive.js @@ -0,0 +1,50 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + +class Controller { + static $inject = ['$transclude', '$document']; + + /** + * @param {ng.ITranscludeFunction} $transclude + * @param {JQLite} $document + */ + constructor($transclude, $document) { + this.$transclude = $transclude; + this.$document = $document; + } + + $postLink() { + this.$transclude((clone) => { + this.clone = clone; + this.$document.find('body').append(clone); + }); + } + + $onDestroy() { + this.clone.remove(); + this.clone = this.$document = null; + } +} + +export function directive() { + return { + restrict: 'E', + transclude: true, + controller: Controller, + scope: {} + }; +} http://git-wip-us.apache.org/repos/asf/ignite/blob/381448ea/modules/web-console/frontend/app/components/cluster-selector/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/cluster-selector/template.pug b/modules/web-console/frontend/app/components/cluster-selector/template.pug index c97a698..15a4228 100644 --- a/modules/web-console/frontend/app/components/cluster-selector/template.pug +++ b/modules/web-console/frontend/app/components/cluster-selector/template.pug @@ -38,8 +38,8 @@ div.btn-ignite.btn-ignite--primary( bs-select='' bs-options='item as item.name for item in $ctrl.clusters' - data-trigger='hover focus' - data-container='self' + data-trigger='click' + data-container='body' data-ng-change='$ctrl.change()'