Move the rest of the buttons to the common gr-button element
+ Plus some minor stylistic fixes found while migrating. Bug: Issue 3899 Change-Id: I5e38510fdf8ad034b7fc9db1f8cac3d35cb6b3bf
This commit is contained in:
parent
bb045f6154
commit
b7defbdd5d
@ -56,7 +56,8 @@ limitations under the License.
|
|||||||
target.tagName == 'TEXTAREA' ||
|
target.tagName == 'TEXTAREA' ||
|
||||||
target.tagName == 'SELECT' ||
|
target.tagName == 'SELECT' ||
|
||||||
target.tagName == 'BUTTON' ||
|
target.tagName == 'BUTTON' ||
|
||||||
target.tagName == 'A';
|
target.tagName == 'A' ||
|
||||||
|
target.tagName == 'GR-BUTTON';
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||||||
|
|
||||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||||
<link rel="import" href="../bower_components/iron-dropdown/iron-dropdown.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">
|
<dom-module id="gr-account-dropdown">
|
||||||
<style>
|
<style>
|
||||||
@ -23,8 +24,7 @@ limitations under the License.
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.dropdown-trigger {
|
.dropdown-trigger {
|
||||||
color: #00e;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
.dropdown-content {
|
.dropdown-content {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@ -58,8 +58,8 @@ limitations under the License.
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<button class="dropdown-trigger" id="trigger"
|
<gr-button link class="dropdown-trigger" id="trigger"
|
||||||
on-tap="_showDropdownTapHandler">[[account.name]]</button>
|
on-tap="_showDropdownTapHandler">[[account.name]]</gr-button>
|
||||||
<iron-dropdown id="dropdown"
|
<iron-dropdown id="dropdown"
|
||||||
vertical-align="top"
|
vertical-align="top"
|
||||||
vertical-offset="25"
|
vertical-offset="25"
|
||||||
|
@ -15,18 +15,24 @@ limitations under the License.
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||||
|
<link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
|
||||||
|
|
||||||
<dom-module id="gr-button">
|
<dom-module id="gr-button">
|
||||||
<template strip-whitespace>
|
<template strip-whitespace>
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
background: transparent;
|
background-color: #fff;
|
||||||
border-radius: 3px;
|
border: 1px solid #d1d2d3;
|
||||||
|
border-radius: 2px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
color: #333;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font: inherit;
|
font-family: var(--font-family);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
outline-width: 0;
|
outline-width: 0;
|
||||||
|
padding: .3em .65em;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
@ -34,18 +40,60 @@ limitations under the License.
|
|||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
:host([hidden]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
:host([primary]) {
|
:host([primary]) {
|
||||||
|
background-color: #4d90fe;
|
||||||
|
border-color: #3079ed;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
:host([small]) {
|
:host([small]) {
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
:host([link]) {
|
:host([link]) {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
color: #00f;
|
color: #00f;
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 0;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
:host([loading]),
|
||||||
:host([disabled]) {
|
: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>
|
</style>
|
||||||
<content></content>
|
<content></content>
|
||||||
@ -58,7 +106,40 @@ limitations under the License.
|
|||||||
is: 'gr-button',
|
is: 'gr-button',
|
||||||
|
|
||||||
properties: {
|
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();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||||||
<link rel="import" href="../bower_components/iron-input/iron-input.html">
|
<link rel="import" href="../bower_components/iron-input/iron-input.html">
|
||||||
<link rel="import" href="../behaviors/rest-client-behavior.html">
|
<link rel="import" href="../behaviors/rest-client-behavior.html">
|
||||||
<link rel="import" href="gr-ajax.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-confirm-rebase-dialog.html">
|
||||||
<link rel="import" href="gr-overlay.html">
|
<link rel="import" href="gr-overlay.html">
|
||||||
<link rel="import" href="gr-request.html">
|
<link rel="import" href="gr-request.html">
|
||||||
@ -28,39 +29,12 @@ limitations under the License.
|
|||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.primary {
|
gr-button:before {
|
||||||
background-color: #448aff;
|
|
||||||
border-color: #448aff;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
button:before {
|
|
||||||
content: attr(data-label);
|
content: attr(data-label);
|
||||||
}
|
}
|
||||||
button {
|
gr-button[loading]:before {
|
||||||
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 {
|
|
||||||
content: attr(data-loading-label);
|
content: attr(data-loading-label);
|
||||||
}
|
}
|
||||||
button[disabled] {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
button[loading],
|
|
||||||
button[loading][disabled] {
|
|
||||||
cursor: wait;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<gr-ajax id="actionsXHR"
|
<gr-ajax id="actionsXHR"
|
||||||
url="[[_computeRevisionActionsPath(changeNum, patchNum)]]"
|
url="[[_computeRevisionActionsPath(changeNum, patchNum)]]"
|
||||||
@ -68,21 +42,21 @@ limitations under the License.
|
|||||||
loading="{{_loading}}"></gr-ajax>
|
loading="{{_loading}}"></gr-ajax>
|
||||||
<div>
|
<div>
|
||||||
<template is="dom-repeat" items="[[_computeActionValues(actions, 'change')]]" as="action">
|
<template is="dom-repeat" items="[[_computeActionValues(actions, 'change')]]" as="action">
|
||||||
<button title$="[[action.title]]"
|
<gr-button title$="[[action.title]]"
|
||||||
class$="[[_computeButtonClass(action.__key)]]"
|
primary$="[[_computePrimary(action.__key)]]"
|
||||||
hidden$="[[!action.enabled]]"
|
hidden$="[[!action.enabled]]"
|
||||||
data-action-key$="[[action.__key]]"
|
data-action-key$="[[action.__key]]"
|
||||||
data-label$="[[action.label]]"
|
data-label$="[[action.label]]"
|
||||||
on-tap="_handleActionTap"></button>
|
on-tap="_handleActionTap"></gr-button>
|
||||||
</template>
|
</template>
|
||||||
<template is="dom-repeat" items="[[_computeActionValues(_revisionActions, 'revision')]]" as="action">
|
<template is="dom-repeat" items="[[_computeActionValues(_revisionActions, 'revision')]]" as="action">
|
||||||
<button title$="[[action.title]]"
|
<gr-button title$="[[action.title]]"
|
||||||
class$="[[_computeButtonClass(action.__key)]]"
|
primary$="[[_computePrimary(action.__key)]]"
|
||||||
disabled$="[[!action.enabled]]"
|
disabled$="[[!action.enabled]]"
|
||||||
data-action-key$="[[action.__key]]"
|
data-action-key$="[[action.__key]]"
|
||||||
data-label$="[[action.label]]"
|
data-label$="[[action.label]]"
|
||||||
data-loading-label$="[[_computeLoadingLabel(action.__key)]]"
|
data-loading-label$="[[_computeLoadingLabel(action.__key)]]"
|
||||||
on-tap="_handleActionTap"></button>
|
on-tap="_handleActionTap"></gr-button>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<gr-overlay id="overlay" with-backdrop>
|
<gr-overlay id="overlay" with-backdrop>
|
||||||
@ -183,6 +157,10 @@ limitations under the License.
|
|||||||
}[action];
|
}[action];
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_computePrimary: function(actionKey) {
|
||||||
|
return actionKey == 'submit';
|
||||||
|
},
|
||||||
|
|
||||||
_computeButtonClass: function(action) {
|
_computeButtonClass: function(action) {
|
||||||
return action == 'submit' ? 'primary' : '';
|
return action == 'submit' ? 'primary' : '';
|
||||||
},
|
},
|
||||||
|
@ -34,7 +34,7 @@ limitations under the License.
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.starButton svg {
|
.starButton svg {
|
||||||
fill: #aab8c2;
|
fill: #ccc;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
|
@ -15,6 +15,7 @@ limitations under the License.
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||||
|
<link rel="import" href="gr-button.html">
|
||||||
|
|
||||||
<dom-module id="gr-confirm-dialog">
|
<dom-module id="gr-confirm-dialog">
|
||||||
<template>
|
<template>
|
||||||
@ -35,25 +36,12 @@ limitations under the License.
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
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>
|
</style>
|
||||||
<div class="header"><content select=".header"></content></div>
|
<div class="header"><content select=".header"></content></div>
|
||||||
<div class="mainContent"><content select=".main"></content></div>
|
<div class="mainContent"><content select=".main"></content></div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<button class="confirm" on-tap="_handleConfirmTap">[[confirmLabel]]</button>
|
<gr-button primary on-tap="_handleConfirmTap">[[confirmLabel]]</gr-button>
|
||||||
<button class="cancel" on-tap="_handleCancelTap">Cancel</button>
|
<gr-button on-tap="_handleCancelTap">Cancel</gr-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||||||
|
|
||||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
<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="../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-date-formatter.html">
|
||||||
<link rel="import" href="gr-linked-text.html">
|
<link rel="import" href="gr-linked-text.html">
|
||||||
<link rel="import" href="gr-request.html">
|
<link rel="import" href="gr-request.html">
|
||||||
@ -70,9 +71,7 @@ limitations under the License.
|
|||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
.action {
|
.action {
|
||||||
cursor: pointer;
|
|
||||||
margin-right: .5em;
|
margin-right: .5em;
|
||||||
padding: .2em .6em .3em;
|
|
||||||
}
|
}
|
||||||
.danger {
|
.danger {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -137,15 +136,15 @@ limitations under the License.
|
|||||||
content="[[comment.message]]"
|
content="[[comment.message]]"
|
||||||
config="[[projectConfig.commentlinks]]"></gr-linked-text>
|
config="[[projectConfig.commentlinks]]"></gr-linked-text>
|
||||||
<div class="actions" hidden$="[[!showActions]]">
|
<div class="actions" hidden$="[[!showActions]]">
|
||||||
<button class="action reply" on-tap="_handleReply">Reply</button>
|
<gr-button class="action reply" on-tap="_handleReply">Reply</gr-button>
|
||||||
<button class="action quote" on-tap="_handleQuote">Quote</button>
|
<gr-button class="action quote" on-tap="_handleQuote">Quote</gr-button>
|
||||||
<button class="action done" on-tap="_handleDone">Done</button>
|
<gr-button class="action done" on-tap="_handleDone">Done</gr-button>
|
||||||
<button class="action edit" on-tap="_handleEdit">Edit</button>
|
<gr-button class="action edit" on-tap="_handleEdit">Edit</gr-button>
|
||||||
<button class="action save" on-tap="_handleSave"
|
<gr-button class="action save" on-tap="_handleSave"
|
||||||
disabled$="[[_computeSaveDisabled(_editDraft)]]">Save</button>
|
disabled$="[[_computeSaveDisabled(_editDraft)]]">Save</gr-button>
|
||||||
<button class="action cancel" on-tap="_handleCancel" hidden>Cancel</button>
|
<gr-button class="action cancel" on-tap="_handleCancel" hidden>Cancel</gr-button>
|
||||||
<div class="danger">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||||||
|
|
||||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||||
<link rel="import" href="../bower_components/iron-input/iron-input.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">
|
<dom-module id="gr-diff-preferences">
|
||||||
<template>
|
<template>
|
||||||
@ -27,7 +28,6 @@ limitations under the License.
|
|||||||
opacity: .5;
|
opacity: .5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
button,
|
|
||||||
input,
|
input,
|
||||||
select {
|
select {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
@ -35,19 +35,6 @@ limitations under the License.
|
|||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
width: 4em;
|
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,
|
.header,
|
||||||
.actions {
|
.actions {
|
||||||
padding: 1em 1.5em;
|
padding: 1em 1.5em;
|
||||||
@ -75,11 +62,7 @@ limitations under the License.
|
|||||||
.actions {
|
.actions {
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
justify-content: space-between;
|
||||||
.cancel {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@ -119,10 +102,8 @@ limitations under the License.
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button class="primary" on-tap="_handleSave">Save</button>
|
<gr-button primary on-tap="_handleSave">Save</gr-button>
|
||||||
<div class="cancel">
|
<gr-button on-tap="_handleCancel">Cancel</gr-button>
|
||||||
<button on-tap="_handleCancel">Cancel</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -19,6 +19,7 @@ limitations under the License.
|
|||||||
<link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
|
<link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
|
||||||
<link rel="import" href="../behaviors/rest-client-behavior.html">
|
<link rel="import" href="../behaviors/rest-client-behavior.html">
|
||||||
<link rel="import" href="gr-ajax.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-diff.html">
|
||||||
<link rel="import" href="gr-request.html">
|
<link rel="import" href="gr-request.html">
|
||||||
|
|
||||||
@ -33,6 +34,11 @@ limitations under the License.
|
|||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
padding: .75em var(--default-horizontal-margin);
|
padding: .75em var(--default-horizontal-margin);
|
||||||
}
|
}
|
||||||
|
.reviewed {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 .25em;
|
||||||
|
vertical-align: .15em;
|
||||||
|
}
|
||||||
.jumpToFileContainer {
|
.jumpToFileContainer {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -77,11 +83,10 @@ limitations under the License.
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
button {
|
gr-button {
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font: inherit;
|
font: inherit;
|
||||||
padding: .3em 0;
|
padding: .3em 0;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<gr-ajax id="changeDetailXHR"
|
<gr-ajax id="changeDetailXHR"
|
||||||
@ -100,13 +105,16 @@ limitations under the License.
|
|||||||
<h3>
|
<h3>
|
||||||
<a href$="[[_computeChangePath(_changeNum)]]">[[_changeNum]]</a><span>:</span>
|
<a href$="[[_computeChangePath(_changeNum)]]">[[_changeNum]]</a><span>:</span>
|
||||||
<span>[[_change.subject]]</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>
|
hidden$="[[!_loggedIn]]" hidden>
|
||||||
<div class="jumpToFileContainer">
|
<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>[[_path]]</span>
|
||||||
<span class="downArrow">▼</span>
|
<span class="downArrow">▼</span>
|
||||||
</button>
|
</gr-button>
|
||||||
<iron-dropdown id="dropdown" vertical-align="top" vertical-offset="25">
|
<iron-dropdown id="dropdown" vertical-align="top" vertical-offset="25">
|
||||||
<div class="dropdown-content">
|
<div class="dropdown-content">
|
||||||
<template is="dom-repeat" items="[[_fileList]]" as="path">
|
<template is="dom-repeat" items="[[_fileList]]" as="path">
|
||||||
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||||||
|
|
||||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||||
<link rel="import" href="gr-account-link.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-comment-list.html">
|
||||||
<link rel="import" href="gr-date-formatter.html">
|
<link rel="import" href="gr-date-formatter.html">
|
||||||
<link rel="import" href="gr-linked-text.html">
|
<link rel="import" href="gr-linked-text.html">
|
||||||
@ -91,9 +92,6 @@ limitations under the License.
|
|||||||
.replyContainer {
|
.replyContainer {
|
||||||
padding: .5em 0 1em;
|
padding: .5em 0 1em;
|
||||||
}
|
}
|
||||||
.reply {
|
|
||||||
padding: .2em .6em .3em;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<div class$="[[_computeClass(expanded, showAvatar)]]">
|
<div class$="[[_computeClass(expanded, showAvatar)]]">
|
||||||
<gr-avatar account="[[message.author]]" image-size="100"></gr-avatar>
|
<gr-avatar account="[[message.author]]" image-size="100"></gr-avatar>
|
||||||
@ -115,7 +113,7 @@ limitations under the License.
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="replyContainer" hidden$="[[!showReplyButton]]" hidden>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -20,6 +20,7 @@ limitations under the License.
|
|||||||
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
|
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
|
||||||
<link rel="import" href="../behaviors/rest-client-behavior.html">
|
<link rel="import" href="../behaviors/rest-client-behavior.html">
|
||||||
<link rel="import" href="gr-ajax.html">
|
<link rel="import" href="gr-ajax.html">
|
||||||
|
<link rel="import" href="gr-button.html">
|
||||||
<link rel="import" href="gr-request.html">
|
<link rel="import" href="gr-request.html">
|
||||||
|
|
||||||
<dom-module id="gr-reply-dropdown">
|
<dom-module id="gr-reply-dropdown">
|
||||||
@ -38,14 +39,6 @@ limitations under the License.
|
|||||||
box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
|
box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
|
||||||
width: 40em;
|
width: 40em;
|
||||||
}
|
}
|
||||||
button {
|
|
||||||
background-color: #f1f2f3;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
border-radius: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
font: inherit;
|
|
||||||
padding: .2em .5em;
|
|
||||||
}
|
|
||||||
section {
|
section {
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
padding: .5em .75em;
|
padding: .5em .75em;
|
||||||
@ -73,25 +66,18 @@ limitations under the License.
|
|||||||
iron-selector {
|
iron-selector {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
iron-selector > button {
|
iron-selector > gr-button {
|
||||||
background-color: #fff;
|
margin-right: .25em;
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-left: none;
|
|
||||||
padding: .25em 0;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 3em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
iron-selector > button:first-of-type {
|
iron-selector > gr-button:first-of-type {
|
||||||
border-top-left-radius: 2px;
|
border-top-left-radius: 2px;
|
||||||
border-bottom-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-top-right-radius: 2px;
|
||||||
border-bottom-right-radius: 2px;
|
border-bottom-right-radius: 2px;
|
||||||
}
|
}
|
||||||
iron-selector > button.iron-selected {
|
iron-selector > gr-button.iron-selected {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
}
|
}
|
||||||
.draftsContainer h3 {
|
.draftsContainer h3 {
|
||||||
@ -99,22 +85,18 @@ limitations under the License.
|
|||||||
}
|
}
|
||||||
.actionsContainer {
|
.actionsContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.action:link,
|
.action:link,
|
||||||
.action:visited {
|
.action:visited {
|
||||||
color: #00e;
|
color: #00e;
|
||||||
}
|
}
|
||||||
.danger {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<gr-ajax id="draftsXHR"
|
<gr-ajax id="draftsXHR"
|
||||||
url="[[_computeDraftsURL(changeNum)]]"
|
url="[[_computeDraftsURL(changeNum)]]"
|
||||||
last-response="{{_drafts}}"></gr-ajax>
|
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"
|
<iron-dropdown id="dropdown"
|
||||||
vertical-align="top"
|
vertical-align="top"
|
||||||
vertical-offset="25"
|
vertical-offset="25"
|
||||||
@ -139,7 +121,7 @@ limitations under the License.
|
|||||||
<template is="dom-repeat"
|
<template is="dom-repeat"
|
||||||
items="[[_computePermittedLabelValues(permittedLabels, label)]]"
|
items="[[_computePermittedLabelValues(permittedLabels, label)]]"
|
||||||
as="value">
|
as="value">
|
||||||
<button data-value$="[[value]]">[[value]]</button>
|
<gr-button data-value$="[[value]]">[[value]]</gr-button>
|
||||||
</template>
|
</template>
|
||||||
</iron-selector>
|
</iron-selector>
|
||||||
</div>
|
</div>
|
||||||
@ -153,10 +135,8 @@ limitations under the License.
|
|||||||
patch-num="[[patchNum]]"></gr-comment-list>
|
patch-num="[[patchNum]]"></gr-comment-list>
|
||||||
</section>
|
</section>
|
||||||
<section class="actionsContainer">
|
<section class="actionsContainer">
|
||||||
<button class="action send" on-tap="_sendTapHandler">Send</button>
|
<gr-button primary class="action send" on-tap="_sendTapHandler">Send</gr-button>
|
||||||
<div class="danger">
|
<gr-button class="action cancel" on-tap="_cancelTapHandler">Cancel</gr-button>
|
||||||
<button class="action cancel" on-tap="_cancelTapHandler">Cancel</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</iron-dropdown>
|
</iron-dropdown>
|
||||||
|
@ -17,6 +17,7 @@ limitations under the License.
|
|||||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||||
<link rel="import" href="../bower_components/iron-input/iron-input.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="../behaviors/keyboard-shortcut-behavior.html">
|
||||||
|
<link rel="import" href="gr-button.html">
|
||||||
|
|
||||||
<dom-module id="gr-search-bar">
|
<dom-module id="gr-search-bar">
|
||||||
<template>
|
<template>
|
||||||
@ -28,17 +29,16 @@ limitations under the License.
|
|||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 3em;
|
margin-left: 3em;
|
||||||
}
|
}
|
||||||
input,
|
input {
|
||||||
button {
|
border: 1px solid #d1d2d3;
|
||||||
border: 1px solid #aaa;
|
outline: none;
|
||||||
font: inherit;
|
|
||||||
padding: .2em .5em;
|
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
font: inherit;
|
||||||
border-radius: 2px 0 0 2px;
|
border-radius: 2px 0 0 2px;
|
||||||
}
|
}
|
||||||
button {
|
gr-button {
|
||||||
background-color: #f1f2f3;
|
background-color: #f1f2f3;
|
||||||
border-radius: 0 2px 2px 0;
|
border-radius: 0 2px 2px 0;
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
@ -46,7 +46,7 @@ limitations under the License.
|
|||||||
</style>
|
</style>
|
||||||
<form>
|
<form>
|
||||||
<input is="iron-input" id="searchInput" bind-value="{{_inputVal}}">
|
<input is="iron-input" id="searchInput" bind-value="{{_inputVal}}">
|
||||||
<button type="submit" id="searchButton">Search</button>
|
<gr-button id="searchButton">Search</gr-button>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -98,7 +98,7 @@ limitations under the License.
|
|||||||
|
|
||||||
test('submit and rebase buttons show', function(done) {
|
test('submit and rebase buttons show', function(done) {
|
||||||
element.async(function() {
|
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.equal(buttonEls.length, 2);
|
||||||
assert.isFalse(element.hidden);
|
assert.isFalse(element.hidden);
|
||||||
done();
|
done();
|
||||||
@ -107,7 +107,7 @@ limitations under the License.
|
|||||||
|
|
||||||
test('submit change', function(done) {
|
test('submit change', function(done) {
|
||||||
element.async(function() {
|
element.async(function() {
|
||||||
var submitButton = element.$$('button[data-action-key="submit"]');
|
var submitButton = element.$$('gr-button[data-action-key="submit"]');
|
||||||
assert.ok(submitButton);
|
assert.ok(submitButton);
|
||||||
MockInteractions.tap(submitButton);
|
MockInteractions.tap(submitButton);
|
||||||
server.respond();
|
server.respond();
|
||||||
@ -121,7 +121,7 @@ limitations under the License.
|
|||||||
|
|
||||||
test('rebase change', function(done) {
|
test('rebase change', function(done) {
|
||||||
element.async(function() {
|
element.async(function() {
|
||||||
var rebaseButton = element.$$('button[data-action-key="rebase"]');
|
var rebaseButton = element.$$('gr-button[data-action-key="rebase"]');
|
||||||
MockInteractions.tap(rebaseButton);
|
MockInteractions.tap(rebaseButton);
|
||||||
|
|
||||||
element.$.confirmRebase.base = '1234';
|
element.$.confirmRebase.base = '1234';
|
||||||
|
@ -45,8 +45,8 @@ limitations under the License.
|
|||||||
element.addEventListener('confirm', handler);
|
element.addEventListener('confirm', handler);
|
||||||
element.addEventListener('cancel', handler);
|
element.addEventListener('cancel', handler);
|
||||||
|
|
||||||
MockInteractions.tap(element.$$('.confirm'));
|
MockInteractions.tap(element.$$('gr-button[primary]'));
|
||||||
MockInteractions.tap(element.$$('.cancel'));
|
MockInteractions.tap(element.$$('gr-button:not([primary])'));
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -68,8 +68,8 @@ limitations under the License.
|
|||||||
Promise.all([savePromise, cancelPromise]).then(function() {
|
Promise.all([savePromise, cancelPromise]).then(function() {
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
MockInteractions.tap(element.$$('button.primary'));
|
MockInteractions.tap(element.$$('gr-button[primary]'));
|
||||||
MockInteractions.tap(element.$$('.cancel button'));
|
MockInteractions.tap(element.$$('gr-button:not([primary])'));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -98,7 +98,7 @@ limitations under the License.
|
|||||||
element.addEventListener('close', function() {
|
element.addEventListener('close', function() {
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
MockInteractions.tap(element.$$('.closeButtonContainer a'));
|
MockInteractions.tap(element.$$('.closeButtonContainer gr-button'));
|
||||||
});
|
});
|
||||||
|
|
||||||
test('tab selection', function() {
|
test('tab selection', function() {
|
||||||
|
@ -57,7 +57,7 @@ limitations under the License.
|
|||||||
assert.deepEqual(e.detail.message, element.message);
|
assert.deepEqual(e.detail.message, element.message);
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
MockInteractions.tap(element.$$('button.reply'));
|
MockInteractions.tap(element.$$('.replyContainer gr-button'));
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -126,9 +126,11 @@ limitations under the License.
|
|||||||
}
|
}
|
||||||
element.draft = 'I wholeheartedly disapprove';
|
element.draft = 'I wholeheartedly disapprove';
|
||||||
MockInteractions.tap(element.$$(
|
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.$$(
|
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
|
// This is needed on non-Blink engines most likely due to the ways in
|
||||||
// which the dom-repeat elements are stamped.
|
// which the dom-repeat elements are stamped.
|
||||||
|
Loading…
Reference in New Issue
Block a user