Return-Path: X-Original-To: apmail-ignite-commits-archive@minotaur.apache.org Delivered-To: apmail-ignite-commits-archive@minotaur.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id BE1B6173A6 for ; Thu, 3 Sep 2015 17:04:19 +0000 (UTC) Received: (qmail 92605 invoked by uid 500); 3 Sep 2015 17:04:13 -0000 Delivered-To: apmail-ignite-commits-archive@ignite.apache.org Received: (qmail 92573 invoked by uid 500); 3 Sep 2015 17:04:13 -0000 Mailing-List: contact commits-help@ignite.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@ignite.apache.org Delivered-To: mailing list commits@ignite.apache.org Received: (qmail 92564 invoked by uid 99); 3 Sep 2015 17:04:13 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Thu, 03 Sep 2015 17:04:13 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id 4C705E7E8F; Thu, 3 Sep 2015 17:04:13 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: akuznetsov@apache.org To: commits@ignite.apache.org Message-Id: <7e2f80b5dac640c594554f907ba94bb5@git.apache.org> X-Mailer: ASF-Git Admin Mailer Subject: ignite git commit: IGNITE-843 Preview with selection fade. Date: Thu, 3 Sep 2015 17:04:13 +0000 (UTC) Repository: ignite Updated Branches: refs/heads/ignite-843 5ec92e820 -> 7efb9c742 IGNITE-843 Preview with selection fade. Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/7efb9c74 Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/7efb9c74 Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/7efb9c74 Branch: refs/heads/ignite-843 Commit: 7efb9c7429cb2f404912f92dd4da005f1372361e Parents: 5ec92e82 Author: AKuznetsov Authored: Fri Sep 4 00:04:03 2015 +0700 Committer: AKuznetsov Committed: Fri Sep 4 00:04:03 2015 +0700 ---------------------------------------------------------------------- .../main/js/controllers/caches-controller.js | 1 + .../main/js/controllers/clusters-controller.js | 1 + .../src/main/js/controllers/common-module.js | 133 +++++++++++++++---- .../main/js/controllers/metadata-controller.js | 1 + .../src/main/js/controllers/sql-controller.js | 3 + .../main/js/controllers/summary-controller.js | 3 + .../src/main/js/public/stylesheets/style.scss | 66 ++++++++- .../src/main/js/views/includes/controls.jade | 4 +- .../src/main/js/views/sql/sql.jade | 5 +- 9 files changed, 179 insertions(+), 38 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/controllers/caches-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/caches-controller.js b/modules/control-center-web/src/main/js/controllers/caches-controller.js index e3e4010..b6b6e31 100644 --- a/modules/control-center-web/src/main/js/controllers/caches-controller.js +++ b/modules/control-center-web/src/main/js/controllers/caches-controller.js @@ -48,6 +48,7 @@ controlCenterModule.controller('cachesController', [ $scope.tablePairSave = $table.tablePairSave; $scope.tablePairSaveVisible = $table.tablePairSaveVisible; + $scope.previewInit = $preview.previewInit; $scope.previewChanged = $preview.previewChanged; $scope.formChanged = $common.formChanged; http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/controllers/clusters-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/clusters-controller.js b/modules/control-center-web/src/main/js/controllers/clusters-controller.js index 2ccf9fc..44f39ff 100644 --- a/modules/control-center-web/src/main/js/controllers/clusters-controller.js +++ b/modules/control-center-web/src/main/js/controllers/clusters-controller.js @@ -43,6 +43,7 @@ controlCenterModule.controller('clustersController', ['$scope', '$controller', ' $scope.tableSimpleDown = $table.tableSimpleDown; $scope.tableSimpleDownVisible = $table.tableSimpleDownVisible; + $scope.previewInit = $preview.previewInit; $scope.previewChanged = $preview.previewChanged; $scope.formChanged = $common.formChanged; http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/controllers/common-module.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/common-module.js b/modules/control-center-web/src/main/js/controllers/common-module.js index 056b5d1..042e86d 100644 --- a/modules/control-center-web/src/main/js/controllers/common-module.js +++ b/modules/control-center-web/src/main/js/controllers/common-module.js @@ -957,11 +957,40 @@ controlCenterModule.service('$table', ['$common', '$focus', function ($common, $ }]); // Preview support service. -controlCenterModule.service('$preview', ['$timeout', function ($timeout) { +controlCenterModule.service('$preview', ['$timeout', '$interval', function ($timeout, $interval) { var Range = require('ace/range').Range; var previewPrevContent = []; + var animation = {editor: null, stage: 0, start: 0, stop: 0}; + + function _clearSelection(editor) { + _.forEach(editor.session.getMarkers(false), function (marker) { + editor.session.removeMarker(marker.id); + }); + } + + function _animate() { + animation.stage = animation.stage + 1; + + animation.editor.session.addMarker(new Range(animation.start, 0, animation.stop, 0), + 'preview-highlight-' + animation.stage, 'line', false); + } + + function _fade(editor, start, stop) { + var promise = editor.animatePromise; + + if (promise) { + $interval.cancel(promise); + + _clearSelection(editor); + } + + animation = {editor: editor, stage: 0, start: start, stop: stop}; + + editor.animatePromise = $interval(_animate, 100, 10, false); + } + function previewChanged (ace) { var content = ace[0]; @@ -976,51 +1005,101 @@ controlCenterModule.service('$preview', ['$timeout', function ($timeout) { // Do not mark the text changes for special marker value: ' '. else if (previewPrevContent.length > 0 && previewNewContent.length > 0 && previewNewContent[0] != ' ' && previewPrevContent[0] != ' ') { - if (clearPromise) + if (clearPromise) { $timeout.cancel(clearPromise); - var start = -1; - var end = -1; - var prevLen = previewPrevContent.length; - var newLen = previewNewContent.length; + _clearSelection(editor); + } + + var newIx = 0; + var prevIx = 0; - // Find an index of a first line with different text. - for (var i = 0; (i < newLen || i < prevLen) && start < 0; i++) { - if (previewNewContent[i] != previewPrevContent[i]) { - start = i; + var prevLen = previewPrevContent.length - (previewPrevContent[previewPrevContent.length - 1] == '' ? 1 : 0); + var newLen = previewNewContent.length - (previewNewContent[previewNewContent.length - 1] == '' ? 1 : 0); - break; - } - } + var selected = false; + var scrollTo = -1; - if (start >= 0) { - // Find an index of a last line with different text by checking last string of old and new content in reverse order. - for (i = 1; (i <= newLen || i <= prevLen) && end < 0; i++) { - // Also check when difference added in end of content. - if (previewNewContent[newLen - i] != previewPrevContent[prevLen - i] || prevLen - i < start) { - end = newLen - i + 1; + while (newIx < newLen || prevIx < prevLen) { + var start = -1; + var end = -1; + + // Find an index of a first line with different text. + for (; (newIx < newLen || prevIx < prevLen) && start < 0; newIx++, prevIx++) { + if (previewNewContent[newIx] != previewPrevContent[prevIx]) { + start = newIx; break; } } - if (end < 0) - end = start + 1; + if (start >= 0) { + // Find an index of a last line with different text by checking last string of old and new content in reverse order. + for (var i = start; i < newLen && end < 0; i ++) { + for (var j = prevIx; j < prevLen && end < 0; j ++) { + if (previewNewContent[i] == previewPrevContent[j]) { + end = i; - if (start <= end) { - editor.selection.setSelectionRange(new Range(start, 0, end, 0), false); + newIx = i; + prevIx = j; - editor.clearPromise = $timeout(function () { - editor.clearSelection(); + break; + } + } + } + + if (end < 0) { + end = newLen; + + newIx = newLen; + prevIx = prevLen; + } - editor.clearPromise = null; - }, 3000); + if (start <= end) { + _fade(editor, start, end); + + if (!selected) + scrollTo = start; + + selected = true; + } } } + // Run clear selection one time. + if (selected) { + editor.clearPromise = $timeout(function () { + _clearSelection(editor); + + editor.clearPromise = null; + }, 4000); + + editor.scrollToRow(scrollTo) + } + previewPrevContent = []; } } + + return { + previewInit: function (editor) { + editor.setReadOnly(true); + editor.setOption('highlightActiveLine', false); + editor.setAutoScrollEditorIntoView(true); + editor.$blockScrolling = Infinity; + + var renderer = editor.renderer; + + renderer.setHighlightGutterLine(false); + renderer.setShowPrintMargin(false); + renderer.setOption('fontSize', '10px'); + renderer.setOption('minLines', '3'); + renderer.setOption('maxLines', '50'); + + editor.setTheme('ace/theme/chrome'); + }, + previewChanged: previewChanged + } }]); // Filter to decode name using map(value, label). http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/controllers/metadata-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/metadata-controller.js b/modules/control-center-web/src/main/js/controllers/metadata-controller.js index baef67d..9e418bf 100644 --- a/modules/control-center-web/src/main/js/controllers/metadata-controller.js +++ b/modules/control-center-web/src/main/js/controllers/metadata-controller.js @@ -56,6 +56,7 @@ controlCenterModule.controller('metadataController', [ $scope.tablePairSave = $table.tablePairSave; $scope.tablePairSaveVisible = $table.tablePairSaveVisible; + $scope.previewInit = $preview.previewInit; $scope.previewChanged = $preview.previewChanged; $scope.formChanged = $common.formChanged; http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/controllers/sql-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/sql-controller.js b/modules/control-center-web/src/main/js/controllers/sql-controller.js index 7b3335b..4b205e9 100644 --- a/modules/control-center-web/src/main/js/controllers/sql-controller.js +++ b/modules/control-center-web/src/main/js/controllers/sql-controller.js @@ -40,6 +40,7 @@ controlCenterModule.controller('sqlController', ['$scope', '$window','$controlle ]; $scope.aceInit = function (editor) { + editor.setAutoScrollEditorIntoView(true); editor.$blockScrolling = Infinity; var renderer = editor.renderer; @@ -47,6 +48,8 @@ controlCenterModule.controller('sqlController', ['$scope', '$window','$controlle renderer.setHighlightGutterLine(false); renderer.setShowPrintMargin(false); renderer.setOption('fontSize', '14px'); + renderer.setOption('minLines', '3'); + renderer.setOption('maxLines', '15'); editor.setTheme('ace/theme/chrome'); }; http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/controllers/summary-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/summary-controller.js b/modules/control-center-web/src/main/js/controllers/summary-controller.js index 256534a..2f1cec1 100644 --- a/modules/control-center-web/src/main/js/controllers/summary-controller.js +++ b/modules/control-center-web/src/main/js/controllers/summary-controller.js @@ -53,6 +53,7 @@ controlCenterModule.controller('summaryController', ['$scope', '$http', '$common $scope.aceInit = function (editor) { editor.setReadOnly(true); editor.setOption('highlightActiveLine', false); + editor.setAutoScrollEditorIntoView(true); editor.$blockScrolling = Infinity; var renderer = editor.renderer; @@ -60,6 +61,8 @@ controlCenterModule.controller('summaryController', ['$scope', '$http', '$common renderer.setHighlightGutterLine(false); renderer.setShowPrintMargin(false); renderer.setOption('fontSize', '14px'); + renderer.setOption('minLines', '3'); + renderer.setOption('maxLines', '50'); editor.setTheme('ace/theme/chrome'); }; http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/public/stylesheets/style.scss ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/public/stylesheets/style.scss b/modules/control-center-web/src/main/js/public/stylesheets/style.scss index 3bf8d22..3b8ffc1 100644 --- a/modules/control-center-web/src/main/js/public/stylesheets/style.scss +++ b/modules/control-center-web/src/main/js/public/stylesheets/style.scss @@ -1124,11 +1124,9 @@ a { opacity: 0; } -.ace_editor, #ace_document { +.ace_editor { margin: 0.85em 0 0 0; - height: 400px; - .ace_gutter { background: transparent !important; border: 1px $ignite-border-color; @@ -1142,13 +1140,71 @@ a { } .sql-editor { - height: 200px; - .ace_cursor { opacity: 1; } } +.preview-highlight-1 { + position: absolute; + background-color: #f7faff; + z-index: 20; +} + +.preview-highlight-2 { + position: absolute; + background-color: #f0f6ff; + z-index: 21; +} + +.preview-highlight-3 { + position: absolute; + background-color: #e8f2ff; + z-index: 22; +} + +.preview-highlight-4 { + position: absolute; + background-color: #e1eeff; + z-index: 23; +} + +.preview-highlight-5 { + position: absolute; + background-color: #DAEAFF; + z-index: 24; +} + +.preview-highlight-6 { + position: absolute; + background-color: #D2E5FF; + z-index: 25; +} + +.preview-highlight-7 { + position: absolute; + background-color: #CBE1FF; + z-index: 26; +} + +.preview-highlight-8 { + position: absolute; + background-color: #C3DDFF; + z-index: 27; +} + +.preview-highlight-9 { + position: absolute; + background-color: #BCD9FF; + z-index: 28; +} + +.preview-highlight-10 { + position: absolute; + background-color: #B5D5FF; + z-index: 29; +} + .preview-panel { margin-top: 10px; margin-left: 20px; http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/views/includes/controls.jade ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/views/includes/controls.jade b/modules/control-center-web/src/main/js/views/includes/controls.jade index 08df361..ecb6bcf 100644 --- a/modules/control-center-web/src/main/js/views/includes/controls.jade +++ b/modules/control-center-web/src/main/js/views/includes/controls.jade @@ -461,11 +461,9 @@ mixin advanced-options-bottom mixin preview-content(preview, state, mode) -var previewState = preview + 'State' - -var rendererOptions = 'rendererOptions: {showPrintMargin: false, highlightGutterLine: false, fontSize: 10}' - -var advancedOptions = 'advanced: {readOnly: true, highlightActiveLine: false, autoScrollEditorIntoView: true, minLines: 3, maxLines: 50}' .preview-content(ng-if='!preview[#{preview}].allDefaults && #{previewState} == #{state}' id='#{id}' - ui-ace='{onChange: previewChanged, mode: "#{mode}", #{rendererOptions}, #{advancedOptions}}' ng-model='preview[#{preview}].#{mode}') + ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "#{mode}"}' ng-model='preview[#{preview}].#{mode}') mixin preview(preview, id) -var previewState = preview + 'State' http://git-wip-us.apache.org/repos/asf/ignite/blob/7efb9c74/modules/control-center-web/src/main/js/views/sql/sql.jade ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/views/sql/sql.jade b/modules/control-center-web/src/main/js/views/sql/sql.jade index ac708ff..fc02427 100644 --- a/modules/control-center-web/src/main/js/views/sql/sql.jade +++ b/modules/control-center-web/src/main/js/views/sql/sql.jade @@ -68,9 +68,8 @@ block container .panel-body(ng-show='paragraph.editor') .row .col-xs-8.col-sm-9(style='border-right: 1px solid #eee') - .sql-editor(ui-ace='{ onLoad: aceInit, theme: "chrome", mode: "sql",' + - 'require: ["ace/ext/language_tools"],' + - 'advanced: {enableSnippets: false, enableBasicAutocompletion: true, enableLiveAutocompletion: true, autoScrollEditorIntoView: true, minLines: 3, maxLines: 15}}' + .sql-editor(ui-ace='{onLoad: aceInit, theme: "chrome", mode: "sql", require: ["ace/ext/language_tools"],' + + 'advanced: {enableSnippets: false, enableBasicAutocompletion: true, enableLiveAutocompletion: true}}' ng-model='paragraph.query' ng-class='{"disable": paragraph.status == "RUNNING" || paragraph.status == "PENDING" }') .col-xs-4.col-sm-3