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
This commit is contained in:
ty kayn 2020-09-14 15:24:52 +02:00
commit 591abcfa2b
9 changed files with 38 additions and 5 deletions

14
doc/customisation.md Normal file
View File

@ -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à!

View File

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

View File

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

View File

@ -1,7 +1,15 @@
<header class="big-header"> <header class="big-header">
<nav class="navbar" role="navigation" aria-label="main navigation"> <nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <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 <a
role="button" role="button"

View File

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

View File

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

BIN
src/assets/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

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

View File

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