Skip to content

Commit

Permalink
add upgrade feature and improve UI
Browse files Browse the repository at this point in the history
  • Loading branch information
tmunzer committed Jun 18, 2021
1 parent 7167a18 commit 091b324
Show file tree
Hide file tree
Showing 19 changed files with 298 additions and 126 deletions.
Binary file modified .DS_Store
Binary file not shown.
6 changes: 3 additions & 3 deletions src/angular/src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="app-container">
<app-api *ngIf="display=='api'"></app-api>
<app-account *ngIf="display=='account'"></app-account>
<app-doc *ngIf="display=='doc'"></app-doc>
<app-about *ngIf="display=='about'"></app-about>
</div>

<div class="bottom">
Expand All @@ -21,8 +21,8 @@
<img class="bottom" src="assets/account.svg" alt="api">
<div class="bottom">Accounts</div>
</button>
<button class="bottom" (click)="show('doc')" [ngClass]="display == 'doc'? 'selected' : ''">
<button class="bottom" (click)="show('about')" [ngClass]="display == 'about'? 'selected' : ''">
<img class="bottom" src="assets/help.svg" alt="api">
<div class="bottom">DOCUMENTATION</div>
<div class="bottom">about</div>
</button>
</div>
7 changes: 7 additions & 0 deletions src/angular/src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@ app-account {
justify-content: flex-start;
}

app-about {
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
}

