MOBILE-4270 popover: Add ion-content to popovers to enable scrolling

main
Pau Ferrer Ocaña 2023-05-11 13:21:01 +02:00
parent 2bfc9c73cc
commit 8d101d35ac
7 changed files with 184 additions and 163 deletions

View File

@ -1,4 +1,5 @@
<ion-list> <ion-content>
<ion-list>
<ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" detail="false" <ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" detail="false"
[attr.aria-label]="item.text | translate"> [attr.aria-label]="item.text | translate">
<ion-label> <ion-label>
@ -6,4 +7,6 @@
</ion-label> </ion-label>
<ion-icon [name]="item.icon" slot="end" aria-hidden="true"></ion-icon> <ion-icon [name]="item.icon" slot="end" aria-hidden="true"></ion-icon>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content>

View File

@ -1,38 +1,42 @@
<ion-item button class="ion-text-wrap" (click)="setLockState(true)" *ngIf="discussion.canlock && !discussion.locked" detail="false"> <ion-content>
<ion-list>
<ion-item button class="ion-text-wrap" (click)="setLockState(true)" *ngIf="discussion.canlock && !discussion.locked" detail="false">
<ion-icon name="fas-lock" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-lock" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'addon.mod_forum.lockdiscussion' | translate }}</p> <p class="item-heading">{{ 'addon.mod_forum.lockdiscussion' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap" (click)="setLockState(false)" *ngIf="discussion.canlock && discussion.locked" detail="false"> <ion-item button class="ion-text-wrap" (click)="setLockState(false)" *ngIf="discussion.canlock && discussion.locked" detail="false">
<ion-icon name="fas-unlock" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-unlock" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'addon.mod_forum.unlockdiscussion' | translate }}</p> <p class="item-heading">{{ 'addon.mod_forum.unlockdiscussion' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap" (click)="setPinState(true)" *ngIf="canPin && !discussion.pinned" detail="false"> <ion-item button class="ion-text-wrap" (click)="setPinState(true)" *ngIf="canPin && !discussion.pinned" detail="false">
<ion-icon name="fas-map-pin" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-map-pin" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'addon.mod_forum.pindiscussion' | translate }}</p> <p class="item-heading">{{ 'addon.mod_forum.pindiscussion' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap" (click)="setPinState(false)" *ngIf="canPin && discussion.pinned" detail="false"> <ion-item button class="ion-text-wrap" (click)="setPinState(false)" *ngIf="canPin && discussion.pinned" detail="false">
<ion-icon name="fas-map-pin" slot="start" class="icon-slash" aria-hidden="true"></ion-icon> <ion-icon name="fas-map-pin" slot="start" class="icon-slash" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'addon.mod_forum.unpindiscussion' | translate }}</p> <p class="item-heading">{{ 'addon.mod_forum.unpindiscussion' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(true)" *ngIf="discussion.canfavourite && !discussion.starred" <ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(true)" *ngIf="discussion.canfavourite && !discussion.starred"
detail="false"> detail="false">
<ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'addon.mod_forum.addtofavourites' | translate }}</p> <p class="item-heading">{{ 'addon.mod_forum.addtofavourites' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(false)" *ngIf="discussion.canfavourite && discussion.starred" <ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(false)" *ngIf="discussion.canfavourite && discussion.starred"
detail="false"> detail="false">
<ion-icon name="fas-star" slot="start" class="icon-slash" aria-hidden="true"></ion-icon> <ion-icon name="fas-star" slot="start" class="icon-slash" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'addon.mod_forum.removefromfavourites' | translate }}</p> <p class="item-heading">{{ 'addon.mod_forum.removefromfavourites' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list>
</ion-content>

View File

@ -1,4 +1,6 @@
<core-loading [hideUntil]="loaded" [fullscreen]="false"> <ion-content>
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-list>
<ion-item button class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || canEdit" detail="false"> <ion-item button class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || canEdit" detail="false">
<ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
@ -12,10 +14,13 @@
<p class="item-heading" *ngIf="offlinePost">{{ 'core.discard' | translate }}</p> <p class="item-heading" *ngIf="offlinePost">{{ 'core.discard' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item class="ion-text-wrap" [href]="url" *ngIf="url" core-link capture="false" button detail="false" [showBrowserWarning]="false"> <ion-item class="ion-text-wrap" [href]="url" *ngIf="url" core-link capture="false" button detail="false"
[showBrowserWarning]="false">
<ion-icon name="fas-up-right-from-square" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-up-right-from-square" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.openinbrowser' | translate }}</p> <p class="item-heading">{{ 'core.openinbrowser' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
</core-loading> </ion-list>
</core-loading>
</ion-content>

View File

@ -1,6 +1,8 @@
<ion-radio-group [(ngModel)]="selectedMode" (ionChange)="modePicked()"> <ion-content>
<ion-radio-group [(ngModel)]="selectedMode" (ionChange)="modePicked()">
<ion-item class="ion-text-wrap" *ngFor="let mode of modes"> <ion-item class="ion-text-wrap" *ngFor="let mode of modes">
<ion-label>{{ mode.langkey | translate }}</ion-label> <ion-label>{{ mode.langkey | translate }}</ion-label>
<ion-radio slot="end" [value]="mode.key"></ion-radio> <ion-radio slot="end" [value]="mode.key"></ion-radio>
</ion-item> </ion-item>
</ion-radio-group> </ion-radio-group>
</ion-content>

View File

@ -1,4 +1,5 @@
<ion-list> <ion-content>
<ion-list>
<ng-container *ngFor="let group of subwikis"> <ng-container *ngFor="let group of subwikis">
<ion-item-divider *ngIf="group.label"> <ion-item-divider *ngIf="group.label">
<ion-label> <ion-label>
@ -16,4 +17,5 @@
<ion-icon *ngIf="isSubwikiSelected(subwiki)" name="fas-check" slot="end" aria-hidden="true"></ion-icon> <ion-icon *ngIf="isSubwikiSelected(subwiki)" name="fas-check" slot="end" aria-hidden="true"></ion-icon>
</ion-item> </ion-item>
</ng-container> </ng-container>
</ion-list> </ion-list>
</ion-content>

View File

@ -1,4 +1,5 @@
<ion-list [id]="uniqueId" role="menu"> <ion-content>
<ion-list [id]="uniqueId" role="menu">
<ion-list-header *ngIf="title"> <ion-list-header *ngIf="title">
<ion-label>{{title}}</ion-label> <ion-label>{{title}}</ion-label>
</ion-list-header> </ion-list-header>
@ -17,7 +18,8 @@
</ion-icon> </ion-icon>
<ion-spinner *ngIf="item.iconAction == 'spinner'" slot="end" [attr.aria-label]="'core.loading' | translate"> <ion-spinner *ngIf="item.iconAction == 'spinner'" slot="end" [attr.aria-label]="'core.loading' | translate">
</ion-spinner> </ion-spinner>
<ion-toggle *ngIf="item.iconAction == 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)" slot="end"> <ion-toggle *ngIf="item.iconAction == 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)"
slot="end">
</ion-toggle> </ion-toggle>
</ng-container> </ng-container>
<ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge"> <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">
@ -27,4 +29,5 @@
</span> </span>
</ion-badge> </ion-badge>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content>

View File

@ -1,4 +1,5 @@
<ion-list> <ion-content>
<ion-list>
<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false"> <ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false">
<ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon> <ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
<ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner> <ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
@ -37,4 +38,5 @@
<p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p> <p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content>