You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by ak...@apache.org on 2015/09/03 19:04:13 UTC
ignite git commit: IGNITE-843 Preview with selection fade.
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 <ak...@gridgain.com>
Authored: Fri Sep 4 00:04:03 2015 +0700
Committer: AKuznetsov <ak...@gridgain.com>
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