cancel button in stepper

This commit is contained in:
Tykayn 2021-11-17 15:16:47 +01:00 committed by tykayn
parent 2c10dfb6d6
commit 5b1b173b7b
4 changed files with 27 additions and 2 deletions

View File

@ -2,6 +2,7 @@
.kind-of-poll {
margin-top: 5em;
min-height: 30vh;
.fa {
margin-right: 1em;
}

View File

@ -59,7 +59,16 @@
{{ pollService.form.value.title }}
</span>
</h2>
<h3 class="title is-2">Étape {{ step_current }} sur {{ step_max }}</h3>
<div class="columns">
<div class="column">
<h3 class="title is-2">Étape {{ step_current }} sur {{ step_max }}</h3>
</div>
<div class="column is-narrow has-text-right">
<a class="shortcut cancel-button" (click)="cancelDialog()">
<i class="fa fa-times"></i>
</a>
</div>
</div>
</div>
<div class="step-bar-container" style="width: 100%;">
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>

View File

@ -29,6 +29,16 @@
&.is-active {
background: $font_color;
}
&:hover {
background: $clicked-color;
}
&.cancel-button {
background: $border-color;
margin-top: -0.5em;
&:hover {
background: $font_color;
}
}
}
.poll-title {
color: $d-neutral;

View File

@ -2,6 +2,7 @@ import { Component, Input, OnInit } 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';
@Component({
selector: 'app-stepper',
@ -14,7 +15,11 @@ export class StepperComponent {
@Input()
public step_max: number = 5;
public show_shortcuts = environment.showStepperShortcuts;
constructor(public pollService: PollService, private confirmationService: ConfirmationService) {}
constructor(
public pollService: PollService,
private confirmationService: ConfirmationService,
private router: Router
) {}
cancelDialog() {
this.confirmationService.confirm({