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"> <span class="counter-current" *ngIf="pollService.form.value.description.length">
{{ pollService.form.value.description.length }} / {{ pollService.form.value.description.length }} /
</span> </span>
300 caractères maximum <p>
300 caractères maximum
</p>
</div> </div>
</div> </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 { DOCUMENT } from '@angular/common';
import { ConfirmationService } from 'primeng/api'; import { ConfirmationService } from 'primeng/api';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { environment } from '../../../../../../environments/environment';
import { Title } from '@angular/platform-browser';
@Component({ @Component({
selector: 'app-step-one', selector: 'app-step-one',
@ -20,9 +22,11 @@ export class StepOneComponent implements OnInit {
public pollService: PollService, public pollService: PollService,
@Inject(DOCUMENT) private document: any, @Inject(DOCUMENT) private document: any,
private router: Router, private router: Router,
private titleService: Title,
private confirmationService: ConfirmationService private confirmationService: ConfirmationService
) { ) {
this.step_max = this.pollService.step_max; this.step_max = this.pollService.step_max;
this.titleService.setTitle(' Création de sondage - ' + environment.appTitle);
} }
ngOnInit(): void { ngOnInit(): void {

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

@ -65,24 +65,26 @@
alt="accueil {{ environment.appTitle }}" alt="accueil {{ environment.appTitle }}"
/> />
</a> </a>
<h2 class="step-title-poll" *ngIf="pollService.step_current == 1"> <h1 *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }} <span class="step-title-poll">
</h2> {{ 'creation.title' | translate }}
<h2 class="step-title-poll" *ngIf="pollService.step_current >= 2"> </span>
<span class="poll-title-filled" *ngIf="pollService.form.value.title.length"> <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 }} {{ pollService.form.value.title }}
</span> </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) (Aucun titre)
</span> </span>
</h2> </h1>
<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
</div> </div>
<div class="column has-text-right"> <div class="column has-text-right">
<app-language-selector class="nav-button"></app-language-selector> <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> {{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
</a> </button>
</div> </div>
</div> </div>
</div> </div>

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

@ -4,7 +4,7 @@
#creation_stepper { #creation_stepper {
@extend .fixed-box; @extend .fixed-box;
background: $white; background: $white;
height: 64px; height: $stepper-nav-height;
a { a {
@extend .clickable; @extend .clickable;
@ -54,8 +54,8 @@
.nav-button { .nav-button {
margin-top: 0; margin-top: 0;
line-height: 4.5rem; line-height: $stepper-nav-height;
height: 4.5rem; height: $stepper-nav-height;
display: inline-block; display: inline-block;
padding-left: 1em; padding-left: 1em;
&app-language-selector { &app-language-selector {
@ -63,8 +63,10 @@
} }
} }
.cancel-button { .cancel-button {
line-height: 4.5rem; line-height: $stepper-nav-height;
height: 4.5rem; height: $stepper-nav-height;
padding: 0 1rem;
color: $secondary_color;
&:hover { &:hover {
color: $font_color; color: $font_color;
@ -86,6 +88,8 @@
font-size: 0.85rem; font-size: 0.85rem;
color: $d-neutral; color: $d-neutral;
margin-bottom: 0rem; margin-bottom: 0rem;
padding-top: 1rem;
display: block;
} }
h2 { 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 { PollService } from '../../../core/services/poll.service';
import { environment } from '../../../../environments/environment'; import { environment } from '../../../../environments/environment';
import { ConfirmationService } from 'primeng/api';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DOCUMENT } from '@angular/common';
@Component({ @Component({
selector: 'app-stepper', selector: 'app-stepper',
@ -20,9 +20,11 @@ export class StepperComponent {
public environment = environment; public environment = environment;
public show_shortcuts = environment.showStepperShortcuts; public show_shortcuts = environment.showStepperShortcuts;
display_cancel_dialog: boolean; display_cancel_dialog: boolean;
constructor( constructor(
public pollService: PollService, public pollService: PollService,
private confirmationService: ConfirmationService, @Inject(DOCUMENT) private document: any,
private cd: ChangeDetectorRef,
private router: Router private router: Router
) { ) {
this.step_current = this.pollService.step_current; this.step_current = this.pollService.step_current;
@ -30,7 +32,16 @@ export class StepperComponent {
showCancelDialog() { showCancelDialog() {
this.display_cancel_dialog = true; 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() { goToHome() {
this.display_cancel_dialog = false; this.display_cancel_dialog = false;
this.router.navigate(['/']); 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"> <div class="buttons has-addons">
<label for="lang_selector" class="hidden"> <label for="lang_selector" class="hidden">
{{ 'selector.lang' | translate }} <button>
<span class="lang-title-long is-hidden-mobile"> {{ 'selector.lang' | translate }}
{{ 'LANGUAGES.' + language | translate }} <span class="lang-title-long is-hidden-mobile">
</span> {{ 'LANGUAGES.' + language | translate }}
<span class="lang-title-short is-visible-mobile"> </span>
{{ 'LANGUAGES_SHORT.' + language | translate }} <span class="lang-title-short is-visible-mobile">
</span> {{ 'LANGUAGES_SHORT.' + language | translate }}
</span>
</button>
</label> </label>
<select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang"> <select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
<option *ngFor="let language of availableLanguages" value="{{ language }}"> <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; @extend .is-block;
} }
.btn--primary { button {
&.is-white {
&:hover {
background: $secondary_color;
color: $white;
}
}
}
.btn-primary {
@extend .is-primary; @extend .is-primary;
color: $white !important; color: $white !important;
} }
.btn--warning { .is-warning {
@extend .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-height: 4.25rem;
$header-nav-inner-height: 4rem; $header-nav-inner-height: 4rem;
$widescreen-width-main-column: 75rem; $widescreen-width-main-column: 75rem;
$stepper-nav-height: 4.5rem;
// datepicker // datepicker
$cell-size: 30px; $cell-size: 30px;
$cell-size-desktop: 40px; $cell-size-desktop: 40px;