Ranged highlights: initial commit - Initial commit: structure, 'enabled' property controls sample mouseDown handler. - Minimal integration: isRangeSelected - Minimal test. Change-Id: I963ac7b158d57a1c24ee302d99eb6af26b0aeeeb
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html new file mode 100644 index 0000000..c8ed041 --- /dev/null +++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html
@@ -0,0 +1,40 @@ +<!-- +Copyright (C) 2016 The Android Open Source Project + +Licensed 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. +--> +<link rel="import" href="../../../bower_components/polymer/polymer.html"> + +<link rel="import" href="../gr-selection-action-box/gr-selection-action-box.html"> + +<dom-module id="gr-diff-highlight"> + <template> + <style> + :host { + position: relative; + } + .contentWrapper ::content .range { + background-color: #ffd500 !important; + display: inline; + } + .contentWrapper ::content .rangeHighlight { + background-color: #ff0 !important; + display: inline; + } + </style> + <div class="contentWrapper"> + <content></content> + </div> + </template> + <script src="gr-diff-highlight.js"></script> +</dom-module>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js new file mode 100644 index 0000000..674d6ff --- /dev/null +++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js
@@ -0,0 +1,80 @@ +// Copyright (C) 2016 The Android Open Source Project +// +// Licensed 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. +(function() { + 'use strict'; + + Polymer({ + is: 'gr-diff-highlight', + + properties: { + comments: Object, + enabled: { + type: Boolean, + observer: '_enabledChanged', + }, + loggedIn: Boolean, + _cachedDiffBuilder: Object, + _diffElement: Object, + _enabledListeners: { + type: Object, + value: function() { + return { + 'down': '_handleDown', + }; + }, + }, + }, + + get diffBuilder() { + if (!this._cachedDiffBuilder) { + this._cachedDiffBuilder = + Polymer.dom(this).querySelector('gr-diff-builder'); + } + return this._cachedDiffBuilder; + }, + + get diffElement() { + if (!this._diffElement) { + this._diffElement = Polymer.dom(this).querySelector('#diffTable'); + } + return this._diffElement; + }, + + detached: function() { + this.enabled = false; + }, + + _enabledChanged: function() { + for (var eventName in this._enabledListeners) { + var methodName = this._enabledListeners[eventName]; + if (this.enabled) { + this.listen(this, eventName, methodName); + } else { + this.unlisten(this, eventName, methodName); + }; + }; + }, + + isRangeSelected: function() { + return !!this.$$('gr-selection-action-box'); + }, + + _handleDown: function(e) { + var actionBox = this.$$('gr-selection-action-box'); + if (actionBox && !actionBox.contains(e.target)) { + this._removeActionBox(); + } + }, + }); +})();
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html new file mode 100644 index 0000000..1a7a6ea --- /dev/null +++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html
@@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- +Copyright (C) 2016 The Android Open Source Project + +Licensed 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. +--> + +<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> +<title>gr-diff-highlight</title> + +<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script> +<script src="../../../bower_components/web-component-tester/browser.js"></script> + +<link rel="import" href="../../../bower_components/iron-test-helpers/iron-test-helpers.html"> +<link rel="import" href="gr-diff-highlight.html"> + +<test-fixture id="basic"> + <template> + <gr-diff-highlight></gr-diff-highlight> + </template> +</test-fixture> + +<script> + suite('gr-diff-highlight', function() { + var element; + + setup(function() { + element = fixture('basic'); + }); + + test('handles down only when enabled ', function() { + sinon.stub(element, '_handleDown'); + MockInteractions.down(element); + assert.isFalse(element._handleDown.called); + element.enabled = true; + MockInteractions.down(element); + assert.isTrue(element._handleDown.called); + element._handleDown.restore(); + }); + }); +</script>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html index 7c66bf1..e0d003e 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html +++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -19,6 +19,7 @@ <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html"> <link rel="import" href="../gr-diff-builder/gr-diff-builder.html"> <link rel="import" href="../gr-diff-comment-thread/gr-diff-comment-thread.html"> +<link rel="import" href="../gr-diff-highlight/gr-diff-highlight.html"> <link rel="import" href="../gr-diff-selection/gr-diff-selection.html"> <dom-module id="gr-diff"> @@ -142,14 +143,20 @@ <div class$="[[_computeContainerClass(_loggedIn, viewMode)]]" on-tap="_handleTap"> <gr-diff-selection> - <gr-diff-builder - id="diffBuilder" - view-mode="[[viewMode]]" - is-image-diff="[[isImageDiff]]" - base-image="[[_baseImage]]" - revision-image="[[_revisionImage]]"> - <table id="diffTable"></table> - </gr-diff-builder> + <gr-diff-highlight + id="highlights" + logged-in="[[_loggedIn]]" + enabled="[[hasRangedComments]]" + comments="[[_comments]]"> + <gr-diff-builder + id="diffBuilder" + view-mode="[[viewMode]]" + is-image-diff="[[isImageDiff]]" + base-image="[[_baseImage]]" + revision-image="[[_revisionImage]]"> + <table id="diffTable"></table> + </gr-diff-builder> + </gr-diff-highlight> </gr-diff-selection> </div> <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js index f3a353b..8c9b20d 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js +++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
@@ -131,6 +131,10 @@ }.bind(this)); }, + isRangeSelected: function() { + return this.$.highlights.isRangeSelected(); + }, + _advanceElementWithinNodeList: function(els, curIndex, direction) { var idx = Math.max(0, Math.min(els.length - 1, curIndex + direction)); if (curIndex !== idx) {
diff --git a/polygerrit-ui/app/test/index.html b/polygerrit-ui/app/test/index.html index 32b7536..3d3f65d 100644 --- a/polygerrit-ui/app/test/index.html +++ b/polygerrit-ui/app/test/index.html
@@ -46,6 +46,7 @@ 'diff/gr-diff-comment-thread/gr-diff-comment-thread_test.html', 'diff/gr-diff-comment/gr-diff-comment_test.html', 'diff/gr-diff-cursor/gr-diff-cursor_test.html', + 'diff/gr-diff-highlight/gr-diff-highlight_test.html', 'diff/gr-diff-preferences/gr-diff-preferences_test.html', 'diff/gr-diff-selection/gr-diff-selection_test.html', 'diff/gr-diff-view/gr-diff-view_test.html',