You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by dp...@apache.org on 2018/05/24 12:51:33 UTC
[10/50] [abbrv] ignite git commit: IGNITE-8488 Web Console: Fixed
scrolling issues in bs-select-menu.
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/ignite-5789-1
Commit: 381448ea74dc64bf5ebcf5201ed75def058ffae9
Parents: fe6e70e
Author: Ilya Borisov <kl...@gmail.com>
Authored: Mon May 21 16:24:50 2018 +0700
Committer: Alexey Kuznetsov <ak...@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()'