Copy to clipboard button UI improvements
- Make the button size of the text - Add tooltip Bug: Issue 7997 Change-Id: Ifccb62dcfe984ad9c54e7b15fb2f2119b02c861f
This commit is contained in:
parent
4fdafe1396
commit
e8bc56a822
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user