EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4565 timeline: Action button will be shown on the next line

main
Pau Ferrer Ocaña 2024-04-15 13:50:09 +02:00
parent e87b05bd69
commit a471bf24cc
2 changed files with 43 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/addons/block/timeline/components/events/addon-block-timeline-events.html
View File

@ -16,14 +16,11 @@
<ion-item class="addon-block-timeline-activity" [detail]="false" (click)="action($event, event.url)" [attr.aria-label]="event.name" <ion-item class="addon-block-timeline-activity" [detail]="false" (click)="action($event, event.url)" [attr.aria-label]="event.name"
button lines="full"> button lines="full">
<ion-label> <ion-label>
<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding">
<ion-col class="addon-block-timeline-activity-main ion-no-padding">
<ion-row class="ion-justify-content-between ion-align-items-center ion-nowrap ion-no-padding"> <ion-row class="ion-justify-content-between ion-align-items-center ion-nowrap ion-no-padding">
<ion-col class="addon-block-timeline-activity-time ion-no-padding ion-text-nowrap"> <ion-col class="addon-block-timeline-activity-time ion-no-padding ion-text-nowrap">
<small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small> <small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small>
<core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance" <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
[modname]="event.modulename" [purpose]="event.purpose" [colorize]="colorizeIcons" [modname]="event.modulename" [purpose]="event.purpose" [colorize]="colorizeIcons" [isBranded]="event.branded" />
[isBranded]="event.branded" />
</ion-col> </ion-col>
<ion-col class="addon-block-timeline-activity-name ion-no-padding"> <ion-col class="addon-block-timeline-activity-name ion-no-padding">
<p class="item-heading"> <p class="item-heading">
@ -48,16 +45,14 @@
</p> </p>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-col> <div class="addon-block-timeline-activity-action" *ngIf="event.action && event.action.actionable">
<ion-col class="addon-block-timeline-activity-action ion-no-padding" *ngIf="event.action && event.action.actionable">
<ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name" class="chip"> <ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name" class="chip">
{{event.action.name}} {{event.action.name}}
<ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount"> <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
{{event.action.itemcount}} {{event.action.itemcount}}
</ion-badge> </ion-badge>
</ion-button> </ion-button>
</ion-col> </div>
</ion-row>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ng-container> </ng-container>

24
src/addons/block/timeline/components/events/events.scss
View File

@ -27,26 +27,22 @@ h4.core-bold {
--margin-end: 0.5rem; --margin-end: 0.5rem;
--margin-vertical: 0; --margin-vertical: 0;
} }
ion-label {
display: flex;
flex-direction: column;
.addon-block-timeline-activity-action {
display: flex;
justify-content: flex-end;
}
}
} }
.addon-block-timeline-activity-time { .addon-block-timeline-activity-time {
flex-grow: 0; flex-grow: 0;
} }
.addon-block-timeline-activity-action {
display: flex;
justify-content: flex-end;
}
.addon-block-timeline-activity-main,
.addon-block-timeline-activity-name {
flex-grow: 1;
p {
overflow: hidden;
text-overflow: ellipsis;
}
}
.addon-block-timeline-activity-name { .addon-block-timeline-activity-name {
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;