//
.app-container {
height: 450px;
Expand Down
4 changes: 2 additions & 2 deletions src/angular/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import { ApiComponent } from './pages/api/api.component';
import { AccountComponent } from './pages/account/account.component';
import { AccountManageComponent } from './pages/account/manage/manage.component';
import { AccountCreateComponent } from './pages/account/create/create.component'
import { DocComponent } from './pages/doc/doc.component'
import { AboutComponent } from './pages/about/about.component'

@NgModule({
declarations: [AppComponent, ApiComponent, AccountComponent, AccountManageComponent, AccountCreateComponent, DocComponent],
declarations: [AppComponent, ApiComponent, AccountComponent, AccountManageComponent, AccountCreateComponent, AboutComponent],
imports: [BrowserModule, AppRoutingModule, HttpClientModule],
bootstrap: [AppComponent]
})
Expand Down
52 changes: 52 additions & 0 deletions src/angular/src/app/pages/about/about.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<div class="content no-grow">
<h2>Mist API Documentation</h2>
<div class="box-links">
<button class="links" (click)="openTab('postman')">
Postman
<img class="icon-open" src="assets/open.svg" alt="open">
</button>
<button class="links" (click)="openTab('openapi')">
OpenAPI
<img class="icon-open" src="assets/open.svg" alt="open">
</button>
<button class="links" (click)="openTab('mist')">
MistAPI
<img class="icon-open" src="assets/open.svg" alt="open">
</button>
</div>
</div>

<div class="content no-grow">
<h2>Extension information</h2>
<div class="box-version">
<div class="version-info">
<div class="version-text">Current Version:</div>
<div class="version-value">{{current_version}}</div>
</div>
<div class="version-info">
<div class="version-text">Lastest Version:</div>
<div class="version-unknown" *ngIf="!last_version">
<div>Unknown</div>
<img src="assets/question.svg" alt="unknow version">
</div>
<div class="version-uptodate" *ngIf="last_version && current_version == last_version">
<div>You have the lastest Version</div>
</div>
<div class="version-newversion" *ngIf="last_version && current_version != last_version">
<div>New version available ({{last_version}})</div>
<button class="download" (click)="openTab('download_url')">
<div>Downlaod</div>
<img src="assets/download.svg" alt="download">
</button>
</div>
</div>
<button class="check-version" (click)="checkNewRelease()">Check For New Version</button>
</div>
<div class="box-links">
<button class="links"  (click)="openTab('github')">
Extension Page
<img class="icon-open" src="assets/open.svg" alt="open">
</button>
</div>

</div>
132 changes: 132 additions & 0 deletions src/angular/src/app/pages/about/about.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
// CONTENAIRS
.content {
margin: 0.5em 1em;
display: flex;
align-items: stretch;
flex-direction: column;
}

.content.no-grow {
flex-grow: 0;
}

.content.grow {
flex-grow: 1;
}

// TITLES
h2 {
font-weight: 200;
margin-left: 0.8em;
}

// BUTTONS
button {
border: none;
padding: .5em;
width: 80%;
margin: 0.5em;
height: 2.5em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

button:disabled {
background-color: #eee;
color: #aaa;
box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
}

// links
.box-links {
align-items: center;
flex-direction: column;
display: flex;
justify-content: flex-start;
margin: 0 2em;
}

button.links:enabled {
background-color: #84b035;
color: white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
transition: background-color 0.2s ease-in-out;
}

button.links:enabled:hover {
background-color: #649015;
}

// VERSION
.box-version {
margin: 1em 1em;
display: flex;
align-items: stretch;
flex-direction: column;
border: 1px solid #eee;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-radius: 2px;
}

.version-info {
display: flex;
flex-direction: row;
margin: 0.5em 1em;
}

.version-text {
font-weight: 200;
margin-right: 1em;
}

.version-unknown,
.version-uptodate {
display: flex;
flex-direction: row;
}

.version-newversion {
display: flex;
flex-direction: column;
}

.version-unknown img {
height: 1.4em;
margin-left: 1em;
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(7deg) brightness(90%) contrast(119%);
}

.version-uptodata img {
height: 1.4em;
margin-left: 1em;
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(45deg) brightness(90%) contrast(119%);
}

.version-newversion img {
height: 1.4em;
margin-left: 1em;
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(330deg) brightness(90%) contrast(119%);
}

.download {
margin: 0.5em 0;
transition: background-color 0.2s ease-in-out;
background-color: #ddd;
}

.download:hover {
background-color: #bbb;
}

.check-version {
width: 100%;
margin: 0;
transition: background-color 0.2s ease-in-out;
background-color: #ddd;
}

.check-version:hover {
background-color: #bbb;
}
73 changes: 73 additions & 0 deletions src/angular/src/app/pages/about/about.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export interface linkElement {
url: string,
name: string
}

@Component({
selector: 'app-about',
templateUrl: 'about.component.html',
styleUrls: ['about.component.scss']
})
export class AboutComponent implements OnInit {

private github_release_url: string = "https://api.github.com/repos/tmunzer/mist_chrome_extension/releases/latest";
github_repo_url: string = "https://github.com/tmunzer/mist_chrome_extension";
current_version: string;
last_version: string;
up_to_date: boolean;
download_url: string;
html_url: string;
constructor(private _http: HttpClient) { }

ngOnInit(){
this.current_version = chrome.runtime.getManifest().version;
}


checkNewRelease(): void {
this._http.get<any>(this.github_release_url).subscribe(data => {
this.last_version = data.name;
if (this.current_version < this.last_version) {
this.up_to_date = false;
this.html_url = data.html_url;
data.assets.forEach(element => {
if (element.name == "extension-build.zip") {
this.download_url = element.browser_download_url;
}
})
} else {
this.up_to_date = true;
}
})
}

openTab(target: string) {
let dest_url = ""
switch (target) {
case "openapi":
dest_url = "https://doc.mist-lab.fr";
break;
case "postman":
dest_url = "https://documenter.getpostman.com/view/224925/SzYgQufe";
break;
case "mist":
dest_url = "https://api.mist.com/api/v1/docs";
break;
case "html_url":
dest_url = this.html_url;
break;
case "download_url":
dest_url = this.download_url;
break;
case "github":
dest_url = this.github_repo_url;
break;
}
if (dest_url) {
chrome.tabs.create({ url: dest_url });
}
}
}
1 change: 0 additions & 1 deletion src/angular/src/app/pages/account/account.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export class AccountComponent implements OnInit {


ngOnInit() {
//console.log(chrome.runtime.getManifest())
//console.log(this.cookies)
this.sessions = [];
chrome.cookies.getAll({}, (cookies) => {
Expand Down
12 changes: 1 addition & 11 deletions src/angular/src/app/pages/account/create/create.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ textarea.token:read-only {
font: inherit;
font-weight: 200;
border: none;
padding: 1em 2em;
padding: 1em 1em;
margin: 1em 0;
border-radius: 6px;
background-color: transparent;
Expand Down Expand Up @@ -64,16 +64,6 @@ button.copy-token {
margin: 1em 0;
}

button.copy-token:hover {
transition: all 0.2s ease-in-out;
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

button.copy-token:active {
transition: all 0.2s ease-in-out;
box-shadow: inset rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

button.copy-token:hover img.copy-token {
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(40deg) brightness(90%) contrast(119%);
transition: filter 0.2s ease-in-out;
Expand Down
5 changes: 4 additions & 1 deletion src/angular/src/app/pages/api/api.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,10 @@ <h2>Page Info</h2>
<div *ngIf="quick_links.length > 0" class="content no-grow">
<h2>Quick API Access</h2>
<div class="box-apitab">
<button *ngFor="let quick_link of quick_links"  class="apitab" (click)="openApiTab(quick_link.url)">{{quick_link.name | uppercase}}</button>
<button *ngFor="let quick_link of quick_links"  class="apitab" (click)="openApiTab(quick_link.url)">
<div>{{quick_link.name | uppercase}}</div>
<img class="icon-open" src="assets/open.svg" alt="open">
</button>

</div>
</div>
15 changes: 4 additions & 11 deletions src/angular/src/app/pages/api/api.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,15 @@ button.apitab {
border-radius: 4px;
padding: .5em;
font-size: small;
display: flex;
flex-direction: row;
justify-content: center;
justify-items: center;
}

button.apitab:enabled {
background-color: #0096a3;
color: white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
transition: background-color 0.2s ease-in-out;
}

Expand Down Expand Up @@ -120,16 +123,6 @@ button.copy-ids {
margin-left: 1em;
}

button.copy-ids:hover {
transition: all 0.2s ease-in-out;
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

button.copy-ids:active {
transition: all 0.2s ease-in-out;
box-shadow: inset rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

button.copy-ids:hover img.copy-ids {
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(40deg) brightness(90%) contrast(119%);
transition: filter 0.2s ease-in-out;
Expand Down
Loading

0 comments on commit 091b324

Please sign in to comment.