list of lang as written, rounded modal

src/app/core/services/language.service.ts

@@ -23,6 +23,13 @@ export class LanguageService {
 		return this.translate.getLangs();
 	}
 
+	/**
+	 * get a static list of langs
+	 */
+	public getAvailableLanguagesStatic(): string[] {
+		return this.translate.getLangs();
+	}
+
 	public configureAndInitTranslations(): void {
 		// always save in storage the currentLang used
 		this.translate.onLangChange.subscribe((event: LangChangeEvent) => {

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -48,7 +48,7 @@
 					{{ 'popup.languages.title' | translate }}
 				</h1>
 
-				<div class="list-of-langs">
+				<div class="list-of-langs is-dynamic" *ngIf="display_dynamic_langs">
 					<div *ngFor="let language of availableLanguages" (click)="language_to_apply = language">
 						<label
 							[attr.for]="'#lang_' + language"
@@ -68,11 +68,36 @@
 								[attr.id]="'#lang_' + language"
 								(click)="language_to_apply = language"
 							/>
-							{{ language }} -
+							<!--							{{ language }} - -->
 							{{ 'LANGUAGES.' + language.toUpperCase() | translate }}
 						</label>
 					</div>
 				</div>
+
+				<div class="list-of-langs is-static" *ngIf="!display_dynamic_langs">
+					<div *ngFor="let language of availableLanguagesStatic" (click)="language_to_apply = language.value">
+						<label
+							[attr.for]="'#lang_' + language"
+							class="lang-element button has-text-left"
+							[ngClass]="{
+								'is-primary': language_to_apply === language.value,
+								'is-current': language.value === currentLang
+							}"
+						>
+							<input
+								class="pull-left"
+								type="radio"
+								value="{{ language.value }}"
+								name="lang_to_apply"
+								lang="{{ language.value }}"
+								[(ngModel)]="language_to_apply"
+								[attr.id]="'#lang_' + language.value"
+								(click)="language_to_apply = language.value"
+							/>
+							{{ language.name | translate }}
+						</label>
+					</div>
+				</div>
 			</ng-template>
 
 			<ng-template pTemplate="footer">

src/app/shared/components/selectors/language-selector/language-selector.component.scss

@@ -1,28 +1,5 @@
 @import './../../../../../styles/variables';
 
-#lang_selector {
-	max-width: 15em;
-	width: 15em !important;
-
-	.top {
-		clear: both;
-		width: 100%;
-	}
-}
-
-#lang_button_popup {
-	background: transparent;
-	margin-right: 0.5rem;
-	&:hover {
-		background: $secondary_color;
-		color: $white;
-
-		.fa {
-			color: $white;
-		}
-	}
-}
-
 .language-selector-container {
 	cursor: pointer;
 	color: $primary-color;
@@ -30,41 +7,65 @@
 	i {
 		color: $primary-color;
 	}
-}
 
-.lang-element {
+	#lang_selector {
-	float: left;
+		max-width: 15em;
-	margin: 0.5em;
+		width: 15em !important;
-	border: 0;
-	border-radius: 2rem;
-	padding: 0.5rem 0.25rem;
-	padding-right: 1rem;
-	min-width: 12em;
 
-	&:hover {
+		.top {
-		background: $primary_color;
+			clear: both;
-		color: $white;
+			width: 100%;
+		}
 	}
-	input {
+
-		height: 1.5rem;
+	#lang_button_popup {
+		background: transparent;
+		margin-right: 0.5rem;
+
+		&:hover {
+			background: $secondary_color;
+			color: $white;
+
+			.fa {
+				color: $white;
+			}
+		}
 	}
-}
 
-.is-current {
+	.lang-element {
-	font-weight: bold;
+		float: left;
-}
+		margin: 0.5em;
+		border: 0;
+		border-radius: 2rem;
+		padding: 0.5rem 1rem 0.5rem 0.25rem;
 
-.lang-button {
+		&:hover {
-	color: $primary-color;
+			background: $primary_color;
-	border: none;
+			color: $white;
-	padding: 0 1rem;
+		}
-	display: block;
+
-	line-height: $stepper-nav-height;
+		input {
-	height: $stepper-nav-height;
+			height: 1.5rem;
-}
+			display: none;
+		}
+	}
+
+	.is-current {
+		font-weight: bold;
+	}
 
-#lang_button_popup_mobile {
 	.lang-button {
-		width: 100% !important;
+		color: $primary-color;
+		border: none;
+		padding: 0 1rem;
+		display: block;
+		line-height: $stepper-nav-height;
+		height: $stepper-nav-height;
+	}
+
+	#lang_button_popup_mobile {
+		.lang-button {
+			width: 100% !important;
+		}
 	}
 }

src/app/shared/components/selectors/language-selector/language-selector.component.ts

@@ -1,6 +1,4 @@
 import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
-
-import { LanguageEnum } from '../../../../core/enums/language.enum';
 import { LanguageService } from '../../../../core/services/language.service';
 import { StorageService } from '../../../../core/services/storage.service';
 import { DOCUMENT } from '@angular/common';
@@ -18,7 +16,26 @@ export class LanguageSelectorComponent implements OnInit {
 	public availableLanguages: any = ['FR', 'EN', 'ES'];
 	language: string;
 	language_to_apply: string;
-	display_lang_dialog: boolean = false;
+	display_lang_dialog: boolean = true;
+	display_dynamic_langs: boolean = false;
+	availableLanguagesStatic: any = [
+		{ name: 'Arabic', value: 'ar' },
+		{ name: 'German', value: 'de' },
+		{ name: 'Français', value: 'fr' },
+		{ name: 'Breton', value: 'br' },
+		{ name: 'Catalan', value: 'ca' },
+		{ name: 'Greek', value: 'el' },
+		{ name: 'Espéranto', value: 'eo' },
+		{ name: 'Español', value: 'es' },
+		{ name: 'English', value: 'en' },
+		{ name: 'Galician', value: 'gl' },
+		{ name: 'Hungarian', value: 'hu' },
+		{ name: 'Italiano', value: 'it' },
+		{ name: '日本語', value: 'ja' },
+		{ name: 'Nederlans', value: 'nl' },
+		{ name: 'Occitan', value: 'oc' },
+		{ name: 'Swedish', value: 'sv' },
+	];
 
 	constructor(
 		private languageService: LanguageService,

src/styles/libraries/_overrides.scss

@@ -22,8 +22,16 @@ $input-shadow: none;
 }
 
 // modal dialog
+.p-dialog-content {
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+}
+.p-dialog-footer {
+	border-bottom-left-radius: 0.5rem !important;
+	border-bottom-right-radius: 0.5rem !important;
+}
 .p-dialog {
-	background: blue !important;
+	background: transparent !important;
 }
 
 .cancel-button-reject {

src/styles/partials/_forms.scss

@@ -317,6 +317,19 @@ mat-checkbox {
 
 // resume de la création de sondage
 .step-resume {
+	hr {
+		margin-bottom: 0;
+	}
+
+	.rounded-block {
+		padding-bottom: 0;
+	}
+	.go-to-step {
+		padding: 1rem 0.75rem;
+		padding-left: 1rem;
+		margin-left: -1em;
+		margin-right: -1em;
+	}
 	.content {
 		.title {
 			&.is-2,
@@ -325,6 +338,15 @@ mat-checkbox {
 			}
 		}
 	}
+
+	.list-datechoices {
+		ul {
+			margin-left: 0;
+			ul {
+				margin-left: 1rem;
+			}
+		}
+	}
 }
 
 .block-resume {