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