tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

RGAA title hierarchy, focus on close button in popup

This commit is contained in:
Tykayn 2021-12-15 18:34:39 +01:00 committed by tykayn
parent 23bb4cde3a
commit ba6f11d45c
9 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/features/administration/form/steps/step-one/step-one.component.html
View File

@ -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
src/app/features/administration/form/steps/step-one/step-one.component.ts
View File

@ -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 {

22
src/app/features/administration/stepper/stepper.component.html
View File

@ -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>

14
src/app/features/administration/stepper/stepper.component.scss
View File

@ -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 {

17
src/app/features/administration/stepper/stepper.component.ts
View File

@ -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(['/']);

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

@ -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 }}">

4
src/styles/dev-utilities/_helpers.scss
View File

@ -77,3 +77,7 @@
}
}
}
.has-no-border {
border: none;
}

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

@ -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;
}

2
src/styles/variables.scss
View File

@ -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;