opendev/gerrit
Code Issues Proposed changes

Move the rest of the buttons to the common gr-button element

Browse Source 
+ Plus some minor stylistic fixes found while migrating.

Bug: Issue 3899
Change-Id: I5e38510fdf8ad034b7fc9db1f8cac3d35cb6b3bf
This commit is contained in:
Andrew Bonventre 2016-02-16 16:35:19 -05:00
parent bb045f6154
commit b7defbdd5d
18 changed files with 170 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
polygerrit-ui/app/behaviors/keyboard-shortcut-behavior.html
View File

@ -56,7 +56,8 @@ limitations under the License.
target.tagName == 'TEXTAREA' ||
target.tagName == 'SELECT' ||
target.tagName == 'BUTTON' ||
target.tagName == 'A';
target.tagName == 'A' ||
target.tagName == 'GR-BUTTON';
},
};

8
polygerrit-ui/app/elements/gr-account-dropdown.html
View File

@ -16,6 +16,7 @@ limitations under the License.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-dropdown/iron-dropdown.html">
<link rel="import" href="gr-button.html">
<dom-module id="gr-account-dropdown">
<style>
@ -23,8 +24,7 @@ limitations under the License.
display: inline-block;
}
.dropdown-trigger {
color: #00e;
cursor: pointer;
text-decoration: none;
}
.dropdown-content {
background-color: #fff;
@ -58,8 +58,8 @@ limitations under the License.
}
</style>
<template>
<button class="dropdown-trigger" id="trigger"
on-tap="_showDropdownTapHandler">[[account.name]]</button>
<gr-button link class="dropdown-trigger" id="trigger"
on-tap="_showDropdownTapHandler">[[account.name]]</gr-button>
<iron-dropdown id="dropdown"
vertical-align="top"
vertical-offset="25"

93
polygerrit-ui/app/elements/gr-button.html
View File

@ -15,18 +15,24 @@ 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-button">
<template strip-whitespace>
<style>
:host {
background: transparent;
border-radius: 3px;
background-color: #fff;
border: 1px solid #d1d2d3;
border-radius: 2px;
box-sizing: border-box;
color: #333;
cursor: pointer;
display: inline-block;
font: inherit;
font-family: var(--font-family);
font-size: 13px;
font-weight: bold;
outline-width: 0;
padding: .3em .65em;
position: relative;
text-align: center;
-moz-user-select: none;
@ -34,18 +40,60 @@ limitations under the License.
-webkit-user-select: none;
user-select: none;
}
:host([hidden]) {
display: none;
}
:host([primary]) {
background-color: #4d90fe;
border-color: #3079ed;
color: #fff;
}
:host([small]) {
font-size: 12px;
}
:host([link]) {
background-color: transparent;
border: none;
color: #00f;
font-size: inherit;
font-weight: normal;
padding: 0;
text-decoration: underline;
}
:host([loading]),
:host([disabled]) {
background-color: #efefef;
color: #aaa;
}
:host([disabled]) {
cursor: default;
pointer-events: none;
}
:host([loading]),
:host([loading][disabled]) {
cursor: wait;
}
:host(:focus),
:host(:hover) {
border-color: #666;
}
:host(:active) {
border-color: #d1d2d3;
color: #aaa;
}
:host([primary]:focus),
:host([primary]:hover) {
border-color: #00F;
}
:host([primary]:active) {
border-color: #0c2188;
color: #fff;
}
:host([primary][loading]),
:host([primary][disabled]) {
background-color: #7caeff;
border-color: transparent;
color: #fff;
}
</style>
<content></content>
@ -58,7 +106,40 @@ limitations under the License.
is: 'gr-button',
properties: {
disabled: {
type: Boolean,
observer: '_disabledChanged',
reflectToAttribute: true,
},
_enabledTabindex: {
type: String,
value: '0',
},
},
behaviors: [
Gerrit.KeyboardShortcutBehavior,
],
hostAttributes: {
role: 'button',
tabindex: '0',
},
_disabledChanged: function(disabled) {
if (disabled) {
this._enabledTabindex = this.getAttribute('tabindex');
}
this.setAttribute('tabindex', disabled ? '-1' : this._enabledTabindex);
},
_handleKey: function(e) {
switch (e.keyCode) {
case 32: // 'spacebar'
case 13: // 'enter'
e.preventDefault();
this.click();
}
},
});
})();

48
polygerrit-ui/app/elements/gr-change-actions.html
View File

