mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
182 lines
5.3 KiB
HTML
182 lines
5.3 KiB
HTML
<header class="creation-stepper" id="creation_stepper" role="header">
|
|
<div class="shortcuts" *ngIf="environment.showStepperShortcuts">
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/1']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 1 }"
|
|
>1</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/2']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 2 }"
|
|
>2</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/3']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 3 }"
|
|
>3</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/4']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 4 }"
|
|
>4</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/5']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 5 }"
|
|
>5</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/6']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 6 }"
|
|
>6</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/7']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 7 }"
|
|
>7</a
|
|
>
|
|
</div>
|
|
|
|
<div class="step-info">
|
|
<a class="logo-home-link logo-home-link-img pull-left" routerLink="/" routerLinkActive="active">
|
|
<img
|
|
class="stepper-app-logo"
|
|
*ngIf="environment.appLogo"
|
|
src="{{ environment.appLogo }}"
|
|
alt="accueil {{ environment.appTitle }}"
|
|
/>
|
|
</a>
|
|
<p class="title-section">
|
|
<span class="logo-home-link pull-left">
|
|
<span class="step-title-poll" *ngIf="pollService.step_current == 1">
|
|
{{ 'creation.title' | translate }}
|
|
</span>
|
|
</span>
|
|
|
|
<span *ngIf="pollService.step_current > 1">
|
|
<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
|
|
{{ pollService.form.value.title }}
|
|
</span>
|
|
<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
|
|
{{ 'nav.no_title' | translate }}
|
|
</span>
|
|
</span>
|
|
<span class="step-counter-text">
|
|
{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
|
|
</span>
|
|
</p>
|
|
<button
|
|
class="is-visible-smallest-screen pull-right menu-button is-filtered-icon-primary has-background-menu"
|
|
(click)="toggle_mobile_menu()"
|
|
>
|
|
<!-- {{ 'nav.menu' | translate }}-->
|
|
</button>
|
|
<div class="is-hidden-smallest-screen has-right-elements pull-right">
|
|
<app-language-selector class="nav-button"></app-language-selector>
|
|
<button
|
|
class="is-secondary is-thin cancel-button-stepper"
|
|
(click)="showCancelDialog()"
|
|
id="display_cancel_popup_button"
|
|
aria-haspopup="dialog"
|
|
>
|
|
{{ 'nav.leave' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="step-bar-container"></div>
|
|
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
|
|
|
|
<!-- modale pour quitter la création-->
|
|
<dialog>
|
|
<p-dialog
|
|
id="close_stepper"
|
|
[modal]="true"
|
|
[(visible)]="display_cancel_dialog"
|
|
[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
|
|
[style]="{ width: '486px', 'border-radius': '1rem' }"
|
|
[styleClass]="'roundToPercentWidth-borders'"
|
|
[draggable]="false"
|
|
[showHeader]="false"
|
|
[resizable]="false"
|
|
>
|
|
<ng-template pTemplate="titlebar">
|
|
<button
|
|
id="close_dialog"
|
|
class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
|
|
(click)="focusOnCancelButton()"
|
|
>
|
|
{{ 'SENTENCES.Close' | translate }}
|
|
<img class="icon" src="assets/icons/x_blue.svg" />
|
|
</button>
|
|
<h1 class="title is-1">
|
|
{{ 'popup.cancel.title' | translate }}
|
|
</h1>
|
|
<p class="description">
|
|
{{ 'popup.cancel.main' | translate }}
|
|
</p>
|
|
</ng-template>
|
|
<ng-template pTemplate="footer">
|
|
<div class="">
|
|
<div class="has-no-padding">
|
|
<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
|
|
{{ 'popup.cancel.reject' | translate }}
|
|
</button>
|
|
<button class="button cancel-button-confirm is-primary" (click)="goToHome()">
|
|
{{ 'popup.cancel.validate' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</p-dialog>
|
|
</dialog>
|
|
<!-- menu mobile-->
|
|
<div id="mobile_menu" *ngIf="display_mobile_menu">
|
|
<div class="menu-content">
|
|
<div class="padded">
|
|
<button
|
|
id="close_menu"
|
|
class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
|
|
(click)="display_mobile_menu = false"
|
|
>
|
|
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
|
|
</button>
|
|
|
|
<div class="mobile-menu-content min-height">
|
|
<h2 class="title is-2 has-text-primary">
|
|
{{ 'nav.menu' | translate }}
|
|
</h2>
|
|
<div class="marged-v">
|
|
<div class="langs">
|
|
<app-language-selector class="nav-button" [idSuffix]="'_mobile'"></app-language-selector>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button
|
|
class="marged-v button is-fullwidth is-secondary"
|
|
(click)="display_mobile_menu = false"
|
|
id="display_cancel_popup_button_mobile"
|
|
aria-haspopup="dialog"
|
|
>
|
|
{{ 'nav.leave' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|