Skip to content

Commit 17aaccf

Browse files
sebssebs
committed
Add Menus
1 parent 96353ba commit 17aaccf

File tree

3 files changed

+52
-7
lines changed

3 files changed

+52
-7
lines changed

‎packages/test-app/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "@hiherto-elements/test-app",
33
"dependencies": {
44
"@polymer/app-layout": "^3.0.0-pre.19",
5+
"@polymer/iron-dropdown": "^3.0.0-pre.19",
56
"@polymer/iron-icons": "^3.0.0-pre.19",
67
"@polymer/paper-icon-button": "^3.0.0-pre.19",
78
"@polymer/paper-input": "^3.0.0-pre.19",

‎packages/test-app/src/test-app-app/svg-sample-icons.js

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,17 @@ $_documentContainer.setAttribute('style', 'display: none;');
55

66
$_documentContainer.innerHTML = `<iron-iconset-svg name="svg-sample-icons" size="100">
77
<svg>
8-
<defs>
8+
<defs>
9+
<g id="info">
10+
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
11+
<path fill="#000000" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" />
12+
</svg>
13+
</g>
14+
<g id="settings">
15+
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
16+
<path fill="#000000" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
17+
</svg>
18+
</g>
919
<g id="cap">
1020
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
1121
<path fill="#000000" d="M15,14V8H17.17L12,2.83L6.83,8H9V14H15M12,0L22,10H17V16H7V10H2L12,0M7,18H17V24H7V18M15,20H9V22H15V20Z" />
@@ -16,6 +26,11 @@ $_documentContainer.innerHTML = `<iron-iconset-svg name="svg-sample-icons" size=
1626
<path fill="#000000" d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z" />
1727
</svg>
1828
</g>
29+
<g id="cart">
30+
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
31+
<path fill="#000000" d="M11,9H13V6H16V4H13V1H11V4H8V6H11M7,18A2,2 0 0,0 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20A2,2 0 0,0 7,18M17,18A2,2 0 0,0 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20A2,2 0 0,0 17,18M7.17,14.75L7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.59 17.3,11.97L21.16,4.96L19.42,4H19.41L18.31,6L15.55,11H8.53L8.4,10.73L6.16,6L5.21,4L4.27,2H1V4H3L6.6,11.59L5.25,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42C7.29,15 7.17,14.89 7.17,14.75Z" />
32+
</svg>
33+
</g>
1934
</defs>
2035
</svg>
2136
</iron-iconset-svg><iron-iconset-svg name="inline" size="24">

‎packages/test-app/src/test-app-app/test-app-app.js

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ import 'chartjs-web-components/src/base.js'
88
import '@polymer/app-layout/app-toolbar/app-toolbar.js'
99
import '@polymer/paper-tabs/paper-tabs.js'
1010
import '@polymer/paper-tabs/paper-tab.js'
11+
import '@polymer/paper-item/paper-item.js'
1112
import '@polymer/paper-slider/paper-slider.js'
1213
import '@polymer/iron-icon/iron-icon.js';
1314
import '@polymer/iron-icons/iron-icons.js';
15+
import '@polymer/iron-dropdown/iron-dropdown.js';
1416
import '@polymer/paper-icon-button/paper-icon-button.js'
1517
import './svg-sample-icons.js'
1618
/**
@@ -24,13 +26,13 @@ class TestAppApp extends PolymerElement {
2426
:host {
2527
display: block;
2628
}
27-
#chartbox {
28-
29-
29+
30+
iron-dropdown {
31+
width: 300px;
32+
background-color: white;
33+
color: green;
3034
}
3135
32-
33-
3436
body {
3537
margin: 0px;
3638
}
@@ -49,8 +51,23 @@ class TestAppApp extends PolymerElement {
4951
<app-header-layout>
5052
<app-header fixed condenses effects="waterfall" slot="header">
5153
<app-toolbar>
52-
<div main-title>Token Explorer</div>
54+
<paper-icon-button icon="svg-sample-icons:info" on-tap="_openInfo"></paper-icon-button>
5355
56+
<div main-title>Token Explorer</div>
57+
<paper-icon-button icon="svg-sample-icons:cart" on-tap="_openBuy"></paper-icon-button>
58+
<iron-dropdown id="buy" horizontal-align="right" vertical-align="top">
59+
<div slot="dropdown-content">
60+
<h2>Buy</h2>
61+
<paper-item>foo</paper-item>
62+
</div>
63+
</iron-dropdown>
64+
<paper-icon-button icon="svg-sample-icons:settings" on-tap="_openSettings"></paper-icon-button>
65+
<iron-dropdown id="settings" horizontal-align="right" vertical-align="top">
66+
<div slot="dropdown-content">
67+
<h2>Settings</h2>
68+
<paper-item>foo</paper-item>
69+
</div>
70+
</iron-dropdown>
5471
</app-toolbar>
5572
5673
<app-toolbar>
@@ -89,6 +106,13 @@ class TestAppApp extends PolymerElement {
89106
this._triggerTokenSupply(this.tokens[0]);
90107
}
91108

109+
_openSettings() {
110+
this.$.settings.toggle();
111+
}
112+
_openBuy() {
113+
this.$.buy.toggle();
114+
}
115+
92116
_triggerTokenSupply(token) {
93117
var api = etherscanApi.init('');
94118
var supply = api.stats.tokensupply(null, token.address);
@@ -228,6 +252,11 @@ class TestAppApp extends PolymerElement {
228252
address: '0x05f4a42e251f2d52b8ed15e9fedaacfcef1fad27',
229253
name: 'ZIL'
230254
},
255+
{
256+
address: ' 0xcb97e65f07da24d46bcdd078ebebd7c6e6e3d750',
257+
name: 'BTM'
258+
},
259+
231260

232261
]
233262
},

0 commit comments

Comments
 (0)