IGNITE-5812 Set width for dropdown as for element.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/39fa8fae Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/39fa8fae Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/39fa8fae Branch: refs/heads/ignite-5757 Commit: 39fa8fae3ec80fd3a4c07f4610ab46817b75dd23 Parents: 0d2992c Author: Dmitriy Shabalin <dshaba...@gridgain.com> Authored: Tue Jul 25 14:30:47 2017 +0700 Committer: Andrey Novikov <anovi...@gridgain.com> Committed: Tue Jul 25 14:30:47 2017 +0700 ---------------------------------------------------------------------- modules/web-console/frontend/app/app.js | 8 +- .../frontend/app/decorator/select.js | 77 -------------- .../frontend/app/decorator/tooltip.js | 73 ------------- .../services/AngularStrapSelect.decorator.js | 77 ++++++++++++++ .../services/AngularStrapTooltip.decorator.js | 103 +++++++++++++++++++ .../views/configuration/domains-import.tpl.pug | 4 +- 6 files changed, 186 insertions(+), 156 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/39fa8fae/modules/web-console/frontend/app/app.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/app.js b/modules/web-console/frontend/app/app.js index dc5c6e9..0667e8f 100644 --- a/modules/web-console/frontend/app/app.js +++ b/modules/web-console/frontend/app/app.js @@ -20,9 +20,6 @@ import '../app/primitives'; import './app.config'; -import './decorator/select'; -import './decorator/tooltip'; - import './modules/form/form.module'; import './modules/agent/agent.module'; import './modules/sql/sql.module'; @@ -97,6 +94,9 @@ import UnsavedChangesGuard from './services/UnsavedChangesGuard.service'; import Clusters from './services/Clusters'; import Caches from './services/Caches'; +import AngularStrapTooltip from './services/AngularStrapTooltip.decorator'; +import AngularStrapSelect from './services/AngularStrapSelect.decorator'; + // Filters. import byName from './filters/byName.filter'; import defaultName from './filters/default-name.filter'; @@ -195,6 +195,8 @@ angular gridColumnSelector.name, bsSelectMenu.name, protectFromBsSelectRender.name, + AngularStrapTooltip.name, + AngularStrapSelect.name, // Ignite modules. IgniteModules.name ]) http://git-wip-us.apache.org/repos/asf/ignite/blob/39fa8fae/modules/web-console/frontend/app/decorator/select.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/decorator/select.js b/modules/web-console/frontend/app/decorator/select.js deleted file mode 100644 index 2d22707..0000000 --- a/modules/web-console/frontend/app/decorator/select.js +++ /dev/null @@ -1,77 +0,0 @@ -/* - * 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 angular from 'angular'; - -/** - * Special decorator that fix problem in AngularStrap selectAll / deselectAll methods. - * If this problem will be fixed in AngularStrap we can remove this delegate. - */ -angular.module('mgcrea.ngStrap.select') - .decorator('$select', ['$delegate', ($delegate) => { - function SelectFactoryDecorated(element, controller, config) { - const delegate = $delegate(element, controller, config); - - // Common vars. - const options = angular.extend({}, $delegate.defaults, config); - - const scope = delegate.$scope; - - const valueByIndex = (index) => { - if (angular.isUndefined(scope.$matches[index])) - return null; - - return scope.$matches[index].value; - }; - - const selectAll = (active) => { - const selected = []; - - scope.$apply(() => { - for (let i = 0; i < scope.$matches.length; i++) { - if (scope.$isActive(i) === active) { - selected[i] = scope.$matches[i].value; - - delegate.activate(i); - - controller.$setViewValue(scope.$activeIndex.map(valueByIndex)); - } - } - }); - - // Emit events. - for (let i = 0; i < selected.length; i++) { - if (selected[i]) - scope.$emit(options.prefixEvent + '.select', selected[i], i, delegate); - } - }; - - scope.$selectAll = () => { - scope.$$postDigest(selectAll.bind(this, false)); - }; - - scope.$selectNone = () => { - scope.$$postDigest(selectAll.bind(this, true)); - }; - - return delegate; - } - - SelectFactoryDecorated.defaults = $delegate.defaults; - - return SelectFactoryDecorated; - }]); http://git-wip-us.apache.org/repos/asf/ignite/blob/39fa8fae/modules/web-console/frontend/app/decorator/tooltip.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/decorator/tooltip.js b/modules/web-console/frontend/app/decorator/tooltip.js deleted file mode 100644 index 71ea694..0000000 --- a/modules/web-console/frontend/app/decorator/tooltip.js +++ /dev/null @@ -1,73 +0,0 @@ -/* - * 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 angular from 'angular'; - -/** - * Special decorator that fix problem in AngularStrap $tooltip in special case. - * Case: when tooltip is shown on table row remove button and user click this button. - * If this problem will be fixed in AngularStrap we can remove this delegate. - */ -angular.module('mgcrea.ngStrap.tooltip') - .decorator('$tooltip', ['$delegate', ($delegate) => { - function TooltipFactoryDecorated(element, config) { - let tipElementEntered = false; - - config.onShow = ($tooltip) => { - // Workaround for tooltip detection. - if ($tooltip.$element && $tooltip.$options.trigger === 'click hover') { - $tooltip.$element.on('mouseenter', () => tipElementEntered = true); - $tooltip.$element.on('mouseleave', () => { - tipElementEntered = false; - - $tooltip.leave(); - }); - } - }; - - const $tooltip = $delegate(element, config); - - const scope = $tooltip.$scope; - const options = $tooltip.$options; - - const _hide = $tooltip.hide; - - $tooltip.hide = (blur) => { - if (!$tooltip.$isShown || tipElementEntered) - return; - - if ($tooltip.$element) { - $tooltip.$element.off('mouseenter'); - $tooltip.$element.off('mouseleave'); - - return _hide(blur); - } - - scope.$emit(options.prefixEvent + '.hide.before', $tooltip); - - if (angular.isDefined(options.onBeforeHide) && angular.isFunction(options.onBeforeHide)) - options.onBeforeHide($tooltip); - - $tooltip.$isShown = scope.$isShown = false; - scope.$$phase || (scope.$root && scope.$root.$$phase) || scope.$digest(); - }; - - return $tooltip; - } - - return TooltipFactoryDecorated; - }]); http://git-wip-us.apache.org/repos/asf/ignite/blob/39fa8fae/modules/web-console/frontend/app/services/AngularStrapSelect.decorator.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/services/AngularStrapSelect.decorator.js b/modules/web-console/frontend/app/services/AngularStrapSelect.decorator.js new file mode 100644 index 0000000..39f7ccd --- /dev/null +++ b/modules/web-console/frontend/app/services/AngularStrapSelect.decorator.js @@ -0,0 +1,77 @@ +/* + * 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 angular from 'angular'; + +/** + * Special decorator that fix problem in AngularStrap selectAll / deselectAll methods. + * If this problem will be fixed in AngularStrap we can remove this delegate. + */ +export default angular.module('mgcrea.ngStrap.select') + .decorator('$select', ['$delegate', ($delegate) => { + function SelectFactoryDecorated(element, controller, config) { + const delegate = $delegate(element, controller, config); + + // Common vars. + const options = angular.extend({}, $delegate.defaults, config); + + const scope = delegate.$scope; + + const valueByIndex = (index) => { + if (angular.isUndefined(scope.$matches[index])) + return null; + + return scope.$matches[index].value; + }; + + const selectAll = (active) => { + const selected = []; + + scope.$apply(() => { + for (let i = 0; i < scope.$matches.length; i++) { + if (scope.$isActive(i) === active) { + selected[i] = scope.$matches[i].value; + + delegate.activate(i); + + controller.$setViewValue(scope.$activeIndex.map(valueByIndex)); + } + } + }); + + // Emit events. + for (let i = 0; i < selected.length; i++) { + if (selected[i]) + scope.$emit(options.prefixEvent + '.select', selected[i], i, delegate); + } + }; + + scope.$selectAll = () => { + scope.$$postDigest(selectAll.bind(this, false)); + }; + + scope.$selectNone = () => { + scope.$$postDigest(selectAll.bind(this, true)); + }; + + return delegate; + } + + SelectFactoryDecorated.defaults = $delegate.defaults; + + return SelectFactoryDecorated; + }]); http://git-wip-us.apache.org/repos/asf/ignite/blob/39fa8fae/modules/web-console/frontend/app/services/AngularStrapTooltip.decorator.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/services/AngularStrapTooltip.decorator.js b/modules/web-console/frontend/app/services/AngularStrapTooltip.decorator.js new file mode 100644 index 0000000..d01a450 --- /dev/null +++ b/modules/web-console/frontend/app/services/AngularStrapTooltip.decorator.js @@ -0,0 +1,103 @@ +/* + * 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 angular from 'angular'; +import flow from 'lodash/flow'; + +/** + * Decorator that fix problem in AngularStrap $tooltip. + */ +export default angular + .module('mgcrea.ngStrap.tooltip') + /** + * Don't hide tooltip when mouse move from element to tooltip. + */ + .decorator('$tooltip', ['$delegate', ($delegate) => { + function TooltipFactoryDecorated(element, config) { + let tipElementEntered = false; + + config.onShow = ($tooltip) => { + // Workaround for tooltip detection. + if ($tooltip.$element && $tooltip.$options.trigger === 'click hover') { + $tooltip.$element.on('mouseenter', () => tipElementEntered = true); + $tooltip.$element.on('mouseleave', () => { + tipElementEntered = false; + + $tooltip.leave(); + }); + } + }; + + const $tooltip = $delegate(element, config); + + const scope = $tooltip.$scope; + const options = $tooltip.$options; + + const _hide = $tooltip.hide; + + $tooltip.hide = (blur) => { + if (!$tooltip.$isShown || tipElementEntered) + return; + + if ($tooltip.$element) { + $tooltip.$element.off('mouseenter'); + $tooltip.$element.off('mouseleave'); + + return _hide(blur); + } + + scope.$emit(options.prefixEvent + '.hide.before', $tooltip); + + if (angular.isDefined(options.onBeforeHide) && angular.isFunction(options.onBeforeHide)) + options.onBeforeHide($tooltip); + + $tooltip.$isShown = scope.$isShown = false; + scope.$$phase || (scope.$root && scope.$root.$$phase) || scope.$digest(); + }; + + return $tooltip; + } + + return TooltipFactoryDecorated; + }]) + /** + * Set width for dropdown as for element. + */ + .decorator('$tooltip', ['$delegate', ($delegate) => { + return function(el, config) { + const $tooltip = $delegate(el, config); + + $tooltip.$referenceElement = el; + $tooltip.destroy = flow($tooltip.destroy, () => $tooltip.$referenceElement = null); + $tooltip.$applyPlacement = flow($tooltip.$applyPlacement, () => { + if (!$tooltip.$element) + return; + + const refWidth = $tooltip.$referenceElement[0].getBoundingClientRect().width; + const elWidth = $tooltip.$element[0].getBoundingClientRect().width; + + if (refWidth > elWidth) { + $tooltip.$element.css({ + width: refWidth, + maxWidth: 'initial' + }); + } + }); + + return $tooltip; + }; + }]); http://git-wip-us.apache.org/repos/asf/ignite/blob/39fa8fae/modules/web-console/frontend/views/configuration/domains-import.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/configuration/domains-import.tpl.pug b/modules/web-console/frontend/views/configuration/domains-import.tpl.pug index 7097197..e9ed6f3 100644 --- a/modules/web-console/frontend/views/configuration/domains-import.tpl.pug +++ b/modules/web-console/frontend/views/configuration/domains-import.tpl.pug @@ -65,13 +65,11 @@ mixin td-ellipses-lbl(w, lbl) +ignite-form-field-dropdown('Driver JAR:', 'ui.selectedJdbcDriverJar', '"jdbcDriverJar"', false, true, false, 'Choose JDBC driver', '', 'jdbcDriverJars', 'Select appropriate JAR with JDBC driver<br> To add another driver you need to place it into "/jdbc-drivers" folder of Ignite Web Agent<br> Refer to Ignite Web Agent README.txt for for more information' - )( - data-ignite-form-field-input-autofocus='true' ) .settings-row.settings-row_small-label +java-class('JDBC driver:', 'selectedPreset.jdbcDriverClass', '"jdbcDriverClass"', true, true, 'Fully qualified class name of JDBC driver that will be used to connect to database') .settings-row.settings-row_small-label - +text('JDBC URL:', 'selectedPreset.jdbcUrl', '"jdbcUrl"', true, 'JDBC URL', 'JDBC URL for connecting to database<br>Refer to your database documentation for details') + +text-enabled-autofocus('JDBC URL:', 'selectedPreset.jdbcUrl', '"jdbcUrl"', true, true, 'JDBC URL', 'JDBC URL for connecting to database<br>Refer to your database documentation for details') .settings-row.settings-row_small-label +text('User:', 'selectedPreset.user', '"jdbcUser"', false, '', 'User name for connecting to database') .settings-row.settings-row_small-label