Major refactor of button styles
Declares several CSS variables for styling buttons throughout the app
and uses them.
Removes the concept of a 'tertiary' button -- primary and secondary have
the exact same styling, so all tertiary buttons are changed to secondary
buttons and the existing secondary button (only replyBtn) is changed to
a primary button.
Also removes some of the many ways to modify a button color and
background -- there is no need for mixins to specifically style various
attributes of the paper-button when the ability to apply any styles
directly to it (via @apply --gr-button) is already supported.
Change-Id: I19a4114764df80b06175032b228a6ec63b414089
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index a68448d..100c112 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -244,11 +244,11 @@
background-color: var(--table-header-background-color);
border-top: 1px solid var(--border-color);
height: 3rem;
- --paper-tabs-selection-bar-color: var(--color-link);
+ --paper-tabs-selection-bar-color: var(--link-color);
}
paper-tab {
max-width: 15rem;
- --paper-tab-ink: var(--color-link);
+ --paper-tab-ink: var(--link-color);
}
gr-thread-list,
gr-messages-list {
@@ -425,7 +425,7 @@
id="replyBtn"
class="reply"
hidden$="[[!_loggedIn]]"
- secondary
+ primary
disabled="[[_replyDisabled]]"
on-tap="_handleReplyTap">[[_replyButtonLabel]]</gr-button>
</div>
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index e9b0993..da7a16a 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -178,7 +178,7 @@
display: none;
}
label.show-hide {
- color: var(--color-link);
+ color: var(--link-color);
cursor: pointer;
display: block;
font-size: var(--font-size-small);
@@ -203,7 +203,7 @@
width: 15em;
}
.reviewed label {
- color: var(--color-link);
+ color: var(--link-color);
opacity: 0;
justify-content: flex-end;
width: 100%;
diff --git a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
index e17195e..aae21c0 100644
--- a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
+++ b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
@@ -58,25 +58,25 @@
gr-button {
min-width: 40px;
--gr-button: {
+ background-color: var(--button-background-color, #f5f5f5);
+ color: var(--primary-text-color);
padding: .2em .85em;
@apply(--vote-chip-styles);
}
- --gr-button-background: var(--button-background-color, #f5f5f5);
- --gr-button-color: var(--primary-text-color);
}
- iron-selector > gr-button.iron-selected.max {
+ gr-button.iron-selected.max {
--button-background-color: var(--vote-color-max);
}
- iron-selector > gr-button.iron-selected.positive {
+ gr-button.iron-selected.positive {
--button-background-color: var(--vote-color-positive);
}
- iron-selector > gr-button.iron-selected.min {
+ gr-button.iron-selected.min {
--button-background-color: var(--vote-color-min);
}
- iron-selector > gr-button.iron-selected.negative {
+ gr-button.iron-selected.negative {
--button-background-color: var(--vote-color-negative);
}
- iron-selector > gr-button.iron-selected.neutral {
+ gr-button.iron-selected.neutral {
--button-background-color: var(--vote-color-neutral);
}
.placeholder {
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
index 7636b98..1e37725 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
@@ -267,7 +267,7 @@
<template is="dom-if" if="[[canBeStarted]]">
<gr-button
link
- tertiary
+ secondary
disabled="[[_isState(knownLatestState, 'not-latest')]]"
class="action save"
has-tooltip
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html b/polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html
index 6f597d7..de12ea4 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html
@@ -28,7 +28,6 @@
<style include="shared-styles">
gr-button {
margin-left: .5em;
- --gr-button-color: #212121;
}
#actions {
margin-left: auto;
@@ -94,21 +93,25 @@
<gr-button
id="replyBtn"
link
+ secondary
class="action reply"
on-tap="_handleCommentReply">Reply</gr-button>
<gr-button
id="quoteBtn"
link
+ secondary
class="action quote"
on-tap="_handleCommentQuote">Quote</gr-button>
<gr-button
id="ackBtn"
link
+ secondary
class="action ack"
on-tap="_handleCommentAck">Ack</gr-button>
<gr-button
id="doneBtn"
link
+ secondary
class="action done"
on-tap="_handleCommentDone">Done</gr-button>
</div>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
index 1c8d9fd..75a67bf 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
@@ -97,7 +97,6 @@
}
.action {
margin-left: 1em;
- --gr-button-color: #212121;
}
.robotActions {
display: flex;
@@ -249,6 +248,7 @@
<gr-button
id="deleteBtn"
link
+ secondary
class$="action delete [[_computeDeleteButtonClass(_isAdmin, draft)]]"
on-tap="_handleCommentDelete">
(Delete)
@@ -314,21 +314,35 @@
</label>
</div>
<div class="rightActions">
- <gr-button link class="action cancel hideOnPublished"
+ <gr-button
+ link
+ secondary
+ class="action cancel hideOnPublished"
on-tap="_handleCancel">Cancel</gr-button>
- <gr-button link class="action discard hideOnPublished"
+ <gr-button
+ link
+ secondary
+ class="action discard hideOnPublished"
on-tap="_handleDiscard">Discard</gr-button>
- <gr-button link class="action edit hideOnPublished"
+ <gr-button
+ link
+ secondary
+ class="action edit hideOnPublished"
on-tap="_handleEdit">Edit</gr-button>
- <gr-button link class="action save hideOnPublished"
- on-tap="_handleSave"
- disabled$="[[_computeSaveDisabled(_messageText, comment, resolved)]]">Save
- </gr-button>
+ <gr-button
+ link
+ secondary
+ disabled$="[[_computeSaveDisabled(_messageText, comment, resolved)]]"
+ class="action save hideOnPublished"
+ on-tap="_handleSave">Save</gr-button>
</div>
</div>
<div class="robotActions" hidden$="[[!_showRobotActions]]">
<template is="dom-if" if="[[isRobotComment]]">
- <gr-button link class="action fix"
+ <gr-button
+ link
+ secondary
+ class="action fix"
on-tap="_handleFix"
disabled="[[robotButtonDisabled]]">
Please Fix
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html
index be257d4..8251e53 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html
@@ -28,7 +28,7 @@
display: flex;
}
gr-button.selected iron-icon {
- color: var(--color-link);
+ color: var(--link-color);
}
iron-icon {
height: 1.3rem;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 741869d..3972751 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -164,7 +164,6 @@
.contextControl gr-button {
display: inline-block;
text-decoration: none;
- --gr-button-color: var(--deemphasized-text-color);
--gr-button: {
padding: .2em;
}
diff --git a/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.html b/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.html
index fd6aeb0..c57a147 100644
--- a/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.html
+++ b/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.html
@@ -44,7 +44,7 @@
--gr-dropdown-item: {
background-color: transparent;
border: none;
- color: var(--color-link);
+ color: var(--link-color);
font-size: inherit;
text-transform: uppercase;
}
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index e2fb0b3..8fff850 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -27,8 +27,8 @@
<style include="shared-styles">
/* general styles for all buttons */
:host {
- --background-color: var(--gr-button-background, var(--view-background-color));
- --button-color: var(--gr-button-color, var(--color-link));
+ --background-color: var(--button-background-color, var(--default-button-background-color));
+ --text-color: var(--default-button-text-color);
display: inline-block;
font-family: var(--font-family-bold);
font-size: var(--font-size-small);
@@ -46,7 +46,7 @@
-webkit-font-smoothing: initial;
align-items: center;
background-color: var(--background-color);
- color: var(--button-color);
+ color: var(--text-color);
display: flex;
font-family: inherit;
justify-content: center;
@@ -62,18 +62,26 @@
), var(--background-color);
}
- /* Styles for raised buttons specifically */
- :host([primary][raised]),
- :host([secondary][raised]) {
- --background-color: var(--color-link);
- --button-color: var(--view-background-color);
+ :host([primary]) {
+ --background-color: var(--primary-button-background-color);
+ --text-color: var(--primary-button-text-color);
+ }
+ :host([link][primary]) {
+ --text-color: var(--primary-button-background-color);
+ }
+ :host([secondary]) {
+ --background-color: var(--secondary-button-text-color);
+ --text-color: var(--secondary-button-background-color);
+ }
+ :host([link][secondary]) {
+ --text-color: var(--secondary-button-text-color);
}
- /* Keep below color definition for primary/secondary so that this takes
- precedence when disabled. */
+ /* Keep below color definition for primary so that this takes precedence
+ when disabled. */
:host([disabled]) {
--background-color: var(--table-subheader-background-color);
- --button-color: var(--deemphasized-text-color);
+ --text-color: var(--deemphasized-text-color);
cursor: default;
}
@@ -86,9 +94,6 @@
:host([disabled][link]) {
--background-color: transparent;
}
- :host([link][tertiary]) {
- --button-color: var(--color-link-tertiary);
- }
/* Styles for the optional down arrow */
:host:not([down-arrow]) .downArrow {display: none; }
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.js b/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
index 6ac16cc7..ca6705e 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
@@ -31,21 +31,11 @@
value: false,
reflectToAttribute: true,
},
- raised: {
- type: Boolean,
- reflectToAttribute: true,
- computed: '_isRaised(link)',
- },
loading: {
type: Boolean,
value: false,
reflectToAttribute: true,
},
- tertiary: {
- type: Boolean,
- value: false,
- reflectToAttribute: true,
- },
disabled: {
type: Boolean,
observer: '_disabledChanged',
@@ -81,10 +71,6 @@
tabindex: '0',
},
- _isRaised(isLink) {
- return !isLink;
- },
-
_handleAction(e) {
if (this.disabled) {
e.preventDefault();
diff --git a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
index 5e56db1..70b2635 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
+++ b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
@@ -28,7 +28,7 @@
cursor: pointer;
}
iron-icon.active {
- fill: var(--color-link);
+ fill: var(--link-color);
}
</style>
<button aria-label="Change star" on-tap="toggleStar">
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
index e4d9a6b..96066de 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -48,7 +48,7 @@
@apply --label-style;
}
label.editable {
- color: var(--color-link);
+ color: var(--link-color);
cursor: pointer;
}
#dropdown {
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
index ac9226c..12a8f1c 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
@@ -27,7 +27,7 @@
background-color: var(--tooltip-background-color, #333);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
- color: var(--view-background-color);
+ color: #fff;
font-size: var(--font-size-small);
position: absolute;
z-index: 1000;
diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html
index 95d6b00..9642019 100644
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@@ -49,11 +49,13 @@
--font-size-small: .92rem;
--font-size-large: 1.076rem;
- /* Follow are a part of the design refresh */
- --color-link: #2a66d9;
- --color-link-tertiary: #000;
- /* 12% darker */
- --color-button-hover: #0B47BA;
+ --link-color: #2a66d9;
+ --primary-button-background-color: var(--link-color);
+ --primary-button-text-color: #fff;
+ --secondary-button-background-color: #fff;
+ --secondary-button-text-color: #212121;
+ --default-button-background-color: #fff;
+ --default-button-text-color: var(--link-color);
/* Used for both the old patchset header and for indicating that a particular
change message was selected. */
diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html
index e9f7bcb..f97408d 100644
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -41,7 +41,7 @@
padding: 0;
}
a {
- color: var(--color-link);
+ color: var(--link-color);
}
input,
textarea,
@@ -98,8 +98,8 @@
border-color: transparent;
}
paper-toggle-button {
- --paper-toggle-button-checked-bar-color: var(--color-link);
- --paper-toggle-button-checked-button-color: var(--color-link);
+ --paper-toggle-button-checked-bar-color: var(--link-color);
+ --paper-toggle-button-checked-button-color: var(--link-color);
}
strong {
font-family: var(--font-family-bold);
