Skip to content

Commit f7435d0

Browse files
jarrodekjarrodek
committed
docs: updating icons in the demo page
1 parent 4fbd5e9 commit f7435d0

10 files changed

Lines changed: 61 additions & 17 deletions

File tree

‎demo/demo-base.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { html, render } from 'lit-html';
22
import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';
33
import '@advanced-rest-client/oauth-authorization/oauth1-authorization.js';
44
import '@advanced-rest-client/oauth-authorization/oauth2-authorization.js';
5-
import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
65
import '@polymer/paper-toast/paper-toast.js';
76
import './helpers/loader-screen.js';
87
import './helpers/upload-api-screen.js';

‎demo/element/app.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import '@anypoint-web-components/anypoint-styles/colors.js';
66
import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';
77
import '@advanced-rest-client/oauth-authorization/oauth1-authorization.js';
88
import '@advanced-rest-client/oauth-authorization/oauth2-authorization.js';
9+
import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
10+
import { moreVert, menu } from '@advanced-rest-client/arc-icons/ArcIcons.js';
911
import '../../api-console.js';
1012
import { DemoBase } from '../demo-base.js';
1113

@@ -30,17 +32,19 @@ class ApicApplication extends DemoBase {
3032
<anypoint-icon-button
3133
aria-label="Activate to open API console menu"
3234
title="Open API console menu"
33-
@click="${this.toggleConsoleMenu}">
34-
<iron-icon icon="arc:menu"></iron-icon>
35+
@click="${this.toggleConsoleMenu}"
36+
>
37+
<span class="icon">${menu}</span>
3538
</anypoint-icon-button>
3639
3740
<h1>API Console as an element</h1>
3841
3942
<anypoint-icon-button
4043
aria-label="Activate to open API selection menu"
4144
title="Open API selection menu"
42-
@click="${this.openApiSelector}">
43-
<iron-icon icon="arc:more-vert"></iron-icon>
45+
@click="${this.openApiSelector}"
46+
>
47+
<span class="icon">${moreVert}</span>
4448
</anypoint-icon-button>
4549
</div>
4650

‎demo/element/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,13 @@
9898
text-align: center;
9999
color: #9E9E9E;
100100
}
101+
102+
.icon {
103+
display: inlink-block;
104+
width: 24px;
105+
height: 24px;
106+
fill: currentColor;
107+
}
101108
</style>
102109
</head>
103110

‎demo/helpers/api-selector.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { html, css, LitElement } from 'lit-element';
22
import { AnypointMenuMixin } from '@anypoint-web-components/anypoint-menu-mixin/anypoint-menu-mixin.js';
33
import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
44
import '@anypoint-web-components/anypoint-button/anypoint-button.js';
5-
import '@polymer/iron-icon/iron-icon.js';
5+
import { close, addCircleOutline } from '@advanced-rest-client/arc-icons/ArcIcons.js';
66

