openlp/web-remote
1
0
Fork 0
mirror of https://gitlab.com/openlp/web-remote.git synced 2024-12-22 03:22:48 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Chris Witterholt 2024-09-19 10:02:34 +00:00
parent c768d02904
commit a396df09ff
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/components/service/service-item/service-item.component.html
View File

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

14
src/app/components/service/service-item/service-item.component.scss
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;
} }