From 55d087ca180954d795e6d394911ae56039257021 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 14 May 2024 09:33:56 +0200
Subject: [PATCH] MOBILE-4470 styles: Revert uneeded lines none and fix
 interactive items

---
 .../blog/pages/edit-entry/edit-entry.html       |  2 +-
 src/addons/blog/pages/index/index.html          |  2 +-
 .../calendar/components/filter/filter.html      |  2 +-
 .../messages/pages/settings/settings.html       |  4 ++--
 .../submission/addon-mod-assign-submission.html |  4 ++--
 .../mod/chat/pages/sessions/sessions.html       |  2 +-
 src/addons/mod/feedback/pages/form/form.html    |  4 ++--
 .../pages/new-discussion/new-discussion.html    |  6 +++---
 src/addons/mod/glossary/pages/edit/edit.html    |  6 +++---
 .../workshop/pages/submission/submission.html   |  2 +-
 .../notifications/pages/settings/settings.html  |  6 +++---
 .../component/addon-qtype-calculated.html       |  2 +-
 .../component/addon-qtype-multichoice.html      |  2 +-
 .../components/rate/core-rating-rate.html       |  2 +-
 src/core/features/settings/pages/dev/dev.html   |  8 ++++----
 .../settings/pages/general/general.html         | 10 +++++-----
 .../pages/synchronization/synchronization.html  |  2 +-
 src/theme/components/ion-item.scss              | 17 ++++++-----------
 18 files changed, 39 insertions(+), 44 deletions(-)

diff --git a/src/addons/blog/pages/edit-entry/edit-entry.html b/src/addons/blog/pages/edit-entry/edit-entry.html
index 5ab20704f..92be35280 100644
--- 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: {
diff --git a/src/addons/blog/pages/index/index.html b/src/addons/blog/pages/index/index.html
index 6b63caa67..a4d847ddc 100644
--- 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>
diff --git a/src/addons/calendar/components/filter/filter.html b/src/addons/calendar/components/filter/filter.html
index b2a1e326c..a5732aebd 100644
--- 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}}
diff --git a/src/addons/messages/pages/settings/settings.html b/src/addons/messages/pages/settings/settings.html
index bbf72e6f4..606842fa1 100644
--- 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>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index 9879b3565..0cf93f8f1 100644
--- 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>
diff --git a/src/addons/mod/chat/pages/sessions/sessions.html b/src/addons/mod/chat/pages/sessions/sessions.html
index 499ee182a..28df7d798 100644
--- 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>
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index ba9d50ffc..b15eb0446 100644
--- 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>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index 38fbec675..6bbd95db5 100644
--- 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>
diff --git a/src/addons/mod/glossary/pages/edit/edit.html b/src/addons/mod/glossary/pages/edit/edit.html
index 07706c91e..f681e51ab 100644
--- 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>
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index a683805f3..2d0193a32 100644
--- 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>
diff --git a/src/addons/notifications/pages/settings/settings.html b/src/addons/notifications/pages/settings/settings.html
index 2df95dc01..46804c15a 100644
--- 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>
diff --git a/src/addons/qtype/calculated/component/addon-qtype-calculated.html b/src/addons/qtype/calculated/component/addon-qtype-calculated.html
index d8910df93..9767e13cc 100644
--- 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 }}
diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
index ec262e32c..bd1b653ad 100644
--- 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>
diff --git a/src/core/features/rating/components/rate/core-rating-rate.html b/src/core/features/rating/components/rate/core-rating-rate.html
index e7f05ebe9..f335ad756 100644
--- 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">
diff --git a/src/core/features/settings/pages/dev/dev.html b/src/core/features/settings/pages/dev/dev.html
index 8968e297d..37484811f 100644
--- 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>
diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index b9e388bea..337c74cf0 100644
--- 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>
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index b83e6cde3..44b02e537 100644
--- 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>
diff --git a/src/theme/components/ion-item.scss b/src/theme/components/ion-item.scss
index 8e3ca0b5e..be23a76d5 100644
--- 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();
     }