Merge pull request #4045 from crazyserver/MOBILE-4470

Mobile 4470

package-lock.json

@@ -38,7 +38,7 @@
         "@awesome-cordova-plugins/sqlite": "^6.6.0",
         "@awesome-cordova-plugins/status-bar": "^6.6.0",
         "@awesome-cordova-plugins/web-intent": "^6.6.0",
-        "@ionic/angular": "^7.7.4",
+        "@ionic/angular": "^7.8.6",
         "@ionic/cordova-builders": "^11.0.0",
         "@moodlehq/cordova-plugin-advanced-http": "3.3.1-moodle.1",
         "@moodlehq/cordova-plugin-camera": "7.0.0-moodle.1",

package.json

@@ -72,7 +72,7 @@
     "@awesome-cordova-plugins/sqlite": "^6.6.0",
     "@awesome-cordova-plugins/status-bar": "^6.6.0",
     "@awesome-cordova-plugins/web-intent": "^6.6.0",
-    "@ionic/angular": "^7.7.4",
+    "@ionic/angular": "^7.8.6",
     "@ionic/cordova-builders": "^11.0.0",
     "@moodlehq/cordova-plugin-advanced-http": "3.3.1-moodle.1",
     "@moodlehq/cordova-plugin-camera": "7.0.0-moodle.1",

src/addons/blog/pages/edit-entry/edit-entry.html

@@ -52,7 +52,7 @@
             </ion-item>
             <div id="addon-blog-associations">
                 @if (associationsExpanded) {
-                <ion-item lines="none">
+                <ion-item>
                     @if (associatedModule) {
                     <ion-toggle formControlName="associateWithModule">
                         <core-format-text [text]="'addon.blog.associatewithmodule' | translate: {

src/addons/blog/pages/index/index.html

@@ -20,7 +20,7 @@
 
     <core-loading [hideUntil]="loaded">
         @if (showMyEntriesToggle) {
-        <ion-item lines="none" class="ion-text-wrap">
+        <ion-item class="ion-text-wrap">
             <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">
                 {{ 'addon.blog.showonlyyourentries' | translate }}
             </ion-toggle>

src/addons/calendar/components/filter/filter.html

@@ -9,7 +9,7 @@
 </ion-header>
 <ion-content [fullscreen]="true">
     <ion-list>
-        <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]" lines="none">
+        <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
             <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true" />
             <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()">
                 {{ 'addon.calendar.' + type + 'events' | translate}}

src/addons/messages/pages/settings/settings.html

@@ -21,7 +21,7 @@
                         <h2>{{ 'core.settings.general' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
-                <ion-item class="ion-text-wrap" lines="none">
+                <ion-item class="ion-text-wrap">
                     <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()">
                         {{ 'addon.messages.useentertosend' | translate }}
                     </ion-toggle>
@@ -31,7 +31,7 @@
 
         <!-- Contactable privacy. -->
         <ion-card>
-            <ion-item *ngIf="!advancedContactable" class="ion-text-wrap" lines="none">
+            <ion-item *ngIf="!advancedContactable" class="ion-text-wrap">
                 <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)">
                     {{ 'addon.messages.blocknoncontacts' | translate }}
                 </ion-toggle>

src/addons/mod/assign/components/submission/addon-mod-assign-submission.html

@@ -345,7 +345,7 @@
                     </ion-item>
 
                     <!--- Apply grade to all team members. -->
-                    <ion-item class="ion-text-wrap" *ngIf="assign!.teamsubmission && canSaveGrades" lines="none">
+                    <ion-item class="ion-text-wrap" *ngIf="assign!.teamsubmission && canSaveGrades">
                         <ion-toggle [(ngModel)]="grade.applyToAll">
                             <p class="item-heading">{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</p>
                             <p>{{ 'addon.mod_assign.applytoteam' | translate }}</p>
@@ -371,7 +371,7 @@
                                 </p>
                             </ion-label>
                         </ion-item>
-                        <ion-item *ngIf="canSaveGrades && allowAddAttempt" lines="none">
+                        <ion-item *ngIf="canSaveGrades && allowAddAttempt">
                             <ion-toggle [(ngModel)]="grade.addAttempt">
                                 <p>{{ 'addon.mod_assign.addattempt' | translate }}</p>
                             </ion-toggle>

src/addons/mod/chat/pages/sessions/sessions.html

@@ -16,7 +16,7 @@
         <core-loading [hideUntil]="sessions.loaded">
             <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="reloadSessions()" [courseId]="courseId" />
 
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-toggle [(ngModel)]="showAll" (ionChange)="reloadSessions()">
                     {{ 'addon.mod_chat.showincompletesessions' | translate }}
                 </ion-toggle>

src/addons/mod/feedback/pages/form/form.html

@@ -69,7 +69,7 @@
 
                         <ion-radio-group *ngIf="item.templateName === 'multichoice-r'" [(ngModel)]="item.value" [required]="item.required"
                             name="{{item.typ}}_{{item.id}}">
-                            <ion-item *ngFor="let option of item.choices" class="ion-text-wrap" lines="none">
+                            <ion-item *ngFor="let option of item.choices" class="ion-text-wrap">
                                 <ion-radio [value]="option.value">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                         contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
@@ -80,7 +80,7 @@
                         <ng-container *ngIf="item.templateName === 'multichoice-c'">
                             <ion-item *ngFor="let option of item.choices">
                                 <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
-                                    value="option.value" lines="none">
+                                    value="option.value">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                         contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                 </ion-checkbox>

src/addons/mod/forum/components/components.module.ts

@@ -24,7 +24,6 @@ import { AddonModForumDiscussionOptionsMenuComponent } from './discussion-option
 import { AddonModForumIndexComponent } from './index/index';
 import { AddonModForumPostComponent } from './post/post';
 import { AddonModForumPostOptionsMenuComponent } from './post-options-menu/post-options-menu';
-import { AddonModForumSortOrderSelectorComponent } from './sort-order-selector/sort-order-selector';
 
 @NgModule({
     declarations: [
@@ -32,7 +31,6 @@ import { AddonModForumSortOrderSelectorComponent } from './sort-order-selector/s
         AddonModForumIndexComponent,
         AddonModForumPostComponent,
         AddonModForumPostOptionsMenuComponent,
-        AddonModForumSortOrderSelectorComponent,
     ],
     imports: [
         CoreSharedModule,

src/addons/mod/forum/components/index/index.html

@@ -60,9 +60,11 @@
 
         <ng-container *ngIf="forum">
             <div *ngIf="discussions && sortingAvailable && selectedSortOrder" class="ion-text-wrap">
-                <core-combobox [modalOptions]="sortOrderSelectorModalOptions" listboxId="addon-mod-forum-sort-selector"
+                <core-combobox [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.value">
-                    [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.label | translate"
+                    <ion-select-option *ngFor="let order of sortOrders" class="ion-text-wrap" [value]="order.value">
-                    interface="modal" />
+                        {{ order.label | translate }}
+                    </ion-select-option>
+                </core-combobox>
             </div>
 
             <core-empty-box *ngIf="!discussions || (!discussions.hasDiscussions && !errorLoadingDiscussions)" icon="far-comments"

src/addons/mod/forum/components/index/index.ts

@@ -15,7 +15,6 @@
 import { Component, Optional, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IonContent } from '@ionic/angular';
-import { ModalOptions } from '@ionic/core';
 
 import { CoreCourseModuleMainActivityComponent } from '@features/course/classes/main-activity-component';
 import {
@@ -45,7 +44,6 @@ import { CoreDomUtils } from '@services/utils/dom';
 import { CoreCourse } from '@features/course/services/course';
 import { CoreSplitViewComponent } from '@components/split-view/split-view';
 import { AddonModForumDiscussionOptionsMenuComponent } from '../discussion-options-menu/discussion-options-menu';
-import { AddonModForumSortOrderSelectorComponent } from '../sort-order-selector/sort-order-selector';
 import { CoreScreen } from '@services/screen';
 import { AddonModForumPrefetchHandler } from '../../services/handlers/prefetch';
 import { AddonModForumModuleHandlerService } from '../../services/handlers/module';
@@ -87,9 +85,6 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
     showQAMessage = false;
     isSetPinAvailable = false;
     showSearch = false;
-    sortOrderSelectorModalOptions: ModalOptions = {
-        component: AddonModForumSortOrderSelectorComponent,
-    };
 
     protected fetchContentDefaultError = 'addon.mod_forum.errorgetforum';
     protected syncEventName = AddonModForumSyncProvider.AUTO_SYNCED;
@@ -188,10 +183,6 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         this.sortOrders = AddonModForum.getAvailableSortOrders();
         this.isSetPinAvailable = AddonModForum.isSetPinStateAvailableForSite();
 
-        this.sortOrderSelectorModalOptions.componentProps = {
-            sortOrders: this.sortOrders,
-        };
-
         await super.ngOnInit();
 
         // Initialize discussions manager.
@@ -492,10 +483,6 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         const selectedOrder = await AddonModForum.getSelectedSortOrder();
 
         discussions.getSource().selectedSortOrder = selectedOrder;
-
-        if (this.sortOrderSelectorModalOptions.componentProps) {
-            this.sortOrderSelectorModalOptions.componentProps.selected = selectedOrder.value;
-        }
     }
 
     /**
@@ -605,17 +592,15 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
     /**
      * Changes the sort order.
      *
-     * @param sortOrder Sort order new data.
+     * @param sortOrderValue Sort order new data.
      */
-    async setSortOrder(sortOrder: AddonModForumSortOrder): Promise<void> {
+    async setSortOrder(sortOrderValue: number): Promise<void> {
-        if (this.discussions && sortOrder.value != this.discussions.getSource().selectedSortOrder?.value) {
+        const sortOrder = this.sortOrders.find(sortOrder => sortOrder.value === sortOrderValue);
+
+        if (this.discussions && sortOrder && sortOrder.value != this.discussions.getSource().selectedSortOrder?.value) {
             this.discussions.getSource().selectedSortOrder = sortOrder;
             this.discussions.getSource().setDirty(true);
 
-            if (this.sortOrderSelectorModalOptions.componentProps) {
-                this.sortOrderSelectorModalOptions.componentProps.selected = sortOrder.value;
-            }
-
             try {
                 await CoreUser.setUserPreference(AddonModForumProvider.PREFERENCE_SORTORDER, sortOrder.value.toFixed(0));
                 await this.showLoadingAndFetch();
@@ -625,17 +610,6 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         }
     }
 
-    /**
-     * Display the sort order selector modal.
-     */
-    async showSortOrderSelector(): Promise<void> {
-        const modalData = await CoreDomUtils.openModal<AddonModForumSortOrder>(this.sortOrderSelectorModalOptions);
-
-        if (modalData) {
-            this.setSortOrder(modalData);
-        }
-    }
-
     /**
      * Show the context menu.
      *

src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html

@@ -1,25 +0,0 @@
-<ion-header>
-    <ion-toolbar>
-        <ion-title>
-            <h1 id="addon-mod-forum-sort-order-label">{{ 'core.sort' | translate }}</h1>
-        </ion-title>
-        <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
-            </ion-button>
-        </ion-buttons>
-    </ion-toolbar>
-</ion-header>
-<ion-content>
-    <ion-list id="addon-mod-forum-sort-selector" role="listbox" aria-labelledby="addon-mod-forum-sort-order-label">
-        <ng-container *ngFor="let sortOrder of sortOrders">
-            <ion-item class="ion-text-wrap" [detail]="false" role="combobox"
-                [attr.aria-current]="selected === sortOrder.value ? 'page' : 'false'" [attr.aria-label]="sortOrder.label | translate"
-                (click)="selectSortOrder(sortOrder)" button aria-haspopup="dialog">
-                <ion-label>
-                    <p class="item-heading">{{ sortOrder.label | translate }}</p>
-                </ion-label>
-            </ion-item>
-        </ng-container>
-    </ion-list>
-</ion-content>

src/addons/mod/forum/components/sort-order-selector/sort-order-selector.ts

@@ -1,47 +0,0 @@
-// (C) Copyright 2015 Moodle Pty Ltd.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { Component, Input } from '@angular/core';
-import { AddonModForumSortOrder } from '@addons/mod/forum/services/forum';
-import { ModalController } from '@singletons';
-
-/**
- * Page that displays the sort selector.
- */
-@Component({
-    selector: 'page-addon-mod-forum-sort-order-selector',
-    templateUrl: 'sort-order-selector.html',
-})
-export class AddonModForumSortOrderSelectorComponent {
-
-    @Input() sortOrders!: AddonModForumSortOrder[];
-    @Input() selected!: number;
-
-    /**
-     * Close the modal.
-     */
-    closeModal(): void {
-        ModalController.dismiss();
-    }
-
-    /**
-     * Select a sort order.
-     *
-     * @param sortOrder Selected sort order.
-     */
-    selectSortOrder(sortOrder: AddonModForumSortOrder): void {
-        ModalController.dismiss(sortOrder);
-    }
-
-}

src/addons/mod/forum/pages/new-discussion/new-discussion.html

@@ -36,7 +36,7 @@
                 </ion-label>
             </ion-item>
             <div *ngIf="advanced" id="addon-mod-forum-new-discussion-advanced">
-                <ion-item *ngIf="showGroups && groupIds.length > 1 && accessInfo.cancanposttomygroups" class="ion-text-wrap" lines="none">
+                <ion-item *ngIf="showGroups && groupIds.length > 1 && accessInfo.cancanposttomygroups" class="ion-text-wrap">
                     <ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups">
                         {{ 'addon.mod_forum.posttomygroups' | translate }}
                     </ion-toggle>
@@ -52,12 +52,12 @@
                         </ion-select-option>
                     </ion-select>
                 </ion-item>
-                <ion-item class="ion-text-wrap" lines="none">
+                <ion-item class="ion-text-wrap">
                     <ion-toggle [(ngModel)]="newDiscussion.subscribe" name="subscribe">
                         {{ 'addon.mod_forum.discussionsubscription' | translate }}
                     </ion-toggle>
                 </ion-item>
-                <ion-item *ngIf="canPin" class="ion-text-wrap" lines="none">
+                <ion-item *ngIf="canPin" class="ion-text-wrap">
                     <ion-toggle [(ngModel)]="newDiscussion.pin" name="pin">
                         {{ 'addon.mod_forum.discussionpinned' | translate }}
                     </ion-toggle>

src/addons/mod/glossary/pages/edit/edit.html

@@ -51,17 +51,17 @@
                         <h2>{{ 'addon.mod_glossary.linking' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
-                <ion-item class="ion-text-wrap" lines="none">
+                <ion-item class="ion-text-wrap">
                     <ion-toggle [(ngModel)]="data.usedynalink" name="usedynalink">
                         {{ 'addon.mod_glossary.entryusedynalink' | translate }}
                     </ion-toggle>
                 </ion-item>
-                <ion-item class="ion-text-wrap" lines="none">
+                <ion-item class="ion-text-wrap">
                     <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.casesensitive" name="casesensitive">
                         {{ 'addon.mod_glossary.casesensitive' | translate }}
                     </ion-toggle>
                 </ion-item>
-                <ion-item class="ion-text-wrap" lines="none">
+                <ion-item class="ion-text-wrap">
                     <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.fullmatch" name="fullmatch">
                         {{ 'addon.mod_glossary.fullmatch' | translate }}
                     </ion-toggle>

src/addons/mod/workshop/pages/submission/submission.html

@@ -99,7 +99,7 @@
                     <h2>{{ 'addon.mod_workshop.feedbackauthor' | translate }}</h2>
                 </ion-label>
             </ion-item-divider>
-            <ion-item class="ion-text-wrap" lines="none" *ngIf="access.canpublishsubmissions">
+            <ion-item class="ion-text-wrap" *ngIf="access.canpublishsubmissions">
                 <ion-toggle formControlName="published">
                     <p class="item-heading">{{ 'addon.mod_workshop.publishsubmission' | translate }}</p>
                     <p>{{ 'addon.mod_workshop.publishsubmission_help' | translate }}</p>

src/addons/notifications/pages/settings/settings.html

@@ -21,12 +21,12 @@
     </ion-refresher>
     <core-loading [hideUntil]="preferencesLoaded">
         <ion-card>
-            <ion-item class="ion-text-wrap" *ngIf="preferences" lines="none">
+            <ion-item class="ion-text-wrap" *ngIf="preferences">
                 <ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)">
                     <p class="item-heading">{{ 'addon.notifications.allownotifications' | translate }}</p>
                 </ion-toggle>
             </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="canChangeSound" lines="none">
+            <ion-item class="ion-text-wrap" *ngIf="canChangeSound">
                 <ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)">
                     <p class="item-heading">{{ 'addon.notifications.playsound' | translate }}</p>
                 </ion-toggle>
@@ -34,7 +34,7 @@
         </ion-card>
 
         <ion-card>
-            <ion-item class="ion-text-wrap addon-notification-type-form" *ngIf="preferences?.processors?.length" lines="none">
+            <ion-item class="ion-text-wrap addon-notification-type-form" *ngIf="preferences?.processors?.length">
                 <!-- Show processor selector. -->
                 <ion-select [(ngModel)]="currentProcessorName" (ionChange)="changeProcessor($event)" interface="popover">
                     <p class="item-heading" slot="label">{{ 'addon.notifications.typeofnotification' | translate }}</p>

src/addons/qtype/calculated/component/addon-qtype-calculated.html

@@ -55,7 +55,7 @@
 <!-- Template for units entered using radio buttons. -->
 <ng-template #radioUnits>
     <ion-radio-group [(ngModel)]="question!.unit" [name]="question!.optionsName">
-        <ion-item class="ion-text-wrap" *ngFor="let option of question!.options" lines="none">
+        <ion-item class="ion-text-wrap" *ngFor="let option of question!.options">
             <ion-radio [value]="option.value" [disabled]="option.disabled || question!.input?.readOnly"
                 [color]="question!.input?.correctIconColor">
                 {{ option.text }}

src/addons/qtype/multichoice/component/addon-qtype-multichoice.html

@@ -41,7 +41,7 @@
 
     <!-- Radio buttons for single choice. -->
     <ion-radio-group *ngIf="!question.multi" [(ngModel)]="question.singleChoiceModel" [name]="question.optionsName">
-        <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options" lines="none">
+        <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
             <ion-radio [value]="option.value" [disabled]="option.disabled"
                 [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
                 <div>

src/core/components/combobox/combobox.scss

@@ -15,6 +15,10 @@
                 display: none;
             }
 
+            &::part(container) {
+                margin: 0px;
+            }
+
             &::part(label) {
                 position: static;
             }
@@ -88,9 +92,16 @@
             margin-inline: 0px;
         }
 
+        &::part(container) {
+            white-space: normal;
+            @include margin-horizontal(null, 24px);
+            font: var(--mdl-typography-label-font-lg);
+        }
+
         &::part(icon) {
             margin: var(--icon-margin);
-            opacity: 1;
+            position: absolute;
+            @include position(null, 8px, null, null);
             --highlight-color: currentColor;
         }
 
@@ -115,21 +126,16 @@
         --color-focused: currentcolor;
         --color-hover: currentcolor;
 
-        border-radius: var(--core-combobox-radius);
+        --border-radius: var(--core-combobox-radius);
-        margin: 4px 8px;
-
-        flex: 1;
-
-        &::part(native) {
-            font: var(--mdl-typography-label-font-lg);
-            border-radius: var(--core-combobox-radius);
-        }
 
         .select-text {
             @include margin-horizontal(null, auto);
+            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            font: var(--mdl-typography-label-font-lg);
         }
+
         .sr-only {
             @include sr-only();
         }
@@ -141,6 +147,10 @@
         ion-icon {
             margin: var(--icon-margin);
         }
+
+        .select-icon {
+            color: var(--ion-color-step-500, gray);
+        }
     }
 
 }

src/core/components/combobox/core-combobox.html

@@ -1,5 +1,6 @@
 <ion-select *ngIf="interface !== 'modal'" class="ion-text-start" [(ngModel)]="selection" (ngModelChange)="onValueChanged(selection)"
-    [interface]="interface" [disabled]="disabled" [class.combobox-icon-only]="icon" [interfaceOptions]="{alignment: 'start', arrow: false}">
+    interface="popover" [disabled]="disabled" [class.combobox-icon-only]="icon"
+    [interfaceOptions]="{alignment: 'start', arrow: false, cssClass: 'core-combobox-select'}">
     <div slot="label">
         <span class="sr-only" *ngIf="label">{{ label }}</span>
         <ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
@@ -11,11 +12,13 @@
 <ion-button *ngIf="interface === 'modal'" aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId"
     [attr.aria-expanded]="expanded" (click)="openModal()" [disabled]="disabled" expand="block" role="combobox">
     <ion-icon *ngIf="icon" [name]="icon" slot="start" aria-hidden="true" />
+
     <span class="sr-only" *ngIf="label">{{ label }},</span>
     <div class="select-text">
         <slot name="text">{{selection}}</slot>
     </div>
-    <div class="select-icon" role="presentation" aria-hidden="true">
+
+    <div class="select-icon" role="presentation" aria-hidden="true" slot="end">
         <div class="select-icon-inner"></div>
     </div>
 </ion-button>

src/core/features/login/pages/site/site.scss

@@ -4,10 +4,6 @@
     --list-item-max-width: 600px;
 }
 
-.item-input:last-child {
-    margin-bottom: 20px;
-}
-
 .core-login-site-connect {
     margin-top: 1.4rem;
 }

src/core/features/rating/components/rate/core-rating-rate.html

@@ -1,4 +1,4 @@
-<ion-item class="ion-text-wrap" *ngIf="item && (item!.canrate || item!.rating !== null) && !disabled" lines="none">
+<ion-item class="ion-text-wrap" *ngIf="item && (item!.canrate || item!.rating !== null) && !disabled">
     <ion-select class="ion-text-start" [(ngModel)]="rating" (ngModelChange)="userRatingChanged()" interface="action-sheet"
         [cancelText]="'core.cancel' | translate" [disabled]="!item!.canrate" [interfaceOptions]="{header: 'core.rating.rating' | translate}"
         [label]="'core.rating.rating' | translate">

src/core/features/settings/pages/dev/dev.html

@@ -17,13 +17,13 @@
 </ion-header>
 <ion-content>
     <ion-list class="list-item-limited-width">
-        <ion-item class="ion-text-wrap" lines="none">
+        <ion-item class="ion-text-wrap">
             <ion-toggle [(ngModel)]="rtl" (ionChange)="RTLChanged()">
                 <p class="item-heading">Change text direction</p>
                 <p>{{ direction }}</p>
             </ion-toggle>
         </ion-item>
-        <ion-item class="ion-text-wrap" lines="none">
+        <ion-item class="ion-text-wrap">
             <ion-toggle [(ngModel)]="forceSafeAreaMargins" (ionChange)="safeAreaChanged()">
                 <p class="item-heading">Force safe area margins</p>
             </ion-toggle>
@@ -34,13 +34,13 @@
             </ion-toggle>
         </ion-item>
         <ng-container *ngIf="siteId">
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-toggle [(ngModel)]="remoteStyles" (ionChange)="remoteStylesChanged()">
                     <p class="item-heading">Enable remote styles <ion-badge>{{remoteStylesCount}}</ion-badge>
                     </p>
                 </ion-toggle>
             </ion-item>
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-toggle [(ngModel)]="pluginStyles" (ionChange)="pluginStylesChanged()">
                     <p class="item-heading">Enable site plugin styles <ion-badge>{{pluginStylesCount}}</ion-badge>
                     </p>

src/core/features/settings/pages/general/general.html

@@ -11,7 +11,7 @@
 </ion-header>
 <ion-content>
     <ion-list class="list-item-limited-width">
-        <ion-item class="ion-text-wrap" lines="none">
+        <ion-item class="ion-text-wrap">
             <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged($event)" interface="action-sheet"
                 [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.settings.language' | translate}">
                 <div slot="label" class="item-heading ion-text-wrap">{{ 'core.settings.language' | translate }}</div>
@@ -33,7 +33,7 @@
                 </ion-segment-button>
             </ion-segment>
         </ion-item>
-        <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0" lines="none">
+        <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0">
             <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged($event)" interface="action-sheet"
                 [cancelText]="'core.cancel' | translate" [disabled]="colorSchemeDisabled"
                 [interfaceOptions]="{header: 'core.settings.colorscheme' | translate}">
@@ -50,7 +50,7 @@
                 <p class="ion-text-wrap">{{ 'core.settings.colorscheme-system-notice' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item lines="none">
+        <ion-item>
             <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged($event)">
                 <p class="item-heading ion-text-wrap">{{ 'core.settings.enablerichtexteditor' | translate }}</p>
                 <p class="ion-text-wrap">{{ 'core.settings.enablerichtexteditordescription' | translate }}</p>
@@ -65,13 +65,13 @@
                 </ion-button>
             </ion-label>
         </ion-item>
-        <ion-item lines="none">
+        <ion-item>
             <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged($event)">
                 <p class="item-heading ion-text-wrap">{{ 'core.settings.debugdisplay' | translate }}</p>
                 <p class="ion-text-wrap">{{ 'core.settings.debugdisplaydescription' | translate }}</p>
             </ion-toggle>
         </ion-item>
-        <ion-item *ngIf="analyticsAvailable" lines="none">
+        <ion-item *ngIf="analyticsAvailable">
             <ion-label>
                 <p class="item-heading ion-text-wrap">{{ 'core.settings.enableanalytics' | translate }}</p>
                 <p class="ion-text-wrap">{{ 'core.settings.enableanalyticsdescription' | translate }}</p>

src/core/features/settings/pages/synchronization/synchronization.html

@@ -23,7 +23,7 @@
                     <h2>{{ 'core.settings.syncsettings' | translate }}</h2>
                 </ion-label>
             </ion-item-divider>
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-toggle [(ngModel)]="dataSaver" (ngModelChange)="syncOnlyOnWifiChanged()">
                     {{ 'core.settings.syncdatasaver' | translate }}
                 </ion-toggle>

src/theme/components/ion-button.scss

@@ -1,6 +1,22 @@
 
 ion-button {
-    margin: 4px 8px;
+    margin: var(--mdl-spacing-1) var(--mdl-spacing-2);
+    white-space: normal;
+    line-height: 120%;
+
+    core-format-text {
+        white-space: normal;
+        display: contents;
+        line-height: 120%;
+    }
+
+    & > * {
+        white-space: normal;
+    }
+
+    ion-spinner {
+        --color: inherit !important;
+    }
 
     ion-spinner[slot=start],
     img[slot=start] {
@@ -36,36 +52,6 @@ ion-button {
         --box-shadow: none;
     }
 
-    core-format-text {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: block;
-        line-height: 1.2;
-    }
-
-    > * {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    &.ion-text-wrap {
-        white-space: normal;
-        core-format-text {
-            white-space: normal;
-            display: contents;
-        }
-
-        & > * {
-            white-space: normal;
-        }
-    }
-
-    ion-spinner {
-        --color: inherit !important;
-    }
-
     &.button-has-icon-only {
         margin: 2px;
     }

src/theme/components/ion-item.scss

@@ -12,17 +12,17 @@ ion-item.item {
         color: var(--ion-item-icon-color);
     }
 
-    &.item-lines-default {
+    &.item-lines-default,
-        /** Remove lines by default */
+    &.item-has-interactive-control {
+        /** Remove lines by default and interactive control (toggles, radios, checkbox and selects) */
         --inner-border-width: 0px;
         --border-width: 0px;
     }
 
     &.ion-valid,
-    &.ion-invalid,
+    &.ion-invalid {
-    &.item-has-interactive-control {
+        &.item-lines-default:not(.item-has-interactive-control) {
-        &.item-lines-default {
+            --inner-border-width: 0 0 1px 0;
-            --border-width: 0 0 1px 0;
         }
 
         &.ion-touched {
@@ -44,11 +44,6 @@ ion-item.item {
         --detail-icon-opacity: 0;
     }
 
-    &:not(.item-input) {
-        --show-full-highlight: 0;
-        --show-inset-highlight: 0;
-    }
-
     &.item-has-interactive-control:focus-within {
         @include core-focus-outline();
     }
@@ -319,13 +314,3 @@ ion-item.item-multiple-inputs.only-links {
         cursor: pointer;
     }
 }
-
-// Case with ion-input + ion-select inside.
-ion-item.item-input.item-multiple-inputs {
-    .flex-row {
-        width: 100%;
-        ion-select {
-            position: relative;
-        }
-    }
-}

src/theme/components/ion-popover.scss

@@ -16,4 +16,13 @@ ion-popover {
     &.ios {
         --min-width: 250px;
     }
+
+    &.core-combobox-select {
+        --width: auto;
+        --max-width: 80%;
+
+        ion-radio::part(label) {
+            white-space: normal;
+        }
+    }
 }

src/theme/components/ion-radio.scss

@@ -35,7 +35,7 @@ input[type=radio],
     }
 
     &::part(mark) {
-        border-radius: var(--inner-border-radius);
+        border-radius: 50%;
         width: calc(50% + var(--outer-border-width));
         height: calc(50% + var(--outer-border-width));
         transform: scale3d(0, 0, 0);

src/theme/components/ion-select.scss

@@ -31,16 +31,6 @@ ion-select-popover {
     }
 }
 
-// Case with ion-input + ion-select inside.
-ion-item.item-input.item-multiple-inputs {
-    .flex-row {
-        width: 100%;
-        ion-select {
-            position: relative;
-        }
-    }
-}
-
 .select-alert.ios {
     .alert-checkbox-icon {
         border-radius: 2px;
@@ -63,7 +53,7 @@ ion-item.item-input.item-multiple-inputs {
             top: auto;
             left: auto;
             position: static;
-            border-radius: var(--inner-border-radius);
+            border-radius: 50%;
             width: calc(50% + var(--outer-border-width));
             height: calc(50% + var(--outer-border-width));
             transform: scale3d(0, 0, 0);