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/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);