Some layout reviews.

This commit is contained in:
Paulo Pinto
2020-08-27 16:47:17 +01:00
parent 4ddcb70735
commit 5cedd8c28a
8 changed files with 229 additions and 38 deletions
@@ -4,14 +4,19 @@
<ion-back-button defaultHref="/home/events"></ion-back-button> <ion-back-button defaultHref="/home/events"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Visualizar Evento</ion-title> <ion-title>Visualizar Evento</ion-title>
<ion-buttons slot="end">
<button (click)="deleteConfirm()" class="ion-icon-delete">
<ion-icon name="trash"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<div *ngIf="loadedEvent">
<ion-item-group> <ion-item-group>
<ion-item> <ion-item>
<ion-label position="stacked">Assunto</ion-label> <ion-label position="stacked">Assunto</ion-label>
<!-- <ion-input value='{{event.Subject}}'></ion-input> -->
<ion-input [(ngModel)]="loadedEvent.Subject"></ion-input> <ion-input [(ngModel)]="loadedEvent.Subject"></ion-input>
</ion-item> </ion-item>
<ion-item> <ion-item>
@@ -22,11 +27,6 @@
<ion-label position="stacked">Localização</ion-label> <ion-label position="stacked">Localização</ion-label>
<ion-input [(ngModel)]='loadedEvent.Location'></ion-input> <ion-input [(ngModel)]='loadedEvent.Location'></ion-input>
</ion-item> </ion-item>
<!-- <ion-item-sliding>
<ion-item (click)="openAttendees()">
<ion-label position="stacked">Pessoas</ion-label>
</ion-item>
</ion-item-sliding> -->
<ion-item> <ion-item>
<ion-label position="stacked">Calendário</ion-label> <ion-label position="stacked">Calendário</ion-label>
<ion-input [(ngModel)]='loadedEvent.CalendarName'></ion-input> <ion-input [(ngModel)]='loadedEvent.CalendarName'></ion-input>
@@ -43,12 +43,6 @@
<ion-label position="stacked">Data Fim</ion-label> <ion-label position="stacked">Data Fim</ion-label>
<ion-input [(ngModel)]='loadedEvent.EndDate'></ion-input> <ion-input [(ngModel)]='loadedEvent.EndDate'></ion-input>
</ion-item> </ion-item>
<!-- <ion-item-sliding>
<ion-item
[routerLink]="['/home/attachments', loadedEvent.EventId]">
<ion-label position="stacked">Anexos</ion-label>
</ion-item>
</ion-item-sliding> -->
<div class="div-card-button"> <div class="div-card-button">
<ion-card (click)="openAttendees()"> <ion-card (click)="openAttendees()">
<ion-card-header> <ion-card-header>
@@ -76,10 +70,75 @@
</ion-card> </ion-card>
</div> </div>
</ion-item-group> </ion-item-group>
</div>
<!-- Skeleton screen -->
<div *ngIf="!loadedEvent">
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
<ion-skeleton-text animated></ion-skeleton-text>
<ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</div>
<ion-list>
<ion-list-header>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content> </ion-content>
<ion-footer class="ion-no-border"> <ion-footer class="ion-no-border">
<div class="event-detail-buttons"> <div class="event-detail-buttons">
<ion-button shape="round" fill="outline" class="ion-button-left" (click)="deleteConfirm()">Apagar</ion-button> <!-- <ion-button shape="round" fill="outline" class="ion-button-left" (click)="deleteConfirm()">Apagar</ion-button> -->
<ion-button shape="round" class="ion-button-right" (click)="Save()">Gravar</ion-button> <ion-button shape="round" class="ion-button-right" (click)="Save()">Gravar</ion-button>
</div> </div>
</ion-footer> </ion-footer>
@@ -73,4 +73,10 @@ ion-card{
} }
.ion-button-right{ .ion-button-right{
float: right; float: right;
}
.ion-icon-delete{
font-size: 22px;
color: red;
background-color: white;
padding-right: 5px;
} }
@@ -8,6 +8,8 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<div *ngIf="task">
<ion-item-group> <ion-item-group>
<ion-item> <ion-item>
<ion-label position="stacked">Assunto</ion-label> <ion-label position="stacked">Assunto</ion-label>
@@ -26,5 +28,69 @@
Ver documento Ver documento
</ion-button> </ion-button>
</ion-item-group> </ion-item-group>
</div>
<div *ngIf="!task">
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
<ion-skeleton-text animated></ion-skeleton-text>
<ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</div>
<ion-list>
<ion-list-header>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content> </ion-content>
@@ -19,12 +19,11 @@ export class ExpedienteDetailPage implements OnInit {
private iab: InAppBrowser, private iab: InAppBrowser,
private loadingService: LoadingService) { } private loadingService: LoadingService) { }
task = new DailyWorkTask(); task: DailyWorkTask;
serialnumber:string; serialnumber:string;
ngOnInit() { ngOnInit() {
this.loading();
this.activateRoute.paramMap.subscribe(paramMap => { this.activateRoute.paramMap.subscribe(paramMap => {
if (!paramMap.has('SerialNumber')){ if (!paramMap.has('SerialNumber')){
return; return;
@@ -52,7 +51,4 @@ export class ExpedienteDetailPage implements OnInit {
const browser = this.iab.create(this.task.DocumentURL,"_blank"); const browser = this.iab.create(this.task.DocumentURL,"_blank");
browser.show(); browser.show();
} }
loading(){
this.loadingService.simpleLoading("A carregar...");
}
} }
@@ -27,7 +27,7 @@
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
<div [ngSwitch]="segment"> <div [ngSwitch]="segment" *ngIf="taskslist">
<ion-list *ngSwitchCase="'expediente'"> <ion-list *ngSwitchCase="'expediente'">
<ion-item-group> <ion-item-group>
<ion-item-sliding> <ion-item-sliding>
@@ -46,23 +46,72 @@
<ion-list *ngSwitchCase="'pendentes'"> <ion-list *ngSwitchCase="'pendentes'">
<ion-item-group> <ion-item-group>
<ion-item-sliding> <ion-item-sliding>
<!-- <ion-item lines="none">
<div class="div-content-pendentes">
<ion-item lines="none">
<ion-icon slot="end" name="document-outline"></ion-icon>
<h3>Avaliação de execução dos projectos públicos</h3>
</ion-item>
<p><span class="span-left">MINEC, MINFIN</span><span class="span-right">05 JAN</span></p>
</div>
</ion-item> -->
</ion-item-sliding> </ion-item-sliding>
</ion-item-group> </ion-item-group>
</ion-list> </ion-list>
</div> </div>
<!-- <ion-fab vertical="bottom" horizontal="end" slot="fixed"> <div *ngIf="!taskslist">
<ion-fab-button> <div class="ion-padding custom-skeleton">
<ion-icon name="create" (click)="openExpedienteModal()"></ion-icon> <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</ion-fab-button> <ion-skeleton-text animated></ion-skeleton-text>
</ion-fab> --> <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</div>
<ion-list>
<ion-list-header>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content> </ion-content>
@@ -30,7 +30,6 @@ export class ExpedientePage implements OnInit {
ngOnInit() { ngOnInit() {
//Inicializar segment //Inicializar segment
this.segment = "expediente"; this.segment = "expediente";
this.loading();
this.LoadList(); this.LoadList();
} }
@@ -63,9 +62,6 @@ export class ExpedientePage implements OnInit {
}); });
} }
loading(){
this.loadingService.simpleLoading("A carregar...");
}
doRefresh(event) { doRefresh(event) {
this.LoadList(); this.LoadList();
@@ -3,8 +3,16 @@
<ion-title>Gabinete Digital</ion-title> <ion-title>Gabinete Digital</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-content> <ion-content>
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="chevron-down-circle-outline"
pullingText="deslize para actualizar"
refreshingSpinner="circles"
refreshingText="A actualizar...">
</ion-refresher-content>
</ion-refresher>
<ion-card color="#d4d5ca"> <ion-card color="#d4d5ca">
<ion-card-header> <ion-card-header>
<ion-card-title>Expediente</ion-card-title> <ion-card-title>Expediente</ion-card-title>
@@ -9,6 +9,7 @@ import { ProcessesService } from 'src/app/services/processes.service';
export class GabineteDigitalPage implements OnInit { export class GabineteDigitalPage implements OnInit {
segment:string; segment:string;
showLoader: boolean;
constructor(private processesbackend:ProcessesService) { } constructor(private processesbackend:ProcessesService) { }
@@ -24,7 +25,9 @@ export class GabineteDigitalPage implements OnInit {
} }
LoadCounts() { LoadCounts() {
this.showLoader = true;
this.processesbackend.GetTasksList("Expediente", true).subscribe(result =>{ this.processesbackend.GetTasksList("Expediente", true).subscribe(result =>{
this.showLoader = false;
this.count_exp_dailywork = result; this.count_exp_dailywork = result;
}); });
@@ -35,4 +38,12 @@ export class GabineteDigitalPage implements OnInit {
this.count_de_pr = "-"; this.count_de_pr = "-";
} }
doRefresh(event) {
this.LoadCounts();
setTimeout(() => {
event.target.complete();
}, 2000);
}
} }