77
class ApiSelector extends AnypointMenuMixin(LitElement) {
88
static get styles() {
@@ -39,6 +39,13 @@ class ApiSelector extends AnypointMenuMixin(LitElement) {
3939
.upload {
4040
width: 100%;
4141
}
42+
43+
.icon {
44+
display: inlink-block;
45+
width: 24px;
46+
height: 24px;
47+
fill: currentColor;
48+
}
4249
`;
4350
}
4451

@@ -85,12 +92,13 @@ class ApiSelector extends AnypointMenuMixin(LitElement) {
8592
<div class="title">Select API</div>
8693
<anypoint-icon-button
8794
aria-label="Activate to close the API menu"
88-
@click="${this.close}">
89-
<iron-icon icon="arc:close"></iron-icon>
95+
@click="${this.close}"
96+
>
97+
<span class="icon">${close}</span>
9098
</anypoint-icon-button>
9199
</div>
92100
<anypoint-button @click="${this._uploadHandler}" class="upload">
93-
<iron-icon icon="arc:add-circle-outline"></iron-icon>
101+
<span class="icon">${addCircleOutline}</span>
94102
Upload an API
95103
</anypoint-button>
96104
<section>

‎demo/standalone/app.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { html } from 'lit-html';
22
import '@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js';
33
import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
44
import '@anypoint-web-components/anypoint-item/anypoint-item.js';
5+
import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
6+
import { moreVert } from '@advanced-rest-client/arc-icons/ArcIcons.js';
57
import '../../api-console-app.js';
68
import { DemoBase } from '../demo-base.js';
79

@@ -29,8 +31,9 @@ class ApicApplication extends DemoBase {
2931
slot="toolbar"
3032
aria-label="Activate to open API selection menu"
3133
title="Open API selection menu"
32-
@click="${this.openApiSelector}">
33-
<iron-icon icon="arc:more-vert"></iron-icon>
34+
@click="${this.openApiSelector}"
35+
>
36+
<span class="icon">${moreVert}</span>
3437
</anypoint-icon-button>
3538
</api-console-app>
3639
${this.apiSelectorTemplate()}

‎demo/standalone/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,13 @@
5454
--anypoint-dropdown-menu-background-color: #1c2831;
5555
--anypoint-dropdown-menu-label-color: #fff;
5656
}
57+
58+
.icon {
59+
display: inlink-block;
60+
width: 24px;
61+
height: 24px;
62+
fill: currentColor;
63+
}
5764
</style>
5865
</head>
5966

‎demo/themed/anypoint.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,13 @@
5151
--anypoint-dropdown-menu-background-color: #1c2831;
5252
--anypoint-dropdown-menu-label-color: #fff;
5353
}
54+
55+
.icon {
56+
display: inlink-block;
57+
width: 24px;
58+
height: 24px;
59+
fill: currentColor;
60+
}
5461
</style>
5562
</head>
5663

‎demo/themed/anypoint.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
44
import '@anypoint-web-components/anypoint-item/anypoint-item.js';
55
import '@anypoint-web-components/anypoint-styles/colors.js';
66
import '@anypoint-web-components/anypoint-styles/typography.js';
7+
import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
8+
import { moreVert } from '@advanced-rest-client/arc-icons/ArcIcons.js';
79
import '../../api-console-app.js';
810
import { DemoBase } from '../demo-base.js';
911

@@ -29,8 +31,9 @@ class ApicApplication extends DemoBase {
2931
slot="toolbar"
3032
aria-label="Activate to open API selection menu"
3133
title="Open API selection menu"
32-
@click="${this.openApiSelector}">
33-
<iron-icon icon="arc:more-vert"></iron-icon>
34+
@click="${this.openApiSelector}"
35+
>
36+
<span class="icon">${moreVert}</span>
3437
</anypoint-icon-button>
3538
</api-console-app>
3639
${this.apiSelectorTemplate()}

‎demo/themed/dark.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,11 @@
3939
</script>
4040
<link rel="stylesheet" type="text/css" href="./dark-theme.css">
4141
<style>
42-
html, body {
43-
42+
.icon {
43+
display: inlink-block;
44+
width: 24px;
45+
height: 24px;
46+
fill: currentColor;
4447
}
4548
</style>
4649
</head>

‎demo/themed/dark.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import '@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js';
33
import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
44
import '@anypoint-web-components/anypoint-item/anypoint-item.js';
55
import '@anypoint-web-components/anypoint-styles/colors.js';
6+
import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
7+
import { moreVert } from '@advanced-rest-client/arc-icons/ArcIcons.js';
68
import '../../api-console-app.js';
79
import { DemoBase } from '../demo-base.js';
810

@@ -27,8 +29,9 @@ class ApicApplication extends DemoBase {
2729
slot="toolbar"
2830
aria-label="Activate to open API selection menu"
2931
title="Open API selection menu"
30-
@click="${this.openApiSelector}">
31-
<iron-icon icon="arc:more-vert"></iron-icon>
32+
@click="${this.openApiSelector}"
33+
>
34+
<span class="icon">${moreVert}</span>
3235
</anypoint-icon-button>
3336
</api-console-app>
3437
${this.apiSelectorTemplate()}

0 commit comments

Comments
 (0)