You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2017/04/24 04:47:53 UTC
zeppelin git commit: [ZEPPELIN-2409] DON'T block body scrolling in
results scrollbar
Repository: zeppelin
Updated Branches:
refs/heads/master a3c78a4f4 -> 6eecdecb5
[ZEPPELIN-2409] DON'T block body scrolling in results scrollbar
### What is this PR for?
DON'T block body scrolling in results scrollbar.
See the GIFs below.
### What type of PR is it?
[Improvement]
### Todos
NONE
### What is the Jira issue?
[ZEPPELIN-2409](https://issues.apache.org/jira/browse/ZEPPELIN-2409)
### How should this be tested?
1. Create multiple paragraphs including scrollbar in result. For example,
```
bank.printSchema
bank.show()
```
```
select * from bank limit 1000
```
2. Scrolling down, up
### Screenshots (if appropriate)
#### Before
#### After
### Questions:
* Does the licenses files need update? - NO
* Is there breaking changes for older versions? - NO
* Does this needs documentation? - NO
Author: 1ambda <1a...@gmail.com>
Closes #2270 from 1ambda/ZEPPELIN-2407/dont-block-body-scroll-in-para-results and squashes the following commits:
a427d1d [1ambda] fix: Apply getPointEvent all types
33a7c36 [1ambda] fix: DON'T block body scrolling in para results scrollbar
Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/6eecdecb
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/6eecdecb
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/6eecdecb
Branch: refs/heads/master
Commit: 6eecdecb5d590fba5c5b0216da4bcd2e8b22d933
Parents: a3c78a4
Author: 1ambda <1a...@gmail.com>
Authored: Sun Apr 23 11:04:18 2017 +0900
Committer: Lee moon soo <mo...@apache.org>
Committed: Sun Apr 23 21:47:50 2017 -0700
----------------------------------------------------------------------
.../paragraph/result/result.controller.js | 9 ++++
.../app/notebook/paragraph/result/result.html | 43 +++++++++++++-------
2 files changed, 37 insertions(+), 15 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/6eecdecb/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
index 71104b5..0ed5753 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -138,6 +138,15 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
// queue for append output
const textResultQueueForAppend = []
+ // prevent body area scrollbar from blocking due to scroll in paragraph results
+ $scope.mouseOver = false
+ $scope.onMouseOver = function() { $scope.mouseOver = true }
+ $scope.onMouseOut = function() { $scope.mouseOver = false }
+ $scope.getPointerEvent = function() {
+ return ($scope.mouseOver) ? {'pointer-events': 'auto' }
+ : {'pointer-events': 'none' }
+ }
+
$scope.init = function (result, config, paragraph, index) {
// register helium plugin vis
let visBundles = heliumService.getVisualizationBundles()
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/6eecdecb/zeppelin-web/src/app/notebook/paragraph/result/result.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.html b/zeppelin-web/src/app/notebook/paragraph/result/result.html
index 61ed2d7..5a523de 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.html
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.html
@@ -15,17 +15,19 @@ limitations under the License.
<div>
<div ng-include src="'app/notebook/paragraph/result/result-chart-selector.html'"></div>
<div
+ ng-mouseout="onMouseOut()"
+ ng-mouseover="onMouseOver()"
id="p{{id}}_resize"
ng-if="!config.helium.activeApp"
style="padding-bottom: 5px;"
resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{type}}"}'
- resizable on-resize="resize(width, height);">
+ resizable on-resize="resize(width, height);">
- <div ng-if="type=='TABLE'">
+ <div ng-if="type=='TABLE'"
+ ng-style="getPointerEvent()">
<!-- graph setting -->
<div class="option lightBold" style="overflow: visible;"
- ng-show="graphMode!='table'
- && config.graph.optionOpen && !asIframe && !viewOnly">
+ ng-show="graphMode!='table' && config.graph.optionOpen && !asIframe && !viewOnly">
<div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
id="trsetting{{id}}_{{viz.id}}"
ng-show="graphMode == viz.id"></div>
@@ -52,7 +54,8 @@ limitations under the License.
</div>
<div ng-if="type == 'TEXT'"
- class="plainTextContainer">
+ class="plainTextContainer"
+ ng-style="getPointerEvent()">
<div class="fa fa-level-down scroll-paragraph-down"
ng-show="showScrollDownIcon()"
ng-click="scrollParagraphDown()"
@@ -66,30 +69,40 @@ limitations under the License.
uib-tooltip="Scroll Top"></div>
</div>
- <div id="p{{id}}_custom" class="resultContained"
- ng-if="!isDefaultDisplay()">
+ <div id="p{{id}}_custom"
+ class="resultContained"
+ ng-if="!isDefaultDisplay()"
+ ng-style="getPointerEvent()">
</div>
- <div id="p{{id}}_elem" class="resultContained"
- ng-if="type == 'ELEMENT'">
+ <div id="p{{id}}_elem"
+ class="resultContained"
+ ng-if="type == 'ELEMENT'"
+ ng-style="getPointerEvent()">
</div>
- <div id="p{{id}}_html" class="resultContained"
- ng-if="type == 'HTML'">
+ <div id="p{{id}}_html"
+ class="resultContained"
+ ng-if="type == 'HTML'"
+ ng-style="getPointerEvent()">
</div>
- <div id="p{{id}}_angular" class="resultContained"
- ng-if="type == 'ANGULAR'">
+ <div id="p{{id}}_angular"
+ class="resultContained"
+ ng-if="type == 'ANGULAR'"
+ ng-style="getPointerEvent()">
</div>
<img id="{{id}}_img"
ng-if="type == 'IMG'"
- ng-src="{{getBase64ImageSrc(result.data)}}" />
+ ng-src="{{getBase64ImageSrc(result.data)}}"
+ ng-style="getPointerEvent()" />
</div>
<div ng-repeat="app in apps">
<div id="p{{app.id}}"
- ng-show="config.helium.activeApp == app.id">
+ ng-show="config.helium.activeApp == app.id"
+ ng-style="getPointerEvent()">
</div>
</div>
</div>