From 8d101d35ace483149cb5636b16ff8c03787830f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 11 May 2023 13:21:01 +0200
Subject: [PATCH] MOBILE-4270 popover: Add ion-content to popovers to enable
 scrolling

---
 .../components/actionsmenu/actionsmenu.html   | 21 +++--
 .../discussion-options-menu.html              | 80 +++++++++---------
 .../post-options-menu/post-options-menu.html  | 47 ++++++-----
 .../addon-mod-glossary-mode-picker.html       | 14 ++--
 .../addon-mod-wiki-subwiki-picker.html        | 40 ++++-----
 .../core-context-menu-popover.html            | 63 +++++++-------
 .../core-courses-course-options-menu.html     | 82 ++++++++++---------
 7 files changed, 184 insertions(+), 163 deletions(-)

diff --git a/src/addons/mod/data/components/actionsmenu/actionsmenu.html b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
index 177470dcd..242b68f1c 100644
--- a/src/addons/mod/data/components/actionsmenu/actionsmenu.html
+++ b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
@@ -1,9 +1,12 @@
-<ion-list>
-    <ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" detail="false"
-        [attr.aria-label]="item.text | translate">
-        <ion-label>
-            <p class="item-heading">{{ item.text | translate }}</p>
-        </ion-label>
-        <ion-icon [name]="item.icon" slot="end" aria-hidden="true"></ion-icon>
-    </ion-item>
-</ion-list>
+<ion-content>
+    <ion-list>
+        <ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" detail="false"
+            [attr.aria-label]="item.text | translate">
+            <ion-label>
+                <p class="item-heading">{{ item.text | translate }}</p>
+            </ion-label>
+            <ion-icon [name]="item.icon" slot="end" aria-hidden="true"></ion-icon>
+        </ion-item>
+    </ion-list>
+
+</ion-content>
diff --git a/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html b/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
index b609ed6f5..4736dcd70 100644
--- a/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
+++ b/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
@@ -1,38 +1,42 @@
-<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-label>
-        <p class="item-heading">{{ 'addon.mod_forum.lockdiscussion' | translate }}</p>
-    </ion-label>
-</ion-item>
-<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-label>
-        <p class="item-heading">{{ 'addon.mod_forum.unlockdiscussion' | translate }}</p>
-    </ion-label>
-</ion-item>
-<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-label>
-        <p class="item-heading">{{ 'addon.mod_forum.pindiscussion' | translate }}</p>
-    </ion-label>
-</ion-item>
-<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-label>
-        <p class="item-heading">{{ 'addon.mod_forum.unpindiscussion' | translate }}</p>
-    </ion-label>
-</ion-item>
-<ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(true)" *ngIf="discussion.canfavourite && !discussion.starred"
-    detail="false">
-    <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
-    <ion-label>
-        <p class="item-heading">{{ 'addon.mod_forum.addtofavourites' | translate }}</p>
-    </ion-label>
-</ion-item>
-<ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(false)" *ngIf="discussion.canfavourite && discussion.starred"
-    detail="false">
-    <ion-icon name="fas-star" slot="start" class="icon-slash" aria-hidden="true"></ion-icon>
-    <ion-label>
-        <p class="item-heading">{{ 'addon.mod_forum.removefromfavourites' | translate }}</p>
-    </ion-label>
-</ion-item>
+<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-label>
+                <p class="item-heading">{{ 'addon.mod_forum.lockdiscussion' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <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-label>
+                <p class="item-heading">{{ 'addon.mod_forum.unlockdiscussion' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <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-label>
+                <p class="item-heading">{{ 'addon.mod_forum.pindiscussion' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <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-label>
+                <p class="item-heading">{{ 'addon.mod_forum.unpindiscussion' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(true)" *ngIf="discussion.canfavourite && !discussion.starred"
+            detail="false">
+            <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p class="item-heading">{{ 'addon.mod_forum.addtofavourites' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(false)" *ngIf="discussion.canfavourite && discussion.starred"
+            detail="false">
+            <ion-icon name="fas-star" slot="start" class="icon-slash" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p class="item-heading">{{ 'addon.mod_forum.removefromfavourites' | translate }}</p>
+            </ion-label>
+        </ion-item>
+    </ion-list>
+</ion-content>
diff --git a/src/addons/mod/forum/components/post-options-menu/post-options-menu.html b/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
index ffef01cb8..c4362e55f 100644
--- a/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
+++ b/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
@@ -1,21 +1,26 @@
-<core-loading [hideUntil]="loaded" [fullscreen]="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-label>
-            <p class="item-heading">{{ 'addon.mod_forum.edit' | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="deletePost()" *ngIf="offlinePost || canDelete" detail="false">
-        <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <p class="item-heading" *ngIf="!offlinePost">{{ 'addon.mod_forum.delete' | translate }}</p>
-            <p class="item-heading" *ngIf="offlinePost">{{ 'core.discard' | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <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-label>
-            <p class="item-heading">{{ 'core.openinbrowser' | translate }}</p>
-        </ion-label>
-    </ion-item>
-</core-loading>
+<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-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading">{{ 'addon.mod_forum.edit' | translate }}</p>
+                </ion-label>
+            </ion-item>
+            <ion-item button class="ion-text-wrap" (click)="deletePost()" *ngIf="offlinePost || canDelete" detail="false">
+                <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading" *ngIf="!offlinePost">{{ 'addon.mod_forum.delete' | translate }}</p>
+                    <p class="item-heading" *ngIf="offlinePost">{{ 'core.discard' | translate }}</p>
+                </ion-label>
+            </ion-item>
+            <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-label>
+                    <p class="item-heading">{{ 'core.openinbrowser' | translate }}</p>
+                </ion-label>
+            </ion-item>
+        </ion-list>
+    </core-loading>
+</ion-content>
diff --git a/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html b/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
index 747140252..881d44938 100644
--- a/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
+++ b/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
@@ -1,6 +1,8 @@
-<ion-radio-group [(ngModel)]="selectedMode" (ionChange)="modePicked()">
-    <ion-item class="ion-text-wrap" *ngFor="let mode of modes">
-        <ion-label>{{ mode.langkey | translate }}</ion-label>
-        <ion-radio slot="end" [value]="mode.key"></ion-radio>
-    </ion-item>
-</ion-radio-group>
+<ion-content>
+    <ion-radio-group [(ngModel)]="selectedMode" (ionChange)="modePicked()">
+        <ion-item class="ion-text-wrap" *ngFor="let mode of modes">
+            <ion-label>{{ mode.langkey | translate }}</ion-label>
+            <ion-radio slot="end" [value]="mode.key"></ion-radio>
+        </ion-item>
+    </ion-radio-group>
+</ion-content>
diff --git a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
index 7d7f5f0d0..4844903d8 100644
--- a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
+++ b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
@@ -1,19 +1,21 @@
-<ion-list>
-    <ng-container *ngFor="let group of subwikis">
-        <ion-item-divider *ngIf="group.label">
-            <ion-label>
-                <core-format-text [text]="group.label" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true"
-                    class="item-heading">
-                </core-format-text>
-            </ion-label>
-        </ion-item-divider>
-        <ion-item class="ion-text-wrap" *ngFor="let subwiki of group.subwikis" (click)="openSubwiki(subwiki)" button
-            [attr.aria-current]="isSubwikiSelected(subwiki) ? 'page' : 'false'" detail="false">
-            <ion-label>
-                <core-format-text [text]="subwiki.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true">
-                </core-format-text>
-            </ion-label>
-            <ion-icon *ngIf="isSubwikiSelected(subwiki)" name="fas-check" slot="end" aria-hidden="true"></ion-icon>
-        </ion-item>
-    </ng-container>
-</ion-list>
+<ion-content>
+    <ion-list>
+        <ng-container *ngFor="let group of subwikis">
+            <ion-item-divider *ngIf="group.label">
+                <ion-label>
+                    <core-format-text [text]="group.label" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true"
+                        class="item-heading">
+                    </core-format-text>
+                </ion-label>
+            </ion-item-divider>
+            <ion-item class="ion-text-wrap" *ngFor="let subwiki of group.subwikis" (click)="openSubwiki(subwiki)" button
+                [attr.aria-current]="isSubwikiSelected(subwiki) ? 'page' : 'false'" detail="false">
+                <ion-label>
+                    <core-format-text [text]="subwiki.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true">
+                    </core-format-text>
+                </ion-label>
+                <ion-icon *ngIf="isSubwikiSelected(subwiki)" name="fas-check" slot="end" aria-hidden="true"></ion-icon>
+            </ion-item>
+        </ng-container>
+    </ion-list>
+</ion-content>
diff --git a/src/core/components/context-menu/core-context-menu-popover.html b/src/core/components/context-menu/core-context-menu-popover.html
index c6cb35d5d..7ba6c7cd4 100644
--- a/src/core/components/context-menu/core-context-menu-popover.html
+++ b/src/core/components/context-menu/core-context-menu-popover.html
@@ -1,30 +1,33 @@
-<ion-list [id]="uniqueId" role="menu">
-    <ion-list-header *ngIf="title">
-        <ion-label>{{title}}</ion-label>
-    </ion-list-header>
-    <ion-item class="ion-text-wrap" *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin"
-        [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden"
-        [detail]="(item.href && !item.iconAction) || null" role="menuitem" [button]="(item.href && !item.iconAction)"
-        [showBrowserWarning]="item.showBrowserWarning">
-        <ion-label>
-            <p class="item-heading">
-                <core-format-text [clean]="true" [text]="item.content" [filter]="false"></core-format-text>
-            </p>
-        </ion-label>
-        <ng-container *ngIf="(item.href || item.action) && item.iconAction">
-            <ion-icon *ngIf="item.iconAction != 'spinner' && item.iconAction != 'toggle'" [name]="item.iconAction"
-                [class.icon-slash]="item.iconSlash" slot="end" aria-hidden="true">
-            </ion-icon>
-            <ion-spinner *ngIf="item.iconAction == 'spinner'" slot="end" [attr.aria-label]="'core.loading' | translate">
-            </ion-spinner>
-            <ion-toggle *ngIf="item.iconAction == 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)" slot="end">
-            </ion-toggle>
-        </ng-container>
-        <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">
-            <span [attr.ara-hidden]="!!item.badgeA11yText">{{item.badge}}</span>
-            <span class="sr-only" *ngIf="item.badgeA11yText">
-                {{ item.badgeA11yText | translate: {$a : item.badge } }}
-            </span>
-        </ion-badge>
-    </ion-item>
-</ion-list>
+<ion-content>
+    <ion-list [id]="uniqueId" role="menu">
+        <ion-list-header *ngIf="title">
+            <ion-label>{{title}}</ion-label>
+        </ion-list-header>
+        <ion-item class="ion-text-wrap" *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin"
+            [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden"
+            [detail]="(item.href && !item.iconAction) || null" role="menuitem" [button]="(item.href && !item.iconAction)"
+            [showBrowserWarning]="item.showBrowserWarning">
+            <ion-label>
+                <p class="item-heading">
+                    <core-format-text [clean]="true" [text]="item.content" [filter]="false"></core-format-text>
+                </p>
+            </ion-label>
+            <ng-container *ngIf="(item.href || item.action) && item.iconAction">
+                <ion-icon *ngIf="item.iconAction != 'spinner' && item.iconAction != 'toggle'" [name]="item.iconAction"
+                    [class.icon-slash]="item.iconSlash" slot="end" aria-hidden="true">
+                </ion-icon>
+                <ion-spinner *ngIf="item.iconAction == 'spinner'" slot="end" [attr.aria-label]="'core.loading' | translate">
+                </ion-spinner>
+                <ion-toggle *ngIf="item.iconAction == 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)"
+                    slot="end">
+                </ion-toggle>
+            </ng-container>
+            <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">
+                <span [attr.ara-hidden]="!!item.badgeA11yText">{{item.badge}}</span>
+                <span class="sr-only" *ngIf="item.badgeA11yText">
+                    {{ item.badgeA11yText | translate: {$a : item.badge } }}
+                </span>
+            </ion-badge>
+        </ion-item>
+    </ion-list>
+</ion-content>
diff --git a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
index bcd038c96..17633d581 100644
--- a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
+++ b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
@@ -1,40 +1,42 @@
-<ion-list>
-    <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-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
-        <ion-label>
-            <p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
-        *ngIf="prefetch.status == 'downloaded' || prefetch.status == 'outdated'">
-        <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" detail="false">
-        <ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" detail="false">
-        <ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <p class="item-heading">{{ 'core.courses.show' | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" detail="false">
-        <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" detail="false">
-        <ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>
-        </ion-label>
-    </ion-item>
-</ion-list>
+<ion-content>
+    <ion-list>
+        <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-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+            <ion-label>
+                <p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
+            *ngIf="prefetch.status == 'downloaded' || prefetch.status == 'outdated'">
+            <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" detail="false">
+            <ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" detail="false">
+            <ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p class="item-heading">{{ 'core.courses.show' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" detail="false">
+            <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" detail="false">
+            <ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>
+            </ion-label>
+        </ion-item>
+    </ion-list>
+</ion-content>