forked from tykayn/funky-framadate-front
RGAA title hierarchy, focus on close button in popup
This commit is contained in:
tykayn
parent
23bb4cde3a
commit
ba6f11d45c
@ -48,7 +48,9 @@
|
||||
<span class="counter-current" *ngIf="pollService.form.value.description.length">
|
||||
{{ pollService.form.value.description.length }} /
|
||||
</span>
|
||||
300 caractères maximum
|
||||
<p>
|
||||
300 caractères maximum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,6 +4,8 @@ import { PollService } from '../../../../../core/services/poll.service';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { ConfirmationService } from 'primeng/api';
|
||||
import { Router } from '@angular/router';
|
||||
import { environment } from '../../../../../../environments/environment';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
|
||||
@Component({
|
||||
selector: 'app-step-one',
|
||||
@ -20,9 +22,11 @@ export class StepOneComponent implements OnInit {
|
||||
public pollService: PollService,
|
||||
@Inject(DOCUMENT) private document: any,
|
||||
private router: Router,
|
||||
private titleService: Title,
|
||||
private confirmationService: ConfirmationService
|
||||
) {
|
||||
this.step_max = this.pollService.step_max;
|
||||
this.titleService.setTitle(' Création de sondage - ' + environment.appTitle);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
@ -65,24 +65,26 @@
|
||||
alt="accueil {{ environment.appTitle }}"
|
||||
/>
|
||||
</a>
|
||||
<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
|
||||
{{ 'creation.title' | translate }}
|
||||
</h2>
|
||||
<h2 class="step-title-poll" *ngIf="pollService.step_current >= 2">
|
||||
<span class="poll-title-filled" *ngIf="pollService.form.value.title.length">
|
||||
<h1 *ngIf="pollService.step_current == 1">
|
||||
<span class="step-title-poll">
|
||||
{{ 'creation.title' | translate }}
|
||||
</span>
|
||||
<span class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</span>
|
||||
</h1>
|
||||
<h1 *ngIf="pollService.step_current >= 2">
|
||||
<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
|
||||
{{ pollService.form.value.title }}
|
||||
</span>
|
||||
<span class="poll-title-empty" *ngIf="!pollService.form.value.title.length">
|
||||
<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
|
||||
(Aucun titre)
|
||||
</span>
|
||||
</h2>
|
||||
<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
<app-language-selector class="nav-button"></app-language-selector>
|
||||
<a class="nav-button cancel-button" (click)="showCancelDialog()">
|
||||
<button class="has-no-border nav-button cancel-button" (click)="showCancelDialog()">
|
||||
{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
#creation_stepper {
|
||||
@extend .fixed-box;
|
||||
background: $white;
|
||||
height: 64px;
|
||||
height: $stepper-nav-height;
|
||||
|
||||
a {
|
||||
@extend .clickable;
|
||||
@ -54,8 +54,8 @@
|
||||
|
||||
.nav-button {
|
||||
margin-top: 0;
|
||||
line-height: 4.5rem;
|
||||
height: 4.5rem;
|
||||
line-height: $stepper-nav-height;
|
||||
height: $stepper-nav-height;
|
||||
display: inline-block;
|
||||
padding-left: 1em;
|
||||
&app-language-selector {
|
||||
@ -63,8 +63,10 @@
|
||||
}
|
||||
}
|
||||
.cancel-button {
|
||||
line-height: 4.5rem;
|
||||
height: 4.5rem;
|
||||
line-height: $stepper-nav-height;
|
||||
height: $stepper-nav-height;
|
||||
padding: 0 1rem;
|
||||
color: $secondary_color;
|
||||
|
||||
&:hover {
|
||||
color: $font_color;
|
||||
@ -86,6 +88,8 @@
|
||||
font-size: 0.85rem;
|
||||
color: $d-neutral;
|
||||
margin-bottom: 0rem;
|
||||
padding-top: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
|
||||
import { PollService } from '../../../core/services/poll.service';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { ConfirmationService } from 'primeng/api';
|
||||
import { Router } from '@angular/router';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-stepper',
|
||||
@ -20,9 +20,11 @@ export class StepperComponent {
|
||||
public environment = environment;
|
||||
public show_shortcuts = environment.showStepperShortcuts;
|
||||
display_cancel_dialog: boolean;
|
||||
|
||||
constructor(
|
||||
public pollService: PollService,
|
||||
private confirmationService: ConfirmationService,
|
||||
@Inject(DOCUMENT) private document: any,
|
||||
private cd: ChangeDetectorRef,
|
||||
private router: Router
|
||||
) {
|
||||
this.step_current = this.pollService.step_current;
|
||||
@ -30,7 +32,16 @@ export class StepperComponent {
|
||||
|
||||
showCancelDialog() {
|
||||
this.display_cancel_dialog = true;
|
||||
this.cd.detectChanges();
|
||||
let buttonClosepopup = this.document.querySelector('.p-dialog-header-close');
|
||||
if (buttonClosepopup) {
|
||||
buttonClosepopup.focus();
|
||||
console.log('button close found');
|
||||
} else {
|
||||
console.log('not found');
|
||||
}
|
||||
}
|
||||
|
||||
goToHome() {
|
||||
this.display_cancel_dialog = false;
|
||||
this.router.navigate(['/']);
|
||||
|
||||
@ -7,13 +7,15 @@
|
||||
|
||||
<div class="buttons has-addons">
|
||||
<label for="lang_selector" class="hidden">
|
||||
{{ 'selector.lang' | translate }}
|
||||
<span class="lang-title-long is-hidden-mobile">
|
||||
{{ 'LANGUAGES.' + language | translate }}
|
||||
</span>
|
||||
<span class="lang-title-short is-visible-mobile">
|
||||
{{ 'LANGUAGES_SHORT.' + language | translate }}
|
||||
</span>
|
||||
<button>
|
||||
{{ 'selector.lang' | translate }}
|
||||
<span class="lang-title-long is-hidden-mobile">
|
||||
{{ 'LANGUAGES.' + language | translate }}
|
||||
</span>
|
||||
<span class="lang-title-short is-visible-mobile">
|
||||
{{ 'LANGUAGES_SHORT.' + language | translate }}
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
<select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
|
||||
<option *ngFor="let language of availableLanguages" value="{{ language }}">
|
||||
|
||||
@ -77,3 +77,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -8,12 +8,21 @@ button,
|
||||
@extend .is-block;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
button {
|
||||
&.is-white {
|
||||
&:hover {
|
||||
background: $secondary_color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@extend .is-primary;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.btn--warning {
|
||||
.is-warning {
|
||||
@extend .is-warning;
|
||||
}
|
||||
|
||||
|
||||
@ -74,7 +74,7 @@ $mobile-size: 25rem;
|
||||
$header-nav-height: 4.25rem;
|
||||
$header-nav-inner-height: 4rem;
|
||||
$widescreen-width-main-column: 75rem;
|
||||
|
||||
$stepper-nav-height: 4.5rem;
|
||||
// datepicker
|
||||
$cell-size: 30px;
|
||||
$cell-size-desktop: 40px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user