MOBILE-3565 login: Fix sites page styles

main
Pau Ferrer Ocaña 2020-10-22 11:17:21 +02:00
parent 0f694769ed
commit 2f16be7a0c
10 changed files with 48 additions and 42 deletions

View File

@ -19,8 +19,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { CoreComponentsModule } from '@/app/components/components.module';
import { CoreDirectivesModule } from '@/app/directives/directives.module';
import { CoreComponentsModule } from '@components/components.module';
import { CoreDirectivesModule } from '@directives/directives.module';
import { CoreLoginRoutingModule } from './login-routing.module';
import { CoreLoginCredentialsPage } from './pages/credentials/credentials.page';

View File

@ -22,9 +22,9 @@ import { CoreSites } from '@services/sites';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreUtils } from '@services/utils/utils';
import { CoreLoginHelper, CoreLoginHelperProvider } from '@core/login/services/helper';
import { CoreConstants } from '@/app/core/constants';
import { CoreConstants } from '@core/constants';
import { Translate } from '@singletons/core.singletons';
import { CoreSiteIdentityProvider, CoreSitePublicConfigResponse } from '@/app/classes/site';
import { CoreSiteIdentityProvider, CoreSitePublicConfigResponse } from '@classes/site';
import { CoreEvents } from '@singletons/events';
/**

View File

@ -1,14 +1,15 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
</ion-buttons>
<ion-title>{{ 'core.login.connecttomoodle' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button router-direction="forward" routerLink="/settings/app" [attr.aria-label]="'core.settings.appsettings'">
<core-icon slot="icon-only" name="fa-cog" color="light" fixed-width="true"></core-icon>
<ion-button router-direction="forward" routerLink="/settings/app"
[attr.aria-label]="'core.settings.appsettings' | translate">
<core-icon slot="icon-only" name="fa-cog"></core-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>

View File

@ -24,10 +24,10 @@ import { CoreDomUtils } from '@services/utils/dom';
import { CoreLoginHelper, CoreLoginHelperProvider } from '@core/login/services/helper';
import { CoreSite } from '@classes/site';
import { CoreError } from '@classes/errors/error';
import { CoreConstants } from '@/app/core/constants';
import { CoreConstants } from '@core/constants';
import { Translate } from '@singletons/core.singletons';
import { CoreUrl } from '@singletons/url';
import { CoreUrlUtils } from '@/app/services/utils/url';
import { CoreUrlUtils } from '@services/utils/url';
import { NavController } from '@ionic/angular';
/**

View File

@ -1,39 +1,43 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
</ion-buttons>
<ion-title>{{ 'core.settings.sites' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button *ngIf="sites && sites.length > 0" icon-only (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
<ion-button *ngIf="sites && sites.length > 0" (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
<core-icon slot="icon-only" name="fa-pencil"></core-icon>
</ion-button>
<ion-button router-direction="forward" routerLink="/settings/app" [attr.aria-label]="'core.settings.appsettings'">
<core-icon slot="icon-only" name="fa-cog"></core-icon>
</ion-button>
<ion-button router-direction="forward" routerLink="/settings/app"
[attr.aria-label]="'core.settings.appsettings' | translate">
<core-icon slot="icon-only" name="fa-cog"></core-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="login(site.id)" *ngFor="let site of sites; let idx = index" detail-none>
<ion-avatar item-start>
<ion-item (click)="login(site.id)" *ngFor="let site of sites">
<ion-avatar slot="start">
<img [src]="site.avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullName} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
</ion-avatar>
<h2>{{site.fullName}}</h2>
<p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
<p>{{site.siteUrl}}</p>
<ion-badge item-end *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
<ion-button *ngIf="showDelete" item-end icon-only clear color="danger" (click)="deleteSite($event, idx)" [attr.aria-label]="'core.delete' | translate">
<ion-icon name="trash"></ion-icon>
</ion-button>
</ion-item>
</ion-list>
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
<ion-fab-button (click)="add()" [attr.aria-label]="'core.add' | translate">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-label>
<h2>{{site.fullName}}</h2>
<p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
<p>{{site.siteUrl}}</p>
</ion-label>
<ion-badge slot="end" *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
<ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
[attr.aria-label]="'core.delete' | translate">
<core-icon name="fa-trash" slot="icon-only"></core-icon>
</ion-button>
</ion-item>
</ion-list>
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
<ion-fab-button (click)="add()" [attr.aria-label]="'core.add' | translate">
<core-icon name="fa-plus"></core-icon>
</ion-fab-button>
</ion-fab>
</ion-content>

View File

@ -12,8 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { CoreDomUtils } from '@/app/services/utils/dom';
import { CoreUtils } from '@/app/services/utils/utils';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreUtils } from '@services/utils/utils';
import { Component, OnInit } from '@angular/core';
import { CoreSiteBasicInfo, CoreSites } from '@services/sites';
@ -26,7 +26,6 @@ import { CoreLoginHelper } from '../../services/helper';
@Component({
selector: 'page-core-login-sites',
templateUrl: 'sites.html',
styleUrls: ['sites.scss'],
})
export class CoreLoginSitesPage implements OnInit {
@ -76,13 +75,12 @@ export class CoreLoginSitesPage implements OnInit {
* Delete a site.
*
* @param e Click event.
* @param index Position of the site.
* @param site Site to delete.
* @return Promise resolved when done.
*/
async deleteSite(e: Event, index: number): Promise<void> {
async deleteSite(e: Event, site: CoreSiteBasicInfo): Promise<void> {
e.stopPropagation();
const site = this.sites[index];
const siteName = site.siteName || '';
// @todo: Format text: siteName.
@ -97,7 +95,8 @@ export class CoreLoginSitesPage implements OnInit {
try {
await CoreSites.instance.deleteSite(site.id);
this.sites.splice(index, 1);
const index = this.sites.findIndex((listedSite) => listedSite.id == site.id);
index >= 0 && this.sites.splice(index, 1);
this.showDelete = false;
// If there are no sites left, go to add site.

View File

@ -1,3 +0,0 @@
.item-ios .item-button[icon-only] ion-icon {
font-size: 2.1em;
}

View File

@ -16,7 +16,7 @@ import { Injectable } from '@angular/core';
import { CoreLang } from '@services/lang';
import { CoreTextUtils } from '@services/utils/text';
import { CoreConstants } from '@/app/core/constants';
import { CoreConstants } from '@core/constants';
import { makeSingleton } from '@singletons/core.singletons';
import { CoreUrl } from '@singletons/url';

View File

@ -1 +1,6 @@
// Add here base app styles.
ion-toolbar ion-back-button,
ion-toolbar .in-toolbar.button-clear {
--color: var(--ion-color-primary-contrast);
}

View File

@ -14,7 +14,7 @@
/* eslint-disable @typescript-eslint/naming-convention */
import { CoreSitesDemoSiteData } from '@/app/services/sites';
import { CoreSitesDemoSiteData } from '@services/sites';
declare global {