Repository: zeppelin Updated Branches: refs/heads/master d3d6340bd -> dd6308e4f
[ZEPPELIN-2482] added font size for paragraph ### What is this PR for? 1. Added possibilty to change font size of paragraph text 2. Fixed cloneParagraphAction (immediately after the cloning is incorrectly displayed a new paragraph) 3. Fixed paragraph settings into Firefox ### What type of PR is it? Feature ### What is the Jira issue? https://issues.apache.org/jira/browse/ZEPPELIN-2482 ### How should this be tested? 1. Open note 2. Add some text to paragraph 3. Open settings of paragraph and chenge "Font size" ### Screenshots (if appropriate) 1. Font size and clone BEFORE  AFTER  2. Fix for Firefox BEFORE  AFTER  ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: Tinkoff DWH <[email protected]> Closes #2309 from tinkoff-dwh/ZEPPELIN-2482 and squashes the following commits: 119a67a7 [Tinkoff DWH] Merge remote-tracking branch 'upstream/master' into ZEPPELIN-2482 abf9e452 [Tinkoff DWH] [ZEPPELIN-2482] fix selenium tests 0197fd16 [Tinkoff DWH] [ZEPPELIN-2482] fix selenium tests 5b92b285 [Tinkoff DWH] [ZEPPELIN-2482] broadcast changes of fontSize a8aa65de [Tinkoff DWH] Merge remote-tracking branch 'origin/ZEPPELIN-2482' into ZEPPELIN-2482 fea74709 [Tinkoff DWH] Merge remote-tracking branch 'upstream/master' into ZEPPELIN-2482 42135ad0 [Tinkoff DWH] Merge remote-tracking branch 'upstream/master' into ZEPPELIN-2482 62ef7286 [Tinkoff DWH] [ZEPPELIN-2482] font size test 794bbf1b [Tinkoff DWH] [ZEPPELIN-2482] close settings 5e2be167 [Tinkoff DWH] [ZEPPELIN-2482] font size for paragraph Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/dd6308e4 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/dd6308e4 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/dd6308e4 Branch: refs/heads/master Commit: dd6308e4fd5f30ed488585cbcd32bdcd4c493c15 Parents: d3d6340 Author: Tinkoff DWH <[email protected]> Authored: Fri Jun 16 10:53:33 2017 +0500 Committer: Jongyoul Lee <[email protected]> Committed: Sun Jun 25 00:31:21 2017 +0900 ---------------------------------------------------------------------- .../apache/zeppelin/socket/NotebookServer.java | 7 ++ .../integration/ParagraphActionsIT.java | 37 ++++++-- .../notebook/paragraph/paragraph-control.html | 93 +++++++++++++------- .../notebook/paragraph/paragraph.controller.js | 35 +++++++- 4 files changed, 135 insertions(+), 37 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/dd6308e4/zeppelin-server/src/main/java/org/apache/zeppelin/socket/NotebookServer.java ---------------------------------------------------------------------- diff --git a/zeppelin-server/src/main/java/org/apache/zeppelin/socket/NotebookServer.java b/zeppelin-server/src/main/java/org/apache/zeppelin/socket/NotebookServer.java index 93b2566..667daa9 100644 --- a/zeppelin-server/src/main/java/org/apache/zeppelin/socket/NotebookServer.java +++ b/zeppelin-server/src/main/java/org/apache/zeppelin/socket/NotebookServer.java @@ -1587,8 +1587,15 @@ public class NotebookServer extends WebSocketServlet userAndRoles, fromMessage.principal, "write")) { return null; } + Map<String, Object> config; + if (fromMessage.get("config") != null) { + config = (Map<String, Object>) fromMessage.get("config"); + } else { + config = new HashMap<>(); + } Paragraph newPara = note.insertNewParagraph(index, subject); + newPara.setConfig(config); note.persist(subject); broadcastNewParagraph(note, newPara); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/dd6308e4/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ParagraphActionsIT.java ---------------------------------------------------------------------- diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ParagraphActionsIT.java b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ParagraphActionsIT.java index fa5bed9..0911bf7 100644 --- a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ParagraphActionsIT.java +++ b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ParagraphActionsIT.java @@ -359,7 +359,7 @@ public class ParagraphActionsIT extends AbstractZeppelinIT { clickAndWait(By.xpath(getParagraphXPath(1) + "//span[@class='icon-settings']")); String visibleText = newWidth.toString(); new Select(driver.findElement(By.xpath(getParagraphXPath(1) - + "//ul/li/a/form/select[(@ng-model='paragraph.config.colWidth')]"))).selectByVisibleText(visibleText); + + "//ul/li/a/select[(@ng-model='paragraph.config.colWidth')]"))).selectByVisibleText(visibleText); collector.checkThat("New Width is : " + newWidth, driver.findElement(By.xpath("//div[contains(@class,'col-md-" + newWidth + "')]")).isDisplayed(), CoreMatchers.equalTo(true)); @@ -368,7 +368,34 @@ public class ParagraphActionsIT extends AbstractZeppelinIT { } catch (Exception e) { handleException("Exception in ParagraphActionsIT while testWidth ", e); } + } + @Test + public void testFontSize() throws Exception { + if (!endToEndTestEnabled()) { + return; + } + try { + createNewNote(); + waitForParagraph(1, "READY"); + Float height = Float.valueOf(driver.findElement(By.xpath("//div[contains(@class,'ace_content')]")) + .getCssValue("height").replace("px", "")); + for (Integer newFontSize = 10; newFontSize <= 20; newFontSize++) { + clickAndWait(By.xpath(getParagraphXPath(1) + "//span[@class='icon-settings']")); + String visibleText = newFontSize.toString(); + new Select(driver.findElement(By.xpath(getParagraphXPath(1) + + "//ul/li/a/select[(@ng-model='paragraph.config.fontSize')]"))).selectByVisibleText(visibleText); + Float newHeight = Float.valueOf(driver.findElement(By.xpath("//div[contains(@class,'ace_content')]")) + .getCssValue("height").replace("px", "")); + collector.checkThat("New Font size is : " + newFontSize, + newHeight > height, + CoreMatchers.equalTo(true)); + height = newHeight; + } + deleteTestNotebook(driver); + } catch (Exception e) { + handleException("Exception in ParagraphActionsIT while testFontSize ", e); + } } @Test @@ -396,7 +423,7 @@ public class ParagraphActionsIT extends AbstractZeppelinIT { clickAndWait(By.xpath(xpathToSettingIcon)); collector.checkThat("Before Show Title : The title option in option panel of paragraph is labeled as", driver.findElement(By.xpath(xpathToShowTitle)).getText(), - CoreMatchers.allOf(CoreMatchers.startsWith("Show title"), CoreMatchers.containsString("Ctrl+"), + CoreMatchers.allOf(CoreMatchers.endsWith("Show title"), CoreMatchers.containsString("Ctrl+"), CoreMatchers.anyOf(CoreMatchers.containsString("Option"), CoreMatchers.containsString("Alt")), CoreMatchers.containsString("+T"))); @@ -408,7 +435,7 @@ public class ParagraphActionsIT extends AbstractZeppelinIT { clickAndWait(By.xpath(xpathToSettingIcon)); collector.checkThat("After Show Title : The title option in option panel of paragraph is labeled as", driver.findElement(By.xpath(xpathToHideTitle)).getText(), - CoreMatchers.allOf(CoreMatchers.startsWith("Hide title"), CoreMatchers.containsString("Ctrl+"), + CoreMatchers.allOf(CoreMatchers.endsWith("Hide title"), CoreMatchers.containsString("Ctrl+"), CoreMatchers.anyOf(CoreMatchers.containsString("Option"), CoreMatchers.containsString("Alt")), CoreMatchers.containsString("+T"))); @@ -462,7 +489,7 @@ public class ParagraphActionsIT extends AbstractZeppelinIT { driver.findElement(By.xpath(getParagraphXPath(1) + "//span[@class='icon-settings']")).click(); collector.checkThat("Before \"Show line number\" The option panel in paragraph has button labeled ", driver.findElement(By.xpath(xpathToShowLineNumberButton)).getText(), - CoreMatchers.allOf(CoreMatchers.startsWith("Show line numbers"), CoreMatchers.containsString("Ctrl+"), + CoreMatchers.allOf(CoreMatchers.endsWith("Show line numbers"), CoreMatchers.containsString("Ctrl+"), CoreMatchers.anyOf(CoreMatchers.containsString("Option"), CoreMatchers.containsString("Alt")), CoreMatchers.containsString("+M"))); @@ -475,7 +502,7 @@ public class ParagraphActionsIT extends AbstractZeppelinIT { clickAndWait(By.xpath(getParagraphXPath(1) + "//span[@class='icon-settings']")); collector.checkThat("After \"Show line number\" The option panel in paragraph has button labeled ", driver.findElement(By.xpath(xpathToHideLineNumberButton)).getText(), - CoreMatchers.allOf(CoreMatchers.startsWith("Hide line numbers"), CoreMatchers.containsString("Ctrl+"), + CoreMatchers.allOf(CoreMatchers.endsWith("Hide line numbers"), CoreMatchers.containsString("Ctrl+"), CoreMatchers.anyOf(CoreMatchers.containsString("Option"), CoreMatchers.containsString("Alt")), CoreMatchers.containsString("+M"))); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/dd6308e4/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html index 5523609..fd4d701 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html @@ -103,65 +103,98 @@ limitations under the License. </form> </li> <li> - <a ng-click="$event.stopPropagation()" class="dropdown"><span class="fa fa-arrows-h shortcut-icon"></span>Width - <form style="display:inline; margin-left:5px; float:right"> - <select ng-model="paragraph.config.colWidth" - class="selectpicker" - ng-change="changeColWidth(paragraph, paragraph.config.colWidth)" - ng-options="col for col in colWidthOption"></select> - </form> + <a ng-click="$event.stopPropagation()" class="dropdown"> + <span style="margin-top: 2px;" class="fa fa-arrows-h shortcut-icon"></span> + <select style="margin-left:5px;float: right" ng-model="paragraph.config.colWidth" + class="selectpicker" + ng-change="changeColWidth(paragraph, paragraph.config.colWidth)" + ng-options="col for col in colWidthOption"></select> + Width </a> </li> <li> - <a ng-click="moveUp(paragraph)" ng-hide="$first"><span class="icon-arrow-up shortcut-icon"></span>Move up - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+K</span></a> + <a ng-click="$event.stopPropagation()" class="dropdown"> + <span class="fa fa-text-height shortcut-icon"></span> + <select style="margin-left:5px;float: right" ng-model="paragraph.config.fontSize" + class="selectpicker" + ng-change="changeFontSize(paragraph, paragraph.config.fontSize)" + ng-options="s for s in fontSizeOption"></select> + Font size + </a> + </li> + <li> + <a ng-click="moveUp(paragraph)" ng-hide="$first"><span class="icon-arrow-up shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+K</span> + Move up + </a> </li> <li> - <a ng-click="moveDown(paragraph)" ng-hide="$last"><span class="icon-arrow-down shortcut-icon"></span>Move down - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+J</span></a> + <a ng-click="moveDown(paragraph)" ng-hide="$last"><span class="icon-arrow-down shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+J</span> + Move down + </a> </li> <li> - <a ng-click="insertNew('below')"><span class="icon-plus shortcut-icon"></span>Insert new - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+B</span></a> + <a ng-click="insertNew('below')"><span class="icon-plus shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+B</span> + Insert new + </a> </li> <li> - <a ng-click="copyParagraph(getEditorValue())"><span class="fa fa-copy shortcut-icon"></span>Clone paragraph - <span class="shortcut-keys">Ctrl+Shift+C</span></a> + <a ng-click="copyParagraph(getEditorValue())"><span class="fa fa-copy shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+Shift+C</span> + Clone paragraph + </a> </li> <li> <!-- paragraph handler --> <a ng-click="hideTitle(paragraph)" - ng-show="paragraph.config.title"><span class="fa fa-font shortcut-icon"></span>Hide title - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+T</span></a> + ng-show="paragraph.config.title"><span class="fa fa-font shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+T</span> + Hide title + </a> <a ng-click="showTitle(paragraph)" - ng-show="!paragraph.config.title"><span class="fa fa-font shortcut-icon"></span>Show title - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+T</span></a> + ng-show="!paragraph.config.title"><span class="fa fa-font shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+T</span> + Show title + </a> </li> <li> <a ng-click="hideLineNumbers(paragraph)" - ng-show="paragraph.config.lineNumbers"><span class="fa fa-list-ol shortcut-icon"></span>Hide line numbers - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+M</span></a> + ng-show="paragraph.config.lineNumbers"><span class="fa fa-list-ol shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+M</span> + Hide line numbers + </a> <a ng-click="showLineNumbers(paragraph)" - ng-show="!paragraph.config.lineNumbers"><span class="fa fa-list-ol shortcut-icon"></span>Show line numbers - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+M</span></a> + ng-show="!paragraph.config.lineNumbers"><span class="fa fa-list-ol shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+M</span> + Show line numbers + </a> </li> <li> <a ng-click="toggleEnableDisable(paragraph)"><span class="icon-control-play shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+ {{ isMac ? 'Option' : 'Alt'}}+R</span> {{paragraph.config.enabled ? "Disable" : "Enable"}} run - <span class="shortcut-keys">Ctrl+ {{ isMac ? 'Option' : 'Alt'}}+R</span></a> + </a> </li> <li> - <a ng-click="goToSingleParagraph()"><span class="icon-share-alt shortcut-icon"></span>Link this paragraph - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+W</span></a> + <a ng-click="goToSingleParagraph()"><span class="icon-share-alt shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+W</span> + Link this paragraph + </a> </li> <li> - <a ng-click="clearParagraphOutput(paragraph)"><span class="fa fa-eraser shortcut-icon"></span>Clear output - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+L</span></a> + <a ng-click="clearParagraphOutput(paragraph)"><span class="fa fa-eraser shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+L</span> + Clear output + </a> </li> <li> <!-- remove paragraph --> - <a ng-click="removeParagraph(paragraph)" ng-hide="$last"><span class="fa fa-times shortcut-icon"></span>Remove - <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+D</span></a> + <a ng-click="removeParagraph(paragraph)" ng-hide="$last"><span class="fa fa-times shortcut-icon"></span> + <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+D</span> + Remove + </a> </li> </ul> </span> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/dd6308e4/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 00be23e..ef61d08 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -129,6 +129,7 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca $scope.chart = {} $scope.baseMapOption = ['Streets', 'Satellite', 'Hybrid', 'Topo', 'Gray', 'Oceans', 'Terrain'] $scope.colWidthOption = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] + $scope.fontSizeOption = [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] $scope.paragraphFocused = false if (newParagraph.focus) { $scope.paragraphFocused = true @@ -149,6 +150,10 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca config.colWidth = 12 } + if (!config.fontSize) { + config.fontSize = 9 + } + if (config.enabled === undefined) { config.enabled = true } @@ -603,6 +608,18 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca commitParagraph(paragraph) } + $scope.changeFontSize = function (paragraph, fontSize) { + angular.element('.navbar-right.open').removeClass('open') + if ($scope.editor) { + $scope.editor.setOptions({ + fontSize: fontSize + 'pt' + }) + autoAdjustEditorHeight($scope.editor) + paragraph.config.fontSize = fontSize + commitParagraph(paragraph) + } + } + $scope.toggleOutput = function (paragraph) { paragraph.config.tableHide = !paragraph.config.tableHide commitParagraph(paragraph) @@ -743,6 +760,7 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca langTools.textCompleter]) $scope.editor.setOptions({ + fontSize: $scope.paragraph.config.fontSize + 'pt', enableBasicAutocompletion: true, enableSnippets: false, enableLiveAutocompletion: false @@ -1246,8 +1264,12 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca $scope.updateParagraphObjectWhenUpdated = function (newPara) { // resize col width - if ($scope.paragraph.config.colWidth !== newPara.colWidth) { - $rootScope.$broadcast('paragraphResized', $scope.paragraph.id) + if ($scope.paragraph.config.colWidth !== newPara.config.colWidth) { + $scope.$broadcast('paragraphResized', $scope.paragraph.id) + } + + if ($scope.paragraph.config.fontSize !== newPara.config.fontSize) { + $rootScope.$broadcast('fontSizeChanged', newPara.config.fontSize) } /** push the rest */ @@ -1262,6 +1284,7 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca $scope.paragraph.title = newPara.title $scope.paragraph.lineNumbers = newPara.lineNumbers $scope.paragraph.status = newPara.status + $scope.paragraph.fontSize = newPara.fontSize if (newPara.status !== ParagraphStatus.RUNNING) { $scope.paragraph.results = newPara.results } @@ -1514,4 +1537,12 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca $scope.cleanupSpellTransaction() }) + + $scope.$on('fontSizeChanged', function (event, fontSize) { + if ($scope.editor) { + $scope.editor.setOptions({ + fontSize: fontSize + 'pt' + }) + } + }) }
