list of lang as written, rounded modal
This commit is contained in:
tykayn
parent
61bb08f9ff
commit
3f492d5436
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
float: left;
|
||||
margin: 0.5em;
|
||||
border: 0;
|
||||
border-radius: 2rem;
|
||||
padding: 0.5rem 0.25rem;
|
||||
padding-right: 1rem;
|
||||
min-width: 12em;
|
||||
#lang_selector {
|
||||
max-width: 15em;
|
||||
width: 15em !important;
|
||||
|
||||
&:hover {
|
||||
background: $primary_color;
|
||||
color: $white;
|
||||
.top {
|
||||
clear: both;
|
||||
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 {
|
||||
font-weight: bold;
|
||||
}
|
||||
.lang-element {
|
||||
float: left;
|
||||
margin: 0.5em;
|
||||
border: 0;
|
||||
border-radius: 2rem;
|
||||
padding: 0.5rem 1rem 0.5rem 0.25rem;
|
||||
|
||||
.lang-button {
|
||||
color: $primary-color;
|
||||
border: none;
|
||||
padding: 0 1rem;
|
||||
display: block;
|
||||
line-height: $stepper-nav-height;
|
||||
height: $stepper-nav-height;
|
||||
}
|
||||
&:hover {
|
||||
background: $primary_color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
input {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue