Browse Source

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

develop
tykayn 2 years ago
parent
commit
621101aa38
  1. 14
      customisation.md
  2. 2
      src/app/app.component.html
  3. 1
      src/app/app.component.ts
  4. 10
      src/app/core/components/header/header.component.html
  5. 4
      src/app/core/components/header/header.component.scss
  6. 6
      src/app/core/components/header/header.component.ts
  7. BIN
      src/assets/img/logo.png
  8. 3
      src/environments/environment.prod.ts
  9. 3
      src/environments/environment.ts

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

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

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

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

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

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

6
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) {}

BIN
src/assets/img/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

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

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

Loading…
Cancel
Save