funky-framadate-front/src/app/features/administration/stepper/stepper.component.html

<section class="creation-stepper" id="creation_stepper">
	<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">
		<div class="columns half-columns">
			<div class="column">
				<a
					class="logo-home-link navbar-item pull-left is-hidden-mobile"
					[routerLink]="['/']"
					routerLinkActive="active"
				>
					<img
						class="stepper-app-logo logo"
						*ngIf="environment.appLogo"
						src="{{ environment.appLogo }}"
						alt="accueil {{ environment.appTitle }}"
					/>
				</a>
				<h1>
					<span class="step-title-poll" *ngIf="pollService.step_current == 1">
						{{ 'creation.title' | translate }}
					</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">
							(Aucun titre)
						</span>
					</span>
					<span class="step-counter-text" *ngIf="pollService.step_current !== 1"
						>Étape {{ step_current }} sur {{ step_max }}
					</span>
				</h1>
			</div>
			<div class="column has-text-right">
				<app-language-selector class="nav-button"></app-language-selector>
				<button class="has-no-border nav-button cancel-button" (click)="showCancelDialog()">
					{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
				</button>
			</div>
		</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-->
	<p-dialog
		header="{{ 'nav.leave' | translate }}?"
		[modal]="true"
		[(visible)]="display_cancel_dialog"
		[breakpoints]="{ '960px': '75vw' }"
		[style]="{ width: '50vw' }"
		[draggable]="false"
		[resizable]="false"
	>
		<p>Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.</p>
		<ng-template pTemplate="footer">
			<div class="columns">
				<div class="column is-half-mobile">
					<button class="button is-warning is-fullwidth cancel-button-confirm" (click)="goToHome()">
						Quitter
					</button>
				</div>
				<div class="column is-half-mobile">
					<button
						class="button is-primary is-fullwidth cancel-button-reject"
						(click)="display_cancel_dialog = false"
					>
						Rester
					</button>
				</div>
			</div>
		</ng-template>
	</p-dialog>
</section>