list of lang as written, rounded modal

This commit is contained in:
Tykayn 2022-02-16 16:45:55 +01:00 committed by tykayn
parent 61bb08f9ff
commit 3f492d5436
6 changed files with 137 additions and 57 deletions

View File

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

View File

@ -48,7 +48,7 @@
{{ 'popup.languages.title' | translate }} {{ 'popup.languages.title' | translate }}
</h1> </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"> <div *ngFor="let language of availableLanguages" (click)="language_to_apply = language">
<label <label
[attr.for]="'#lang_' + language" [attr.for]="'#lang_' + language"
@ -68,11 +68,36 @@
[attr.id]="'#lang_' + language" [attr.id]="'#lang_' + language"
(click)="language_to_apply = language" (click)="language_to_apply = language"
/> />
{{ language }} - <!-- {{ language }} - -->
{{ 'LANGUAGES.' + language.toUpperCase() | translate }} {{ 'LANGUAGES.' + language.toUpperCase() | translate }}
</label> </label>
</div> </div>
</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>
<ng-template pTemplate="footer"> <ng-template pTemplate="footer">

View File

@ -1,28 +1,5 @@
@import './../../../../../styles/variables'; @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 { .language-selector-container {
cursor: pointer; cursor: pointer;
color: $primary-color; color: $primary-color;
@ -30,41 +7,65 @@
i { i {
color: $primary-color; 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 { .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;
}
} }
} }

View File

@ -1,6 +1,4 @@
import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
import { LanguageEnum } from '../../../../core/enums/language.enum';
import { LanguageService } from '../../../../core/services/language.service'; import { LanguageService } from '../../../../core/services/language.service';
import { StorageService } from '../../../../core/services/storage.service'; import { StorageService } from '../../../../core/services/storage.service';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
@ -18,7 +16,26 @@ export class LanguageSelectorComponent implements OnInit {
public availableLanguages: any = ['FR', 'EN', 'ES']; public availableLanguages: any = ['FR', 'EN', 'ES'];
language: string; language: string;
language_to_apply: 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( constructor(
private languageService: LanguageService, private languageService: LanguageService,

View File

@ -22,8 +22,16 @@ $input-shadow: none;
} }
// modal dialog // 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 { .p-dialog {
background: blue !important; background: transparent !important;
} }
.cancel-button-reject { .cancel-button-reject {

View File

@ -317,6 +317,19 @@ mat-checkbox {
// resume de la création de sondage // resume de la création de sondage
.step-resume { .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 { .content {
.title { .title {
&.is-2, &.is-2,
@ -325,6 +338,15 @@ mat-checkbox {
} }
} }
} }
.list-datechoices {
ul {
margin-left: 0;
ul {
margin-left: 1rem;
}
}
}
} }
.block-resume { .block-resume {