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>
`;