Merge branch 'move-delete-service-item-button-to-card-action-section' into 'master'

Prevent that the delete service item button is blocking the service item title.

See merge request openlp/web-remote!130
This commit is contained in:
Chris Witterholt 2024-09-19 10:02:34 +00:00
commit ce3ca6b7ae
2 changed files with 26 additions and 12 deletions

View File

@ -1,10 +1,13 @@
<mat-card <mat-card
class="service-item no-select" class="service-item no-select"
[class.selected]="selected"> [class.selected]="selected">
<mat-card-content (click)="onItemSelected(item)"> <mat-card-content
<mat-icon class="service-item-icon">{{ getIcon(item) }}</mat-icon> {{ item.title }} class="card-content"
(click)="onItemSelected(item)">
<mat-icon class="service-item-icon">{{ getIcon(item) }}</mat-icon>&nbsp;{{ item.title }}
</mat-card-content> </mat-card-content>
@if (useDeleteServiceItemFromOpenlp) { @if (useDeleteServiceItemFromOpenlp) {
<mat-card-actions>
<button <button
mat-icon-button mat-icon-button
class="delete-service-item-button no-select" class="delete-service-item-button no-select"
@ -13,5 +16,6 @@
(click)="deleteFromService(item)"> (click)="deleteFromService(item)">
<mat-icon>delete_outline</mat-icon> <mat-icon>delete_outline</mat-icon>
</button> </button>
</mat-card-actions>
} }
</mat-card> </mat-card>

View File

@ -1,10 +1,20 @@
.service-item {
display: flex;
flex-direction: row;
}
/* Align icons with text */ /* Align icons with text */
.service-item-icon { .service-item-icon {
line-height: inherit; line-height: inherit;
} }
.card-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.delete-service-item-button { .delete-service-item-button {
position: absolute; position: absolute;
top: 5px; right: 5px;
right: 20px;
} }