IGNITE-4944 Added hover for table.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/d4a70a8f Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/d4a70a8f Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/d4a70a8f Branch: refs/heads/ignite-5578 Commit: d4a70a8f27b73acbe2d1a9f622c71cf9e6aa283a Parents: e3701f0 Author: Andrey Novikov <[email protected]> Authored: Mon Jul 31 15:13:03 2017 +0700 Committer: Andrey Novikov <[email protected]> Committed: Mon Jul 31 15:13:03 2017 +0700 ---------------------------------------------------------------------- modules/web-console/frontend/app/app.js | 2 + .../list-of-registered-users.tpl.pug | 2 +- .../app/components/ui-grid-hovering/cell.js | 48 ++++++++++++++++++++ .../app/components/ui-grid-hovering/hovering.js | 31 +++++++++++++ .../app/components/ui-grid-hovering/index.js | 30 ++++++++++++ .../app/components/ui-grid-hovering/style.scss | 22 +++++++++ .../app/components/ui-grid-hovering/viewport.js | 42 +++++++++++++++++ 7 files changed, 176 insertions(+), 1 deletion(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/d4a70a8f/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 0925254..8599eb7 100644 --- a/modules/web-console/frontend/app/app.js +++ b/modules/web-console/frontend/app/app.js @@ -127,6 +127,7 @@ import gridColumnSelector from './components/grid-column-selector'; import gridItemSelected from './components/grid-item-selected'; import bsSelectMenu from './components/bs-select-menu'; import protectFromBsSelectRender from './components/protect-from-bs-select-render'; +import uiGridHovering from './components/ui-grid-hovering'; // Inject external modules. import IgniteModules from 'IgniteModules/index'; @@ -195,6 +196,7 @@ angular.module('ignite-console', [ gridColumnSelector.name, gridItemSelected.name, bsSelectMenu.name, + uiGridHovering.name, protectFromBsSelectRender.name, AngularStrapTooltip.name, AngularStrapSelect.name, http://git-wip-us.apache.org/repos/asf/ignite/blob/d4a70a8f/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug index 68530a5..e311246 100644 --- a/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug +++ b/modules/web-console/frontend/app/components/list-of-registered-users/list-of-registered-users.tpl.pug @@ -64,4 +64,4 @@ include /app/helpers/jade/mixins grid-item-selected(grid-api='$ctrl.gridApi') .panel-collapse - .grid.ui-grid--ignite.ui-grid-disabled-group-selection(ui-grid='$ctrl.gridOptions' ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-pinning ui-grid-grouping) + .grid.ui-grid--ignite.ui-grid-disabled-group-selection(ui-grid='$ctrl.gridOptions' ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-pinning ui-grid-grouping ui-grid-hovering) http://git-wip-us.apache.org/repos/asf/ignite/blob/d4a70a8f/modules/web-console/frontend/app/components/ui-grid-hovering/cell.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-hovering/cell.js b/modules/web-console/frontend/app/components/ui-grid-hovering/cell.js new file mode 100644 index 0000000..f64df2c --- /dev/null +++ b/modules/web-console/frontend/app/components/ui-grid-hovering/cell.js @@ -0,0 +1,48 @@ +/* + * 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. + */ + +export default function() { + return { + priority: -200, + restrict: 'A', + require: '?^uiGrid', + link($scope, $element) { + if (!$scope.grid.options.enableHovering) + return; + + // Apply hover when mousing in. + $element.on('mouseover', () => { + // Empty all isHovered because scroll breaks it. + $scope.row.grid.api.core.getVisibleRows().forEach((row) => { + row.isHovered = false; + }); + + // Now set proper hover + $scope.row.isHovered = true; + + $scope.$apply(); + }); + + // Remove hover when mousing out. + $element.on('mouseout', () => { + $scope.row.isHovered = false; + + $scope.$apply(); + }); + } + }; +} http://git-wip-us.apache.org/repos/asf/ignite/blob/d4a70a8f/modules/web-console/frontend/app/components/ui-grid-hovering/hovering.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-hovering/hovering.js b/modules/web-console/frontend/app/components/ui-grid-hovering/hovering.js new file mode 100644 index 0000000..17202a4 --- /dev/null +++ b/modules/web-console/frontend/app/components/ui-grid-hovering/hovering.js @@ -0,0 +1,31 @@ +/* + * 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. + */ + +export default function() { + return { + priority: 0, + require: '^uiGrid', + compile() { + return { + pre($scope, $element, attrs, uiGridCtrl) { + uiGridCtrl.grid.options.enableHovering = true; + }, + post() { } + }; + } + }; +} http://git-wip-us.apache.org/repos/asf/ignite/blob/d4a70a8f/modules/web-console/frontend/app/components/ui-grid-hovering/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-hovering/index.js b/modules/web-console/frontend/app/components/ui-grid-hovering/index.js new file mode 100644 index 0000000..eaa8207 --- /dev/null +++ b/modules/web-console/frontend/app/components/ui-grid-hovering/index.js @@ -0,0 +1,30 @@ +/* + * 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 uiGridCell from './cell'; +import uiGridHovering from './hovering'; +import uiGridViewport from './viewport'; + +import './style.scss'; + +export default angular + .module('ignite-console.ui-grid-hovering', []) + .directive('uiGridCell', uiGridCell) + .directive('uiGridHovering', uiGridHovering) + .directive('uiGridViewport', uiGridViewport); http://git-wip-us.apache.org/repos/asf/ignite/blob/d4a70a8f/modules/web-console/frontend/app/components/ui-grid-hovering/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-hovering/style.scss b/modules/web-console/frontend/app/components/ui-grid-hovering/style.scss new file mode 100644 index 0000000..6c7597a --- /dev/null +++ b/modules/web-console/frontend/app/components/ui-grid-hovering/style.scss @@ -0,0 +1,22 @@ +/* + * 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. + */ + +.ui-grid.ui-grid--ignite { + .ui-grid-row.ui-grid-row-hovered > [ui-grid-row] > .ui-grid-cell { + background: #ededed; + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/d4a70a8f/modules/web-console/frontend/app/components/ui-grid-hovering/viewport.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-hovering/viewport.js b/modules/web-console/frontend/app/components/ui-grid-hovering/viewport.js new file mode 100644 index 0000000..7ef433a --- /dev/null +++ b/modules/web-console/frontend/app/components/ui-grid-hovering/viewport.js @@ -0,0 +1,42 @@ +/* + * 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'; + +export default function() { + return { + priority: -200, + compile($el) { + let newNgClass = ''; + + const rowRepeatDiv = angular.element($el.children().children()[0]); + const existingNgClass = rowRepeatDiv.attr('ng-class'); + + if (existingNgClass) + newNgClass = existingNgClass.slice(0, -1) + ', "ui-grid-row-hovered": row.isHovered }'; + else + newNgClass = '{ "ui-grid-row-hovered": row.isHovered }'; + + rowRepeatDiv.attr('ng-class', newNgClass); + + return { + pre() { }, + post() { } + }; + } + }; +}
