MOBILE-4081 style: Improve style on message settings

main
Pau Ferrer Ocaña 2022-11-23 11:07:07 +01:00
parent 8c22f9a44d
commit eac671c5b3
2 changed files with 51 additions and 38 deletions

View File

@ -13,31 +13,56 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="preferencesLoaded">
<!-- General settings. -->
<ion-card>
<ion-list>
<ion-item-divider class="ion-text-wrap">
<ion-label>
<h2>{{ 'core.settings.general' | translate }}</h2>
</ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap">
<ion-label>
<p>{{ 'addon.messages.useentertosend' | translate }}</p>
</ion-label>
<ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end"></ion-toggle>
</ion-item>
</ion-list>
</ion-card>
<!-- Contactable privacy. -->
<ion-card>
<ion-item *ngIf="!advancedContactable">
<ion-label>{{ 'addon.messages.blocknoncontacts' | translate }}</ion-label>
<ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)">
<ion-label class="ion-text-wrap">
<p>{{ 'addon.messages.blocknoncontacts' | translate }}</p>
</ion-label>
<ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)" slot="end">
</ion-toggle>
</ion-item>
<ion-list *ngIf="advancedContactable" class="ion-text-wrap">
<ion-list *ngIf="advancedContactable">
<ion-radio-group [(ngModel)]="contactablePrivacy" (ionChange)="saveContactablePrivacy(contactablePrivacy)">
<ion-item-divider>
<ion-label>
<h2>{{ 'addon.messages.contactableprivacy' | translate }}</h2>
</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</ion-label>
<ion-item class="ion-text-wrap">
<ion-label>
<p>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</p>
</ion-label>
<ion-radio slot="start" [value]="onlyContactsValue"></ion-radio>
</ion-item>
<ion-item>
<ion-label>{{ 'addon.messages.contactableprivacy_coursemember' | translate }}</ion-label>
<ion-item class="ion-text-wrap">
<ion-label>
<p>{{ 'addon.messages.contactableprivacy_coursemember' | translate }}</p>
</ion-label>
<ion-radio slot="start" [value]="courseMemberValue"></ion-radio>
</ion-item>
<ion-item *ngIf="allowSiteMessaging">
<ion-label>{{ 'addon.messages.contactableprivacy_site' | translate }}</ion-label>
<ion-item *ngIf="allowSiteMessaging" class="ion-text-wrap">
<ion-label>
<p>{{ 'addon.messages.contactableprivacy_site' | translate }}</p>
</ion-label>
<ion-radio slot="start" [value]="siteValue"></ion-radio>
</ion-item>
</ion-radio-group>
@ -53,23 +78,6 @@
<ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container>
</ng-container>
</ng-container>
<!-- General settings. -->
<ion-card>
<ion-list class="ion-text-wrap">
<ion-item-divider>
<ion-label>
<h2>{{ 'core.settings.general' | translate }}</h2>
</ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap">
<ion-label>
<p class="item-heading">{{ 'addon.messages.useentertosend' | translate }}</p>
</ion-label>
<ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end"></ion-toggle>
</ion-item>
</ion-list>
</ion-card>
</core-loading>
</ion-content>
@ -94,18 +102,20 @@
<!-- If notifications not disabled, show toggles.
If notifications are disabled, show "Disabled" instead of toggle. -->
<ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap">
<ion-label>{{ 'core.settings.' + state | translate }}</ion-label>
<ion-label>
<p>{{ 'core.settings.' + state | translate }}</p>
</ion-label>
<ng-container *ngIf="!preferences.disableall">
<!-- If notifications enabled, show toggle. -->
<core-button-with-spinner *ngIf="!processor.locked" [loading]="notification['updating'+state]">
<core-button-with-spinner *ngIf="!processor.locked" [loading]="notification['updating'+state]" slot="end">
<ion-toggle [(ngModel)]="processor[state].checked"
(ngModelChange)="changePreferenceLegacy(notification, processor, state)">
</ion-toggle>
</core-button-with-spinner>
<span *ngIf="processor.locked && processor[state].checked" class="text-gray">
<span *ngIf="processor.locked && processor[state].checked" class="text-gray" slot="end">
{{'core.settings.forced' | translate }}
</span>
<span *ngIf="processor.locked && !processor[state].checked" class="text-gray">
<span *ngIf="processor.locked && !processor[state].checked" class="text-gray" slot="end">
{{'core.settings.disallowed' | translate }}
</span>
</ng-container>
@ -129,18 +139,20 @@
<ng-container *ngFor="let processor of notification.processors">
<!-- If group messaging is enabled, display a simplified view. -->
<ion-item class="ion-text-wrap">
<ion-label>{{ processor.displayname }}</ion-label>
<ion-label>
<p>{{ processor.displayname }}</p>
</ion-label>
<ng-container *ngIf="!preferences.disableall">
<!-- If notifications enabled, show toggle. -->
<core-button-with-spinner *ngIf="!processor.locked" [loading]="notification.updating">
<core-button-with-spinner *ngIf="!processor.locked" [loading]="notification.updating" slot="end">
<ion-toggle [(ngModel)]="processor.enabled" (ngModelChange)="changePreference(notification, processor)">
</ion-toggle>
</core-button-with-spinner>
<span class="text-gray" *ngIf="processor.locked">
<span class="text-gray" *ngIf="processor.locked" slot="end">
{{ processor.lockedmessage }}
</span>
</ng-container>
<span *ngIf="preferences.disableall" class="text-gray">{{ 'core.settings.disabled' | translate }}</span>
<span *ngIf="preferences.disableall" class="text-gray" slot="end">{{ 'core.settings.disabled' | translate }}</span>
</ion-item>
</ng-container>
</ion-card>

View File

@ -70,9 +70,7 @@ export class AddonMessagesSettingsPage implements OnInit, OnDestroy {
}
/**
* Runs when the page has loaded. This event only happens once per page being created.
* If a page leaves but is cached, then this event will not fire again on a subsequent viewing.
* Setup code for the page.
* @inheritdoc
*/
ngOnInit(): void {
this.fetchPreferences();
@ -261,6 +259,9 @@ export class AddonMessagesSettingsPage implements OnInit, OnDestroy {
});
}
/**
* Send on Enter toggle has changed.
*/
sendOnEnterChanged(): void {
// Save the value.
CoreConfig.set(CoreConstants.SETTINGS_SEND_ON_ENTER, this.sendOnEnter ? 1 : 0);
@ -274,7 +275,7 @@ export class AddonMessagesSettingsPage implements OnInit, OnDestroy {
}
/**
* Page destroyed.
* @inheritdoc
*/
ngOnDestroy(): void {
// If there is a pending action to update preferences, execute it right now.