Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

unify lang selector action display

Browse Source
This commit is contained in:
Tykayn 2022-03-10 10:11:49 +01:00 committed by tykayn
parent c288c6716b
commit 41ce51b421
3 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@
<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"
class="lang-element button has-text-left" class="lang-element button is-action"
[ngClass]="{ [ngClass]="{
'is-primary': language_to_apply === language, 'is-primary': language_to_apply === language,
'is-current': language === currentLang 'is-current': language === currentLang
@ -78,7 +78,7 @@
<div *ngFor="let language of availableLanguagesStatic" (click)="language_to_apply = language.value"> <div *ngFor="let language of availableLanguagesStatic" (click)="language_to_apply = language.value">
<label <label
[attr.for]="'#lang_' + language" [attr.for]="'#lang_' + language"
class="lang-element button has-text-left" class="lang-element button is-action"
[ngClass]="{ [ngClass]="{
'is-primary': language_to_apply === language.value, 'is-primary': language_to_apply === language.value,
'is-current': language.value === currentLang 'is-current': language.value === currentLang
@ -94,7 +94,7 @@
[attr.id]="'#lang_' + language.value" [attr.id]="'#lang_' + language.value"
(click)="language_to_apply = language.value" (click)="language_to_apply = language.value"
/> />
{{ language.name | translate }} {{ 'LANGUAGES.' + language.value.toUpperCase() | translate }}
</label> </label>
</div> </div>
</div> </div>
@ -102,7 +102,7 @@
<ng-template pTemplate="footer"> <ng-template pTemplate="footer">
<div class="buttons-bottom"> <div class="buttons-bottom">
<button class="button" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}"> <button class="button is-secondary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
{{ 'SENTENCES.Cancel' | translate }} {{ 'SENTENCES.Cancel' | translate }}
</button> </button>
<button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}"> <button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">

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

@ -23,28 +23,21 @@
margin-right: 0.5rem; margin-right: 0.5rem;
&:hover { &:hover {
background: $secondary_color;
color: $white;
.fa { .fa {
color: $white; color: $white;
} }
} }
} }
// some lang to select in the popup
.lang-element { .lang-element {
float: left; float: left;
height: auto;
min-height: auto;
margin: 0.5em; margin: 0.5em;
border: 0;
border-radius: 2rem;
padding: 0.5rem;
&:hover {
background: $bar-progress-grey;
}
input { input {
height: 1.5rem; //height: 1.5rem;
display: none; display: none;
} }
} }
@ -53,6 +46,7 @@
font-weight: bold; font-weight: bold;
} }
// button to show all lang choices in a popup
.lang-button { .lang-button {
color: $primary-color; color: $primary-color;
border: none; border: none;
@ -60,6 +54,11 @@
display: block; display: block;
line-height: $stepper-nav-height; line-height: $stepper-nav-height;
height: $stepper-nav-height; height: $stepper-nav-height;
&:hover {
i {
color: $primary-color !important;
}
}
} }
#lang_button_popup_mobile { #lang_button_popup_mobile {

2
src/styles/partials/_buttons.scss
View File

@ -14,7 +14,7 @@ button,
.btn--full { .btn--full {
@extend .is-block; @extend .is-block;
} }
.button,
button, button,
a { a {
@extend .outlined; @extend .outlined;