ability to customize app title and app logo in header from environment vars. fixes #87 #88 #89.

This commit is contained in:
tykayn 2020-08-12 16:00:20 +02:00
parent c4982267d2
commit 621101aa38
9 changed files with 38 additions and 5 deletions

14
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 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>

View File

@ -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;

View File

@ -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"

View File

@ -4,4 +4,8 @@
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 { 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) {}

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 = {
production: true,
appTitle: 'FramaSondage',
appTitle: 'FramaDate',
appLogo: '/assets/img/logo.png',
api: {
baseHref: backendApiUrlsInDev.remote,
endpoints: {

View File

@ -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: {