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

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

Browse Source 
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
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
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>

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 */
.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;
}