Skip to content

Commit d0fee7d

Browse files
JakobVogelsangJakobVogelsang
committed
refactor: remove mwc-button
1 parent f632460 commit d0fee7d

13 files changed

+96
-115
lines changed

‎editors/dataset/data-set-editor.ts

+5-7
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
import { css, html, LitElement, TemplateResult } from 'lit';
33
import { customElement, property, query, state } from 'lit/decorators.js';
44

5-
import '@material/mwc-button';
6-
import type { Button } from '@material/mwc-button';
5+
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
76

87
import { newEditEvent } from '@openenergytools/open-scd-core';
98
import {
@@ -41,7 +40,7 @@ export class DataSetEditor extends LitElement {
4140

4241
@query('.selectionlist') selectionList!: ActionList;
4342

44-
@query('mwc-button') selectDataSetButton!: Button;
43+
@query('.change.scl.element') selectDataSetButton!: MdOutlinedButton;
4544

4645
@query('data-set-element-editor')
4746
dataSetElementEditor!: DataSetElementEditor;
@@ -143,15 +142,14 @@ export class DataSetEditor extends LitElement {
143142
}
144143

145144
private renderToggleButton(): TemplateResult {
146-
return html`<mwc-button
145+
return html`<md-outlined-button
147146
class="change scl element"
148-
outlined
149-
label="Select DataSet"
150147
@click=${() => {
151148
this.selectionList.classList.remove('hidden');
152149
this.selectDataSetButton.classList.add('hidden');
153150
}}
154-
></mwc-button>`;
151+
>Select DataSet</md-outlined-button
152+
>`;
155153
}
156154

157155
render(): TemplateResult {

‎editors/dataset/data-set-element-editor.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('DataSet element editor', () => {
9595
await setViewport({ width: 800, height: 1200 });
9696
await sendMouse({ type: 'click', position: [740, 600] }); // open menu
9797
await timeout(200); // await menu to be opened
98-
await sendMouse({ type: 'click', position: [740, 780] }); // click on move down
98+
await sendMouse({ type: 'click', position: [740, 760] }); // click on move down
9999

100100
const toBeMovedFCDA = dataSet.querySelectorAll(':scope > FCDA')[1];
101101
const reference = toBeMovedFCDA.nextElementSibling?.nextElementSibling;

‎editors/dataset/data-set-element-editor.ts

+22-30
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@ import {
88
state,
99
} from 'lit/decorators.js';
1010

11-
import '@material/mwc-button';
1211
import '@material/mwc-dialog';
13-
import type { Button } from '@material/mwc-button';
1412
import type { Dialog } from '@material/mwc-dialog';
1513

14+
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
1615
// import '@scopedelement/material-web/icon/icon.js'
1716

1817
import '@openscd/oscd-tree-grid';
@@ -121,17 +120,17 @@ export class DataSetElementEditor extends LitElement {
121120

122121
@queryAll('scl-text-field') inputs!: SclTextField[];
123122

124-
@query('mwc-button.save') saveButton!: Button;
123+
@query('.dataset.save') saveButton!: MdTextButton;
125124

126125
@query('.list.fcda') fcdaList!: ActionList;
127126

128-
@query('#dapickerbutton') daPickerButton!: Button;
127+
@query('#dapickerbutton') daPickerButton!: MdTextButton;
129128

130129
@query('#dapicker') daPickerDialog!: Dialog;
131130

132131
@query('#dapicker > oscd-tree-grid') daPicker!: TreeGrid;
133132

134-
@query('#dopickerbutton') doPickerButton!: Button;
133+
@query('#dopickerbutton') doPickerButton!: MdTextButton;
135134

136135
@query('#dopicker') doPickerDialog!: Dialog;
137136

@@ -148,6 +147,8 @@ export class DataSetElementEditor extends LitElement {
148147
}
149148

150149
private onInputChange(): void {
150+
if (!this.element) return;
151+
151152
this.someDiffOnInputs = Array.from(this.inputs ?? []).some(
152153
input => this.element?.getAttribute(input.label) !== input.value
153154
);
@@ -291,52 +292,44 @@ export class DataSetElementEditor extends LitElement {
291292
private renderDataObjectPicker(): TemplateResult {
292293
const server = this.element?.closest('Server')!;
293294

294-
return html` <mwc-button
295+
return html` <md-text-button
295296
id="doPickerButton"
296-
label="Add data object"
297297
icon="playlist_add"
298298
?disabled=${!canAddFCDA(this.element!)}
299299
@click=${() => this.doPickerDialog?.show()}
300-
></mwc-button
300+
>Add data object<md-icon slot="icon">playlist_add</me-icon></md-text-button
301301
><mwc-dialog id="dopicker" heading="Add Data Objects">
302302
<oscd-tree-grid .tree=${dataObjectTree(server)}></oscd-tree-grid>
303-
<mwc-button
303+
<md-text-button
304304
slot="secondaryAction"
305-
label="close"
306305
@click=${() => this.doPickerDialog?.close()}
307-
></mwc-button>
308-
<mwc-button
306+
>Close</md-text-button>
307+
<md-text-button
309308
slot="primaryAction"
310-
label="save"
311-
icon="save"
312309
@click=${this.saveDataObjects}
313-
></mwc-button>
310+
>Save<md-icon slot="icon">save</md-icon></md-text-button>
314311
</mwc-dialog>`;
315312
}
316313

317314
private renderDataAttributePicker(): TemplateResult {
318315
const server = this.element?.closest('Server')!;
319316

320-
return html` <mwc-button
317+
return html` <md-text-button
321318
id="daPickerButton"
322-
label="Add data attribute"
323319
icon="playlist_add"
324320
?disabled=${!canAddFCDA(this.element!)}
325321
@click=${() => this.daPickerDialog.show()}
326-
></mwc-button
322+
>Add data attribute<md-icon slot="icon">playlist_add</me-icon></md-text-button
327323
><mwc-dialog id="dapicker" heading="Add Data Attributes"
328324
><oscd-tree-grid .tree="${dataAttributeTree(server)}"></oscd-tree-grid>
329-
<mwc-button
325+
<md-text-button
330326
slot="secondaryAction"
331-
label="close"
332327
@click=${() => this.daPickerDialog?.close()}
333-
></mwc-button>
334-
<mwc-button
328+
>Close</md-text-button>
329+
<md-text-button
335330
slot="primaryAction"
336-
label="save"
337-
icon="save"
338331
@click=${this.saveDataAttributes}
339-
></mwc-button>
332+
>Save<md-icon slot="icon">Save</md-icon></md-text-button>
340333
</mwc-dialog>`;
341334
}
342335

@@ -381,13 +374,12 @@ export class DataSetElementEditor extends LitElement {
381374
@input=${() => this.onInputChange()}
382375
>
383376
</scl-text-field>
384-
<mwc-button
385-
class="save"
386-
label="save"
387-
icon="save"
377+
<md-text-button
378+
class="dataset save"
388379
?disabled=${!this.someDiffOnInputs}
389380
@click=${() => this.saveChanges()}
390-
></mwc-button>
381+
>Save<md-icon slot="icon">save</md-icon></md-text-button
382+
>
391383
<hr color="lightgrey" />`;
392384
}
393385

‎editors/gsecontrol/gse-control-editor.ts

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
12
import { css, html, TemplateResult } from 'lit';
23
import { customElement, query } from 'lit/decorators.js';
34

4-
import '@material/mwc-button';
5-
import type { Button } from '@material/mwc-button';
5+
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
66

77
// eslint-disable-next-line import/no-extraneous-dependencies
88
import { newEditEvent } from '@openenergytools/open-scd-core';
@@ -29,7 +29,7 @@ import BaseElementEditor from '../base-element-editor.js';
2929
export class GseControlEditor extends BaseElementEditor {
3030
@query('.selectionlist') selectionList!: ActionList;
3131

32-
@query('mwc-button') selectGSEControlButton!: Button;
32+
@query('.change.scl.element') selectGSEControlButton!: MdOutlinedButton;
3333

3434
@query('gse-control-element-editor')
3535
gseControlElementEditor!: GseControlElementEditor;
@@ -154,15 +154,14 @@ export class GseControlEditor extends BaseElementEditor {
154154
}
155155

156156
private renderToggleButton(): TemplateResult {
157-
return html`<mwc-button
157+
return html`<md-outlined-button
158158
class="change scl element"
159-
outlined
160-
label="Selected GOOSE"
161159
@click=${() => {
162160
this.selectionList.classList.remove('hidden');
163161
this.selectGSEControlButton.classList.add('hidden');
164162
}}
165-
></mwc-button>`;
163+
>Selected GOOSE</md-outlined-button
164+
>`;
166165
}
167166

168167
render(): TemplateResult {

‎editors/gsecontrol/gse-control-element-editor.ts

+9-12
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import {
88
state,
99
} from 'lit/decorators.js';
1010

11-
import '@material/mwc-button';
12-
import type { Button } from '@material/mwc-button';
11+
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
1312

1413
// import '@scopedelement/material-web/checkbox/checkbox.js'
1514
import type { MdCheckbox } from '@scopedelement/material-web/checkbox/MdCheckbox.js';
@@ -83,15 +82,15 @@ export class GseControlElementEditor extends LitElement {
8382

8483
@queryAll('.content.gse > scl-text-field') gSEInputs!: SclTextField[];
8584

86-
@query('.content.gse > .save') gseSave!: Button;
85+
@query('.content.gse > .save') gseSave!: MdTextButton;
8786

8887
@queryAll('.input.gsecontrol') gSEControlInputs!: (
8988
| SclTextField
9089
| SclSelect
9190
| SclCheckbox
9291
)[];
9392

94-
@query('.content.gsecontrol > .save') gseControlSave!: Button;
93+
@query('.content.gsecontrol > .save') gseControlSave!: MdTextButton;
9594

9695
@query('#instType') instType?: MdCheckbox;
9796

@@ -268,13 +267,12 @@ export class GseControlElementEditor extends LitElement {
268267
type="number"
269268
@input=${this.onGSEInputChange}
270269
></scl-text-field>
271-
<mwc-button
270+
<md-text-button
272271
class="save"
273-
label="save"
274-
icon="save"
275272
?disabled=${!this.gSEdiff}
276273
@click=${() => this.saveGSEChanges()}
277-
></mwc-button>
274+
>Save<md-icon slot="icon">save</md-icon></md-text-button
275+
>
278276
</div>`;
279277
}
280278

@@ -364,13 +362,12 @@ export class GseControlElementEditor extends LitElement {
364362
@input=${this.onGSEControlInputChange}
365363
.selectOptions=${['None', 'Signature', 'SignatureAndEncryption']}
366364
></scl-select>
367-
<mwc-button
365+
<md-text-button
368366
class="save"
369-
label="save"
370-
icon="save"
371367
?disabled=${!this.gSEControlDiff}
372368
@click=${() => this.saveGSEControlChanges()}
373-
></mwc-button>
369+
>Save<md-icon slot="icon">save</md-icon></md-text-button
370+
>
374371
</div>`;
375372
}
376373

‎editors/report/report-control-editor.ts

+5-7
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
import { css, html, TemplateResult } from 'lit';
33
import { customElement, query } from 'lit/decorators.js';
44

5-
import '@material/mwc-button';
6-
import type { Button } from '@material/mwc-button';
5+
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
76

87
import '@openenergytools/filterable-lists/dist/action-list.js';
98
import { newEditEvent } from '@openenergytools/open-scd-core';
@@ -33,7 +32,7 @@ import BaseElementEditor from '../base-element-editor.js';
3332
export class ReportControlEditor extends BaseElementEditor {
3433
@query('.selectionlist') selectionList!: ActionList;
3534

36-
@query('mwc-button') selectReportControlButton!: Button;
35+
@query('.change.scl.element') selectReportControlButton!: MdOutlinedButton;
3736

3837
@query('report-control-element-editor')
3938
rpControlElementEditor!: ReportControlElementEditor;
@@ -160,15 +159,14 @@ export class ReportControlEditor extends BaseElementEditor {
160159
}
161160

162161
private renderToggleButton(): TemplateResult {
163-
return html`<mwc-button
162+
return html`<md-outlined-button
164163
class="change scl element"
165-
outlined
166-
label="Select Report"
167164
@click=${() => {
168165
this.selectionList.classList.remove('hidden');
169166
this.selectReportControlButton.classList.add('hidden');
170167
}}
171-
></mwc-button>`;
168+
>Select Report</md-outlined-button
169+
>`;
172170
}
173171

174172
render(): TemplateResult {

‎editors/report/report-control-element-editor.ts

+13-17
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import {
99
state,
1010
} from 'lit/decorators.js';
1111

12-
import '@material/mwc-button';
13-
import type { Button } from '@material/mwc-button';
12+
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
1413

1514
import { newEditEvent } from '@openenergytools/open-scd-core';
1615
import {
@@ -96,17 +95,17 @@ export class ReportControlElementEditor extends LitElement {
9695
@queryAll('.content.optfields > scl-checkbox')
9796
optFieldsInputs!: SclCheckbox[];
9897

99-
@query('.save.optfields') optFieldsSave!: Button;
98+
@query('.save.optfields') optFieldsSave!: MdTextButton;
10099

101100
@queryAll('.content.trgops > scl-checkbox')
102101
trgOpsInputs!: SclCheckbox[];
103102

104-
@query('.save.trgops') trgOpsSave!: Button;
103+
@query('.save.trgops') trgOpsSave!: MdTextButton;
105104

106105
@queryAll('.report.attributes')
107106
reportControlInputs!: (SclTextField | SclSelect | SclCheckbox)[];
108107

109-
@query('.content.reportcontrol > .save') reportControlSave!: Button;
108+
@query('.content.reportcontrol > .save') reportControlSave!: MdTextButton;
110109

111110
@query('.rptenabled.attributes') rptEnabledInput!: SclTextField;
112111

@@ -335,13 +334,12 @@ export class ReportControlElementEditor extends LitElement {
335334
></scl-checkbox>`
336335
)}
337336
</div>
338-
<mwc-button
337+
<md-text-button
339338
class="save optfields"
340-
label="save"
341-
icon="save"
342339
?disabled=${!this.optFieldsDiff}
343340
@click=${() => this.saveOptFieldChanges()}
344-
></mwc-button>`;
341+
>Save<md-icon slot="icon">save</md-icon></md-text-button
342+
>`;
345343
}
346344

347345
private renderTrgOpsContent(): TemplateResult {
@@ -371,13 +369,12 @@ export class ReportControlElementEditor extends LitElement {
371369
></scl-checkbox>`
372370
)}
373371
</div>
374-
<mwc-button
372+
<md-text-button
375373
class="save trgops"
376-
label="save"
377-
icon="save"
378374
?disabled=${!this.trgOpsDiff}
379375
@click=${() => this.saveTrgOpsChanges()}
380-
></mwc-button>`;
376+
>Save<md-icon slot="icon">save</md-icon></md-text-button
377+
>`;
381378
}
382379

383380
private renderChildElements(): TemplateResult {
@@ -487,13 +484,12 @@ export class ReportControlElementEditor extends LitElement {
487484
suffix="ms"
488485
@input=${this.onReportControlInputChange}
489486
></scl-text-field>
490-
<mwc-button
487+
<md-text-button
491488
class="save"
492-
label="save"
493-
icon="save"
494489
?disabled=${!this.reportControlDiff}
495490
@click=${() => this.saveReportControlChanges()}
496-
></mwc-button>
491+
>Save<md-icon slot="icon">save</md-icon></md-text-button
492+
>
497493
</div>`;
498494
}
499495

0 commit comments

Comments
 (0)