Skip to content

Commit 3e4e178

Browse files
tmunzertmunzer
committed
improving UI
1 parent 7f937b9 commit 3e4e178

9 files changed

Lines changed: 129 additions & 60 deletions

File tree

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<div class="app-container">
1010
<app-api *ngIf="display=='api'"></app-api>
1111
<app-account *ngIf="display=='account'"></app-account>
12+
<app-doc *ngIf="display=='doc'"></app-doc>
1213
</div>
1314

1415
<div class="bottom">
@@ -20,4 +21,8 @@
2021
<img class="bottom" src="assets/account.svg" alt="api">
2122
<div class="bottom">Accounts</div>
2223
</button>
24+
<button class="bottom" (click)="show('doc')" [ngClass]="display == 'doc'? 'selected' : ''">
25+
<img class="bottom" src="assets/help.svg" alt="api">
26+
<div class="bottom">DOCUMENTATION</div>
27+
</button>
2328
</div>

‎src/angular/src/app/app.component.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
.logo {
99
position: absolute;
10-
left: 22px;
10+
right: 22px;
1111
top: 22px;
1212
height: 55px;
1313
width: 55px;
@@ -21,7 +21,8 @@ app-api {
2121
height: 100%;
2222
display: flex;
2323
flex-direction: column;
24-
justify-content: space-between;
24+
justify-content: flex-start;
25+
overflow: auto;
2526
}
2627

2728
app-account {
@@ -73,7 +74,7 @@ button.bottom:active {
7374
}
7475

7576
img.bottom {
76-
height: 2.5em;
77+
height: 2em;
7778
}
7879

7980
div.bottom {

‎src/angular/src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import { ApiComponent } from './pages/api/api.component';
77
import { AccountComponent } from './pages/account/account.component';
88
import { AccountManageComponent } from './pages/account/manage/manage.component';
99
import { AccountCreateComponent } from './pages/account/create/create.component'
10+
import { DocComponent } from './pages/doc/doc.component'
1011

1112
@NgModule({
12-
declarations: [AppComponent, ApiComponent, AccountComponent, AccountManageComponent, AccountCreateComponent],
13+
declarations: [AppComponent, ApiComponent, AccountComponent, AccountManageComponent, AccountCreateComponent, DocComponent],
1314
imports: [BrowserModule, AppRoutingModule, HttpClientModule],
1415
bootstrap: [AppComponent]
1516
})

‎src/angular/src/app/pages/api/api.component.html‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,43 @@
11
<div class="content no-grow">
2-
<div class="box-apitab">
3-
<button  class="apitab" [disabled]="!api_url_obj" (click)="openApiTab(api_url_obj)">GET API</button>
4-
<button  class="apitab" [disabled]="!api_url_stats_obj" (click)="openApiTab(api_url_stats_obj)">GET STATS
5-
API</button>
6-
</div>
7-
</div>
8-
<div class="content grow">
92
<h2>Page Info</h2>
103
<div *ngIf="!org_id" class="not_mist">
114
<div>Sorry, this website does not look like a Mist Dashboard...</div>
125
<div>If you think I'm wrong, please send me an email with the current URL.</div>
136
</div>
147
<div *ngIf="org_id">
158
<div class="box-ids" *ngIf="org_id">
16-
<label class="ids" for="org_id">
17-
ORG ID
18-
<button class="copy-ids" name="copy" (click)="copyId(org_id_input)">
19-
<img class="copy-ids" src="assets/copy.svg" alt="copy">
20-
</button>
21-
</label>
9+
<label class="ids" for="org_id">ORG ID</label>
2210
<div class=box-ids-input>
2311
<input class="ids" type="text" readonly [(value)]="org_id" [ngClass]="focused == 'org_id'? 'focused' : ''" id="org_id" #org_id_input>
12+
<button class="copy-ids" name="copy" (click)="copyId(org_id_input)">
13+
<img class="copy-ids" src="assets/copy.svg" alt="copy">
14+
</button>
2415
</div>
2516
</div>
2617
<div class="box-ids" *ngIf="site_id">
27-
<label class="ids" for="site_id">
28-
SITE ID
29-
<button class="copy-ids" name="copy" (click)="copyId(site_id_input)">
30-
<img class="copy-ids" src="assets/copy.svg" alt="copy">
31-
</button>
32-
</label>
18+
<label class="ids" for="site_id">SITE ID</label>
3319
<div class=box-ids-input>
3420
<input class="ids" type="text" readonly [(value)]="site_id" [ngClass]="focused == 'site_id'? 'focused' : ''" id="site_id" #site_id_input>
21+
<button class="copy-ids" name="copy" (click)="copyId(site_id_input)">
22+
<img class="copy-ids" src="assets/copy.svg" alt="copy">
23+
</button>
3524
</div>
3625
</div>
3726
<div class="box-ids" *ngIf="obj_id">
38-
<label class="ids" for="obj_id">
39-
{{obj_name}} ID
40-
<button class="copy-ids" name="copy" (click)="copyId(obj_id_input)">
41-
<img class="copy-ids" src="assets/copy.svg" alt="copy">
42-
</button>
43-
</label>
27+
<label class="ids" for="obj_id">{{obj_name | uppercase}} ID</label>
4428
<div class=box-ids-input>
4529
<input class="ids" type="text" readonly [(value)]="obj_id" [ngClass]="focused == 'obj_id'? 'focused': ''" id="obj_id" #obj_id_input>
30+
<button class="copy-ids" name="copy" (click)="copyId(obj_id_input)">
31+
<img class="copy-ids" src="assets/copy.svg" alt="copy">
32+
</button>
4633
</div>
4734
</div>
4835
</div>
4936
</div>
37+
<div *ngIf="quick_links.length > 0" class="content no-grow">
38+
<h2>Quick API Access</h2>
39+
<div class="box-apitab">
40+
<button *ngFor="let quick_link of quick_links"  class="apitab" (click)="openApiTab(quick_link.url)">{{quick_link.name | uppercase}}</button>
5041

51-
<div class="content no-grow">
52-
<h2>Documentation</h2>
53-
<div class="box-links">
54-
<button class="links"  (click)="openTab('postman')">Postman</button>
55-
<button class="links"  (click)="openTab('openapi')">OpenAPI</button>
56-
<button class="links"  (click)="openTab('mist')">MistAPI</button>
5742
</div>
5843
</div>

‎src/angular/src/app/pages/api/api.component.scss‎

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// CONTENAIRS
22
.content {
3-
margin: 0.5em 1em 1.5em;
3+
margin: 0.5em 1em;
44
display: flex;
55
align-items: stretch;
66
flex-direction: column;
@@ -27,15 +27,17 @@ h2 {
2727

2828
// apitab
2929
.box-apitab {
30-
align-items: flex-end;
30+
align-items: stretch;
3131
display: flex;
32-
flex-direction: row;
33-
justify-content: flex-end;
32+
flex-direction: column;
33+
justify-content: flex-start;
3434
}
3535

3636
button.apitab {
37-
margin-left: 1em;
37+
margin: 0.2em;
3838
border-radius: 4px;
39+
padding: .5em;
40+
font-size: small;
3941
}
4042

4143
button.apitab:enabled {
@@ -61,26 +63,6 @@ button:disabled {
6163
box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
6264
}
6365

64-
// links
65-
.box-links {
66-
align-items: stretch;
67-
flex-direction: row;
68-
display: flex;
69-
justify-content: space-between;
70-
margin: 0 2em;
71-
}
72-
73-
button.links:enabled {
74-
background-color: #84b035;
75-
color: white;
76-
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
77-
transition: background-color 0.2s ease-in-out;
78-
}
79-
80-
button.links:enabled:hover {
81-
background-color: #649015;
82-
}
83-
8466
// DISABLED INPUTES
8567
.ids {
8668
display: flex;

‎src/angular/src/app/pages/doc/doc.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="content grow">
2+
<h2>Documentation</h2>
3+
<div class="box-links">
4+
<button class="links"  (click)="openTab('postman')">Postman</button>
5+
<button class="links"  (click)="openTab('openapi')">OpenAPI</button>
6+
<button class="links"  (click)="openTab('mist')">MistAPI</button>
7+
</div>
8+
</div>

‎src/angular/src/app/pages/doc/doc.component.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// CONTENAIRS
2+
.content {
3+
margin: 0.5em 1em 1.5em;
4+
display: flex;
5+
align-items: stretch;
6+
flex-direction: column;
7+
}
8+
9+
.content.no-grow {
10+
flex-grow: 0;
11+
}
12+
13+
.content.grow {
14+
flex-grow: 1;
15+
}
16+
17+
// TITLES
18+
h2 {
19+
font-weight: 200;
20+
margin-left: 0.8em;
21+
}
22+
23+
// BUTTONS
24+
button {
25+
border: none;
26+
padding: 0.5em;
27+
}
28+
29+
button:disabled {
30+
background-color: #eee;
31+
color: #aaa;
32+
box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
33+
}
34+
35+
// links
36+
.box-links {
37+
align-items: stretch;
38+
flex-direction: row;
39+
display: flex;
40+
justify-content: space-between;
41+
margin: 0 2em;
42+
}
43+
44+
button.links:enabled {
45+
background-color: #84b035;
46+
color: white;
47+
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
48+
transition: background-color 0.2s ease-in-out;
49+
}
50+
51+
button.links:enabled:hover {
52+
background-color: #649015;
53+
}

‎src/angular/src/app/pages/doc/doc.component.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component } from '@angular/core';
2+
3+
export interface linkElement {
4+
url: string,
5+
name: string
6+
}
7+
8+
@Component({
9+
selector: 'app-doc',
10+
templateUrl: 'doc.component.html',
11+
styleUrls: ['doc.component.scss']
12+
})
13+
export class DocComponent {
14+
15+
16+
openTab(target: string) {
17+
let dest_url = ""
18+
switch (target) {
19+
case "openapi":
20+
dest_url = "https://doc.mist-lab.fr";
21+
break;
22+
case "postman":
23+
dest_url = "https://documenter.getpostman.com/view/224925/SzYgQufe";
24+
break;
25+
case "mist":
26+
dest_url = "https://api.mist.com/api/v1/docs";
27+
break;
28+
}
29+
if (dest_url) {
30+
chrome.tabs.create({ url: dest_url });
31+
}
32+
}
33+
}

‎src/angular/src/assets/help.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)