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