Merge "Add support for disabled check actions"
diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
index dd19a76..34365a3 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
@@ -55,6 +55,7 @@
import {uniqueDefinedAvatar} from '../../../utils/account-util';
import {PrimaryTab} from '../../../constants/constants';
import {ChecksTabState, CommentTabState} from '../../../types/events';
+import {spinnerStyles} from '../../../styles/gr-spinner-styles';
export enum SummaryChipStyles {
INFO = 'info',
@@ -316,6 +317,7 @@
static get styles() {
return [
sharedStyles,
+ spinnerStyles,
css`
:host {
display: block;
@@ -326,6 +328,10 @@
.zeroState {
color: var(--primary-text-color);
}
+ .loading.zeroState {
+ color: var(--deemphasized-text-color);
+ margin-right: var(--spacing-m);
+ }
div.error {
background-color: var(--error-background);
display: flex;
@@ -362,6 +368,16 @@
vertical-align: top;
margin-right: var(--spacing-xs);
}
+ /* The basics of .loadingSpin are defined in shared styles. */
+ .loadingSpin {
+ width: calc(var(--line-height-normal) - 2px);
+ height: calc(var(--line-height-normal) - 2px);
+ display: inline-block;
+ vertical-align: top;
+ position: relative;
+ /* Making up for the 2px reduced height above. */
+ top: 1px;
+ }
`,
];
}
@@ -394,8 +410,8 @@
renderChecksZeroState() {
if (this.errorMessage || this.loginCallback) return;
if (this.runs.some(isRunningOrHasCompleted)) return;
- const msg = this.someProvidersAreLoading ? 'Loading...' : 'No results';
- return html`<div class="loading zeroState">${msg}</div>`;
+ const msg = this.someProvidersAreLoading ? 'Loading results' : 'No results';
+ return html`<span class="loading zeroState">${msg}</span>`;
}
renderChecksChipForCategory(category: Category) {
@@ -513,6 +529,10 @@
RunStatus.COMPLETED,
hasCompletedWithoutResults
)}${this.renderChecksChipForStatus(RunStatus.RUNNING, isRunning)}
+ <span
+ class="loadingSpin"
+ ?hidden="${!this.someProvidersAreLoading}"
+ ></span>
</td>
</tr>
<tr>
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-results.ts b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
index f61568e..42ce718 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-results.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
@@ -64,6 +64,7 @@
import {latestPatchNum$} from '../../services/change/change-model';
import {appContext} from '../../services/app-context';
import {repoConfig$} from '../../services/config/config-model';
+import {spinnerStyles} from '../../styles/gr-spinner-styles';
@customElement('gr-result-row')
class GrResultRow extends GrLitElement {
@@ -559,6 +560,7 @@
static get styles() {
return [
sharedStyles,
+ spinnerStyles,
css`
:host {
display: block;
@@ -582,6 +584,22 @@
border-radius: var(--border-radius);
padding: 0 var(--spacing-m);
}
+ .headerTopRow h2 {
+ display: inline-block;
+ }
+ .headerTopRow .loading {
+ display: inline-block;
+ margin-left: var(--spacing-m);
+ color: var(--deemphasized-text-color);
+ }
+ /* The basics of .loadingSpin are defined in shared styles. */
+ .headerTopRow .loadingSpin {
+ display: inline-block;
+ margin-left: var(--spacing-s);
+ width: 18px;
+ height: 18px;
+ vertical-align: top;
+ }
.headerBottomRow {
margin-top: var(--spacing-s);
}
@@ -724,9 +742,10 @@
<div class="headerTopRow">
<div class="left">
<h2 class="heading-2">Results</h2>
- </div>
- <div class="middle">
- <span ?hidden="${!this.someProvidersAreLoading}">Loading...</span>
+ <div class="loading" ?hidden="${!this.someProvidersAreLoading}">
+ <span>Loading results </span>
+ <span class="loadingSpin"></span>
+ </div>
</div>
<div class="right">
<gr-dropdown-list
diff --git a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
index dec5111..3b361ff 100644
--- a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
+++ b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
@@ -161,7 +161,7 @@
.aboveButton {
/* Display over preceding content / background placeholder. */
transform: translateY(-100%);
- border-bottom-width: 1px;
+ border-bottom-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
padding: var(--spacing-xxs) var(--spacing-l);
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button_html.ts b/polygerrit-ui/app/elements/shared/gr-button/gr-button_html.ts
index 4d94a98..a174627 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button_html.ts
@@ -17,7 +17,7 @@
import {html} from '@polymer/polymer/lib/utils/html-tag';
export const htmlTemplate = html`
- <style>
+ <style include="gr-spinner-styles">
/* general styles for all buttons */
:host {
--background-color: var(
diff --git a/polygerrit-ui/app/styles/gr-spinner-styles.ts b/polygerrit-ui/app/styles/gr-spinner-styles.ts
new file mode 100644
index 0000000..6fb1ae6
--- /dev/null
+++ b/polygerrit-ui/app/styles/gr-spinner-styles.ts
@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {css} from 'lit-element';
+
+// Mark the file as a module. Otherwise typescript assumes this is a script
+// and $_documentContainer is a global variable.
+// See: https://www.typescriptlang.org/docs/handbook/modules.html
+export {};
+
+const $_documentContainer = document.createElement('template');
+
+export const spinnerStyles = css`
+ .loadingSpin {
+ border: 2px solid var(--disabled-button-background-color);
+ border-top: 2px solid var(--primary-button-background-color);
+ border-radius: 50%;
+ width: 10px;
+ height: 10px;
+ animation: spin 2s linear infinite;
+ margin-right: var(--spacing-s);
+ }
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+`;
+
+$_documentContainer.innerHTML = `<dom-module id="gr-spinner-styles">
+ <template>
+ <style>
+ ${spinnerStyles.cssText}
+ </style>
+ </template>
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);
diff --git a/polygerrit-ui/app/styles/shared-styles.ts b/polygerrit-ui/app/styles/shared-styles.ts
index 6d128b3..1bee660 100644
--- a/polygerrit-ui/app/styles/shared-styles.ts
+++ b/polygerrit-ui/app/styles/shared-styles.ts
@@ -270,6 +270,10 @@
z-index: -1000;
}
+ /**
+ * TODO: Remove these rules and change (plugin) users to rely on
+ * gr-spinner-styles directly.
+ */
/** BEGIN: loading spiner */
.loadingSpin {
border: 2px solid var(--disabled-button-background-color);
