Skip to content
This repository was archived by the owner on Oct 27, 2022. It is now read-only.

Commit f5eaf5e

Browse files
author
Nick Kozlov
committed
add a lot of new UI things
1 parent 8b94281 commit f5eaf5e

File tree

5 files changed

+118
-19
lines changed

5 files changed

+118
-19
lines changed

‎angular/dist/bnbbrowser/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
<link rel="stylesheet" href="styles.9b5e5c7ed5f939436c31.css"></head>
1010
<body>
1111
<app-root></app-root>
12-
<script src="runtime.741402d1d47331ce975c.js"></script><script src="polyfills-es5.7f9896f05667ed1b2b2b.js" nomodule></script><script src="polyfills.4ff4d4d37857c508ba08.js"></script><script src="scripts.c1872b03322eabb9e005.js"></script><script src="main.848f5c28278e09ab1609.js"></script></body>
12+
<script src="runtime.741402d1d47331ce975c.js"></script><script src="polyfills-es5.7f9896f05667ed1b2b2b.js" nomodule></script><script src="polyfills.4ff4d4d37857c508ba08.js"></script><script src="scripts.c1872b03322eabb9e005.js"></script><script src="main.a945a889465afc0255ab.js"></script></body>
1313
</html>

‎angular/dist/bnbbrowser/main.848f5c28278e09ab1609.js‎ renamed to ‎angular/dist/bnbbrowser/main.a945a889465afc0255ab.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎angular/src/app/main/main.component.css‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@
77
white-space: nowrap;
88
color: #434343;
99
font-size: 15px !important;
10-
margin-top: 0.3em
10+
margin-top: 0.3em;
1111
}
1212

1313
#editButton:hover {
14-
/*font-size: 18px !important;*/
15-
text-underline: rgb(239, 184, 11) !important;
14+
font-size: 17px !important;
1615
}
1716

1817
#addressButton {
@@ -97,7 +96,40 @@ button#addressButton.btn.btn-sm.btn-link.hover-anchor {
9796
color: white;
9897
}
9998

