Diff text selection action box
Will be shown above selected text in diff, for ranged comments.
Feature: Issue 3910
Change-Id: I2dbb90c88119b6febb44fb912d66d0e26a275415
diff --git a/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box.html b/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box.html
new file mode 100644
index 0000000..f9174ac
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box.html
@@ -0,0 +1,47 @@
+<!--
+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="../../../behaviors/keyboard-shortcut-behavior.html">
+
+<dom-module id="gr-selection-action-box">
+ <template>
+ <style>
+ :host {
+ --gr-arrow-size: .6em;
+
+ background-color: #fff;
+ border: 1px solid #000;
+ border-radius: .5em;
+ padding: .3em;
+ position: absolute;
+ }
+ .arrow {
+ background: #fff;
+ border: var(--gr-arrow-size) solid #000;
+ border-width: 0 1px 1px 0;
+ height: var(--gr-arrow-size);
+ left: calc(50% - 1em);
+ position: absolute;
+ transform: rotate(45deg);
+ width: var(--gr-arrow-size);
+ }
+ </style>
+ Press <strong>C</strong> to comment.
+ <div class="arrow"></div>
+ </template>
+ <script src="gr-selection-action-box.js"></script>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box.js b/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box.js
new file mode 100644
index 0000000..d464947
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box.js
@@ -0,0 +1,70 @@
+// 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-selection-action-box',
+
+ properties: {
+ keyEventTarget: {
+ type: Object,
+ value: function() { return document.body; },
+ },
+ range: {
+ type: Object,
+ value: {
+ startLine: NaN,
+ startChar: NaN,
+ endLine: NaN,
+ endChar: NaN,
+ },
+ },
+ side: {
+ type: String,
+ value: '',
+ },
+ },
+
+ behaviors: [
+ Gerrit.KeyboardShortcutBehavior,
+ ],
+
+ placeAbove: function(el) {
+ var rect;
+ if (!(el instanceof Element)) {
+ var range = document.createRange();
+ range.selectNode(el);
+ rect = range.getBoundingClientRect();
+ range.detach();
+ } else {
+ rect = el.getBoundingClientRect();
+ }
+ var boxRect = this.getBoundingClientRect();
+ var parentRect = this.parentElement.getBoundingClientRect();
+ this.style.top =
+ rect.top - parentRect.top - boxRect.height - 4 + 'px';
+ this.style.left =
+ rect.left - parentRect.left + (rect.width - boxRect.width)/2 + 'px';
+ },
+
+ _handleKey: function(e) {
+ if (this.shouldSupressKeyboardShortcut(e)) { return; }
+ if (e.keyCode === 67) { // 'c'
+ e.preventDefault();
+ this.fire('create-comment', {side: this.side, range: this.range});
+ };
+ },
+ });
+})();
diff --git a/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box_test.html b/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box_test.html
new file mode 100644
index 0000000..3cb3a17
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box_test.html
@@ -0,0 +1,111 @@
+<!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-selection-action-box</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-selection-action-box.html">
+
+<test-fixture id="basic">
+ <template>
+ <div>
+ <gr-selection-action-box></gr-selection-action-box>
+ <div class="target">some text</div>
+ </div>
+ </template>
+</test-fixture>
+
+<script>
+ suite('gr-selection-action-box', function() {
+ var container;
+ var element;
+
+ setup(function() {
+ container = fixture('basic');
+ element = container.querySelector('gr-selection-action-box');
+ sinon.stub(element, 'fire');
+ });
+
+ teardown(function() {
+ element.fire.restore();
+ });
+
+ test('ignores regular keys', function() {
+ MockInteractions.pressAndReleaseKeyOn(document.body, 27); // 'esc'
+ assert.isFalse(element.fire.called);
+ });
+
+ test('reacts to hotkey', function() {
+ MockInteractions.pressAndReleaseKeyOn(document.body, 67); // 'c'
+ assert.isTrue(element.fire.called);
+ });
+
+ test('event fired contains playload', function() {
+ var side = 'left';
+ var range = {
+ startLine: 1,
+ startChar: 11,
+ endLine: 2,
+ endChar: 42,
+ };
+ element.side = 'left';
+ element.range = range;
+ MockInteractions.pressAndReleaseKeyOn(document.body, 67); // 'c'
+ assert(element.fire.calledWithExactly(
+ 'create-comment',
+ {
+ side: side,
+ range: range,
+ }));
+ });
+
+ suite('placeAbove', function() {
+ var target;
+
+ setup(function() {
+ target = container.querySelector('.target');
+ sinon.stub(container, 'getBoundingClientRect').returns(
+ {top:1, bottom: 2, left: 3, right: 4, width: 50, height: 6});
+ sinon.stub(target, 'getBoundingClientRect').returns(
+ {top:42, bottom: 20, left: 30, right: 40, width: 100, height: 60});
+ sinon.stub(element, 'getBoundingClientRect').returns(
+ {width: 10, height: 10});
+ });
+
+ teardown(function() {
+ element.getBoundingClientRect.restore();
+ container.getBoundingClientRect.restore();
+ target.getBoundingClientRect.restore();
+ });
+
+ test('placeAbove for Element argument', function() {
+ element.placeAbove(target);
+ assert.equal(element.style.top, '27px');
+ assert.equal(element.style.left, '72px');
+ });
+
+ test('placeAbove for Text Node argument', function() {
+ element.placeAbove(target.firstChild);
+ assert.equal(element.style.top, '-7px');
+ });
+ });
+ });
+</script>
diff --git a/polygerrit-ui/app/test/index.html b/polygerrit-ui/app/test/index.html
index 781f457..d4939a3 100644
--- a/polygerrit-ui/app/test/index.html
+++ b/polygerrit-ui/app/test/index.html
@@ -51,6 +51,7 @@
'diff/gr-diff/gr-diff-group_test.html',
'diff/gr-diff/gr-diff_test.html',
'diff/gr-patch-range-select/gr-patch-range-select_test.html',
+ 'diff/gr-selection-action-box/gr-selection-action-box_test.html',
'shared/gr-account-label/gr-account-label_test.html',
'shared/gr-account-link/gr-account-link_test.html',
'shared/gr-alert/gr-alert_test.html',
