From 6c6a674e02d3f4460dbcfa049ba717873895dbde Mon Sep 17 00:00:00 2001 From: Phil Date: Sun, 24 Jun 2018 02:24:43 +0200 Subject: Update design and fix minor bugs --- src/app/api.service.ts | 14 +--- src/app/app-routing.module.ts | 25 ++++-- src/app/app.component.html | 90 +++++++++++----------- src/app/app.component.ts | 29 ++++++- src/app/app.module.ts | 10 +-- .../create-identity/create-identity.component.html | 7 +- .../create-identity/create-identity.component.ts | 8 +- src/app/error-page/error-page.component.html | 3 + src/app/error-page/error-page.component.spec.ts | 49 ++++++++++++ src/app/error-page/error-page.component.ts | 38 +++++++++ src/app/gns-page/gns-page.component.html | 47 ----------- src/app/gns-page/gns-page.component.spec.ts | 49 ------------ src/app/gns-page/gns-page.component.ts | 81 ------------------- src/app/identity-page/identity-page.component.html | 73 ++++++++---------- src/app/identity-page/identity-page.component.ts | 20 ++++- src/app/main-page/main-page.component.html | 15 ++-- .../namestore-page/namestore-page.component.html | 38 ++++++++- src/app/namestore-page/namestore-page.component.ts | 26 ++++++- src/app/rest-api.ts | 4 +- src/app/rest-apis/rest-apis.component.html | 14 +++- src/app/rest-apis/rest-apis.component.ts | 15 ++-- src/index.html | 2 +- src/scss/components/_button.scss | 10 +-- src/scss/components/_card.scss | 11 +++ src/scss/components/_circle.scss | 13 ++++ src/scss/components/_dropdown.scss | 19 +++++ src/scss/components/_footer.scss | 12 ++- src/scss/components/_header.scss | 5 +- src/scss/components/_link.scss | 6 ++ src/scss/components/_markdown.scss | 9 +++ src/scss/components/_progressbar.scss | 3 + src/scss/main.scss | 3 + src/scss/objects/_grid.scss | 1 + src/scss/objects/_type.scss | 1 + src/scss/settings/_colors.scss | 4 +- src/scss/settings/_spacing.scss | 6 ++ src/scss/settings/_type.scss | 12 +-- src/scss/utilities/_align.scss | 2 +- 38 files changed, 424 insertions(+), 350 deletions(-) create mode 100644 src/app/error-page/error-page.component.html create mode 100644 src/app/error-page/error-page.component.spec.ts create mode 100644 src/app/error-page/error-page.component.ts delete mode 100644 src/app/gns-page/gns-page.component.html delete mode 100644 src/app/gns-page/gns-page.component.spec.ts delete mode 100644 src/app/gns-page/gns-page.component.ts create mode 100644 src/scss/components/_circle.scss create mode 100644 src/scss/components/_dropdown.scss create mode 100644 src/scss/components/_markdown.scss diff --git a/src/app/api.service.ts b/src/app/api.service.ts index a70eee1..b659198 100644 --- a/src/app/api.service.ts +++ b/src/app/api.service.ts @@ -11,14 +11,14 @@ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /** * @author Philippe Buschmann * @file src/app/api.service.ts - * @brief + * @brief * */ @@ -34,12 +34,6 @@ import { MessagesService } from './messages.service'; providedIn: 'root' }) export class ApiService { - apis: RestAPI[] = [ - {name: 'Identity API', desc: 'This is the identity API', link: 'identity'}, - {name: 'GNS API', desc: 'This is the gns API', link: 'gns'}, - {name: 'Namestore API', desc: 'This is the namestore API', link: 'namestore'}, - {name: 'Peerstore API', desc: 'This is the peerstore API', link: 'peerstore'}, - ]; private restURL = 'http://localhost:7776/' private identityURL = this.restURL+'identity'; @@ -48,10 +42,6 @@ export class ApiService { constructor(private http: HttpClient, private messages:MessagesService) { } - getAPIs(): Observable { - return of(this.apis); - } - getIdentities (): Observable{ return this.http.get(this.identityURL) .pipe( diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7943788..e8e156d 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -11,35 +11,38 @@ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /** * @author Philippe Buschmann * @file src/app/app-routing.module.ts - * @brief + * @brief * */ import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import { RouterModule, Routes, Router, ActivatedRoute, NavigationEnd } from '@angular/router'; + +import { filter } from 'rxjs/operators'; import { RestApisComponent } from './rest-apis/rest-apis.component'; import { MainPageComponent } from './main-page/main-page.component'; import { IdentityPageComponent } from './identity-page/identity-page.component'; -import { GnsPageComponent } from './gns-page/gns-page.component'; import { PeerstorePageComponent } from './peerstore-page/peerstore-page.component'; import { NamestorePageComponent } from './namestore-page/namestore-page.component'; +import { ErrorPageComponent } from './error-page/error-page.component'; +import { MessagesService } from './messages.service'; const routes: Routes = [ { path: '', component: MainPageComponent }, { path: 'apis', component: RestApisComponent }, { path: 'identity', component: IdentityPageComponent }, - { path: 'gns', component: GnsPageComponent }, { path: 'peerstore', component: PeerstorePageComponent }, - { path: 'namestore', component: NamestorePageComponent } + { path: 'namestore', component: NamestorePageComponent }, + { path: '**', component: ErrorPageComponent } ]; @NgModule({ @@ -47,4 +50,14 @@ const routes: Routes = [ exports: [ RouterModule ] }) export class AppRoutingModule { + constructor(private router: Router, + private messages: MessagesService) { + router.events.pipe(filter(event => event instanceof NavigationEnd)) + .subscribe((route: ActivatedRoute) => { + this.messages.dismissError(); + this.messages.dismissSuccess(); + this.messages.dismissWarning(); + this.messages.dismissInformation(); + }); + } } diff --git a/src/app/app.component.html b/src/app/app.component.html index 7f098f2..a4a6a27 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,33 +1,27 @@
-
-
-
- GNUnet API -
-
- -
-
-
+
+
+
+ +  GNUnet Web UI +
+
+ +
+
+
@@ -35,22 +29,24 @@
- +
+ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index cb12491..5ee4946 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -23,14 +23,37 @@ */ import { Component } from '@angular/core'; +import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; + + +import { filter } from 'rxjs/operators'; @Component({ selector: 'app-root', - templateUrl: './app.component.html', - //styleUrls: ['./../scss/main.scss'] + templateUrl: './app.component.html' }) export class AppComponent { - title = ''; + + private active: number = 0; + + menu : any[] = [ + {id:0, name: 'Main', link: ''}, + {id:1, name: 'Identities', link: 'identity'}, + {id:2, name: 'Names', link: 'namestore'}, + {id:3, name: 'Peers', link: 'peerstore'}, + ]; + + constructor(private router: Router) { + router.events.pipe(filter(event => event instanceof NavigationEnd)) + .subscribe((route: ActivatedRoute) => { + let index = this.menu.find(x => { + let url = '/'+x.link; + return url == route.url+''; + }); + this.active = this.menu.indexOf(index); + }); + } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index edec9cc..e88a0d6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,14 +11,14 @@ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /** * @author Philippe Buschmann * @file src/app/app.module.ts - * @brief + * @brief * */ @@ -35,9 +35,9 @@ import { IdentityPageComponent } from './identity-page/identity-page.component'; import { CreateIdentityComponent } from './create-identity/create-identity.component'; import { MyFilterPipe } from './filter.pipe'; import { ErrorMessageComponent } from './error-message/error-message.component'; -import { GnsPageComponent } from './gns-page/gns-page.component'; import { NamestorePageComponent } from './namestore-page/namestore-page.component'; import { PeerstorePageComponent } from './peerstore-page/peerstore-page.component'; +import { ErrorPageComponent } from './error-page/error-page.component'; @NgModule({ declarations: [ @@ -48,9 +48,9 @@ import { PeerstorePageComponent } from './peerstore-page/peerstore-page.componen CreateIdentityComponent, MyFilterPipe, ErrorMessageComponent, - GnsPageComponent, NamestorePageComponent, - PeerstorePageComponent + PeerstorePageComponent, + ErrorPageComponent ], imports: [ BrowserModule, diff --git a/src/app/create-identity/create-identity.component.html b/src/app/create-identity/create-identity.component.html index d2e27fe..e1bfa3d 100644 --- a/src/app/create-identity/create-identity.component.html +++ b/src/app/create-identity/create-identity.component.html @@ -1,7 +1,8 @@ -
-
Create new identity
+
+

Create new identity

- +

Identity Name:

+
diff --git a/src/app/create-identity/create-identity.component.ts b/src/app/create-identity/create-identity.component.ts index c71239a..61224a0 100644 --- a/src/app/create-identity/create-identity.component.ts +++ b/src/app/create-identity/create-identity.component.ts @@ -11,14 +11,14 @@ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /** * @author Philippe Buschmann * @file src/app/create-identity/create-identity.component.ts - * @brief + * @brief * */ @@ -34,9 +34,9 @@ import { MessagesService } from '../messages.service'; }) export class CreateIdentityComponent implements OnInit { - private input_text: string = ''; + input_text: string = ''; private json: any = {'name':''}; - private is_free:boolean = true; + is_free:boolean = true; constructor(private apiService: ApiService, private message: MessagesService, diff --git a/src/app/error-page/error-page.component.html b/src/app/error-page/error-page.component.html new file mode 100644 index 0000000..a433358 --- /dev/null +++ b/src/app/error-page/error-page.component.html @@ -0,0 +1,3 @@ +

404 Not Found

+

This page is currently not available.

+Return to Main Page diff --git a/src/app/error-page/error-page.component.spec.ts b/src/app/error-page/error-page.component.spec.ts new file mode 100644 index 0000000..057ee70 --- /dev/null +++ b/src/app/error-page/error-page.component.spec.ts @@ -0,0 +1,49 @@ +/* + This file is part of GNUnet. + Copyright (C) 2012-2015 GNUnet e.V. + + GNUnet is free software: you can redistribute it and/or modify it + under the terms of the GNU Affero General Public License as published + by the Free Software Foundation, either version 3 of the License, + or (at your option) any later version. + + GNUnet is distributed in the hope that it will be useful, but + WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . + */ +/** + * @author Philippe Buschmann + * @file src/app/error-page/error-page.component.spec.ts + * @brief + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ErrorPageComponent } from './error-page.component'; + +describe('ErrorPageComponent', () => { + let component: ErrorPageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ErrorPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ErrorPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/error-page/error-page.component.ts b/src/app/error-page/error-page.component.ts new file mode 100644 index 0000000..92cb9b5 --- /dev/null +++ b/src/app/error-page/error-page.component.ts @@ -0,0 +1,38 @@ +/* + This file is part of GNUnet. + Copyright (C) 2012-2015 GNUnet e.V. + + GNUnet is free software: you can redistribute it and/or modify it + under the terms of the GNU Affero General Public License as published + by the Free Software Foundation, either version 3 of the License, + or (at your option) any later version. + + GNUnet is distributed in the hope that it will be useful, but + WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . + */ +/** + * @author Philippe Buschmann + * @file src/app/error-page/error-page.component.ts + * @brief + * + */ + + import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-error-page', + templateUrl: './error-page.component.html' +}) +export class ErrorPageComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/gns-page/gns-page.component.html b/src/app/gns-page/gns-page.component.html deleted file mode 100644 index 47e5102..0000000 --- a/src/app/gns-page/gns-page.component.html +++ /dev/null @@ -1,47 +0,0 @@ -
-
-
-
Search for namesystem
-
- Name:
-

- Record Type (optional):
-

- Search in:
-
- local namestore, then DHT
- local namestore only
- local namestore only for rightmost label, for others in DHT -

- Zone key (optional):
-

-
Ego identifier (optional):
-
-
Search
-
-
-
-
-
- {{gns_response}} -
-
-
diff --git a/src/app/gns-page/gns-page.component.spec.ts b/src/app/gns-page/gns-page.component.spec.ts deleted file mode 100644 index 48c9d8e..0000000 --- a/src/app/gns-page/gns-page.component.spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - This file is part of GNUnet. - Copyright (C) 2012-2015 GNUnet e.V. - - GNUnet is free software: you can redistribute it and/or modify it - under the terms of the GNU Affero General Public License as published - by the Free Software Foundation, either version 3 of the License, - or (at your option) any later version. - - GNUnet is distributed in the hope that it will be useful, but - WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . - */ -/** - * @author Philippe Buschmann - * @file src/app/gns-page/gns-page.component.spec.ts - * @brief - * - */ - -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GnsPageComponent } from './gns-page.component'; - -describe('GnsPageComponent', () => { - let component: GnsPageComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ GnsPageComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(GnsPageComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/gns-page/gns-page.component.ts b/src/app/gns-page/gns-page.component.ts deleted file mode 100644 index 8147dcf..0000000 --- a/src/app/gns-page/gns-page.component.ts +++ /dev/null @@ -1,81 +0,0 @@ -/* - This file is part of GNUnet. - Copyright (C) 2012-2015 GNUnet e.V. - - GNUnet is free software: you can redistribute it and/or modify it - under the terms of the GNU Affero General Public License as published - by the Free Software Foundation, either version 3 of the License, - or (at your option) any later version. - - GNUnet is distributed in the hope that it will be useful, but - WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . - */ -/** - * @author Philippe Buschmann - * @file src/app/gns-page/gns-page.component.ts - * @brief - * - */ - -import { Component, OnInit } from '@angular/core'; -import { ApiService } from '../api.service'; - -@Component({ - selector: 'gns-page', - templateUrl: './gns-page.component.html' -}) -export class GnsPageComponent implements OnInit { - - private gns_name:string; - private gns_recordtype:number = 0; - private gns_options:number = 0; - private gns_zonekey:string = ''; - private display_ego: boolean = true; - private display_zonekey: boolean = true; - private gns_ego:string = ''; - private gns_response:any =[]; - - private url: string; - - constructor(private apiService:ApiService) { } - - ngOnInit() { - } - - onSearch(){ - this.url = '?name='+this.gns_name; - if(this.gns_recordtype != null){ - this.url += '&record_type='+this.gns_recordtype; - } - if(this.gns_options != null){ - this.url += '&options='+this.gns_options; - } - if(this.gns_zonekey != null && this.gns_zonekey != ''){ - this.url += '&pkey='+this.gns_zonekey; - } - if(this.gns_ego != null && this.gns_ego != ''){ - this.url += '&ego='+this.gns_ego; - } - console.log(this.url); - this.apiService.searchNameSystem(this.url).subscribe(data => { - this.gns_response = data; - }); - } - - toggleEgo(){ - if(this.gns_zonekey == ''){ this.display_ego = true; } - else { this.display_ego = false; } - } - - toggleZonekey(){ - if(this.gns_ego == ''){ this.display_zonekey = true; } - else { this.display_zonekey = false; } - } - - -} diff --git a/src/app/identity-page/identity-page.component.html b/src/app/identity-page/identity-page.component.html index 4eeb8da..fe72dc1 100644 --- a/src/app/identity-page/identity-page.component.html +++ b/src/app/identity-page/identity-page.component.html @@ -1,51 +1,38 @@
-
-
- -
-
-
-
Search
-
- +
+ +
+
+

Search

+
+

Search Input:

+ +
-
- -
- - - - - - - - - - - - - - - - - - - - - - -
TypeNameIDRenameDelete
- {{identity.name}} - {{identity.id}}
-
-
+
+ +
+
+
+
+
{{identity.name | slice:0:1 | uppercase}}
+
+

Public Key: {{identity.id}}

+ {{identity.name}} +
+

Rename

+

Delete

+
+
+
+
-
Rename
-
ID: {{changeIdentity.id}}
+

Rename

+
Public Key: {{changeIdentity.id}}
Name: Rename @@ -54,8 +41,8 @@
-
Rename
-
ID: {{changeIdentity.id}}
+

Delete

+
Public Key: {{changeIdentity.id}}
Name: {{changeIdentity.name}}
Delete diff --git a/src/app/identity-page/identity-page.component.ts b/src/app/identity-page/identity-page.component.ts index b193d5e..f347f44 100644 --- a/src/app/identity-page/identity-page.component.ts +++ b/src/app/identity-page/identity-page.component.ts @@ -11,14 +11,14 @@ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /** * @author Philippe Buschmann * @file src/app/identity-page/identity-page.component.ts - * @brief + * @brief * */ @@ -112,4 +112,20 @@ export class IdentityPageComponent implements OnInit { }); } + intFromHash(str:string): number{ + let hash: number = 0; + for (var i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5)-hash); + hash = hash & hash; + } + return (Math.abs(hash)/4294967295); + } + + returnHSL(id:string): string{ + return "hsl(" + 360 * this.intFromHash(id) + ',' + + (90 + 70 * this.intFromHash(id)) + '%,' + + (85 + 10 * this.intFromHash(id)) + '%)'; + } + + } diff --git a/src/app/main-page/main-page.component.html b/src/app/main-page/main-page.component.html index e7cd074..cd09fb7 100644 --- a/src/app/main-page/main-page.component.html +++ b/src/app/main-page/main-page.component.html @@ -1,11 +1,12 @@ -
-

+
+

GNUnet Web User Interface

-

- Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin. - - Luctus magnis mi odio cursus ut pharetra pretium congue mattis, sagittis taciti iaculis mollis gravida fringilla facilisi faucibus, tincidunt consequat eu fusce arcu potenti proin sapien. Taciti sem placerat fringilla a fusce pretium nunc praesent habitant, sociosqu maecenas conubia mollis aliquam aliquet curae ad, mauris arcu urna pellentesque laoreet inceptos suscipit nullam. Curabitur molestie class gravida donec nisl cum urna integer, sodales etiam placerat vivamus scelerisque sollicitudin. +

+ Welcome to the GNUnet Web User Interface!
+

+

+ This is an alternative to the graphical interface gnunet-gtk and the command line tools.

- + diff --git a/src/app/namestore-page/namestore-page.component.html b/src/app/namestore-page/namestore-page.component.html index f235c16..3d9bf09 100644 --- a/src/app/namestore-page/namestore-page.component.html +++ b/src/app/namestore-page/namestore-page.component.html @@ -1,3 +1,35 @@ -

- namestore-page works! -

+ +
+

Search Namesystem

+
+
+

Name:

+ +
+
+

Record Type (optional):

+ +
+
+
Search
+
+
+
diff --git a/src/app/namestore-page/namestore-page.component.ts b/src/app/namestore-page/namestore-page.component.ts index 0369542..fc3c501 100644 --- a/src/app/namestore-page/namestore-page.component.ts +++ b/src/app/namestore-page/namestore-page.component.ts @@ -11,18 +11,19 @@ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /** * @author Philippe Buschmann * @file src/app/namestore-page/namestore-page.component.ts - * @brief + * @brief * */ import { Component, OnInit } from '@angular/core'; +import { ApiService } from '../api.service'; @Component({ selector: 'app-namestore-page', @@ -30,9 +31,28 @@ import { Component, OnInit } from '@angular/core'; }) export class NamestorePageComponent implements OnInit { - constructor() { } + gns_name:string; + gns_recordtype:number = 0; + private gns_response:any =[]; + + private url: string; + + constructor(private apiService:ApiService) { } ngOnInit() { } + onSearch(){ + this.url = '?name='+this.gns_name; + if(this.gns_recordtype != null){ + this.url += '&record_type='+this.gns_recordtype; + } + console.log(this.url); + this.apiService.searchNameSystem(this.url).subscribe(data => { + this.gns_response = data; + console.log(data); + + }); + } + } diff --git a/src/app/rest-api.ts b/src/app/rest-api.ts index e401986..8d5c30b 100644 --- a/src/app/rest-api.ts +++ b/src/app/rest-api.ts @@ -11,14 +11,14 @@ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /** * @author Philippe Buschmann * @file src/app/rest-api.ts - * @brief + * @brief * */ diff --git a/src/app/rest-apis/rest-apis.component.html b/src/app/rest-apis/rest-apis.component.html index 6081599..e9c99e5 100644 --- a/src/app/rest-apis/rest-apis.component.html +++ b/src/app/rest-apis/rest-apis.component.html @@ -1,9 +1,15 @@
-
-
-

{{api.name}}

+
+
+

{{api.name}}


- {{api.desc}} ...Read more +
+
+

{{api.desc}}

+
+
+
+
diff --git a/src/app/rest-apis/rest-apis.component.ts b/src/app/rest-apis/rest-apis.component.ts index 8c95b23..72ff3bf 100644 --- a/src/app/rest-apis/rest-apis.component.ts +++ b/src/app/rest-apis/rest-apis.component.ts @@ -11,14 +11,14 @@ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /** * @author Philippe Buschmann * @file src/app/rest-apis/rest-apis.component.ts - * @brief + * @brief * */ @@ -31,16 +31,15 @@ import { ApiService } from '../api.service'; }) export class RestApisComponent implements OnInit { - apis: RestAPI[]; + apis: RestAPI[] = [ + {name: 'Manage Identities', desc: 'Create new identities, edit their names and delete them!', link: 'identity'}, + {name: 'Maintain Names', desc: 'Do things!', link: 'namestore'}, + {name: 'Handle Peers', desc: 'Do things!', link: 'peerstore'}, + ]; constructor(private apiService: ApiService) { } - getAPIs(): void { - this.apiService.getAPIs().subscribe(apis => this.apis = apis); - } - ngOnInit() { - this.getAPIs(); } } diff --git a/src/index.html b/src/index.html index 3c1fbca..434133e 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - GnunetWebui + Gnunet Web UI diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 9f7b70b..8f3e4fa 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,13 +1,13 @@ $button-padding : $baseline-x2 $baseline-x4; -$button-bgcolor : $color-secondary; -$button-bgcolor-hover : darken($color-secondary, 10%); +$button-bgcolor : $color-primary; +$button-bgcolor-hover : darken($button-bgcolor, 10%); $button-color : $color-white; $button-radius : 3px; $button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 ); $button-outline-bgcolor: transparent; -$button-outline-color: $color-secondary; -$button-outline-color-hover: darken( $color-secondary, 10% ); +$button-outline-color: $color-primary; +$button-outline-color-hover: darken( $button-outline-color, 10% ); .c-button { padding: $button-padding; @@ -67,7 +67,7 @@ $button-outline-color-hover: darken( $color-secondary, 10% ); } .c-button--outline:hover { - color: #1893E0; + color: $button-outline-color-hover; border-color: $button-outline-color-hover; background-color: $button-outline-bgcolor; } diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss index 43480d1..2afec74 100644 --- a/src/scss/components/_card.scss +++ b/src/scss/components/_card.scss @@ -1,3 +1,5 @@ +$clickable-bg-color: darken($color-white, 5%); + .c-card { padding: $baseline-x5; background: rgba($color-white, 0.8); @@ -10,3 +12,12 @@ } .c-card--light { background: rgba($color-white, 0.5)} + +.c-card--clickable{ + cursor: pointer; +} + +.c-card--clickable:hover{ + background-color: $clickable-bg-color; + cursor: pointer; +} diff --git a/src/scss/components/_circle.scss b/src/scss/components/_circle.scss new file mode 100644 index 0000000..733cadf --- /dev/null +++ b/src/scss/components/_circle.scss @@ -0,0 +1,13 @@ +$circle-diameter: 70px; + +.c-circle { + color: $color-black; + height: $circle-diameter; + width: $circle-diameter; + border-radius: 50%; + font-weight: bold; + font-size: $circle-diameter*0.4; + line-height: $circle-diameter; + text-align: center; + vertical-align: middle; +} diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss new file mode 100644 index 0000000..4c24395 --- /dev/null +++ b/src/scss/components/_dropdown.scss @@ -0,0 +1,19 @@ +.c-dropdown { + position: relative; + display: inline-block; +} + +.c-dropdown--item { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + padding: 12px 16px; + z-index: 1; +} + + +.c-dropdown:hover .c-dropdown--item { + display: block; +} diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss index 8bd8664..bbd3ffc 100644 --- a/src/scss/components/_footer.scss +++ b/src/scss/components/_footer.scss @@ -1,6 +1,14 @@ +$footer-height: 50px; + .c-footer{ bottom: 0px; + height: $footer-height; width: 100%; - background-color: $color-primary; - color: $color-contrary; + background-color: $color-grey-light; + border-top: solid 1px $color-grey; + position: fixed; +} + +.c-footer-fixed{ + height: $footer-height; } diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index 0bf8635..0192252 100644 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -2,6 +2,7 @@ top:0px; position: sticky; width: 100%; - background-color: $color-primary; - color: $color-contrary; + background-color: $color-grey-light; + border-bottom: solid 1px $color-grey; + //color: $color-contrary; } diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss index 73f6e00..7a85e3f 100644 --- a/src/scss/components/_link.scss +++ b/src/scss/components/_link.scss @@ -8,3 +8,9 @@ .c-link:hover { opacity: 0.8; } + +.c-link--normal { + text-decoration: none; + cursor: pointer; + color: $color-primary; +} diff --git a/src/scss/components/_markdown.scss b/src/scss/components/_markdown.scss new file mode 100644 index 0000000..8a5e0a3 --- /dev/null +++ b/src/scss/components/_markdown.scss @@ -0,0 +1,9 @@ +$markdown-bg-color : darken($color-grey-light, 6%); + +.c-markdown { + font-size: inherit; + font-family: monospace; + background-color: $markdown-bg-color; + border-radius: 5px; + padding: 5px; +} diff --git a/src/scss/components/_progressbar.scss b/src/scss/components/_progressbar.scss index e69de29..b6adeac 100644 --- a/src/scss/components/_progressbar.scss +++ b/src/scss/components/_progressbar.scss @@ -0,0 +1,3 @@ +.c-progressbar { + +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 4b462e9..18b0408 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -31,6 +31,9 @@ @import 'components/header'; @import 'components/badge'; @import 'components/spinner'; +@import 'components/markdown'; +@import 'components/circle'; +@import 'components/dropdown'; //@import 'utilities/align-items'; @import 'utilities/align'; diff --git a/src/scss/objects/_grid.scss b/src/scss/objects/_grid.scss index 8a18397..30312ca 100644 --- a/src/scss/objects/_grid.scss +++ b/src/scss/objects/_grid.scss @@ -43,6 +43,7 @@ $iota-objs-grid-gutter-default: $iota-global-gutter-default; */ $iota-objs-grid-gutter-extra: ( + 'gutter-x3': $baseline-x3, 'gutter-x4': $baseline-x4 ); diff --git a/src/scss/objects/_type.scss b/src/scss/objects/_type.scss index 7184ab0..6345517 100644 --- a/src/scss/objects/_type.scss +++ b/src/scss/objects/_type.scss @@ -25,6 +25,7 @@ $iota-objs-type-sizes: ( 32: $type-32, 34: $type-34, 35: $type-35, + 50: $type-50, 80: $type-80 ); diff --git a/src/scss/settings/_colors.scss b/src/scss/settings/_colors.scss index 59a1f88..f6f94a4 100644 --- a/src/scss/settings/_colors.scss +++ b/src/scss/settings/_colors.scss @@ -27,12 +27,14 @@ $info-bgcolor: #d1ecf1; $info-border-color: #bee5eb; $color-primary: $color-purple; +$color-primary-light: lighten($color-primary, 10%); $color-contrary: $color-white; -$color-secondary: $color-deep-blue; +$color-secondary: $color-primary-light; $color-secondary-light: $color-grey-light; $colors: ( 'primary' : $color-primary, + 'primary-light' : $color-primary-light, 'contrary' : $color-contrary, 'secondary' : $color-secondary, 'secondary-light' : $color-secondary-light, diff --git a/src/scss/settings/_spacing.scss b/src/scss/settings/_spacing.scss index bd14ac4..6628663 100644 --- a/src/scss/settings/_spacing.scss +++ b/src/scss/settings/_spacing.scss @@ -8,4 +8,10 @@ $spacing-extra: ( -x5 : $baseline-x5, -x6 : $baseline-x6, -x7 : $baseline-x7, + -x8 : $baseline-x8, + -x9 : $baseline-x9, + -x10 : $baseline-x10, + -x11 : $baseline-x11, + -x12 : $baseline-x12, + -x13 : $baseline-x13 ); diff --git a/src/scss/settings/_type.scss b/src/scss/settings/_type.scss index c7ad0af..a1ec8b0 100644 --- a/src/scss/settings/_type.scss +++ b/src/scss/settings/_type.scss @@ -58,15 +58,9 @@ $type-80: ( sm: ( 80px, $baseline-x13 ) ); - -$type-20: ( - null: ( 18px, $baseline-x3 ), - sm: ( 20px, $baseline-x4 ) -); - -$type-28: ( - null: ( 20px, $baseline-x4 ), - sm: ( 28px, $baseline-x5 ) +$type-50: ( + null: ( 40px, $baseline-x10 ), + sm: ( 50px, $baseline-x10 ) ); $type-35: ( diff --git a/src/scss/utilities/_align.scss b/src/scss/utilities/_align.scss index 631e839..483d184 100644 --- a/src/scss/utilities/_align.scss +++ b/src/scss/utilities/_align.scss @@ -4,7 +4,7 @@ * Type: Boolean */ -$iota-utils-align-res: false; +$iota-utils-align-res: true; /** -- cgit v1.2.3