Merge branch 'custom-logo-and-title' into 'develop'

⚡ ability to customize app title and app logo in header from environment...

Closes #89, #88 et #87

See merge request framasoft/framadate/funky-framadate-front!44

doc/customisation.md

@@ -0,0 +1,14 @@
+# Personnalisation
+Vous pouvez modifier les variables d'environnement afin de modifier le logo et le titre de votre installation.
+Ce logiciel étant libre et sous la licence GNU Affero V3 vous pouvez bien entendu le modifier à volonté. Voici donc un guide concernant le titre et le logo.
+
+Modifiez le fichier `src/environment.prod.ts`, et remplacez le contenu des variables `appTitle` (un texte, pas forcément un seul mot) et `appLogo` (une URL absolue ou relative d'image)
+ Et voilà!
+ 
+Quand vous builderez votre app, vous verrez ces valeurs dans la barre titre, incluses par le composant HeaderComponent automatiquement.
+
+Vous pouvez modifier les valeurs dans le fichier  `src/environment.ts` pour voir ce que cela donne en environnement de développement en lancant l'app avec `npm start` ou `yarn start`.
+
+#Customization
+Change the content of the file `src/environment.prod.ts`, and the content of the vars `appTitle` (any text) and `appLogo` (any picture URL, relative or absolute) .
+ And voilà!

src/app/app.component.html

@@ -7,7 +7,7 @@
 		<div id="big_container" [class]="themeClass">
 			<div class="container">
 				<mat-slide-toggle (change)="sidenav.toggle()">Dev Menu</mat-slide-toggle>
-				<app-header></app-header>
+				<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
 				<main>
 					<router-outlet></router-outlet>
 				</main>

src/app/app.component.ts

@@ -15,6 +15,7 @@ import { MockingService } from './core/services/mocking.service';
 })
 export class AppComponent implements OnInit, OnDestroy {
 	public appTitle: string = environment.appTitle;
+	public appLogo: string = environment.appLogo;
 	public themeClass: string;
 	public isSidebarOpened = false;
 	private themeSubscription: Subscription;

src/app/core/components/header/header.component.html

@@ -1,7 +1,15 @@
 <header class="big-header">
 	<nav class="navbar" role="navigation" aria-label="main navigation">
 		<div class="navbar-brand">
-			<a class="navbar-item" routerLink="/"> FramaSondage </a>
+			<a class="navbar-item" routerLink="/">
+				<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
+				<span class="app-title title">
+					{{ appTitle }}
+				</span>
+				<span class="dev-env" *ngIf="!env.production">
+					(dev)
+				</span>
+			</a>
 
 			<a
 				role="button"

src/app/core/components/header/header.component.scss

@@ -4,4 +4,8 @@
 			padding: 0;
 		}
 	}
+	.app-logo {
+		max-width: 5em;
+		max-height: 5em;
+	}
 }

src/app/core/components/header/header.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { SettingsComponent } from '../../../shared/components/settings/settings.component';
 import { User } from '../../models/user.model';
 import { ModalService } from '../../services/modal.service';
 import { UserService } from '../../services/user.service';
+import { environment } from '../../../../environments/environment';
 
 @Component({
 	selector: 'app-header',
@@ -13,6 +14,9 @@ import { UserService } from '../../services/user.service';
 })
 export class HeaderComponent implements OnInit {
 	public _user: Observable<User> = this.userService.user;
+	public env = environment;
+	@Input() public appTitle: string = 'FramaDate Funky';
+	@Input() public appLogo: string;
 
 	constructor(private userService: UserService, private modalService: ModalService) {}
 

src/environments/environment.prod.ts

@@ -5,7 +5,8 @@ const backendApiUrlsInDev = {
 
 export const environment = {
 	production: true,
-	appTitle: 'FramaSondage',
+	appTitle: 'FramaDate',
+	appLogo: '/assets/img/logo.png',
 	api: {
 		baseHref: backendApiUrlsInDev.remote,
 		endpoints: {

src/environments/environment.ts

@@ -9,7 +9,8 @@ const backendApiUrlsInDev = {
 
 export const environment = {
 	production: false,
-	appTitle: 'FramaSondage',
+	appTitle: 'FramaDate',
+	appLogo: '/assets/img/icon_voter_yes.png',
 	api: {
 		baseHref: backendApiUrlsInDev.local,
 		endpoints: {