diff --git a/src/flyout.css b/src/flyout.css
index 7d175aed..cfac7750 100644
--- a/src/flyout.css
+++ b/src/flyout.css
@@ -84,6 +84,13 @@ header > span svg.icon {
vertical-align: middle;
}
+header > span.build-status {
+ width: var(
+ --readthedocs-flyout-header-font-size,
+ calc(var(--addons-flyout-font-size) * 1.125)
+ );
+}
+
header > img.logo {
text-align: center;
max-width: 106px;
@@ -91,6 +98,22 @@ header > img.logo {
margin-right: 10px;
}
+.build-status-gray {
+ color: gray;
+}
+
+.build-status-green {
+ color: green;
+}
+
+.build-status-red {
+ color: red;
+}
+
+.build-status-yellow {
+ color: yellow;
+}
+
main {
padding: 5px;
padding-bottom: 15px;
diff --git a/src/flyout.js b/src/flyout.js
index a10c9753..d0801c7e 100644
--- a/src/flyout.js
+++ b/src/flyout.js
@@ -2,7 +2,11 @@ import { ajv } from "./data-validation";
import READTHEDOCS_LOGO_WORDMARK from "./images/logo-wordmark-light.svg";
import READTHEDOCS_LOGO from "./images/logo-light.svg";
import { library, icon } from "@fortawesome/fontawesome-svg-core";
-import { faCodeBranch, faLanguage } from "@fortawesome/free-solid-svg-icons";
+import {
+ faCodeBranch,
+ faLanguage,
+ faCircle,
+} from "@fortawesome/free-solid-svg-icons";
import { html, nothing, render, LitElement } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { default as objectPath } from "object-path";
@@ -70,12 +74,31 @@ export class FlyoutElement extends LitElement {
renderHeader() {
library.add(faCodeBranch);
library.add(faLanguage);
+ library.add(faCircle);
const iconCodeBranch = icon(faCodeBranch, {
classes: ["icon"],
});
const iconLanguage = icon(faLanguage, {
classes: ["icon"],
});
+
+ let buildStatus = nothing;
+ const buildState = this.config.builds.current.state.code;
+ const buildSuccess = this.config.builds.current.success;
+ let buildStatusClass = "build-status-gray";
+ if (buildState === "finished" && buildSuccess) {
+ buildStatusClass = "build-status-green";
+ } else if (buildState === "finished" && !buildSuccess) {
+ buildStatusClass = "build-status-red";
+ } else {
+ buildStatusClass = "build-status-yellow";
+ }
+ buildStatus = html`${icon(faCircle).node[0]}`;
+
let version = nothing;
if (
this.config.projects.current.versioning_scheme !==
@@ -97,7 +120,7 @@ export class FlyoutElement extends LitElement {
return html`
- ${translation} ${version}
+ ${translation} ${version} ${buildStatus}
`;
}