Skip to content

Commit fd570f6

Browse files
JakobVogelsangJakobVogelsang
committed
refactor: scope plugin
1 parent 1058d04 commit fd570f6

File tree

87 files changed

+5631
-2889
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+5631
-2889
lines changed

‎.github/workflows/test-on-pr-branch.yml‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
name: Test on PR branch
2+
on: pull_request
3+
4+
jobs:
5+
unit:
6+
runs-on: ubuntu-22.04
7+
steps:
8+
- name: Checkout
9+
uses: actions/checkout@v3
10+
11+
- name: Set up Node.js
12+
uses: actions/setup-node@v3
13+
with:
14+
node-version: '20'
15+
16+
- name: Install dependencies
17+
run: npm ci
18+
19+
- name: Install playwright browsers
20+
run: npx playwright install chromium
21+
22+
- name: Run unit tests
23+
run: npm run-script test:unit
24+
visual:
25+
runs-on: ubuntu-22.04
26+
steps:
27+
- name: Checkout
28+
uses: actions/checkout@v3
29+
30+
- name: Set up Node.js
31+
uses: actions/setup-node@v3
32+
with:
33+
node-version: '20'
34+
35+
- name: Install dependencies
36+
run: npm ci
37+
38+
- name: Install playwright browsers
39+
run: npx playwright install chromium
40+
41+
- name: Run visual test
42+
run: npm run-script test:visual
43+
44+
- name: Update screenshots
45+
if: failure()
46+
run: npm run test:update
47+
48+
- name: Upload failed screenshots as artifacts
49+
uses: actions/upload-artifact@v4
50+
if: failure()
51+
with:
52+
name: failed_screenshots
53+
path: |
54+
screenshots/*/failed/
55+
screenshots/*/baseline/

‎.github/workflows/test.yml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
name: Test
2+
on: [push, workflow_dispatch]
3+
4+
jobs:
5+
test:
6+
runs-on: ubuntu-22.04
7+
steps:
8+
- name: Checkout
9+
uses: actions/checkout@v3
10+
11+
- name: Set up Node.js
12+
uses: actions/setup-node@v3
13+
with:
14+
node-version: '20'
15+
16+
- name: Install dependencies
17+
run: npm ci
18+
19+
- name: Install playwright browsers
20+
run: npx playwright install chromium
21+
22+
- name: Run tests
23+
run: npm run test

‎.github/workflows/update-screenshots.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: Update Screenshots
2+
3+
on: workflow_dispatch
4+
5+
jobs:
6+
test:
7+
runs-on: ubuntu-22.04
8+
steps:
9+
- name: Checkout
10+
uses: actions/checkout@v3
11+
12+
- name: Set up Node.js
13+
uses: actions/setup-node@v3
14+
with:
15+
node-version: '20'
16+
17+
- name: Install dependencies
18+
run: npm ci
19+
20+
- name: Install playwright browsers
21+
run: npx playwright install chromium
22+
23+
- name: Run tests
24+
run: npm run test
25+
26+
- name: Update screenshots
27+
if: failure()
28+
run: npm run test:update
29+
30+
- name: Upload failed screenshots as artifacts
31+
uses: actions/upload-artifact@v3
32+
if: failure()
33+
with:
34+
name: failed_screenshots
35+
path: |
36+
screenshots/*/failed/
37+
screenshots/*/baseline/

‎communication-mapping-editor.ts‎ renamed to ‎CommunicationSclEditor.ts‎

Lines changed: 62 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { LitElement, nothing, css, html, svg, TemplateResult } from 'lit';
2-
import { customElement, property, query, state } from 'lit/decorators.js';
2+
import { property, query, state } from 'lit/decorators.js';
33
import { classMap } from 'lit/directives/class-map.js';
44

5-
import '@material/mwc-button';
6-
import '@material/mwc-icon-button';
7-
import '@material/mwc-icon-button-toggle';
8-
// eslint-disable-next-line import/no-extraneous-dependencies
9-
import '@material/mwc-fab';
10-
import '@material/mwc-textfield';
11-
import type { IconButtonToggle } from '@material/mwc-icon-button-toggle';
5+
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
6+
7+
import { MdFab } from '@scopedelement/material-web/fab/MdFab.js';
8+
import { MdIcon } from '@scopedelement/material-web/icon/MdIcon.js';
9+
import { MdIconButton } from '@scopedelement/material-web/iconbutton/MdIconButton.js';
10+
import { MdOutlinedTextField } from '@scopedelement/material-web/textfield/MdOutlinedTextField.js';
1211

1312
import { newEditEvent } from '@openscd/open-scd-core';
1413