@ -18,6 +18,7 @@ limitations under the License.
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../behaviors/rest-client-behavior.html">
<link rel="import" href="gr-ajax.html">
<link rel="import" href="gr-button.html">
<link rel="import" href="gr-confirm-rebase-dialog.html">
<link rel="import" href="gr-overlay.html">
<link rel="import" href="gr-request.html">
@ -28,39 +29,12 @@ limitations under the License.
:host {
display: block;
}
.primary {
background-color: #448aff;
border-color: #448aff;
color: #fff;
}
button:before {
gr-button:before {
content: attr(data-label);
}
button {
background-color: #f1f2f3;
border: 1px solid #aaa;
border-radius: 2px;
cursor: pointer;
font: inherit;
padding: .5em .75em;
}
button[loading],
button[disabled] {
opacity: .75;
}
button[loading] {
cursor: wait;
}
button[loading]:before {
gr-button[loading]:before {
content: attr(data-loading-label);
}
button[disabled] {
cursor: default;
}
button[loading],
button[loading][disabled] {
cursor: wait;
}
</style>
<gr-ajax id="actionsXHR"
url="[[_computeRevisionActionsPath(changeNum, patchNum)]]"
@ -68,21 +42,21 @@ limitations under the License.
loading="{{_loading}}"></gr-ajax>
<div>
<template is="dom-repeat" items="[[_computeActionValues(actions, 'change')]]" as="action">
<button title$="[[action.title]]"
class$="[[_computeButtonClass(action.__key)]]"
<gr-button title$="[[action.title]]"
primary$="[[_computePrimary(action.__key)]]"
hidden$="[[!action.enabled]]"
data-action-key$="[[action.__key]]"
data-label$="[[action.label]]"
on-tap="_handleActionTap"></button>
on-tap="_handleActionTap"></gr-button>
</template>
<template is="dom-repeat" items="[[_computeActionValues(_revisionActions, 'revision')]]" as="action">
<button title$="[[action.title]]"
class$="[[_computeButtonClass(action.__key)]]"
<gr-button title$="[[action.title]]"
primary$="[[_computePrimary(action.__key)]]"
disabled$="[[!action.enabled]]"
data-action-key$="[[action.__key]]"
data-label$="[[action.label]]"
data-loading-label$="[[_computeLoadingLabel(action.__key)]]"
on-tap="_handleActionTap"></button>
on-tap="_handleActionTap"></gr-button>
</template>
</div>
<gr-overlay id="overlay" with-backdrop>
@ -183,6 +157,10 @@ limitations under the License.
}[action];
},
_computePrimary: function(actionKey) {
return actionKey == 'submit';
},
_computeButtonClass: function(action) {
return action == 'submit' ? 'primary' : '';
},

2
polygerrit-ui/app/elements/gr-change-star.html
View File

@ -34,7 +34,7 @@ limitations under the License.
outline: none;
}
.starButton svg {
fill: #aab8c2;
fill: #ccc;
width: 1em;
height: 1em;
}

18
polygerrit-ui/app/elements/gr-confirm-dialog.html
View File

@ -15,6 +15,7 @@ limitations under the License.
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="gr-button.html">
<dom-module id="gr-confirm-dialog">
<template>
@ -35,25 +36,12 @@ limitations under the License.
display: flex;
justify-content: space-between;
}
button {
background-color: #f1f2f3;
border: 1px solid #aaa;
border-radius: 2px;
cursor: pointer;
font: inherit;
padding: .5em .75em;
}
.confirm {
background-color: #448aff;
border-color: #448aff;
color: #fff;
}
</style>
<div class="header"><content select=".header"></content></div>
<div class="mainContent"><content select=".main"></content></div>
<div class="footer">
<button class="confirm" on-tap="_handleConfirmTap">[[confirmLabel]]</button>
<button class="cancel" on-tap="_handleCancelTap">Cancel</button>
<gr-button primary on-tap="_handleConfirmTap">[[confirmLabel]]</gr-button>
<gr-button on-tap="_handleCancelTap">Cancel</gr-button>
</div>
</template>
<script>

19
polygerrit-ui/app/elements/gr-diff-comment.html
View File