100-
.menu-item:focus {
99+
.menu-item:hover {
101100
background: rgb(132, 142, 156);
102101
color: white;
103102
}
103+
104+
.menu-wrapper-users {
105+
margin-top: 4em;
106+
margin-left: -4px;
107+
border: rgba(11, 14, 17, 0.9);
108+
background: rgba(11, 14, 17, 0.9);
109+
max-width: 300px !important;
110+
width: 290px !important;
111+
height: 400px !important;
112+
border-radius: 5px;
113+
}
114+
115+
.menu-wrapper-users:focus {
116+
outline: none;
117+
}
118+
119+
.menu-item-users {
120+
background: rgba(11, 14, 17, 0);
121+
border: none;
122+
display: block;
123+
padding: 5px;
124+
width: 100%;
125+
font-size: 20px;
126+
font-weight: bold;
127+
color: white;
128+
text-align: left;
129+
}
130+
131+
.menu-item-users:hover {
132+
font-size: 23px;
133+
color: rgb(239, 184, 11);
134+
font-weight: bold;
135+
}

‎angular/src/app/main/main.component.html‎

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,72 @@
11
<div class="container">
2-
<div style="background:rgb(33, 40, 51); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px"
2+
<div style="background:rgb(33, 40, 51); border-bottom-left-radius: 2px;z-index: 9999 !important; border-bottom-right-radius: 2px"
33
class="row text-center">
44
<div class="col" align="left">
5-
<button class="btn btn-link btn-just-icon btn-lg"
5+
<button [satPopoverAnchor]="menuUsers" (click)="updateUsersList(); menuUsers.toggle()"
6+
class="btn btn-link btn-just-icon btn-lg"
67
style="color: rgb(132, 142, 156);; margin-right:-2em; font-size: 10px !important" href="/main">
78
<fa name="users" size="sm"></fa>
89
</button>
10+
<sat-popover #menuUsers horizontalAlign="center" verticalAlign="center">
11+
<div style="z-index: 300" class="menu-wrapper-users" tabIndex="0">
12+
<div class="container">
13+
<div style="margin-top: 2em; margin-left: 0.2em; margin-right: 1.2em" class="row">
14+
<div style="font-weight: bold; color: white; white-space: nowrap; margin-top: 1.2em"
15+
align="left"
16+
class="col-8">
17+
My Accounts
18+
</div>
19+
<div style="margin-top: 0.5em !important" align="right" class="col-4">
20+
<button style="margin-left: -10px" class="btn btn-binance-outline btn-sm">Log out
21+
</button>
22+
</div>
23+
</div>
24+
<hr style="border: 1px solid white">
25+
</div>
26+
<div style="height: 200px !important; position:fixed;
27+
overflow-y:scroll;" class="container">
28+
<div class="row">
29+
<div class="col-12">
30+
<button *ngFor="let item of usersMenu"
31+
class="menu-item-users"
32+
(click)="selectUser(item.val); menuUsers.toggle()">
33+
<button class="btn btn-just-icon"> {{item.val.charAt(0).toUpperCase()}}</button>
34+
{{ item.val }}
35+
</button>
36+
</div>
37+
</div>
38+
</div>
39+
<div style="margin-top: 13em" class="container">
40+
<div class="row">
41+
<div class="col-12">
42+
<hr style="border: 1px solid white">
43+
<button class="menu-item-users">
44+
<fa name="plus" size="sm"></fa>
45+
Create Account
46+
</button>
47+
<button class="menu-item-users">
48+
<fa name="arrow-right" size="sm"></fa>
49+
Import Account
50+
</button>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</sat-popover>
956
</div>
1057
<div class="col">
11-
<button [satPopoverAnchor]="menu" (click)="menu.toggle()" class="btn btn-link btn-outline btn-sm"
58+
<button [satPopoverAnchor]="menuNetwork" (click)="menuNetwork.toggle()"
59+
class="btn btn-link btn-outline btn-sm"
1260
style="color: white; width: 155px !important; margin-top: 1.85em; border-radius: 15px; background: linear-gradient(90deg, rgb(239, 184, 11) 0%, rgb(251, 218, 60) 100%) !important; border: 1.47px solid rgb(240, 185, 11); max-width: 155px !important; line-height: 1 !important; font-weight: bold"
1361
href="/main">
1462
<strong style="color:rgb(33, 40, 51);">Network:</strong> {{ this.selectedNetwork }}
15-
<fa style="font-weight: 900 !important; " name="caret-down" size="sm"></fa>
63+
<fa style="font-weight: 900 !important;" name="caret-down" size="sm"></fa>
1664
</button>
17-
<sat-popover #menu horizontalAlign="center" verticalAlign="center">
65+
<sat-popover #menuNetwork horizontalAlign="center" verticalAlign="center">
1866
<div class="menu-wrapper" tabIndex="0">
19-
<button *ngFor="let item of menuItems"
67+
<button *ngFor="let item of networkMenu"
2068
class="menu-item"
21-
(click)="select([item.val]); menu.toggle()">
69+
(click)="selectNetwork(item.val); menuNetwork.toggle()">
2270
{{ item.val }}
2371
</button>
2472
</div>
@@ -54,11 +102,9 @@
54102
<div class="arrow">
55103
</div>
56104
</sat-popover>
57-
58105
<sat-popover #name hasBackdrop forceAlignment>
59106
<app-edit-form (update)="this.accountName = $event"></app-edit-form>
60107
</sat-popover>
61-
62108
<hr style="width: 100%; margin-top: -0.65em; border: 1px solid #c5c5c5; border-radius: 15px; margin-right: 2em; margin-left: 2em">
63109
<div class="col-12">
64110
<img style="margin-top: 1.5em; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none;-o-user-drag: none; user-drag: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;"

‎angular/src/app/main/main.component.ts‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,13 @@ export class MainComponent {
2626
copyMessage = 'Copy to clipboard';
2727
selectedNetwork: string;
2828

29-
/** For a simplified (ahem, lazy) demo, the menu has max depth of 1. */
30-
menuItems: MenuItem[] = [
29+
networkMenu: MenuItem[] = [
3130
{val: 'TESTNET'},
3231
{val: 'MAINNET'},
3332
];
3433

34+
usersMenu: MenuItem[] = [];
35+
3536

3637
constructor(private memory: MemoryService, private http: HttpClient) {
3738

@@ -42,6 +43,7 @@ export class MainComponent {
4243
return bnb ? bnb.free : 0;
4344
};
4445

46+
4547
const bnbRaw$ = timer(0, 4000).pipe(
4648
switchMap(() => {
4749
const address = this.memory.getCurrentAddress();
@@ -83,8 +85,27 @@ export class MainComponent {
8385
);
8486
}
8587

86-
select(values: string) {
87-
this.selectedNetwork = values;
88+
updateUsersList() {
89+
this.usersMenu = [
90+
{val: this.accountName},
91+
{val: this.accountName},
92+
{val: this.accountName},
93+
{val: this.accountName},
94+
{val: this.accountName},
95+
{val: this.accountName},
96+
{val: this.accountName},
97+
{val: this.accountName},
98+
{val: this.accountName},
99+
{val: this.accountName},
100+
]
101+
}
102+
103+
selectNetwork(value: string) {
104+
this.selectedNetwork = value;
105+
}
106+
107+
selectUser(value: string) {
108+
this.accountName = value;
88109
}
89110

90111
copyAddress() {

0 commit comments

Comments
 (0)