@@ -26,8 +25,14 @@ import {
2625
import { serviceColoring, svgConnectionGenerator } from './foundation/paths.js';
2726
import { IED, Connection } from './foundation/types.js';
2827

29-
@customElement('communication-mapping-editor')
30-
export class CommunicationMappingEditor extends LitElement {
28+
export class CommunicationSclEditor extends ScopedElementsMixin(LitElement) {
29+
static scopedElements = {
30+
'md-fab': MdFab,
31+
'md-icon': MdIcon,
32+
'md-outlined-textfield': MdOutlinedTextField,
33+
'md-icon-button': MdIconButton,
34+
};
35+
3136
@property({ attribute: false })
3237
substation!: Element;
3338

@@ -405,57 +410,59 @@ export class CommunicationMappingEditor extends LitElement {
405410
<h3 class="filter title">
406411
Filter connections
407412
<nav style="float: right;">
408-
<mwc-icon-button
409-
icon="close"
413+
<md-icon-button
410414
@click="${() => {
411415
this.showFilterBox = false;
412416
}}"
413-
></mwc-icon-button>
417+
>
418+
<md-icon>close</md-icon>
419+
</md-icon-button>
414420
</nav>
415421
</h3>
416-
<mwc-textfield
422+
<md-outlined-textfield
417423
label="Source IED name"
418424
value="${this.sourceIEDFilter}"
419425
@input="${(evt: Event) => {
420426
this.sourceIEDFilter = (evt.target as HTMLInputElement).value;
421427
}}"
422-
></mwc-textfield>
423-
<mwc-textfield
428+
></md-outlined-textfield>
429+
<md-outlined-textfield
424430
label="Target IED name"
425431
value="${this.targetIEDFilter}"
426432
@input="${(evt: Event) => {
427433
this.targetIEDFilter = (evt.target as HTMLInputElement).value;
428434
}}"
429-
></mwc-textfield>
430-
<mwc-textfield
435+
></md-outlined-textfield>
436+
<md-outlined-textfield
431437
label="Control Block name"
432438
value="${this.cbNameFilter}"
433439
@input="${(evt: Event) => {
434440
this.cbNameFilter = (evt.target as HTMLInputElement).value;
435441
}}"
436-
></mwc-textfield>
442+
></md-outlined-textfield>
437443
</div>`;
438444
}
439445

440446
renderFilterFab(): TemplateResult {
441447
return html`<nav class="filter button">
442448
${this.activeFilter()
443-
? html`<mwc-fab
449+
? html`<md-fab
444450
class="filter refresh"
445451
style="padding-right: 10px;"
446-
extended
447-
icon="refresh"
448452
label="Clear"
449453
@click="${() => {
450454
this.clearFilter();
451455
}}"
452-
></mwc-fab>`
453-
: nothing}<mwc-fab
454-
icon="filter_alt"
456+
><md-icon slot="icon">refresh</md-icon>
457+
</md-fab>`
458+
: nothing}
459+
<md-fab
455460
@click="${() => {
456461
this.showFilterBox = true;
457462
}}"
458-
></mwc-fab>
463+
>
464+
<md-icon slot="icon">filter_alt</md-icon>
465+
</md-fab>
459466
</nav>`;
460467
}
461468

@@ -521,41 +528,52 @@ export class CommunicationMappingEditor extends LitElement {
521528
}}"
522529
/>`
523530
: nothing}
524-
<mwc-icon-button-toggle
525-
?on=${this.editMode}
526-
onIcon="edit"
527-
offIcon="edit_off"
531+
<md-icon-button
532+
?selected=${this.editMode}
528533
@click="${(evt: Event) => {
529-
this.editMode = (evt.target as IconButtonToggle).on;
534+
this.editMode = !(
535+
(evt.target as HTMLElement).closest(
536+
'md-icon-button'
537+
) as MdIconButton
538+
).selected;
530539
this.resetIedSelection();
531540
}}"
532-
></mwc-icon-button-toggle>
533-
<mwc-icon-button
541+
>
542+
<md-icon>edit_off</md-icon>
543+
<md-icon slot="selected">edit</md-icon>
544+
</md-icon-button>
545+
<md-icon-button
534546
class="zoom"
535-
icon="zoom_in"
536547
title="Zoom in"
537548
@click="${() => {
538549
this.gridSize += 4;
539550
}}"
540551
>
541-
</mwc-icon-button>
542-
<mwc-icon-button
552+
<md-icon>zoom_in</md-icon>
553+
</md-icon-button>
554+
<md-icon-button
543555
class="zoom"
544556
icon="zoom_out"
545557
title="Zoom out"
546558
@click="${() => {
547559
this.gridSize -= 4;
548560
}}"
549561
>
550-
</mwc-icon-button>
551-
<mwc-icon-button-toggle
552-
?on=${this.showLabel}
553-
onIcon="font_download"
554-
offIcon="font_download_off"
562+
<md-icon>zoom_out</md-icon>
563+
</md-icon-button>
564+
<md-icon-button
565+
?selected=${this.showLabel}
555566
@click="${(evt: Event) => {
556-
this.showLabel = (evt.target as IconButtonToggle).on;
567+
this.showLabel = !(
568+
(evt.target as HTMLElement).closest(
569+
'md-icon-button'
570+
) as MdIconButton
571+
).selected;
557572
}}"
558-
></mwc-icon-button-toggle>
573+
>
574+
<md-icon>font_download_off</md-icon>
575+
<md-icon slot="selected">font_download</md-icon>
576+
</md-icon-button>
559577
</div>`;
560578
}
561579
@@ -673,7 +691,7 @@ export class CommunicationMappingEditor extends LitElement {
673691
font-weight: 400;
674692
}
675693
676-
.filter.box > mwc-textfield {
694+
.filter.box > md-outlined-textfield {
677695
padding: 10px;
678696
}
679697

0 commit comments

Comments
 (0)