Make workflows compatible with the dark theme
This CL also contains a minor fix for the workflows menu.
Fixed: twpowertools:146
Change-Id: I754e2695b3ee0f952b8f1c2f05af0533a715684c
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
index 8b778e6..38d3420 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
@@ -5,22 +5,27 @@
import {css, html, LitElement} from 'lit';
import {createRef, ref} from 'lit/directives/ref.js';
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
export default class TwptConfirmDialog extends LitElement {
static properties = {
open: {type: Boolean},
workflow: {type: Object},
};
- static styles = css`
- :host {
- --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
- --mdc-dialog-z-index: 200;
- }
+ static styles = [
+ SHARED_MD3_STYLES,
+ css`
+ :host {
+ --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
+ --mdc-dialog-z-index: 200;
+ }
- .workflow {
- font-weight: 500;
- }
- `;
+ .workflow {
+ font-weight: 500;
+ }
+ `,
+ ];
constructor() {
super();
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
index 9b9525f..c6c9a7f 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
@@ -1,11 +1,11 @@
import '@material/mwc-dialog/mwc-dialog.js';
import '@material/web/button/text-button.js';
-
import './TwptWorkflowProgress.js';
import {css, html, LitElement} from 'lit';
import {createRef, ref} from 'lit/directives/ref.js';
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
import WorkflowRunner from '../runner.js';
export default class TwptWorkflowDialog extends LitElement {
@@ -15,16 +15,19 @@
_runner: {type: Object, state: true},
};
- static styles = css`
- :host {
- --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
- --mdc-dialog-z-index: 200;
- }
+ static styles = [
+ SHARED_MD3_STYLES,
+ css`
+ :host {
+ --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
+ --mdc-dialog-z-index: 200;
+ }
- .workflow-name {
- font-weight: 500;
- }
- `;
+ .workflow-name {
+ font-weight: 500;
+ }
+ `,
+ ];
progressRef = createRef();
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js
index 52245e0..54e8c63 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js
@@ -7,6 +7,8 @@
import {css, html, LitElement} from 'lit';
import {map} from 'lit/directives/map.js';
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
export default class TwptWorkflowProgress extends LitElement {
static properties = {
workflow: {type: Object},
@@ -16,13 +18,16 @@
status: {type: String},
};
- static styles = css`
- .progressbar-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- `;
+ static styles = [
+ SHARED_MD3_STYLES,
+ css`
+ .progressbar-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ `,
+ ];
renderThreadProgress() {
// @TODO: Improve this UI when the actions section is complete
diff --git a/src/contentScripts/communityConsole/workflows/components/index.js b/src/contentScripts/communityConsole/workflows/components/index.js
index 1822edc..05cf839 100644
--- a/src/contentScripts/communityConsole/workflows/components/index.js
+++ b/src/contentScripts/communityConsole/workflows/components/index.js
@@ -58,6 +58,8 @@
}
get _selectedWorkflow() {
+ if (!this._workflows) return null;
+
for (const w of this._workflows) {
if (w.uuid == this._selectedWorkflowUuid) return w.proto;
}