From 36f9424ff192b0584a433bc196bced6fcf265808 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 31 Jan 2018 17:47:36 +0100 Subject: Add about page --- client/src/app/about/about-routing.module.ts | 23 +++++++++++++ client/src/app/about/about.component.html | 17 ++++++++++ client/src/app/about/about.component.scss | 12 +++++++ client/src/app/about/about.component.ts | 38 ++++++++++++++++++++++ client/src/app/about/about.module.ts | 24 ++++++++++++++ client/src/app/about/index.ts | 3 ++ client/src/app/app.component.html | 2 +- client/src/app/app.component.ts | 4 +++ client/src/app/app.module.ts | 2 ++ client/src/app/core/server/server.service.ts | 33 +++++++++++++++++-- client/src/app/menu/menu.component.html | 9 +++-- client/src/app/menu/menu.component.scss | 7 ++++ .../shared/forms/form-validators/custom-config.ts | 2 +- client/src/app/videos/shared/markdown.service.ts | 3 +- 14 files changed, 172 insertions(+), 7 deletions(-) create mode 100644 client/src/app/about/about-routing.module.ts create mode 100644 client/src/app/about/about.component.html create mode 100644 client/src/app/about/about.component.scss create mode 100644 client/src/app/about/about.component.ts create mode 100644 client/src/app/about/about.module.ts create mode 100644 client/src/app/about/index.ts (limited to 'client/src/app') diff --git a/client/src/app/about/about-routing.module.ts b/client/src/app/about/about-routing.module.ts new file mode 100644 index 000000000..11a650c80 --- /dev/null +++ b/client/src/app/about/about-routing.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core' +import { RouterModule, Routes } from '@angular/router' +import { MetaGuard } from '@ngx-meta/core' +import { AboutComponent } from './about.component' + +const aboutRoutes: Routes = [ + { + path: 'about', + component: AboutComponent, + canActivate: [ MetaGuard ], + data: { + meta: { + title: 'About' + } + } + } +] + +@NgModule({ + imports: [ RouterModule.forChild(aboutRoutes) ], + exports: [ RouterModule ] +}) +export class AboutRoutingModule {} diff --git a/client/src/app/about/about.component.html b/client/src/app/about/about.component.html new file mode 100644 index 000000000..c0be53581 --- /dev/null +++ b/client/src/app/about/about.component.html @@ -0,0 +1,17 @@ +
+
+ Welcome to the {{ instanceName }} instance +
+ +
+
Description
+ +
+
+ +
+
Terms
+ +
+
+
diff --git a/client/src/app/about/about.component.scss b/client/src/app/about/about.component.scss new file mode 100644 index 000000000..dba4df729 --- /dev/null +++ b/client/src/app/about/about.component.scss @@ -0,0 +1,12 @@ +@import '_variables'; +@import '_mixins'; + +.section-title { + font-weight: $font-semibold; + font-size: 20px; + margin-bottom: 5px; +} + +.description { + margin-bottom: 30px; +} diff --git a/client/src/app/about/about.component.ts b/client/src/app/about/about.component.ts new file mode 100644 index 000000000..6a2e59be1 --- /dev/null +++ b/client/src/app/about/about.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core' +import { ServerService } from '@app/core' +import { MarkdownService } from '@app/videos/shared' +import { NotificationsService } from 'angular2-notifications' + +@Component({ + selector: 'my-about', + templateUrl: './about.component.html', + styleUrls: [ './about.component.scss' ] +}) + +export class AboutComponent implements OnInit { + descriptionHTML = '' + termsHTML = '' + + constructor ( + private notificationsService: NotificationsService, + private serverService: ServerService, + private markdownService: MarkdownService + ) {} + + get instanceName () { + return this.serverService.getConfig().instance.name + } + + ngOnInit () { + this.serverService.getAbout() + .subscribe( + res => { + this.descriptionHTML = this.markdownService.markdownToHTML(res.instance.description) + this.termsHTML = this.markdownService.markdownToHTML(res.instance.terms) + }, + + err => this.notificationsService.error('Error', err) + ) + } + +} diff --git a/client/src/app/about/about.module.ts b/client/src/app/about/about.module.ts new file mode 100644 index 000000000..da3163f43 --- /dev/null +++ b/client/src/app/about/about.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core' + +import { AboutRoutingModule } from './about-routing.module' +import { AboutComponent } from './about.component' +import { SharedModule } from '../shared' + +@NgModule({ + imports: [ + AboutRoutingModule, + SharedModule + ], + + declarations: [ + AboutComponent + ], + + exports: [ + AboutComponent + ], + + providers: [ + ] +}) +export class AboutModule { } diff --git a/client/src/app/about/index.ts b/client/src/app/about/index.ts new file mode 100644 index 000000000..218d09801 --- /dev/null +++ b/client/src/app/about/index.ts @@ -0,0 +1,3 @@ +export * from './about-routing.module' +export * from './about.component' +export * from './about.module' diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index ba7debc71..3a7aedac6 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -6,7 +6,7 @@ - PeerTube + {{ instanceName }} diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 55c7bbf99..121e60ffc 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -34,6 +34,10 @@ export class AppComponent implements OnInit { return this.serverService.getConfig().serverVersion } + get instanceName () { + return this.serverService.getConfig().instance.name + } + ngOnInit () { this.authService.loadClientCredentials() diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index ddcaf3f48..1134d061b 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' +import { AboutModule } from '@app/about' import { ResetPasswordModule } from '@app/reset-password' import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core' @@ -51,6 +52,7 @@ export function metaFactory (): MetaLoader { SignupModule, SharedModule, VideosModule, + AboutModule, MetaModule.forRoot({ provide: MetaLoader, diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts index 6df449018..65714fd05 100644 --- a/client/src/app/core/server/server.service.ts +++ b/client/src/app/core/server/server.service.ts @@ -3,12 +3,14 @@ import { Injectable } from '@angular/core' import 'rxjs/add/operator/do' import { ReplaySubject } from 'rxjs/ReplaySubject' import { ServerConfig } from '../../../../../shared' +import { About } from '../../../../../shared/models/config/about.model' import { environment } from '../../../environments/environment' @Injectable() export class ServerService { private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config/' private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/' + private static CONFIG_LOCAL_STORAGE_KEY = 'server-config' videoPrivaciesLoaded = new ReplaySubject(1) videoCategoriesLoaded = new ReplaySubject(1) @@ -16,6 +18,9 @@ export class ServerService { videoLanguagesLoaded = new ReplaySubject(1) private config: ServerConfig = { + instance: { + name: 'PeerTube' + }, serverVersion: 'Unknown', signup: { allowed: false @@ -40,11 +45,14 @@ export class ServerService { private videoLanguages: Array<{ id: number, label: string }> = [] private videoPrivacies: Array<{ id: number, label: string }> = [] - constructor (private http: HttpClient) {} + constructor (private http: HttpClient) { + this.loadConfigLocally() + } loadConfig () { this.http.get(ServerService.BASE_CONFIG_URL) - .subscribe(data => this.config = data) + .do(this.saveConfigLocally) + .subscribe(data => this.config = data) } loadVideoCategories () { @@ -83,6 +91,10 @@ export class ServerService { return this.videoPrivacies } + getAbout () { + return this.http.get(ServerService.BASE_CONFIG_URL + '/about') + } + private loadVideoAttributeEnum ( attributeName: 'categories' | 'licences' | 'languages' | 'privacies', hashToPopulate: { id: number, label: string }[], @@ -101,4 +113,21 @@ export class ServerService { notifier.next(true) }) } + + private saveConfigLocally (config: ServerConfig) { + localStorage.setItem(ServerService.CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config)) + } + + private loadConfigLocally () { + const configString = localStorage.getItem(ServerService.CONFIG_LOCAL_STORAGE_KEY) + + if (configString) { + try { + const parsed = JSON.parse(configString) + Object.assign(this.config, parsed) + } catch (err) { + console.error('Cannot parse config saved in local storage.', err) + } + } + } } diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 94f82e352..d174c76ba 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -45,12 +45,17 @@ -
+
More
- + Administration + + + + About +
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 4714a9e87..1f3c889cf 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -132,6 +132,13 @@ menu { background-image: url('../../assets/images/menu/administration.svg'); } + + &.icon-about { + width: 23px; + height: 23px; + + background-image: url('../../assets/images/menu/about.svg'); + } } } } diff --git a/client/src/app/shared/forms/form-validators/custom-config.ts b/client/src/app/shared/forms/form-validators/custom-config.ts index 9e3fa98d8..a0966a9a7 100644 --- a/client/src/app/shared/forms/form-validators/custom-config.ts +++ b/client/src/app/shared/forms/form-validators/custom-config.ts @@ -3,7 +3,7 @@ import { Validators } from '@angular/forms' export const INSTANCE_NAME = { VALIDATORS: [ Validators.required ], MESSAGES: { - 'required': 'Instance name is required.', + 'required': 'Instance name is required.' } } diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/videos/shared/markdown.service.ts index fd0330f9b..3f51a82ce 100644 --- a/client/src/app/videos/shared/markdown.service.ts +++ b/client/src/app/videos/shared/markdown.service.ts @@ -7,12 +7,13 @@ export class MarkdownService { private markdownIt: MarkdownIt.MarkdownIt constructor () { - this.markdownIt = new MarkdownIt('zero', { linkify: true }) + this.markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true }) .enable('linkify') .enable('autolink') .enable('emphasis') .enable('link') .enable('newline') + .enable('list') this.setTargetToLinks() } -- cgit v1.2.3