change lang icons + reactivate leave security popup

src/app/app.component.html

@@ -154,10 +154,16 @@
     <div class="container-settings container-settings-secondline">
         <button mat-mini-fab color="white" style="font-size: 20px;" [matMenuTriggerFor]="changeLanguageMenu"
         [matTooltip]="translate.instant('lang_tooltip')"
-        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">{{langEmoji}}</button>
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><img class="langIcon" [src]="'../assets/lang/icons/'+selectedLang+'.png'"></button>
         <mat-menu #changeLanguageMenu="matMenu">
-            <button mat-menu-item (click)="changeLanguage('fr')">🇫🇷 {{'language_fr' | translate}}</button>
-            <button mat-menu-item (click)="changeLanguage('en')">🇬🇧 {{'language_en' | translate}}</button>
+            <button mat-menu-item class="buttonLang" (click)="changeLanguage('fr')">
+                <img class="langIcon" src="../assets/lang/icons/fr.png"/>
+                <div>{{'language_fr' | translate}}</div>
+            </button>
+            <button mat-menu-item class="buttonLang" (click)="changeLanguage('en')">
+                <img class="langIcon langIcon-icon" src="../assets/lang/icons/en.png"/>
+                <div>{{'language_en' | translate}}</div>
+            </button>
         </mat-menu>
         <button mat-mini-fab color="white" (click)="downloadManual()"
         [matTooltip]="translate.instant('manual_tooltip')"

src/app/app.component.scss

@@ -250,6 +250,21 @@
         }
     }
 }
+  
+.langIcon {
+    width: 28px;
+    height: 28px;
+}
+
+.buttonLang {
+    display: flex;
+    flex-direction: row;
+
+    img {
+        margin-top: 10px;
+        margin-right: 5px;
+    }
+}
 
 ::ng-deep .mat-tooltip {
     font-size: 15px;

src/app/app.component.ts

@@ -49,7 +49,6 @@ export class AppComponent {
   scenario: Scenario = new Scenario();
   @ViewChild('fileInput') fileInput: any;
   selectedLang: string = 'en';
-  langEmoji: string = '🇬🇧';
 
   constructor(private cdr: ChangeDetectorRef, private http: HttpClient, protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService,
     private elementRef: ElementRef, private zoomService: ZoomService, private dialog: MatDialog, private titleService: Title,
@@ -65,10 +64,6 @@ export class AppComponent {
       this.selectedLang = selectedLang;
     }
     translate.use(this.selectedLang);
-    switch(selectedLang) {
-      case 'en': this.langEmoji = '🇬🇧'; break;
-      case 'fr': this.langEmoji = '🇫🇷'; break;
-    }
 
     pieceDetailsService.piece = this.scenario;
 
@@ -87,14 +82,14 @@ export class AppComponent {
       observe: false
     })
   }
-/*
+
   @HostListener('window:beforeunload', ['$event'])
   beforeUnloadHandler(event: any) {
     const message = "Êtes vous sûr de vouloir quitter RLG Maker ?\nVous risquez de perdre les données non sauvegardées.";
     event.returnValue = message;
     return message;
   }
-*/
+
   @HostListener('document:keydown', ['$event'])
   onKeyDown(event: KeyboardEvent) {
     if (event.ctrlKey && event.key === 's') {
@@ -123,8 +118,8 @@ export class AppComponent {
   changeLanguage(lang: string): void {
     if (lang !== this.selectedLang) {
       switch(lang) {
-        case 'fr': this.selectedLang = 'fr'; this.translate.use('fr'); this.langEmoji = '🇫🇷'; break;
-        case 'en': this.selectedLang = 'en'; this.translate.use('en'); this.langEmoji = '🇬🇧'; break;
+        case 'fr': this.selectedLang = 'fr'; this.translate.use('fr'); break;
+        case 'en': this.selectedLang = 'en'; this.translate.use('en'); break;
       }
       this.minimapService.reset();
       this.scenario.traces.push(new Trace(this.scenario.traces.length, 'change_lang', undefined, undefined, this.selectedLang, 'Scenario'));