@ -16,6 +16,7 @@ limitations under the License.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="gr-button.html">
<link rel="import" href="gr-date-formatter.html">
<link rel="import" href="gr-linked-text.html">
<link rel="import" href="gr-request.html">
@ -70,9 +71,7 @@ limitations under the License.
padding-top: 0;
}
.action {
cursor: pointer;
margin-right: .5em;
padding: .2em .6em .3em;
}
.danger {
display: flex;
@ -137,15 +136,15 @@ limitations under the License.
content="[[comment.message]]"
config="[[projectConfig.commentlinks]]"></gr-linked-text>
<div class="actions" hidden$="[[!showActions]]">
<button class="action reply" on-tap="_handleReply">Reply</button>
<button class="action quote" on-tap="_handleQuote">Quote</button>
<button class="action done" on-tap="_handleDone">Done</button>
<button class="action edit" on-tap="_handleEdit">Edit</button>
<button class="action save" on-tap="_handleSave"
disabled$="[[_computeSaveDisabled(_editDraft)]]">Save</button>
<button class="action cancel" on-tap="_handleCancel" hidden>Cancel</button>
<gr-button class="action reply" on-tap="_handleReply">Reply</gr-button>
<gr-button class="action quote" on-tap="_handleQuote">Quote</gr-button>
<gr-button class="action done" on-tap="_handleDone">Done</gr-button>
<gr-button class="action edit" on-tap="_handleEdit">Edit</gr-button>
<gr-button class="action save" on-tap="_handleSave"
disabled$="[[_computeSaveDisabled(_editDraft)]]">Save</gr-button>
<gr-button class="action cancel" on-tap="_handleCancel" hidden>Cancel</gr-button>
<div class="danger">
<button class="action discard" on-tap="_handleDiscard">Discard</button>
<gr-button class="action discard" on-tap="_handleDiscard">Discard</gr-button>
</div>
</div>
</div>

27
polygerrit-ui/app/elements/gr-diff-preferences.html
View File

@ -16,6 +16,7 @@ limitations under the License.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="gr-button.html">
<dom-module id="gr-diff-preferences">
<template>
@ -27,7 +28,6 @@ limitations under the License.
opacity: .5;
pointer-events: none;
}
button,
input,
select {
font: inherit;
@ -35,19 +35,6 @@ limitations under the License.
input[type="number"] {
width: 4em;
}
button {
background-color: #f1f2f3;
border: 1px solid #aaa;
border-radius: 2px;
cursor: pointer;
font: inherit;
padding: .2em .75em;
}
button.primary {
background: #448aff;
border: none;
color: #fff;
}
.header,
.actions {
padding: 1em 1.5em;
@ -75,11 +62,7 @@ limitations under the License.
.actions {
border-top: 1px solid #ddd;
display: flex;
}
.cancel {
display: flex;
flex: 1;
justify-content: flex-end;
justify-content: space-between;
}
</style>
<div class="header">
@ -119,10 +102,8 @@ limitations under the License.
</div>
</div>
<div class="actions">
<button class="primary" on-tap="_handleSave">Save</button>
<div class="cancel">
<button on-tap="_handleCancel">Cancel</button>
</div>
<gr-button primary on-tap="_handleSave">Save</gr-button>
<gr-button on-tap="_handleCancel">Cancel</gr-button>
</div>
</template>
<script>

20
polygerrit-ui/app/elements/gr-diff-view.html
View File

@ -19,6 +19,7 @@ limitations under the License.
<link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
<link rel="import" href="../behaviors/rest-client-behavior.html">
<link rel="import" href="gr-ajax.html">
<link rel="import" href="gr-button.html">
<link rel="import" href="gr-diff.html">
<link rel="import" href="gr-request.html">
@ -33,6 +34,11 @@ limitations under the License.
margin-top: 1em;
padding: .75em var(--default-horizontal-margin);
}
.reviewed {
display: inline-block;
margin: 0 .25em;
vertical-align: .15em;
}
.jumpToFileContainer {
display: inline-block;
}
@ -77,11 +83,10 @@ limitations under the License.
background-color: #fff;
color: #000;
}
button {
background: none;
border: none;
gr-button {
font: inherit;
padding: .3em 0;
text-decoration: none;
}
</style>
<gr-ajax id="changeDetailXHR"
@ -100,13 +105,16 @@ limitations under the License.
<h3>
<a href$="[[_computeChangePath(_changeNum)]]">[[_changeNum]]</a><span>:</span>
<span>[[_change.subject]]</span> —
<input id="reviewed" type="checkbox" on-change="_handleReviewedChange"
<input id="reviewed"
class="reviewed"
type="checkbox"
on-change="_handleReviewedChange"
hidden$="[[!_loggedIn]]" hidden>
<div class="jumpToFileContainer">
<button class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
<gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
<span>[[_path]]</span>
<span class="downArrow">&#9660;</span>
</button>
</gr-button>
<iron-dropdown id="dropdown" vertical-align="top" vertical-offset="25">
<div class="dropdown-content">
<template is="dom-repeat" items="[[_fileList]]" as="path">

6
polygerrit-ui/app/elements/gr-message.html
View File

@ -16,6 +16,7 @@ limitations under the License.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="gr-account-link.html">
<link rel="import" href="gr-button.html">
<link rel="import" href="gr-comment-list.html">
<link rel="import" href="gr-date-formatter.html">
<link rel="import" href="gr-linked-text.html">
@ -91,9 +92,6 @@ limitations under the License.
.replyContainer {
padding: .5em 0 1em;
}
.reply {
padding: .2em .6em .3em;
}
</style>
<div class$="[[_computeClass(expanded, showAvatar)]]">
<gr-avatar account="[[message.author]]" image-size="100"></gr-avatar>
@ -115,7 +113,7 @@ limitations under the License.
</a>
</div>
<div class="replyContainer" hidden$="[[!showReplyButton]]" hidden>
<button class="reply" on-tap="_handleReplyTap">Reply</button>
<gr-button small on-tap="_handleReplyTap">Reply</gr-button>
</div>
</div>
</template>

42
polygerrit-ui/app/elements/gr-reply-dropdown.html
View File

@ -20,6 +20,7 @@ limitations under the License.
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../behaviors/rest-client-behavior.html">
<link rel="import" href="gr-ajax.html">
<link rel="import" href="gr-button.html">
<link rel="import" href="gr-request.html">
<dom-module id="gr-reply-dropdown">
@ -38,14 +39,6 @@ limitations under the License.
box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
width: 40em;
}
button {
background-color: #f1f2f3;
border: 1px solid #aaa;
border-radius: 2px;
cursor: pointer;
font: inherit;
padding: .2em .5em;
}
section {
border-top: 1px solid #ddd;
padding: .5em .75em;
@ -73,25 +66,18 @@ limitations under the License.
iron-selector {
display: inline-flex;
}
iron-selector > button {
background-color: #fff;
border: 1px solid #ddd;
border-left: none;
padding: .25em 0;
cursor: pointer;
width: 3em;
text-align: center;
iron-selector > gr-button {
margin-right: .25em;
}
iron-selector > button:first-of-type {
iron-selector > gr-button:first-of-type {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-left: 1px solid #ddd;
}
iron-selector > button:last-of-type {
iron-selector > gr-button:last-of-type {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
iron-selector > button.iron-selected {
iron-selector > gr-button.iron-selected {
background-color: #ddd;
}
.draftsContainer h3 {
@ -99,22 +85,18 @@ limitations under the License.
}
.actionsContainer {
display: flex;
justify-content: space-between;
}
.action:link,
.action:visited {
color: #00e;
}
.danger {
display: flex;
flex: 1;
justify-content: flex-end;
}
</style>
<template>
<gr-ajax id="draftsXHR"
url="[[_computeDraftsURL(changeNum)]]"
last-response="{{_drafts}}"></gr-ajax>
<button id="trigger" on-tap="_showPopupTapHandler">Reply</button>
<gr-button id="trigger" on-tap="_showPopupTapHandler">Reply</gr-button>
<iron-dropdown id="dropdown"
vertical-align="top"
vertical-offset="25"
@ -139,7 +121,7 @@ limitations under the License.
<template is="dom-repeat"
items="[[_computePermittedLabelValues(permittedLabels, label)]]"
as="value">
<button data-value$="[[value]]">[[value]]</button>
<gr-button data-value$="[[value]]">[[value]]</gr-button>
</template>
</iron-selector>
</div>
@ -153,10 +135,8 @@ limitations under the License.
patch-num="[[patchNum]]"></gr-comment-list>
</section>
<section class="actionsContainer">
<button class="action send" on-tap="_sendTapHandler">Send</button>
<div class="danger">
<button class="action cancel" on-tap="_cancelTapHandler">Cancel</button>
</div>
<gr-button primary class="action send" on-tap="_sendTapHandler">Send</gr-button>
<gr-button class="action cancel" on-tap="_cancelTapHandler">Cancel</gr-button>
</section>
</div>
</iron-dropdown>

14
polygerrit-ui/app/elements/gr-search-bar.html
View File

@ -17,6 +17,7 @@ limitations under the License.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
<link rel="import" href="gr-button.html">
<dom-module id="gr-search-bar">
<template>
@ -28,17 +29,16 @@ limitations under the License.
display: flex;
margin-left: 3em;
}
input,
button {
border: 1px solid #aaa;
font: inherit;
padding: .2em .5em;
input {
border: 1px solid #d1d2d3;
outline: none;
}
input {
flex: 1;
font: inherit;
border-radius: 2px 0 0 2px;
}
button {
gr-button {
background-color: #f1f2f3;
border-radius: 0 2px 2px 0;
border-left-width: 0;
@ -46,7 +46,7 @@ limitations under the License.
</style>
<form>
<input is="iron-input" id="searchInput" bind-value="{{_inputVal}}">
<button type="submit" id="searchButton">Search</button>
<gr-button id="searchButton">Search</gr-button>
</form>
</template>
<script>

6
polygerrit-ui/app/test/gr-change-actions-test.html
View File

@ -98,7 +98,7 @@ limitations under the License.
test('submit and rebase buttons show', function(done) {
element.async(function() {
var buttonEls = Polymer.dom(element.root).querySelectorAll('button');
var buttonEls = Polymer.dom(element.root).querySelectorAll('gr-button');
assert.equal(buttonEls.length, 2);
assert.isFalse(element.hidden);
done();
@ -107,7 +107,7 @@ limitations under the License.
test('submit change', function(done) {
element.async(function() {
var submitButton = element.$$('button[data-action-key="submit"]');
var submitButton = element.$$('gr-button[data-action-key="submit"]');
assert.ok(submitButton);
MockInteractions.tap(submitButton);
server.respond();
@ -121,7 +121,7 @@ limitations under the License.
test('rebase change', function(done) {
element.async(function() {
var rebaseButton = element.$$('button[data-action-key="rebase"]');
var rebaseButton = element.$$('gr-button[data-action-key="rebase"]');
MockInteractions.tap(rebaseButton);
element.$.confirmRebase.base = '1234';

4
polygerrit-ui/app/test/gr-confirm-dialog-test.html
View File

@ -45,8 +45,8 @@ limitations under the License.
element.addEventListener('confirm', handler);
element.addEventListener('cancel', handler);
MockInteractions.tap(element.$$('.confirm'));
MockInteractions.tap(element.$$('.cancel'));
MockInteractions.tap(element.$$('gr-button[primary]'));
MockInteractions.tap(element.$$('gr-button:not([primary])'));
});
});

4
polygerrit-ui/app/test/gr-diff-preferences-test.html
View File

@ -68,8 +68,8 @@ limitations under the License.
Promise.all([savePromise, cancelPromise]).then(function() {
done();
});
MockInteractions.tap(element.$$('button.primary'));
MockInteractions.tap(element.$$('.cancel button'));
MockInteractions.tap(element.$$('gr-button[primary]'));
MockInteractions.tap(element.$$('gr-button:not([primary])'));
});
});
</script>

2
polygerrit-ui/app/test/gr-download-dialog-test.html
View File

@ -98,7 +98,7 @@ limitations under the License.
element.addEventListener('close', function() {
done();
});
MockInteractions.tap(element.$$('.closeButtonContainer a'));
MockInteractions.tap(element.$$('.closeButtonContainer gr-button'));
});
test('tab selection', function() {

2
polygerrit-ui/app/test/gr-message-test.html
View File

@ -57,7 +57,7 @@ limitations under the License.
assert.deepEqual(e.detail.message, element.message);
done();
});
MockInteractions.tap(element.$$('button.reply'));
MockInteractions.tap(element.$$('.replyContainer gr-button'));
});
});

6
polygerrit-ui/app/test/gr-reply-dropdown-test.html
View File

@ -126,9 +126,11 @@ limitations under the License.
}
element.draft = 'I wholeheartedly disapprove';
MockInteractions.tap(element.$$(
'iron-selector[data-label="Code-Review"] > button[data-value="-1"]'));
'iron-selector[data-label="Code-Review"] > ' +
'gr-button[data-value="-1"]'));
MockInteractions.tap(element.$$(
'iron-selector[data-label="Verified"] > button[data-value="-1"]'));
'iron-selector[data-label="Verified"] > ' +
'gr-button[data-value="-1"]'));
// This is needed on non-Blink engines most likely due to the ways in
// which the dom-repeat elements are stamped.