fix(deps): update dependency @material/web to v1
This CL also fixes many things necessary for the update.
It also changes the entire md3 theme, since there have been a lot of
breaking changes and this is the easiest way to have a working theme
again (it is also an improvement).
Change-Id: I4a412e0c0ca4345084c724fcaba000293521e907
diff --git a/package-lock.json b/package-lock.json
index bdc0c3d..9722419 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
"@material/mwc-circular-progress": "^0.27.0",
"@material/mwc-dialog": "^0.27.0",
"@material/tooltip": "^14.0.0",
- "@material/web": "^0.1.0-alpha.0",
+ "@material/web": "^1.0.0",
"@stdlib/utils-escape-regexp-string": "^0.2.0",
"async-mutex": "^0.4.0",
"dompurify": "^3.0.0",
@@ -2294,11 +2294,11 @@
}
},
"node_modules/@material/web": {
- "version": "0.1.0-alpha.0",
- "resolved": "https://registry.npmjs.org/@material/web/-/web-0.1.0-alpha.0.tgz",
- "integrity": "sha512-GNsNyWOtYKezXwvrD1ZBfnOHClVya31ZEQH1O83+PsPqlVZK6cBfnf1cwJmEFQ6FezB6q6q+cHGGqx0lb90Jug==",
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/@material/web/-/web-1.3.0.tgz",
+ "integrity": "sha512-yUqF35yygXreiPXQneD3l210UoSMlbgHZrJ0V1dUiEizGpWfVmuAKp9LnLnV/Qx5MhJlNOZddsGJOGR9lU8R/w==",
"dependencies": {
- "lit": "^2.3.0",
+ "lit": "^2.7.4 || ^3.0.0",
"tslib": "^2.4.0"
}
},
@@ -10101,11 +10101,11 @@
}
},
"@material/web": {
- "version": "0.1.0-alpha.0",
- "resolved": "https://registry.npmjs.org/@material/web/-/web-0.1.0-alpha.0.tgz",
- "integrity": "sha512-GNsNyWOtYKezXwvrD1ZBfnOHClVya31ZEQH1O83+PsPqlVZK6cBfnf1cwJmEFQ6FezB6q6q+cHGGqx0lb90Jug==",
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/@material/web/-/web-1.3.0.tgz",
+ "integrity": "sha512-yUqF35yygXreiPXQneD3l210UoSMlbgHZrJ0V1dUiEizGpWfVmuAKp9LnLnV/Qx5MhJlNOZddsGJOGR9lU8R/w==",
"requires": {
- "lit": "^2.3.0",
+ "lit": "^2.7.4 || ^3.0.0",
"tslib": "^2.4.0"
},
"dependencies": {
diff --git a/package.json b/package.json
index 7c4fed4..b880da9 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
"@material/mwc-circular-progress": "^0.27.0",
"@material/mwc-dialog": "^0.27.0",
"@material/tooltip": "^14.0.0",
- "@material/web": "^0.1.0-alpha.0",
+ "@material/web": "^1.0.0",
"@stdlib/utils-escape-regexp-string": "^0.2.0",
"async-mutex": "^0.4.0",
"dompurify": "^3.0.0",
diff --git a/src/ccDarkTheme/abstracts/_variables.scss b/src/ccDarkTheme/abstracts/_variables.scss
index 6a9182c..b34670f 100644
--- a/src/ccDarkTheme/abstracts/_variables.scss
+++ b/src/ccDarkTheme/abstracts/_variables.scss
@@ -1,3 +1,5 @@
+@use '../../md3/theme' as md3-theme;
+
:root {
--TWPT-primary-text: #e8eaed;
--TWPT-primary-text-alt: var(--TWPT-primary-text);
@@ -11,6 +13,7 @@
--TWPT-highlighted-item-background: rgba(255, 255, 255, .08);
--TWPT-thread-read-background: var(--TWPT-highlighted-item-background);
--TWPT-drawer-background: #2d2e30;
+ --TWPT-drawer-text: #d2cecb;
--TWPT-button-background: #3c3e42;
--TWPT-subtle-button-background: rgba(255, 255, 255, .54);
--TWPT-input-underline: rgba(255, 255, 255, .28);
@@ -27,17 +30,7 @@
--TWPT-interop-success: #37be5f;
--TWPT-interop-blue: #7cacf8;
- /* MD3 dark theme variables */
- --TWPT-md-sys-color-primary: #bda5ff;
- --TWPT-md-sys-color-on-primary: #000;
- --TWPT-md-sys-color-surface: var(--TWPT-drawer-background);
- --TWPT-md-sys-color-on-surface: var(--TWPT-primary-text);
- --TWPT-md-sys-color-on-surface-rgb: 154, 160, 166;
- --TWPT-md-sys-color-on-surface-variant: var(--TWPT-secondary-text);
- --TWPT-md-list-list-divider-color: var(--TWPT-subtle-border);
- --TWPT-md-ripple-hover-state-layer-color: white;
- --TWPT-md-ripple-pressed-state-layer-color: white;
- --TWPT-custom-md-icon-color: var(--TWPT-subtle-button-background);
+ @include md3-theme.dark-theme('TWPT-');
/* Overrides for variables used by the Community Console styles */
--gm-outlinedtextfield-outline-color: var(--TWPT-card-border);
diff --git a/src/ccDarkTheme/components/_drawer.scss b/src/ccDarkTheme/components/_drawer.scss
index 973b7f8..35fefdd 100644
--- a/src/ccDarkTheme/components/_drawer.scss
+++ b/src/ccDarkTheme/components/_drawer.scss
@@ -25,7 +25,7 @@
material-drawer material-list-item,
material-drawer material-list-item .title {
- color: #d2cecb!important;
+ color: var(--TWPT-drawer-text)!important;
}
material-drawer ec-forum-drawer-item material-checkbox material-icon {
diff --git a/src/ccDarkTheme/layout/_header.scss b/src/ccDarkTheme/layout/_header.scss
index abad975..abfca60 100644
--- a/src/ccDarkTheme/layout/_header.scss
+++ b/src/ccDarkTheme/layout/_header.scss
@@ -30,5 +30,5 @@
// Header menus
.popup material-list-item {
- color: #d2cecb!important;
+ color: var(--TWPT-drawer-text)!important;
}
diff --git a/src/common/components/FormField.js b/src/common/components/FormField.js
new file mode 100644
index 0000000..aa32732
--- /dev/null
+++ b/src/common/components/FormField.js
@@ -0,0 +1,53 @@
+import {css, html, LitElement} from 'lit';
+
+/**
+ * Lite component inspired in the now removed material-web's Formfield.
+ * https://github.com/material-components/material-web/commit/753a03be963f7b5242e98b73d1309abbe9f5bf51
+ */
+export default class TwptFormField extends LitElement {
+ static styles = [
+ css`
+ .formfield {
+ align-items: center;
+ display: inline-flex;
+ vertical-align: middle;
+ }
+
+ label {
+ margin-inline: 0px auto;
+ order: 0;
+ padding-inline: 4px 0px;
+ }
+ `,
+ ];
+
+ render() {
+ return html`
+ <span class="formfield">
+ <slot></slot>
+ <label @click="${this._labelClick}">
+ <slot name="label"></slot>
+ </label>
+ </span>
+ `;
+ }
+
+ _labelClick() {
+ const input = this._input;
+ if (!input || !this.shadowRoot) return;
+
+ input.focus();
+ input.click();
+ }
+
+ get _input() {
+ return this._slottedChildren?.[0] ?? null;
+ }
+
+ get _slottedChildren() {
+ if (!this.shadowRoot) return null;
+ const slot = this.shadowRoot.querySelector('slot');
+ return slot.assignedElements({flatten: true});
+ }
+}
+window.customElements.define('twpt-form-field', TwptFormField);
diff --git a/src/common/styles/md3.js b/src/common/styles/md3.js
index a634fb2..45f6507 100644
--- a/src/common/styles/md3.js
+++ b/src/common/styles/md3.js
@@ -4,23 +4,66 @@
// theme color scheme (it's defined in variables prefixed with --TWPT).
export const SHARED_MD3_STYLES = css`
:host {
- --md-sys-color-primary: var(--TWPT-md-sys-color-primary, #6750a4);
- --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
- --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(227, 255, 251));
- --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface);
- --md-sys-color-on-surface-rgb: var(--TWPT-md-sys-color-on-surface-rgb);
- --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant);
- --md-list-list-divider-color: var(--TWPT-md-list-list-divider-color);
- --md-ripple-hover-state-layer-color: var(--TWPT-md-ripple-hover-state-layer-color);
- --md-ripple-pressed-state-layer-color: var(--TWPT-md-ripple-pressed-state-layer-color);
- --md-icon-button-unselected-icon-color: var(--TWPT-custom-md-icon-color);
- --md-icon-button-unselected-hover-icon-color: var(--TWPT-custom-md-icon-color);
- --md-icon-button-unselected-focus-icon-color: var(--TWPT-custom-md-icon-color);
- --md-icon-button-unselected-pressed-icon-color: var(--TWPT-custom-md-icon-color);
+ /* Adapted from //src/md3/theme.scss */
+ --md-sys-color-primary: var(--TWPT-md-sys-color-primary, rgb(0 106 96));
+ --md-sys-color-surface-tint: var(--TWPT-md-sys-color-surface-tint, rgb(0 106 96));
+ --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, rgb(255 255 255));
+ --md-sys-color-primary-container: var(--TWPT-md-sys-color-primary-container, rgb(158 242 228));
+ --md-sys-color-on-primary-container: var(--TWPT-md-sys-color-on-primary-container, rgb(0 32 28));
+ --md-sys-color-secondary: var(--TWPT-md-sys-color-secondary, rgb(74 99 95));
+ --md-sys-color-on-secondary: var(--TWPT-md-sys-color-on-secondary, rgb(255 255 255));
+ --md-sys-color-secondary-container: var(--TWPT-md-sys-color-secondary-container, rgb(204 232 226));
+ --md-sys-color-on-secondary-container: var(--TWPT-md-sys-color-on-secondary-container, rgb(5 32 28));
+ --md-sys-color-tertiary: var(--TWPT-md-sys-color-tertiary, rgb(69 97 121));
+ --md-sys-color-on-tertiary: var(--TWPT-md-sys-color-on-tertiary, rgb(255 255 255));
+ --md-sys-color-tertiary-container: var(--TWPT-md-sys-color-tertiary-container, rgb(204 229 255));
+ --md-sys-color-on-tertiary-container: var(--TWPT-md-sys-color-on-tertiary-container, rgb(0 30 49));
+ --md-sys-color-error: var(--TWPT-md-sys-color-error, rgb(186 26 26));
+ --md-sys-color-on-error: var(--TWPT-md-sys-color-on-error, rgb(255 255 255));
+ --md-sys-color-error-container: var(--TWPT-md-sys-color-error-container, rgb(255 218 214));
+ --md-sys-color-on-error-container: var(--TWPT-md-sys-color-on-error-container, rgb(65 0 2));
+ --md-sys-color-background: var(--TWPT-md-sys-color-background, rgb(244 251 248));
+ --md-sys-color-on-background: var(--TWPT-md-sys-color-on-background, rgb(22 29 28));
+ --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(244 251 248));
+ --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface, rgb(22 29 28));
+ --md-sys-color-surface-variant: var(--TWPT-md-sys-color-surface-variant, rgb(218 229 225));
+ --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant, rgb(63 73 71));
+ --md-sys-color-outline: var(--TWPT-md-sys-color-outline, rgb(111 121 119));
+ --md-sys-color-outline-variant: var(--TWPT-md-sys-color-outline-variant, rgb(190 201 198));
+ --md-sys-color-shadow: var(--TWPT-md-sys-color-shadow, rgb(0 0 0));
+ --md-sys-color-scrim: var(--TWPT-md-sys-color-scrim, rgb(0 0 0));
+ --md-sys-color-inverse-surface: var(--TWPT-md-sys-color-inverse-surface, rgb(43 50 48));
+ --md-sys-color-inverse-on-surface: var(--TWPT-md-sys-color-inverse-on-surface, rgb(236 242 239));
+ --md-sys-color-inverse-primary: var(--TWPT-md-sys-color-inverse-primary, rgb(130 213 200));
+ --md-sys-color-primary-fixed: var(--TWPT-md-sys-color-primary-fixed, rgb(158 242 228));
+ --md-sys-color-on-primary-fixed: var(--TWPT-md-sys-color-on-primary-fixed, rgb(0 32 28));
+ --md-sys-color-primary-fixed-dim: var(--TWPT-md-sys-color-primary-fixed-dim, rgb(130 213 200));
+ --md-sys-color-on-primary-fixed-variant: var(--TWPT-md-sys-color-on-primary-fixed-variant, rgb(0 80 72));
+ --md-sys-color-secondary-fixed: var(--TWPT-md-sys-color-secondary-fixed, rgb(204 232 226));
+ --md-sys-color-on-secondary-fixed: var(--TWPT-md-sys-color-on-secondary-fixed, rgb(5 32 28));
+ --md-sys-color-secondary-fixed-dim: var(--TWPT-md-sys-color-secondary-fixed-dim, rgb(177 204 198));
+ --md-sys-color-on-secondary-fixed-variant: var(--TWPT-md-sys-color-on-secondary-fixed-variant, rgb(51 75 71));
+ --md-sys-color-tertiary-fixed: var(--TWPT-md-sys-color-tertiary-fixed, rgb(204 229 255));
+ --md-sys-color-on-tertiary-fixed: var(--TWPT-md-sys-color-on-tertiary-fixed, rgb(0 30 49));
+ --md-sys-color-tertiary-fixed-dim: var(--TWPT-md-sys-color-tertiary-fixed-dim, rgb(173 202 230));
+ --md-sys-color-on-tertiary-fixed-variant: var(--TWPT-md-sys-color-on-tertiary-fixed-variant, rgb(45 73 97));
+ --md-sys-color-surface-dim: var(--TWPT-md-sys-color-surface-dim, rgb(213 219 217));
+ --md-sys-color-surface-bright: var(--TWPT-md-sys-color-surface-bright, rgb(244 251 248));
+ --md-sys-color-surface-container-lowest: var(--TWPT-md-sys-color-surface-container-lowest, rgb(255 255 255));
+ --md-sys-color-surface-container-low: var(--TWPT-md-sys-color-surface-container-low, rgb(239 245 242));
+ --md-sys-color-surface-container: var(--TWPT-md-sys-color-surface-container, rgb(233 239 237));
+ --md-sys-color-surface-container-high: var(--TWPT-md-sys-color-surface-container-high, rgb(227 234 231));
+ --md-sys-color-surface-container-highest: var(--TWPT-md-sys-color-surface-container-highest, rgb(221 228 225));
+
+ /* Material Design 2 theme */
--mdc-theme-surface: var(--TWPT-primary-background, #fff);
--mdc-theme-on-surface: var(--TWPT-primary-text, #000);
- --mdc-theme-primary: var(--TWPT-md-sys-color-primary, #6750a4);
- --mdc-theme-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
+ --mdc-theme-primary: var(--TWPT-md-sys-color-primary, rgb(0 106 96));
+ --mdc-theme-on-primary: var(--TWPT-md-sys-color-on-primary, rgb(255 255 255));
--mdc-dialog-heading-ink-color: var(--TWPT-primary-text);
}
+
+ md-icon[filled] {
+ font-variation-settings: 'FILL' 1;
+ }
`;
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
index 59bc6b6..7f93e9a 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
@@ -1,5 +1,5 @@
import '@material/web/icon/icon.js';
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
import {css, html, LitElement} from 'lit';
@@ -47,10 +47,10 @@
return html`
<md-icon class="reply-icon">reply</md-icon>
<span class="name">${this.prevMessage?.author?.[1]?.[1]}</span>
- <md-standard-icon-button
- icon="arrow_upward"
+ <md-icon-button
@click=${this.focusParent}>
- </md-standard-icon-button>
+ <md-icon>arrow_upward</md-icon>
+ </md-icon-button>
`;
}
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
index 6a35b10..73a4cc1 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
@@ -32,10 +32,10 @@
render() {
return html`
<md-outlined-button
- label="${msg('Reply', {
- desc: 'Button which is used to open the reply box.',
- })}"
@click=${this.openReplyEditor}>
+ ${msg('Reply', {
+ desc: 'Button which is used to open the reply box.',
+ })}
</md-outlined-button>
`;
}
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/index.js b/src/contentScripts/communityConsole/flattenThreads/components/index.js
index 39e8310..f1da3b0 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/index.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/index.js
@@ -1,5 +1,5 @@
-import '@material/web/button/tonal-button.js';
-
+import '@material/web/button/filled-tonal-button.js';
+import '@material/web/icon/icon.js';
import './QuoteAuthor.js';
// Other components imported so they are also injected:
@@ -49,8 +49,7 @@
.payload-container twpt-flatten-thread-quote-author {
float: right;
margin-left: 12px;
- margin-top: -12px;
- shape-outside: inset(0 10px 10px 0);
+ margin-top: -8px;
}
.payload {
@@ -86,16 +85,16 @@
}
}
- .buttons-row md-tonal-button {
- --md-tonal-button-container-color: var(--TWPT-dark-flatten-replies-more-bg, rgba(222, 222, 222, 0.9));
- --md-tonal-button-label-text-color: var(--TWPT-md-sys-color-on-surface);
- --md-tonal-button-hover-label-text-color: var(--TWPT-md-sys-color-on-surface);
- --md-tonal-button-focus-label-text-color: var(--TWPT-md-sys-color-on-surface);
- --md-tonal-button-pressed-label-text-color: var(--TWPT-md-sys-color-on-surface);
- --md-tonal-button-with-icon-icon-color: var(--TWPT-md-sys-color-on-surface);
- --md-tonal-button-with-icon-hover-icon-color: var(--TWPT-md-sys-color-on-surface);
- --md-tonal-button-with-icon-focus-icon-color: var(--TWPT-md-sys-color-on-surface);
- --md-tonal-button-with-icon-pressed-icon-color: var(--TWPT-md-sys-color-on-surface);
+ .buttons-row md-filled-tonal-button {
+ --md-filled-tonal-button-container-color: var(--TWPT-dark-flatten-replies-more-bg, rgba(222, 222, 222, 0.9));
+ --md-filled-tonal-button-label-text-color: var(--TWPT-md-sys-color-on-surface);
+ --md-filled-tonal-button-hover-label-text-color: var(--TWPT-md-sys-color-on-surface);
+ --md-filled-tonal-button-focus-label-text-color: var(--TWPT-md-sys-color-on-surface);
+ --md-filled-tonal-button-pressed-label-text-color: var(--TWPT-md-sys-color-on-surface);
+ --md-filled-tonal-button-icon-color: var(--TWPT-md-sys-color-on-surface);
+ --md-filled-tonal-button-hover-icon-color: var(--TWPT-md-sys-color-on-surface);
+ --md-filled-tonal-button-focus-icon-color: var(--TWPT-md-sys-color-on-surface);
+ --md-filled-tonal-button-pressed-icon-color: var(--TWPT-md-sys-color-on-surface);
}
`,
];
@@ -116,10 +115,12 @@
'quote-container--expanded': this._expanded,
});
const lessMsg = msg('Less', {
- desc: 'Button to collapse the quote message (used in the flatten threads feature).',
+ desc:
+ 'Button to collapse the quote message (used in the flatten threads feature).',
});
const moreMsg = msg('More', {
- desc: 'Button to expand the quote message (used in the flatten threads feature).',
+ desc:
+ 'Button to expand the quote message (used in the flatten threads feature).',
});
return html`
<div class=${containerClasses}>
@@ -132,11 +133,13 @@
</div>
</div>
<div class="buttons-row">
- <md-tonal-button
- icon="${this._expanded ? 'expand_less' : 'expand_more'}"
- label="${this._expanded ? lessMsg : moreMsg}"
+ <md-filled-tonal-button
@click=${this.toggleExpanded}>
- </md-tonal-button>
+ <md-icon slot="icon">
+ ${this._expanded ? 'expand_less' : 'expand_more'}
+ </md-icon>
+ ${this._expanded ? lessMsg : moreMsg}
+ </md-filled-tonal-button>
</div>
</div>
`;
diff --git a/src/contentScripts/communityConsole/threadToolbar/components/index.js b/src/contentScripts/communityConsole/threadToolbar/components/index.js
index bbaa20d..8e1bcd9 100644
--- a/src/contentScripts/communityConsole/threadToolbar/components/index.js
+++ b/src/contentScripts/communityConsole/threadToolbar/components/index.js
@@ -1,6 +1,6 @@
-import '@material/web/formfield/formfield.js';
import '@material/web/icon/icon.js';
import '@material/web/switch/switch.js';
+import '../../../../common/components/FormField.js';
import consoleCommonStyles from '!!raw-loader!../../../../static/css/common/console.css';
import {msg} from '@lit/localize';
@@ -70,11 +70,15 @@
'Label for the switch which lets users enable/disable the nested view in a thread.',
});
return html`
- <md-formfield label="${nestedViewMsg}">
+ <twpt-form-field>
<md-switch ${ref(this.nestedViewRef)}
?selected=${!this.options?.flattenthreads_switch_enabled}
- @click=${this._flattenThreadsChanged}>
- </md-formfield>
+ @change=${this._flattenThreadsChanged}>
+ </md-switch>
+ <span slot="label">
+ ${nestedViewMsg}
+ </span>
+ </twpt-form-field>
`;
}
diff --git a/src/contentScripts/communityConsole/updateHandler/banner/components/index.js b/src/contentScripts/communityConsole/updateHandler/banner/components/index.js
index 81bd20c..c181a56 100644
--- a/src/contentScripts/communityConsole/updateHandler/banner/components/index.js
+++ b/src/contentScripts/communityConsole/updateHandler/banner/components/index.js
@@ -94,8 +94,8 @@
<div class="mdc-banner__actions">
<md-text-button
class="mdc-banner__primary-action"
- label="${reloadMsg}"
@click=${this._reloadPage}>
+ ${reloadMsg}
</md-text-button>
</div>
</div>
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js b/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
index 935926f..222416f 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
@@ -1,4 +1,5 @@
import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
import {html, LitElement} from 'lit';
@@ -20,10 +21,10 @@
return html`
<md-outlined-button
- icon=${icon}
- label=${label}
?disabled=${this.selected}
@click=${this._importCR}>
+ <md-icon slot="icon">${icon}</md-icon>
+ ${label}
</md-outlined-button>
`;
}
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
index 38d3420..b219b75 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
@@ -45,13 +45,13 @@
</p>
<md-filled-button
slot="primaryAction"
- label="Run workflow"
@click=${this._dispatchConfirmEvent}>
+ Run workflow
</md-filled-button>
<md-text-button
slot="secondaryAction"
- dialogAction="cancel"
- label="Cancel">
+ dialogAction="cancel">
+ Cancel
</md-text-button>
</mwc-dialog>
`;
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
index c6c9a7f..1d38707 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
@@ -54,8 +54,8 @@
<md-text-button
?disabled=${this._runner?.status !== 'finished'}
slot="primaryAction"
- dialogAction="cancel"
- label="Close">
+ dialogAction="cancel">
+ Close
</md-text-button>
</mwc-dialog>
`;
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
index 71782f3..db7359c 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
@@ -1,8 +1,7 @@
+import '@material/web/divider/divider.js';
import '@material/web/icon/icon.js';
-import '@material/web/iconbutton/standard-icon-button.js';
-import '@material/web/list/list-divider.js';
+import '@material/web/iconbutton/icon-button.js';
import '@material/web/menu/menu.js';
-import '@material/web/menu/menu-button.js';
import '@material/web/menu/menu-item.js';
import consoleCommonStyles from '!!raw-loader!../../../../static/css/common/console.css';
@@ -22,17 +21,24 @@
SHARED_MD3_STYLES,
css`${unsafeCSS(consoleCommonStyles)}`,
css`
+ .workflows-menu {
+ --md-menu-item-label-text-size: 14px;
+ }
+
.workflow-item {
- padding-inline: 1em;
+ --md-menu-item-one-line-container-height: 48px;
+
+ min-width: 250px;
}
/* Custom styles to override the common button with badge styles */
.TWPT-btn--with-badge {
- padding-bottom: 0!important;
+ padding-bottom: 0;
}
.TWPT-btn--with-badge .TWPT-badge {
- bottom: 8px!important;
+ bottom: 4px;
+ right: 2px;
}
`,
];
@@ -51,8 +57,9 @@
`;
return map(this.workflows, w => html`
<md-menu-item
+ class="workflow-item"
@click="${() => this._dispatchSelectEvent(w.uuid)}">
- <span class="workflow-item" slot="start">
+ <span slot="start">
${w.proto.getName()}
</span>
</md-menu-item>
@@ -63,10 +70,11 @@
return [
this.renderWorkflowItems(),
html`
- <md-list-divider></md-list-divider>
+ <md-divider></md-divider>
<md-menu-item
+ class="workflow-item"
@click="${() => this._openWorkflowManager()}">
- <span class="workflow-item" slot="start">
+ <span slot="start">
Manage workflows...
</span>
</md-menu-item>
@@ -85,15 +93,22 @@
render() {
return html`
- <md-menu-button>
- <div slot="button" class="TWPT-btn--with-badge">
- <md-standard-icon-button icon="more_vert"></md-standard-icon-button>
+ <span style="position: relative;">
+ <div
+ id="workflows-menu-anchor"
+ class="TWPT-btn--with-badge"
+ @click="${this._toggleMenu}">
+ <md-icon-button>
+ <md-icon>more_vert</md-icon>
+ </md-icon-button>
${this.renderBadge()}
</div>
- <md-menu ${ref(this.menuRef)} slot="menu">
+ <md-menu ${ref(this.menuRef)}
+ class="workflows-menu"
+ anchor="workflows-menu-anchor">
${this.renderMenuItems()}
</md-menu>
- </md-menu-button>
+ </span>
`;
}
@@ -107,6 +122,10 @@
this.menuRef.value.open = false;
}
+ _toggleMenu() {
+ this.menuRef.value.open = !this.menuRef.value.open;
+ }
+
_openWorkflowManager() {
const e = new Event('twpt-open-workflow-manager');
document.dispatchEvent(e);
diff --git a/src/injections/litComponentsInject.js b/src/injections/litComponentsInject.js
index 09e8ec8..3154681 100644
--- a/src/injections/litComponentsInject.js
+++ b/src/injections/litComponentsInject.js
@@ -9,7 +9,6 @@
import {injectStylesheet} from '../common/contentScriptsUtils.js';
-// Also, we import Material Icons since the Community Console uses "Google
-// Material Icons" instead of "Material Icons". This is necessary for the MD3
-// components.
-injectStylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
+// Also, we import Material Symbols Outlined since the Community Console uses
+// "Google Material Icons" instead. This is necessary for the MD3 components.
+injectStylesheet('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
diff --git a/src/injections/updateHandlerLitComponents.js b/src/injections/updateHandlerLitComponents.js
index 9b82ee2..e6449f5 100644
--- a/src/injections/updateHandlerLitComponents.js
+++ b/src/injections/updateHandlerLitComponents.js
@@ -5,4 +5,4 @@
// This is necessary for the MD3 components. It is also done in
// litComponentsInject.js, but when installing the extension
// litComponentsInject.js hasn't been injected yet.
-injectStylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
+injectStylesheet('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
diff --git a/src/md3/theme.scss b/src/md3/theme.scss
new file mode 100644
index 0000000..c06c226
--- /dev/null
+++ b/src/md3/theme.scss
@@ -0,0 +1,105 @@
+// Generated with https://material-foundation.github.io/material-theme-builder/.
+
+@mixin dark-theme($var-prefix: '') {
+ --#{$var-prefix}md-sys-color-primary: rgb(130 213 200);
+ --#{$var-prefix}md-sys-color-surface-tint: rgb(130 213 200);
+ --#{$var-prefix}md-sys-color-on-primary: rgb(0 55 49);
+ --#{$var-prefix}md-sys-color-primary-container: rgb(0 80 72);
+ --#{$var-prefix}md-sys-color-on-primary-container: rgb(158 242 228);
+ --#{$var-prefix}md-sys-color-secondary: rgb(177 204 198);
+ --#{$var-prefix}md-sys-color-on-secondary: rgb(28 53 49);
+ --#{$var-prefix}md-sys-color-secondary-container: rgb(51 75 71);
+ --#{$var-prefix}md-sys-color-on-secondary-container: rgb(204 232 226);
+ --#{$var-prefix}md-sys-color-tertiary: rgb(173 202 230);
+ --#{$var-prefix}md-sys-color-on-tertiary: rgb(21 51 73);
+ --#{$var-prefix}md-sys-color-tertiary-container: rgb(45 73 97);
+ --#{$var-prefix}md-sys-color-on-tertiary-container: rgb(204 229 255);
+ --#{$var-prefix}md-sys-color-error: rgb(255 180 171);
+ --#{$var-prefix}md-sys-color-on-error: rgb(105 0 5);
+ --#{$var-prefix}md-sys-color-error-container: rgb(147 0 10);
+ --#{$var-prefix}md-sys-color-on-error-container: rgb(255 218 214);
+ --#{$var-prefix}md-sys-color-background: rgb(14 21 19);
+ --#{$var-prefix}md-sys-color-on-background: rgb(221 228 225);
+ --#{$var-prefix}md-sys-color-surface: rgb(14 21 19);
+ --#{$var-prefix}md-sys-color-on-surface: rgb(221 228 225);
+ --#{$var-prefix}md-sys-color-surface-variant: rgb(63 73 71);
+ --#{$var-prefix}md-sys-color-on-surface-variant: rgb(190 201 198);
+ --#{$var-prefix}md-sys-color-outline: rgb(137 147 144);
+ --#{$var-prefix}md-sys-color-outline-variant: rgb(63 73 71);
+ --#{$var-prefix}md-sys-color-shadow: rgb(0 0 0);
+ --#{$var-prefix}md-sys-color-scrim: rgb(0 0 0);
+ --#{$var-prefix}md-sys-color-inverse-surface: rgb(221 228 225);
+ --#{$var-prefix}md-sys-color-inverse-on-surface: rgb(43 50 48);
+ --#{$var-prefix}md-sys-color-inverse-primary: rgb(0 106 96);
+ --#{$var-prefix}md-sys-color-primary-fixed: rgb(158 242 228);
+ --#{$var-prefix}md-sys-color-on-primary-fixed: rgb(0 32 28);
+ --#{$var-prefix}md-sys-color-primary-fixed-dim: rgb(130 213 200);
+ --#{$var-prefix}md-sys-color-on-primary-fixed-variant: rgb(0 80 72);
+ --#{$var-prefix}md-sys-color-secondary-fixed: rgb(204 232 226);
+ --#{$var-prefix}md-sys-color-on-secondary-fixed: rgb(5 32 28);
+ --#{$var-prefix}md-sys-color-secondary-fixed-dim: rgb(177 204 198);
+ --#{$var-prefix}md-sys-color-on-secondary-fixed-variant: rgb(51 75 71);
+ --#{$var-prefix}md-sys-color-tertiary-fixed: rgb(204 229 255);
+ --#{$var-prefix}md-sys-color-on-tertiary-fixed: rgb(0 30 49);
+ --#{$var-prefix}md-sys-color-tertiary-fixed-dim: rgb(173 202 230);
+ --#{$var-prefix}md-sys-color-on-tertiary-fixed-variant: rgb(45 73 97);
+ --#{$var-prefix}md-sys-color-surface-dim: rgb(14 21 19);
+ --#{$var-prefix}md-sys-color-surface-bright: rgb(52 59 57);
+ --#{$var-prefix}md-sys-color-surface-container-lowest: rgb(9 15 14);
+ --#{$var-prefix}md-sys-color-surface-container-low: rgb(22 29 28);
+ --#{$var-prefix}md-sys-color-surface-container: rgb(26 33 32);
+ --#{$var-prefix}md-sys-color-surface-container-high: rgb(37 43 42);
+ --#{$var-prefix}md-sys-color-surface-container-highest: rgb(48 54 53);
+}
+
+@mixin light-theme {
+ --md-sys-color-primary: rgb(0 106 96);
+ --md-sys-color-surface-tint: rgb(0 106 96);
+ --md-sys-color-on-primary: rgb(255 255 255);
+ --md-sys-color-primary-container: rgb(158 242 228);
+ --md-sys-color-on-primary-container: rgb(0 32 28);
+ --md-sys-color-secondary: rgb(74 99 95);
+ --md-sys-color-on-secondary: rgb(255 255 255);
+ --md-sys-color-secondary-container: rgb(204 232 226);
+ --md-sys-color-on-secondary-container: rgb(5 32 28);
+ --md-sys-color-tertiary: rgb(69 97 121);
+ --md-sys-color-on-tertiary: rgb(255 255 255);
+ --md-sys-color-tertiary-container: rgb(204 229 255);
+ --md-sys-color-on-tertiary-container: rgb(0 30 49);
+ --md-sys-color-error: rgb(186 26 26);
+ --md-sys-color-on-error: rgb(255 255 255);
+ --md-sys-color-error-container: rgb(255 218 214);
+ --md-sys-color-on-error-container: rgb(65 0 2);
+ --md-sys-color-background: rgb(244 251 248);
+ --md-sys-color-on-background: rgb(22 29 28);
+ --md-sys-color-surface: rgb(244 251 248);
+ --md-sys-color-on-surface: rgb(22 29 28);
+ --md-sys-color-surface-variant: rgb(218 229 225);
+ --md-sys-color-on-surface-variant: rgb(63 73 71);
+ --md-sys-color-outline: rgb(111 121 119);
+ --md-sys-color-outline-variant: rgb(190 201 198);
+ --md-sys-color-shadow: rgb(0 0 0);
+ --md-sys-color-scrim: rgb(0 0 0);
+ --md-sys-color-inverse-surface: rgb(43 50 48);
+ --md-sys-color-inverse-on-surface: rgb(236 242 239);
+ --md-sys-color-inverse-primary: rgb(130 213 200);
+ --md-sys-color-primary-fixed: rgb(158 242 228);
+ --md-sys-color-on-primary-fixed: rgb(0 32 28);
+ --md-sys-color-primary-fixed-dim: rgb(130 213 200);
+ --md-sys-color-on-primary-fixed-variant: rgb(0 80 72);
+ --md-sys-color-secondary-fixed: rgb(204 232 226);
+ --md-sys-color-on-secondary-fixed: rgb(5 32 28);
+ --md-sys-color-secondary-fixed-dim: rgb(177 204 198);
+ --md-sys-color-on-secondary-fixed-variant: rgb(51 75 71);
+ --md-sys-color-tertiary-fixed: rgb(204 229 255);
+ --md-sys-color-on-tertiary-fixed: rgb(0 30 49);
+ --md-sys-color-tertiary-fixed-dim: rgb(173 202 230);
+ --md-sys-color-on-tertiary-fixed-variant: rgb(45 73 97);
+ --md-sys-color-surface-dim: rgb(213 219 217);
+ --md-sys-color-surface-bright: rgb(244 251 248);
+ --md-sys-color-surface-container-lowest: rgb(255 255 255);
+ --md-sys-color-surface-container-low: rgb(239 245 242);
+ --md-sys-color-surface-container: rgb(233 239 237);
+ --md-sys-color-surface-container-high: rgb(227 234 231);
+ --md-sys-color-surface-container-highest: rgb(221 228 225);
+}
diff --git a/src/static/options/workflows.html b/src/static/options/workflows.html
index c00dcda..72cfe41 100644
--- a/src/static/options/workflows.html
+++ b/src/static/options/workflows.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>Workflow manager</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<style>
body {
diff --git a/src/workflows/manager/components/AddDialog.js b/src/workflows/manager/components/AddDialog.js
index 42bfc74..bcd582c 100644
--- a/src/workflows/manager/components/AddDialog.js
+++ b/src/workflows/manager/components/AddDialog.js
@@ -37,13 +37,13 @@
</wf-workflow-editor>
<md-filled-button
slot="primaryAction"
- label="Add"
@click=${this._save}>
+ Add
</md-filled-button>
<md-text-button
slot="secondaryAction"
- dialogAction="cancel"
- label="Cancel">
+ dialogAction="cancel">
+ Cancel
</md-text-button>
</mwc-dialog>
`;
diff --git a/src/workflows/manager/components/List.js b/src/workflows/manager/components/List.js
index d18571f..9f7ed5f 100644
--- a/src/workflows/manager/components/List.js
+++ b/src/workflows/manager/components/List.js
@@ -1,6 +1,7 @@
import '@material/web/list/list.js';
import '@material/web/list/list-item.js';
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
import './WorkflowDialog.js';
import {css, html, LitElement, nothing} from 'lit';
@@ -37,13 +38,14 @@
renderListItems() {
return map(this.workflows, w => html`
<md-list-item
- headline=${w.proto?.getName?.()}
+ type="button"
@click=${() => this._show(w)}>
+ <div slot="headline">${w.proto?.getName?.()}</div>
<div slot="end" class="end">
- <md-standard-icon-button
- icon="delete"
+ <md-icon-button
@click=${e => this._showDelete(w.uuid, e)}>
- </md-standard-icon-button>
+ <md-icon>delete</md-icon>
+ </md-icon-button>
</div>
</md-list-item>
`);
diff --git a/src/workflows/manager/components/WorkflowDialog.js b/src/workflows/manager/components/WorkflowDialog.js
index 19ff796..e990246 100644
--- a/src/workflows/manager/components/WorkflowDialog.js
+++ b/src/workflows/manager/components/WorkflowDialog.js
@@ -40,13 +40,13 @@
</wf-workflow-editor>
<md-filled-button
slot="primaryAction"
- label="Save"
@click=${this._save}>
+ Save
</md-filled-button>
<md-text-button
slot="secondaryAction"
- dialogAction="cancel"
- label="Cancel">
+ dialogAction="cancel">
+ Cancel
</md-text-button>
</mwc-dialog>
`;
diff --git a/src/workflows/manager/components/WorkflowEditor.js b/src/workflows/manager/components/WorkflowEditor.js
index 33c9224..1818ea7 100644
--- a/src/workflows/manager/components/WorkflowEditor.js
+++ b/src/workflows/manager/components/WorkflowEditor.js
@@ -1,4 +1,5 @@
import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
import '@material/web/textfield/filled-text-field.js';
import './ActionEditor.js';
@@ -58,9 +59,9 @@
if (this.readOnly) return nothing;
return html`
<md-outlined-button
- icon="add"
- label="Add another action"
@click=${this._addAction}>
+ <md-icon slot="icon">add</md-icon>
+ Add another action
</md-outlined-button>
`;
}
diff --git a/src/workflows/manager/components/actions/ReplyWithCR.js b/src/workflows/manager/components/actions/ReplyWithCR.js
index e3deee7..40a6b9c 100644
--- a/src/workflows/manager/components/actions/ReplyWithCR.js
+++ b/src/workflows/manager/components/actions/ReplyWithCR.js
@@ -1,11 +1,12 @@
-import '@material/web/formfield/formfield.js';
+import '@material/web/icon/icon.js';
import '@material/web/switch/switch.js';
import '@material/web/textfield/outlined-text-field.js';
+import '../../../../common/components/FormField.js';
import {css, html, LitElement, nothing} from 'lit';
import {createRef, ref} from 'lit/directives/ref.js';
-import {CCApi} from '../../../../common/api.js';
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
import * as pb from '../../../proto/main_pb.js';
export default class WFActionReplyWithCR extends LitElement {
@@ -15,15 +16,22 @@
_importerWindow: {type: Object, state: true},
};
- static styles = css`
- .form-line {
- display: flex;
- flex-direction: row;
- align-items: center;
- margin-block: 1em;
- gap: .5rem;
- }
- `;
+ static styles = [
+ SHARED_MD3_STYLES,
+ css`
+ .form-line {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-block: 1em;
+ gap: .5rem;
+ }
+
+ .select-cr-btn {
+ --md-outlined-button-icon-size: 24px;
+ }
+ `,
+ ];
cannedResponseRef = createRef();
subscribeRef = createRef();
@@ -56,27 +64,36 @@
</md-outlined-text-field>
${this.readOnly ? nothing : html`
<md-outlined-button
- icon="more"
- label="Select CR"
+ class="select-cr-btn"
@click=${this._openCRImporter}>
+ <md-icon slot="icon" filled>more</md-icon>
+ Select CR
</md-outlined-button>
`}
</div>
<div class="form-line">
- <md-formfield label="Subscribe to thread">
+ <twpt-form-field>
<md-switch ${ref(this.subscribeRef)}
?selected=${this.subscribe}
?disabled=${this.readOnly}
- @click=${this._subscribeChanged}/>
- </md-formfield>
+ @change=${this._subscribeChanged}/>
+ </md-switch>
+ <span slot="label">
+ Subscribe to thread
+ </span>
+ </twpt-form-field>
</div>
<div class="form-line">
- <md-formfield label="Mark as answer">
+ <twpt-form-field>
<md-switch ${ref(this.markAsAnswerRef)}
?selected=${this.markAsAnswer}
?disabled=${this.readOnly}
- @click=${this._markAsAnswerChanged}/>
- </md-formfield>
+ @change=${this._markAsAnswerChanged}/>
+ </md-switch>
+ <span slot="label">
+ Mark as answer
+ </span>
+ </twpt-form-field>
</div>
`;
}
diff --git a/src/workflows/manager/index.js b/src/workflows/manager/index.js
index 113177c..b3b08d2 100644
--- a/src/workflows/manager/index.js
+++ b/src/workflows/manager/index.js
@@ -1,4 +1,5 @@
import '@material/web/fab/fab.js';
+import '@material/web/icon/icon.js';
import './components/List.js';
import './components/AddDialog.js';
import './components/WorkflowDialog.js';
@@ -50,8 +51,8 @@
<p>Workflows allow you to run a customized list of actions on a thread easily.</p>
<wf-list .workflows=${this._workflows}></wf-list>
<md-fab ${ref(this.addFabRef)}
- icon="add"
@click=${this._showAddDialog}>
+ <md-icon slot="icon">add</md-icon>
</md-fab>
<wf-add-dialog ${ref(this.addDialog)}>
</wf-add-dialog>