placing button to delete, add aria infos in step 3

This commit is contained in:
Tykayn 2022-03-01 11:22:11 +01:00 committed by tykayn
parent 80473be29e
commit 6f49099cdf
7 changed files with 31 additions and 10 deletions

View File

@ -50,7 +50,7 @@ export class PollService implements Resolve<Poll> {
public showDateInterval = false; public showDateInterval = false;
public allowSeveralHours = false; public allowSeveralHours = false;
public richTextMode = false; public richTextMode = false;
public mode_calendar = true; // default input to select dates in creation step public mode_calendar = false; // default input to select dates in creation step
public calendar: Date[] = [new Date()]; public calendar: Date[] = [new Date()];
public disabled_dates: Date[] = []; public disabled_dates: Date[] = [];

View File

@ -3,7 +3,7 @@
<div class="date-choice-container" *ngFor="let choice of dateChoices; index as id"> <div class="date-choice-container" *ngFor="let choice of dateChoices; index as id">
<div class="date-choice" [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }"> <div class="date-choice" [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }">
<div class="top"> <div class="top">
<label class="pull-left" for="dateChoices_{{ id }}"> <label class="pull-left" for="dateChoices_{{ id }}" [attr.aria-describedby]="'format-date-' + id">
{{ 'dates.element' | translate }} {{ id + 1 }} {{ 'dates.element' | translate }} {{ id + 1 }}
</label> </label>
<p class="format-helper pull-right" id="format-date-{{ id }}"> <p class="format-helper pull-right" id="format-date-{{ id }}">
@ -25,9 +25,14 @@
</div> </div>
</div> </div>
<hr /> <hr />
<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)"> <div class="delete-date">
<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" /> <button
{{ 'dates.remove' | translate }} class="has-no-outline has-no-background has-text-primary has-text-left"
(click)="dateChoices.splice(id, 1)"
>
<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
{{ 'dates.remove' | translate }} {{ id + 1 }}
</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -58,6 +58,7 @@
&:nth-of-type(odd) { &:nth-of-type(odd) {
background: #9880d5; background: #9880d5;
&.day-weekend { &.day-weekend {
background: #8e72d4; background: #8e72d4;
} }
@ -82,15 +83,25 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
background: transparent; background: transparent;
text-align: left;
margin-right: 0; margin-right: 0;
button {
text-align: left !important;
width: 100%;
display: block;
padding-left: 1rem;
&:hover {
color: $white !important;
}
}
.fa, .fa,
.icon { .icon {
float: left; float: left;
color: $primary_color; color: $primary_color;
margin: 0; margin: 0;
margin-right: 1rem; margin-right: 8px;
height: 1.25rem; height: 1.25rem;
// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp // filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%); filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
@ -114,6 +125,7 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
} }
.add_date { .add_date {
margin-top: 2rem; margin-top: 2rem;
} }

View File

@ -39,7 +39,7 @@
<div class="text-date-list" *ngIf="!pollService.mode_calendar"> <div class="text-date-list" *ngIf="!pollService.mode_calendar">
<app-day-list <app-day-list
[form]="pollService.form" [form]="pollService.form"
[hasSeveralHours]="environment.creation_display_hour_per_day && pollService.form.value.hasSeveralHours" [hasSeveralHours]="environment.creation_display_hour_per_day"
></app-day-list> ></app-day-list>
</div> </div>
</div> </div>

View File

@ -28,7 +28,7 @@ export const environment = {
autofill_participation: false, autofill_participation: false,
autoSendNewPoll: false, autoSendNewPoll: false,
creation_display_admin_url: false, creation_display_admin_url: false,
creation_display_hour_per_day: true, // display or not the ability to choose time slices different per day creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
creation_display_proposals_time_slices: false, creation_display_proposals_time_slices: false,
creation_email_is_required: true, creation_email_is_required: true,
display_header_create_button: false, display_header_create_button: false,

View File

@ -29,7 +29,7 @@ export const environment = {
autofill_participation: false, autofill_participation: false,
autoSendNewPoll: false, autoSendNewPoll: false,
creation_display_admin_url: false, creation_display_admin_url: false,
creation_display_hour_per_day: true, // display or not the ability to choose time slices different per day creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
creation_display_proposals_time_slices: false, creation_display_proposals_time_slices: false,
creation_email_is_required: true, creation_email_is_required: true,
display_header_create_button: false, display_header_create_button: false,

View File

@ -81,6 +81,10 @@
} }
} }
.has-no-background {
background: none;
}
.has-no-outline,
.has-no-border { .has-no-border {
border: none; border: none;
} }