MOBILE-4470 styles: Revert uneeded lines none and fix interactive items

main
Pau Ferrer Ocaña 2024-05-14 09:33:56 +02:00
parent ebdbdf0bbe
commit 55d087ca18
18 changed files with 39 additions and 44 deletions

View File

@ -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: {

View File

@ -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>

View File

@ -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}}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 }}

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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();
}