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,17 +1,21 @@
<mat-card
class="service-item no-select"
[class.selected]="selected">
<mat-card-content (click)="onItemSelected(item)">
<mat-icon class="service-item-icon">{{ getIcon(item) }}</mat-icon> {{ item.title }}
<mat-card-content
class="card-content"
(click)="onItemSelected(item)">
<mat-icon class="service-item-icon">{{ getIcon(item) }}</mat-icon>&nbsp;{{ item.title }}
</mat-card-content>
@if (useDeleteServiceItemFromOpenlp) {
<button
mat-icon-button
class="delete-service-item-button no-select"
[class.selected]="selected"
matTooltip="{{ 'DELETE_FROM_SERVICE' | translate | titlecase }}"
(click)="deleteFromService(item)">
<mat-icon>delete_outline</mat-icon>
</button>
<mat-card-actions>
<button
mat-icon-button
class="delete-service-item-button no-select"
[class.selected]="selected"
matTooltip="{{ 'DELETE_FROM_SERVICE' | translate | titlecase }}"
(click)="deleteFromService(item)">
<mat-icon>delete_outline</mat-icon>
</button>
</mat-card-actions>
}
</mat-card>

View File

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