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) {
