Merge pull request #6069 from steindvart/scheduling-modal-buttons-redesing

Improve design of action buttons in the scheduling task modal
This commit is contained in:
Johannes Millan 2026-01-20 11:42:38 +01:00 committed by GitHub
commit 68a28fae0a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 83 additions and 38 deletions

View file

@ -88,43 +88,44 @@
</mat-select>
</mat-form-field>
}
<mat-dialog-actions align="start">
<div class="schedule-actions">
@if (data.task && (data.task.dueWithTime || plannedDayForTask)) {
<button
(click)="remove()"
color="warn"
mat-stroked-button
>
@if (selectedTime) {
<mat-icon>alarm_off</mat-icon>
} @else {
<mat-icon>event_busy</mat-icon>
}
{{ T.F.TASK.D_SCHEDULE_TASK.UNSCHEDULE | translate }}
</button>
}
<button
color="primary"
mat-stroked-button
(click)="submit()"
>
@if (selectedTime) {
<mat-icon>alarm</mat-icon>
} @else {
<mat-icon>today</mat-icon>
}
{{ T.F.TASK.D_SCHEDULE_TASK.SCHEDULE | translate }}
</button>
</div>
<button
class="dialog-cancel-btn"
mat-stroked-button
color="default"
(click)="close()"
>
{{ T.G.CANCEL | translate }}
</button>
</mat-dialog-actions>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button
color="primary"
mat-button
type="button"
(click)="close()"
>
{{ T.G.CANCEL | translate }}
</button>
@if (data.task && (data.task.dueWithTime || plannedDayForTask)) {
<button
(click)="remove()"
color="warn"
mat-stroked-button
>
@if (selectedTime) {
<mat-icon>alarm_off</mat-icon>
} @else {
<mat-icon>event_busy</mat-icon>
}
{{ T.F.TASK.D_SCHEDULE_TASK.UNSCHEDULE | translate }}
</button>
}
<button
color="primary"
mat-stroked-button
(click)="submit()"
>
@if (selectedTime) {
<mat-icon>alarm</mat-icon>
} @else {
<mat-icon>today</mat-icon>
}
{{ T.F.TASK.D_SCHEDULE_TASK.SCHEDULE | translate }}
</button>
</mat-dialog-actions>

View file

@ -111,3 +111,47 @@ mat-dialog-content {
border-left: 1px solid var(--extra-border-color);
}
}
:host ::ng-deep mat-dialog-actions {
padding: 0 0 16px 0 !important;
}
.schedule-actions {
display: flex;
justify-content: center;
align-items: stretch;
width: 100%;
margin: 0 auto;
padding-bottom: 8px;
}
.schedule-actions button {
flex: 1 1 0;
min-width: 0;
max-width: 100%;
height: auto;
min-height: 38px;
white-space: normal;
word-break: break-word;
text-align: center;
}
.mat-stroked-button {
height: auto;
}
.schedule-actions button:not(:last-child) {
margin-right: 2px;
}
.dialog-cancel-btn {
display: block;
width: 100%;
}
.schedule-actions button,
.dialog-cancel-btn {
white-space: normal;
word-break: break-word;
text-align: center;
}