mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-01-23 02:36:05 +00:00
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:
commit
68a28fae0a
2 changed files with 83 additions and 38 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue