Merge pull request #4045 from crazyserver/MOBILE-4470

Mobile 4470
2024-05-14 10:04:22 +02:00 · 2024-05-14 10:04:22 +02:00 · 32632dc204
parent 6ac81d1486 f573f4f112
commit 32632dc204
33 changed files with 104 additions and 223 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/addons/blog/pages/edit-entry/edit-entry.html
+++ b/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: {
--- a/src/addons/blog/pages/index/index.html
+++ b/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>
--- a/src/addons/calendar/components/filter/filter.html
+++ b/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}}
--- a/src/addons/messages/pages/settings/settings.html
+++ b/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>
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/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>
--- a/src/addons/mod/chat/pages/sessions/sessions.html
+++ b/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>
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/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>
--- a/src/addons/mod/forum/components/components.module.ts
+++ b/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,
--- a/src/addons/mod/forum/components/index/index.html
+++ b/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"
-                    [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.label | translate"
-                    interface="modal" />
+                <core-combobox [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.value">
+                    <ion-select-option *ngFor="let order of sortOrders" class="ion-text-wrap" [value]="order.value">
+                        {{ order.label | translate }}
+                    </ion-select-option>
+                </core-combobox>
            </div>

            <core-empty-box *ngIf="!discussions || (!discussions.hasDiscussions && !errorLoadingDiscussions)" icon="far-comments"
--- a/src/addons/mod/forum/components/index/index.ts
+++ b/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> {
-        if (this.discussions && sortOrder.value != this.discussions.getSource().selectedSortOrder?.value) {
+    async setSortOrder(sortOrderValue: number): Promise<void> {
+        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.
     *
--- a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
+++ b/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>
--- a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.ts
+++ b/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);
-    }
-
-}
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/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>
--- a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png
+++ b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png
--- a/src/addons/mod/glossary/pages/edit/edit.html
+++ b/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>
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/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>
--- a/src/addons/notifications/pages/settings/settings.html
+++ b/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>
--- a/src/addons/qtype/calculated/component/addon-qtype-calculated.html
+++ b/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 }}
--- a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
+++ b/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>
--- a/src/core/components/combobox/combobox.scss
+++ b/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);
-        margin: 4px 8px;
-
-        flex: 1;
-
-        &::part(native) {
-            font: var(--mdl-typography-label-font-lg);
-            border-radius: var(--core-combobox-radius);
-        }
+        --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);
+        }
    }

 }
--- a/src/core/components/combobox/core-combobox.html
+++ b/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>
--- a/src/core/features/login/pages/site/site.scss
+++ b/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;
 }
--- a/src/core/features/rating/components/rate/core-rating-rate.html
+++ b/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">
--- a/src/core/features/settings/pages/dev/dev.html
+++ b/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>
--- a/src/core/features/settings/pages/general/general.html
+++ b/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>
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/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>
--- a/src/theme/components/ion-button.scss
+++ b/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;
    }
--- a/src/theme/components/ion-item.scss
+++ b/src/theme/components/ion-item.scss
@ -12,17 +12,17 @@ ion-item.item {
        color: var(--ion-item-icon-color);
    }

-    &.item-lines-default {
-        /** Remove lines by default */
+    &.item-lines-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,
-    &.item-has-interactive-control {
-        &.item-lines-default {
-            --border-width: 0 0 1px 0;
+    &.ion-invalid {
+        &.item-lines-default:not(.item-has-interactive-control) {
+            --inner-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;
-        }
-    }
-}
--- a/src/theme/components/ion-popover.scss
+++ b/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;
+        }
+    }
 }
--- a/src/theme/components/ion-radio.scss
+++ b/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);
--- a/src/theme/components/ion-select.scss
+++ b/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);