[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[GNUnet-SVN] [gnunet-webui] branch master updated (6929f53 -> de6217c)
|
From: |
gnunet |
|
Subject: |
[GNUnet-SVN] [gnunet-webui] branch master updated (6929f53 -> de6217c) |
|
Date: |
Sun, 24 Jun 2018 23:23:57 +0200 |
This is an automated email from the git hooks/post-receive script.
phil pushed a change to branch master
in repository gnunet-webui.
from 6929f53 -fix licensing
new 6c6a674 Update design and fix minor bugs
new de6217c finished identity page
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
src/app/api.service.ts | 30 ++++----
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 +
.../error-page.component.spec.ts} | 18 ++---
.../error-page.component.ts} | 14 ++--
src/app/gns-page/gns-page.component.html | 47 -----------
src/app/gns-page/gns-page.component.ts | 81 -------------------
src/app/identity-api.ts | 7 +-
src/app/identity-page/identity-page.component.html | 90 +++++++++++-----------
src/app/identity-page/identity-page.component.ts | 50 ++++++++++--
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/_modal.scss | 73 ++++++++++++++++++
src/scss/components/_progressbar.scss | 3 +
src/scss/main.scss | 4 +
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 +-
39 files changed, 484 insertions(+), 330 deletions(-)
create mode 100644 src/app/error-page/error-page.component.html
rename src/app/{gns-page/gns-page.component.spec.ts =>
error-page/error-page.component.spec.ts} (75%)
copy src/app/{main-page/main-page.component.ts =>
error-page/error-page.component.ts} (77%)
delete mode 100644 src/app/gns-page/gns-page.component.html
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
create mode 100644 src/scss/components/_modal.scss
diff --git a/src/app/api.service.ts b/src/app/api.service.ts
index a70eee1..6597514 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 <http://www.gnu.org/licenses/>.
*/
/**
* @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<RestAPI[]> {
- return of(this.apis);
- }
-
getIdentities (): Observable<IdentityAPI[]>{
return this.http.get<IdentityAPI[]>(this.identityURL)
.pipe(
@@ -72,7 +62,7 @@ export class ApiService {
deleteIdentity (id: string): Observable<any>{
this.messages.dismissError();
- return this.http.delete(this.identityURL+'/'+id)
+ return this.http.delete(this.identityURL+'?pubkey='+id)
.pipe(
tap(json => this.handleJSON(json)),
catchError(this.handleError('deleteIdentity', []))
@@ -80,10 +70,20 @@ export class ApiService {
}
- changeIdentity (id: string, json: any): Observable<any>{
+ changeIdentity (json: any): Observable<any>{
+ this.messages.dismissError();
+ const options = {headers: {'Content-Type': 'application/json'}};
+ return this.http.put(this.identityURL, json, options)
+ .pipe(
+ tap(json => this.handleJSON(json)),
+ catchError(this.handleError('changeIdentity', []))
+ );
+ }
+
+ assignIdentity (json: any): Observable<any>{
this.messages.dismissError();
const options = {headers: {'Content-Type': 'application/json'}};
- return this.http.put(this.identityURL+'/'+id, json, options)
+ return this.http.put(this.identityURL, json, options)
.pipe(
tap(json => this.handleJSON(json)),
catchError(this.handleError('changeIdentity', []))
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 <http://www.gnu.org/licenses/>.
*/
/**
* @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 @@
<!--The content below is only a placeholder and can be replaced.-->
<header class="c-header u-p-x2">
- <div class="o-container o-container--size-small">
- <div class="o-media o-media--middle">
- <div class="o-media__fixed">
- <img src="svg/logo.svg"> GNUnet API
- </div>
- <div class="o-media__fluid u-text-right">
- <nav>
- <ul class="o-list o-list--inline o-list--gutter-x4">
- <li class="o-list__item">
- <a routerLink="/" class="c-link">Main Page</a>
- </li>
- <li class="o-list__item">
- <a routerLink="identity" class="c-link">Identity</a>
- </li>
- <li class="o-list__item">
- <a routerLink="gns" class="c-link">GNS</a>
- </li>
- <li class="o-list__item">
- <a routerLink="namestore" class="c-link">Namestore</a>
- </li>
- <li class="o-list__item">
- <a routerLink="peerstore" class="c-link">Peerstore</a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
- </div>
+ <div class="o-container o-container--size-small">
+ <div class="o-media o-media--middle">
+ <div class="o-media__fixed">
+ <img class="u-align-middle"
src="https://gnunet.org/sites/default/files/transparent_0_0.png"; width="40px">
+ <span class="o-type-22 u-align-middle">GNUnet Web UI</span>
+ </div>
+ <div class="o-media__fluid u-text-right">
+ <nav>
+ <ul class="o-list o-list--inline o-list--gutter-x4">
+ <li class="o-list__item" *ngFor="let item of this.menu">
+ <div *ngIf="item.id === active" class="u-p-x1 u-bgcolor-primary
u-color-contrary">
+ <a routerLink="{{item.link}}" class="c-link">{{item.name}}</a>
+ </div>
+ <div *ngIf="item.id !== active" class="u-p-x1">
+ <a routerLink="{{item.link}}" class="c-link">{{item.name}}</a>
+ </div>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+ </div>
</header>
<main class="u-mv-x2 o-container">
@@ -35,22 +29,24 @@
<router-outlet></router-outlet>
</main>
-<footer class="c-footer u-p-x2">
- <div class="o-container o-container--size-small">
- <div class="o-media o-media--middle">
- <div class="o-media__fixed">
- <ul class="o-list o-list--inline o-list--gutter-x4">
- <li class="o-list__item">
- <a routerLink="/" class="c-link">Impressum</a>
- </li>
- <li class="o-list__item">
- <a routerLink="/" class="c-link">Documentation</a>
- </li>
- </ul>
- </div>
- <div class="o-media__fluid u-text-right">
- Copyright things
- </div>
- </div>
- </div>
-</footer>
+<div class="c-footer-fixed"><div>
+
+ <footer class="c-footer u-p-x2">
+ <div class="o-container o-container--size-small">
+ <div class="o-media o-media--middle">
+ <div class="o-media__fixed">
+ <ul class="o-list o-list--inline o-list--gutter-x4">
+ <li class="o-list__item">
+ <a routerLink="/" class="c-link">Impressum</a>
+ </li>
+ <li class="o-list__item">
+ <a routerLink="/" class="c-link">Documentation</a>
+ </li>
+ </ul>
+ </div>
+ <div class="o-media__fluid u-text-right">
+ Placeholder
+ </div>
+ </div>
+ </div>
+ </footer>
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 <http://www.gnu.org/licenses/>.
*/
/**
* @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 @@
-<div class="c-card u-p-x3">
- <div class="o-type-20 u-pb-x1" >Create new identity</div>
+<div class="c-card c-card--no-padding u-p-x3">
+ <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Create new identity</h1>
<div class="o-list o-list--inline">
- <input [(ngModel)]="this.input_text" type="text" class="o-list__item
c-input" placeholder="Identity Name"/>
+ <p class="u-color-grey">Identity Name:</p>
+ <input [(ngModel)]="this.input_text" type="text" class="o-list__item
c-input" placeholder="e.g. Testname, ..."/>
<a class="o-list__item c-button" (click)="onClick()"><i class="fa
fa-plus"></i></a>
<div *ngIf="!is_free" class="o-list__item c-spinner"></div>
</div>
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 <http://www.gnu.org/licenses/>.
*/
/**
* @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 @@
+<h1 class="u-color-primary o-type-80 u-m-x7">404 Not Found</h1>
+<p class="o-type-28 u-m-x7">This page is currently not available.</p>
+<a class="o-type-28 u-m-x7" routerLink="/">Return to Main Page</a>
diff --git a/src/app/gns-page/gns-page.component.spec.ts
b/src/app/error-page/error-page.component.spec.ts
similarity index 75%
rename from src/app/gns-page/gns-page.component.spec.ts
rename to src/app/error-page/error-page.component.spec.ts
index 48c9d8e..057ee70 100644
--- a/src/app/gns-page/gns-page.component.spec.ts
+++ b/src/app/error-page/error-page.component.spec.ts
@@ -11,34 +11,34 @@
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 <http://www.gnu.org/licenses/>.
*/
/**
* @author Philippe Buschmann
- * @file src/app/gns-page/gns-page.component.spec.ts
- * @brief
+ * @file src/app/error-page/error-page.component.spec.ts
+ * @brief
*
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { GnsPageComponent } from './gns-page.component';
+import { ErrorPageComponent } from './error-page.component';
-describe('GnsPageComponent', () => {
- let component: GnsPageComponent;
- let fixture: ComponentFixture<GnsPageComponent>;
+describe('ErrorPageComponent', () => {
+ let component: ErrorPageComponent;
+ let fixture: ComponentFixture<ErrorPageComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ GnsPageComponent ]
+ declarations: [ ErrorPageComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(GnsPageComponent);
+ fixture = TestBed.createComponent(ErrorPageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/src/app/main-page/main-page.component.ts
b/src/app/error-page/error-page.component.ts
similarity index 77%
copy from src/app/main-page/main-page.component.ts
copy to src/app/error-page/error-page.component.ts
index a6cc830..92cb9b5 100644
--- a/src/app/main-page/main-page.component.ts
+++ b/src/app/error-page/error-page.component.ts
@@ -11,24 +11,24 @@
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 <http://www.gnu.org/licenses/>.
*/
/**
* @author Philippe Buschmann
- * @file src/app/main-page/main-page.component.ts
- * @brief
+ * @file src/app/error-page/error-page.component.ts
+ * @brief
*
*/
-import { Component, OnInit } from '@angular/core';
+ import { Component, OnInit } from '@angular/core';
@Component({
- selector: 'app-main-page',
- templateUrl: './main-page.component.html'
+ selector: 'app-error-page',
+ templateUrl: './error-page.component.html'
})
-export class MainPageComponent implements OnInit {
+export class ErrorPageComponent implements OnInit {
constructor() { }
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 @@
-<div class="o-grid">
- <div class="o-grid__col u-1/3">
- <div class="c-card u-p-x3 u-mr-x2">
- <div class="o-type-20 u-pb-x1" >Search for namesystem</div>
- <div class="">
- Name:<br>
- <input class="c-input u-2/2" placeholder="Name" [(ngModel)]="gns_name"
/><br><br>
- Record Type (optional):<br>
- <select class="c-input c-input--select u-2/2"
[(ngModel)]="gns_recordtype" name="record_type">
- <option [value]="0">ANY</option>
- <option [value]="65536">PKEY</option>
- <option [value]="65537">NICK</option>
- <option [value]="65538">LEHO</option>
- <option [value]="65539">VPN</option>
- <option [value]="65540">GNS2DNS</option>
- <option [value]="65541">BOX</option>
- <option [value]="65542">PLACE</option>
- <option [value]="65543">PHONE</option>
- <option [value]="65544">ID_ATTR</option>
- <option [value]="65545">ID_TOKEN</option>
- <option [value]="65546">ID_TOKEN_METADATA</option>
- <option [value]="65547">CREDENTIAL</option>
- <option [value]="65548">POLICY</option>
- <option [value]="65549">ATTRIBUTE</option>
- <option [value]="65550">ABE_KEY</option>
- <option [value]="65551">ABE_MASTER</option>
- </select><br><br>
- Search in:<br>
- <div class="">
- <input type="radio" name="options" [(ngModel)]="gns_options"
[value]="0"> local namestore, then DHT<br>
- <input type="radio" name="options" [(ngModel)]="gns_options"
[value]="1"> local namestore only<br>
- <input type="radio" name="options" [(ngModel)]="gns_options"
[value]="2"> local namestore only for rightmost label, for others in DHT
- </div><br>
- Zone key (optional):<br>
- <input *ngIf="display_zonekey" class="c-input u-2/2" placeholder="Zone
Key" [(ngModel)]="gns_zonekey" (input)="toggleEgo()"/><br><br>
- <div *ngIf="display_ego">Ego identifier (optional):<br>
- <input class="c-input u-2/2" placeholder="Ego" [(ngModel)]="gns_ego"
(input)="toggleZonekey()" /><br></div>
- <div class="u-text-right"><a class="c-button u-mt-x2"
(click)="onSearch()">Search</a></div>
- </div>
- </div>
- </div>
- <div class="o-grid__col u-2/3">
- <div class="c-card u-p-x3">
- {{gns_response}}
- </div>
- </div>
-</div>
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 <http://www.gnu.org/licenses/>.
- */
-/**
- * @author Philippe Buschmann
- * @file src/app/gns-page/gns-page.component.ts
- * @brief
- *
- */
-
-import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../api.service';
-
address@hidden({
- 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-api.ts b/src/app/identity-api.ts
index d694110..005276f 100644
--- a/src/app/identity-api.ts
+++ b/src/app/identity-api.ts
@@ -11,19 +11,18 @@
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 <http://www.gnu.org/licenses/>.
*/
/**
* @author Philippe Buschmann
* @file src/app/identity-api.ts
- * @brief
+ * @brief
*
*/
export class IdentityAPI{
- id: string;
+ pubkey: string;
name: string;
- type: string;
}
diff --git a/src/app/identity-page/identity-page.component.html
b/src/app/identity-page/identity-page.component.html
index 4eeb8da..b0f22d8 100644
--- a/src/app/identity-page/identity-page.component.html
+++ b/src/app/identity-page/identity-page.component.html
@@ -1,64 +1,64 @@
<div *ngIf="is_displayed">
-<div class="o-grid">
- <div class="o-grid__col u-1/2">
- <create-identity-component></create-identity-component>
- </div>
- <div class="o-grid__col u-1/2">
- <div class="c-card c-card--no-padding u-p-x3">
- <div class="o-type-20 u-pb-x1" >Search</div>
- <div class="">
- <input #myInput class="c-input u-2/2" placeholder="Search"
[(ngModel)]="name" (input)="filterItem(myInput.value)"/>
+ <div class="o-grid">
+ <create-identity-component class="o-grid__col
u-1/2"></create-identity-component>
+ <div class="o-grid__col u-1/2">
+ <div class="c-card c-card--no-padding u-p-x3">
+ <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Search</h1>
+ <div class="">
+ <p class="u-color-grey">Search Input:</p>
+ <input #myInput class="c-input u-2/2" placeholder="e.g. Name, ID,
..." [(ngModel)]="name" (input)="filterItem(myInput.value)"/>
+ </div>
</div>
</div>
</div>
-</div>
-
-<div class="c-card u-mt-x2">
- <table class=" u-2/2 c-table">
- <tr>
- <th class="u-text-center">Type</th>
- <th>Name</th>
- <th>ID</th>
- <th class="u-text-center">Rename</th>
- <th class="u-text-center">Delete</th>
- </tr>
- <tr *ngIf="request">
- <td class="u-text-center"><div class="c-spinner"></div></td>
- <td class="u-text-center"><div class="c-spinner"></div></td>
- <td class="u-text-center"><div class="c-spinner"></div></td>
- <td class="u-text-center"><div class="c-spinner"></div></td>
- <td class="u-text-center"><div class="c-spinner"></div></td>
- </tr>
- <tr *ngFor="let identity of filteredItems">
- <td class="u-text-center"><span class="fa fa-user o-type-20"
*ngIf="identity.type == 'ego'"></span></td>
- <td>
- <span class="">{{identity.name}}</span>
- </td>
- <td>{{identity.id}}</td>
- <td class="u-text-center"><a class="c-button c-button--rename"
(click)="onClickRename(identity)"><i class="fa fa-pencil"></i></a></td>
- <td class="u-text-center"><a class="c-button c-button--danger"
(click)="onClickDelete(identity)"><i class="fa fa-trash"></i></a></td>
- </tr>
- </table>
-</div>
-</div>
+ <div *ngIf="request" class="u-text-center u-m-x3">
+ <div class="c-spinner"></div>
+ </div>
+ <div class="u-mv-x1" *ngFor="let identity of filteredItems">
+ <div class="c-card c-card--no-padding u-p-x1">
+ <div class="o-grid">
+ <div class="o-grid__col u-1/12"><div class="c-circle"
[ngStyle]="{'background-color': returnHSL(identity.pubkey)}">{{identity.name |
slice:0:1 | uppercase}}</div></div>
+ <div class="o-grid__col u-8/12">
+ <p class="u-color-grey">Public Key: <span
class="">{{identity.pubkey}}</span></p>
+ <span class="o-type-20">{{identity.name}}</span>
+ </div>
+ <div class="o-grid__col u-1/12"><p class="u-color-grey">Rename</p><a
class="c-button c-button--rename" (click)="onClickRename(identity)"><i
class="fa fa-pencil"></i></a></div>
+ <div class="o-grid__col u-1/12"><p
class="u-color-grey">Subsystem</p><a class="c-button c-button--rename"
(click)="onClickAddSubsystem(identity)"><i class="fa fa-plus"></i></a></div>
+ <div class="o-grid__col u-1/12"><p class="u-color-grey">Delete</p><a
class="c-button c-button--danger" (click)="onClickDelete(identity)"><i
class="fa fa-trash"></i></a></div>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.rename">
- <div class="o-type-20 u-pb-x1" >Rename</div>
- <div class="u-color-grey">ID: <span>{{changeIdentity.id}}</span></div>
+ <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Rename</h1>
+ <div class="u-color-grey u-pb-x1">Public Key:
<span>{{changeIdentity.pubkey}}</span></div>
<div>
<span class="u-mr-x2"><span class="u-mr-x3">Name: </span><input
class="c-input" placeholder="Change Name"
[(ngModel)]="changeIdentity.name"/></span>
- <a class="c-button" (click)="onRename(changeIdentity)">Rename</a>
+ <a class="c-button" (click)="onRename(changeIdentity)">Save</a>
<a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
</div>
</div>
+<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.addsubsystem">
+ <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Add Subsystem</h1>
+ <div class="u-color-grey">Public Key:
<span>{{changeIdentity.pubkey}}</span></div>
+ <div class="u-color-grey">Name: <span>{{changeIdentity.name}}</span></div>
+ <span class="u-mr-x2">
+ <span class="u-mr-x3">Subsystem: </span>
+ <input class="c-input" placeholder="e.g. namestore, ..."
[(ngModel)]="newsubsystem"/>
+ </span>
+ <a class="c-button" (click)="onAddSubsystem(changeIdentity.pubkey)">Add</a>
+ <a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
+</div>
+
<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.delete">
- <div class="o-type-20 u-pb-x1" >Rename</div>
- <div >ID: <span>{{changeIdentity.id}}</span></div>
+ <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Delete</h1>
+ <div >Public Key: <span>{{changeIdentity.pubkey}}</span></div>
<div >Name: <span>{{changeIdentity.name}}</span></div>
<div>
- <a class="c-button" (click)="onDelete(changeIdentity.id)">Delete</a>
+ <a class="c-button" (click)="onDelete(changeIdentity.pubkey)">Delete</a>
<a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
</div>
</div>
diff --git a/src/app/identity-page/identity-page.component.ts
b/src/app/identity-page/identity-page.component.ts
index b193d5e..7588799 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 <http://www.gnu.org/licenses/>.
*/
/**
* @author Philippe Buschmann
* @file src/app/identity-page/identity-page.component.ts
- * @brief
+ * @brief
*
*/
@@ -38,10 +38,12 @@ export class IdentityPageComponent implements OnInit {
filteredItems: IdentityAPI[];
rename: boolean = false;
delete: boolean = false;
+ addsubsystem: boolean = false;
changeIdentity: IdentityAPI;
json: any;
is_displayed: boolean = true;
request: boolean = false;
+ newsubsystem: string="";
constructor(private apiService: ApiService,private message: MessagesService)
{ }
@@ -68,8 +70,7 @@ export class IdentityPageComponent implements OnInit {
this.filteredItems = Object.assign([], this.identities).filter(
item => {
return ((item.name.indexOf(value) > -1) ||
- (item.id.indexOf(value) > -1) ||
- (item.type.indexOf(value) > -1 ))
+ (item.pubkey.indexOf(value) > -1))
});
}
@@ -79,12 +80,13 @@ export class IdentityPageComponent implements OnInit {
this.changeIdentity = Object.assign({},identity);
}
+
onRename(identity: IdentityAPI){
this.request = true;
this.onReset();
this.filteredItems = [];
- this.json = {'newname':identity.name};
- this.apiService.changeIdentity(identity.id,this.json).subscribe(data => {
+ this.json = {'newname':identity.name,'pubkey':identity.pubkey};
+ this.apiService.changeIdentity(this.json).subscribe(data => {
this.message.pushSuccess('Rename was successful.');
this.getAPIs();
});
@@ -93,6 +95,7 @@ export class IdentityPageComponent implements OnInit {
onReset(){
this.rename = false;
this.delete = false;
+ this.addsubsystem = false;
this.is_displayed = true;
}
@@ -112,4 +115,39 @@ export class IdentityPageComponent implements OnInit {
});
}
+
+ onClickAddSubsystem(identity: IdentityAPI){
+ this.is_displayed = false;
+ this.addsubsystem = true;
+ this.changeIdentity = Object.assign({},identity);
+ }
+
+ onAddSubsystem(pubkey:string){
+ this.request = true;
+ this.onReset();
+ this.filteredItems = [];
+ this.json = {'subsystem':this.newsubsystem,'pubkey':pubkey};
+ this.apiService.assignIdentity(this.json).subscribe(data => {
+ this.newsubsystem = "";
+ this.message.pushSuccess('Subsystem was successfully added.');
+ this.getAPIs();
+ });
+ }
+
+ 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 @@
-<div class="c-card">
- <h1 class="u-text-center u-pb-x3 o-type-35">
+<div class="">
+ <h1 class="u-color-primary u-pv-x3 o-type-50">
GNUnet Web User Interface
</h1>
- <p>
- 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 so [...]
+ <p class="u-pb-x2 o-type-28">
+ Welcome to the GNUnet Web User Interface!<br>
+ </p>
+ <p class="u-pb-x2 o-type-28">
+ This is an alternative to the graphical interface <span
class="c-markdown">gnunet-gtk</span> and the command line tools.
</p>
</div>
-<app-rest-apis class="u-text-center"></app-rest-apis>
+<app-rest-apis></app-rest-apis>
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 @@
-<p>
- namestore-page works!
-</p>
+
+<div class="c-card u-p-x3">
+ <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Search Namesystem</h1>
+ <div class="o-list o-list--inline">
+ <div class="o-list__item">
+ <p class="u-color-grey">Name:</p>
+ <input class="c-input u-2/2" placeholder="Name" [(ngModel)]="gns_name" />
+ </div>
+ <div class="o-list__item">
+ <p class="u-color-grey">Record Type (optional):</p>
+ <select class="c-input c-input--select u-2/2"
[(ngModel)]="gns_recordtype" name="record_type">
+ <option [value]="0">ANY</option>
+ <option [value]="65536">PKEY</option>
+ <option [value]="65537">NICK</option>
+ <option [value]="65538">LEHO</option>
+ <option [value]="65539">VPN</option>
+ <option [value]="65540">GNS2DNS</option>
+ <option [value]="65541">BOX</option>
+ <option [value]="65542">PLACE</option>
+ <option [value]="65543">PHONE</option>
+ <option [value]="65544">ID_ATTR</option>
+ <option [value]="65545">ID_TOKEN</option>
+ <option [value]="65546">ID_TOKEN_METADATA</option>
+ <option [value]="65547">CREDENTIAL</option>
+ <option [value]="65548">POLICY</option>
+ <option [value]="65549">ATTRIBUTE</option>
+ <option [value]="65550">ABE_KEY</option>
+ <option [value]="65551">ABE_MASTER</option>
+ </select>
+ </div>
+ <div class="o-list__item u-align-bottom">
+ <div class="u-text-right"><a class="c-button u-mt-x2"
(click)="onSearch()">Search</a></div>
+ </div>
+ </div>
+</div>
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 <http://www.gnu.org/licenses/>.
*/
/**
* @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 <http://www.gnu.org/licenses/>.
*/
/**
* @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 @@
<div class="o-grid u-pt-x2 ">
- <div class="o-grid__col u-1/4" *ngFor="let api of apis">
- <div class="c-card">
- <h1 class="o-type-28">{{api.name}}</h1>
+ <div class="o-grid__col o-grid--gutter-x2 u-mv-x1 u-1/1" *ngFor="let api
of apis">
+ <div routerLink="{{api.link}}" class="c-card c-card--clickable">
+ <h1 class="u-color-primary-light o-type-28">{{api.name}}</h1>
<br>
- {{api.desc}} ...<a routerLink="{{api.link}}">Read more</a>
+ <div class="o-media">
+ <div class="o-media__fluid u-align-middle">
+ <p class=" o-type-20">{{api.desc}}</p>
+ </div>
+ <div class="o-media__fixed u-text-right u-align-middle">
+ </div>
+ </div>
</div>
</div>
</div>
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 <http://www.gnu.org/licenses/>.
*/
/**
* @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 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>GnunetWebui</title>
+ <title>Gnunet Web UI</title>
<base href="/">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";>
<link href="https://fonts.googleapis.com/css?family=Roboto"; rel="stylesheet">
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/_modal.scss b/src/scss/components/_modal.scss
new file mode 100644
index 0000000..bca0ac1
--- /dev/null
+++ b/src/scss/components/_modal.scss
@@ -0,0 +1,73 @@
+// Modal Comp
+// Options
+$iota-components-modal : true;
+
+$iota-components-modal-namespace : 'modal' !default;
+$iota-components-modal-dialog-name : 'dialog' !default;
+$iota-components-modal-open-name : 'is-modal-open' !default;
+$iota-components-modal-active-name : 'is-active' !default;
+
+$iota-components-modal-padding : $iota-global-gutter-default
!default;
+$iota-components-modal-background : rgba(0, 0, 0, 0.5) !default;
+$iota-components-modal-dialog-background : rgb(255, 255, 255) !default;
+
+// Helper Local Variables
+$iota-components-modal-var-modal : $iota-global-components-namespace +
$iota-components-modal-namespace;
+$iota-components-modal-var-modal-active : $iota-components-modal-var-modal +
'.' + $iota-components-modal-active-name;
+$iota-components-modal-var-modal-dialog : $iota-components-modal-var-modal +
'__' + $iota-components-modal-dialog-name;
+
+// Modal Component
+
+.#{$iota-components-modal-open-name} {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+
+.#{$iota-components-modal-var-modal} {
+ position: fixed;
+ visibility: hidden;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ text-align: center;
+ opacity: 0;
+ z-index: 10000;
+ background: $iota-components-modal-background;
+
+ -webkit-overflow-scrolling: touch;
+ backface-visibility: hidden;
+}
+
+.#{$iota-components-modal-var-modal-active} {
+ visibility: visible;
+ opacity: 1;
+}
+
+.#{$iota-components-modal-var-modal}:after {
+ display: inline-block;
+ height: 100%;
+ margin-left: -0.05em;
+ content: "";
+ vertical-align: middle;
+}
+
+
+ .#{$iota-components-modal-var-modal-dialog} {
+ position: relative;
+ display: inline-block;
+ padding: $iota-components-modal-padding;
+ max-width: 700px;
+ width: 100%;
+ background: $iota-components-modal-dialog-background;
+ vertical-align: middle;
+ transform: translate3d(0,0,0);
+ text-size-adjust: 100%;
+ box-sizing: border-box;
+}
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..3865945 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -31,6 +31,10 @@
@import 'components/header';
@import 'components/badge';
@import 'components/spinner';
address@hidden 'components/markdown';
address@hidden 'components/circle';
address@hidden 'components/dropdown';
address@hidden 'components/modal';
//@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;
/**
--
To stop receiving notification emails like this one, please contact
address@hidden
- [GNUnet-SVN] [gnunet-webui] branch master updated (6929f53 -> de6217c),
gnunet <=