From e8bc56a822b61c702529af48b730d82f65e2dbb6 Mon Sep 17 00:00:00 2001
From: Viktar Donich <viktard@google.com>
Date: Mon, 18 Dec 2017 15:21:58 -0800
Subject: [PATCH] Copy to clipboard button UI improvements

- Make the button size of the text
- Add tooltip

Bug: Issue 7997
Change-Id: Ifccb62dcfe984ad9c54e7b15fb2f2119b02c861f
---
 .../change/gr-commit-info/gr-commit-info.html       |  6 ++++++
 .../shared/gr-copy-clipboard/gr-copy-clipboard.html | 12 ++++++++----
 .../shared/gr-copy-clipboard/gr-copy-clipboard.js   | 13 +++++++++++++
 .../gr-copy-clipboard/gr-copy-clipboard_test.html   |  7 +++++++
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/polygerrit-ui/app/elements/change/gr-commit-info/gr-commit-info.html b/polygerrit-ui/app/elements/change/gr-commit-info/gr-commit-info.html
index aac5c33685..67b54d6e57 100644
--- a/polygerrit-ui/app/elements/change/gr-commit-info/gr-commit-info.html
+++ b/polygerrit-ui/app/elements/change/gr-commit-info/gr-commit-info.html
@@ -25,6 +25,9 @@ limitations under the License.
         align-items: center;
         display: flex;
       }
+      gr-copy-clipboard {
+        padding-left: .5em;
+      }
     </style>
     <div class="container">
       <template is="dom-if" if="[[_showWebLink]]">
@@ -35,7 +38,10 @@ limitations under the License.
         [[_computeShortHash(commitInfo)]]
       </template>
       <gr-copy-clipboard
+          has-tooltip
+          button-title="Copy full SHA to clipboard"
           hide-input
+          hide-label
           text="[[commitInfo.commit]]">
       </gr-copy-clipboard>
     </div>
diff --git a/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.html b/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.html
index b948557870..e52ad39f36 100644
--- a/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.html
+++ b/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.html
@@ -36,18 +36,20 @@ limitations under the License.
         flex-grow: 1;
         margin-right: .3em;
       }
-      .hideInput {
+      .hideInput,
+      .hideLabel label {
         display: none;
       }
       input {
         font-family: var(--monospace-font-family);
         font-size: inherit;
       }
-      #button {
-        padding-left: .5em;
+      #icon {
+        height: 1.2em;
+        width: 1.2em;
       }
     </style>
-    <div class="text">
+    <div class$="text [[_computeLabelClass(hideLabel)]]">
         <label>[[title]]</label>
         <input id="input" is="iron-input"
             class$="copyText [[_computeInputClass(hideInput)]]"
@@ -57,7 +59,9 @@ limitations under the License.
             readonly>
         <gr-button id="button"
             link
+            has-tooltip="[[hasTooltip]]"
             class="copyToClipboard"
+            title="[[buttonTitle]]"
             on-tap="_copyToClipboard">
           <iron-icon id="icon" icon="gr-icons:content-copy"></iron-icon>
         </gr-button>
diff --git a/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.js b/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.js
index a2b5374bc8..6a46ae0515 100644
--- a/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.js
+++ b/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.js
@@ -22,10 +22,19 @@
     properties: {
       text: String,
       title: String,
+      buttonTitle: String,
+      hasTooltip: {
+        type: Boolean,
+        value: false,
+      },
       hideInput: {
         type: Boolean,
         value: false,
       },
+      hideLabel: {
+        type: Boolean,
+        value: false,
+      },
     },
 
     focusOnCopy() {
@@ -36,6 +45,10 @@
       return hideInput ? 'hideInput' : '';
     },
 
+    _computeLabelClass(hideLabel) {
+      return hideLabel ? 'hideLabel' : '';
+    },
+
     _handleInputTap(e) {
       e.preventDefault();
       Polymer.dom(e).rootTarget.select();
diff --git a/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard_test.html b/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard_test.html
index 73106298ca..13d8b9d89b 100644
--- a/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard_test.html
@@ -78,5 +78,12 @@ limitations under the License.
       flushAsynchronousOperations();
       assert.equal(getComputedStyle(element.$.input).display, 'none');
     });
+
+    test('hideLabel', () => {
+      assert.notEqual(getComputedStyle(element.$$('label')).display, 'none');
+      element.hideLabel = true;
+      flushAsynchronousOperations();
+      assert.equal(getComputedStyle(element.$$('label')).display, 'none');
+    });
   });
 </script>