peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-20 21:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styling events to approve from Agenda module

Browse Source
This commit is contained in:
tiago.kayaya
2021-03-30 09:12:51 +01:00
parent 7ee9352a59
commit 3f5fd640fa
3 changed files with 126 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/agenda/event-list/event-list.component.html
+45 -57
View File
@@ -1,19 +1,8 @@
<ion-header class="ion-no-border px-20">
<ion-header class="ion-no-border">
<div class="header-content">
<div class="header-icon-left">
<ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
</div>
<div class="header-title">
<label>1Eventos para Aprovação</label>
<label>Eventos para Aprovação</label>
</div>
<!-- <ion-toolbar>
<ion-buttons slot="start">
<ion-back-button (click) ="close()"></ion-back-button>
</ion-buttons>
<ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
<ion-title>Eventos para Aprovação</ion-title>
</ion-toolbar> -->
<ion-toolbar>
<ion-segment [(ngModel)]="profile">
<ion-segment-button value="MDGPR">
@@ -33,48 +22,47 @@
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<div [ngSwitch]="profile">
<ion-list *ngSwitchCase="'MDGPR'">
<div *ngIf="eventsMDGPRList">
<ion-list>
<ion-item-sliding>
<ion-item class="Rectangle" lines="none"
*ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber, event)">
<div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}}">
<div class="approve-event-time">
<p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
<p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
</div>
<div class="approve-event-detail">
<p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p>
<p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p>
<h3>{{event.workflowInstanceDataFields.Subject}}</h3>
</div>
</div>
</ion-item>
</ion-item-sliding>
</ion-list>
</div>
</ion-list>
<ion-list *ngSwitchCase="'PR'">
<div *ngIf="eventsPRList">
<ion-item-sliding>
<ion-item class="Rectangle width-100" lines="none"
*ngFor="let event of eventsPRList" (click)="openApproveModal(event.serialNumber)">
<div class="content-pr-{{event.workflowInstanceDataFields.Agenda}}">
<div class="approve-event-time">
<p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
<p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
</div>
<div class="approve-event-detail">
<p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p>
<p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p>
<h3>{{event.workflowInstanceDataFields.Subject}}</h3>
</div>
</div>
</ion-item>
</ion-item-sliding>
</div>
</ion-list>
</div>
<div class="main-content" [ngSwitch]="profile" *ngIf="eventsMDGPRList">
<!-- <div class="header-content width-100"> -->
<!-- </div> -->
<ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
<ion-item
class="item ion-no-padding width-100"
*ngFor="let event of eventsMDGPRList"
(click)="openApproveModal(event.serialNumber)">
<div class="event-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
<div class="approve-event-time">
<p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
<p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
</div>
<div class="approve-event-detail">
<p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p>
<p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p>
<h3>{{event.workflowInstanceDataFields.Subject}}</h3>
</div>
</div>
</ion-item>
</ion-list>
<ion-list class="width-100" *ngSwitchCase="'PR'">
<div class="width-100" *ngIf="eventsPRList">
<ion-item
class=" ion-no-padding width-100"
*ngFor="let event of eventsPRList"
(click)="openApproveModal(event.serialNumber)">
<div class="item event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
<div class="approve-event-time">
<p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
<p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
</div>
<div class="approve-event-detail">
<p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p>
<p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p>
<h3>{{event.workflowInstanceDataFields.Subject}}</h3>
</div>
</div>
</ion-item>
</div>
</ion-list>
</div>
</ion-content>
src/app/shared/agenda/event-list/event-list.component.scss
+80 -81
View File
@@ -1,7 +1,10 @@
:host{
padding: 30px 20px 0 20px !important;
margin: 0;
}
.header-content{
overflow: auto;
margin: 0 auto;
padding-top: 25px;
}
.header-icon-left{
font-size: 33px;
@@ -9,89 +12,85 @@
float: left;
}
.header-title{
font-family: Roboto;
font-size: 25px;
margin: 0 5px 0 5px;
padding: 0;
color:#000;
float: left;
}
ion-item-sliding{
margin-top: 5px;
}
.Rectangle {
border-radius: 15px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
border: solid 1px #e9e9e9;
background-color: var(--white);
padding: 10px;
margin-bottom: 10px;
overflow: auto;
}
.content-mdgpr-Oficial{
border-radius: 5px;
border-right: 5px solid #99e47b;
overflow: auto;
}
.content-mdgpr-Pessoal{
border-radius: 5px;
border-right: 5px solid #958bfc;
overflow: auto;
}
.content-pr-Oficial{
border-radius: 5px;
border-right: 5px solid #ffb703;
overflow: auto;
}
.content-pr-Pessoal{
border-radius: 5px;
border-right: 5px solid #f05d5e;
overflow: auto;
}
.approve-event-time{
float: left;
}
.approve-event-time p{
width: 33px;
font-family: Roboto;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: var(--Antartic-grey);
margin: 0;
padding: 0;
}
.approve-event-detail{
float: left;
margin-left: 10px;
}
.approve-event-detail p{
font-family: Roboto;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: var(--black);
margin: 0;
padding: 0;
}
.approve-event-detail h3{
font-family: Roboto;
font-size: 15px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #0d89d1;
margin: 0;
padding: 0;
}
.main-content{
margin-top: 20px;
.item{
--inner-padding-end: 0 !important;
--inner-padding-top: 10px;
--inner-padding-bottom:10px;
}
.event-pr-Oficial{
background-color: var(--white);
border-radius: 5px;
border-right: 5px solid #99e47b;
overflow: auto;
}
.event-pr-Pessoal{
background-color: var(--white);
border-radius: 5px;
border-right: 5px solid #958bfc;
overflow: auto;
}
.event-mdgpr-Oficial{
border-radius: 5px;
border-right: 5px solid #ffb703;
overflow: auto;
}
.event-mdgpr-Pessoal{
border-radius: 5px;
border-right: 5px solid #f05d5e;
overflow: auto;
}
.approve-event-time{
float: left;
}
.approve-event-time p{
width: 33px;
font-family: Roboto;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: var(--Antartic-grey);
margin: 0;
padding-bottom: 10px;
}
.approve-event-detail{
float: left;
margin-left: 10px;
}
.approve-event-detail p{
//width: 250px;
font-family: Roboto;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: var(--black);
margin: 0;
padding-bottom: 10px;
}
.approve-event-detail h3{
width: 250px;
font-family: Roboto;
font-size: 15px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #0d89d1;
margin: 0;
padding: 0;
}
}