mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-21 13:55:51 +00:00
Merge branch 'feature/home' into developer
This commit is contained in:
tiago.kayaya
@@ -13,7 +13,7 @@ import { HttpClientModule } from '@angular/common/http';
|
||||
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
|
||||
|
||||
|
||||
import { File } from '@ionic-native/File/ngx';
|
||||
//import { File } from '@ionic-native/File/ngx';
|
||||
import { WebView } from '@ionic-native/ionic-webview/ngx';
|
||||
import { FilePath } from '@ionic-native/file-path/ngx';
|
||||
import { Camera } from '@ionic-native/camera/ngx';
|
||||
@@ -35,7 +35,7 @@ import { IonicStorageModule } from '@ionic/storage';
|
||||
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
|
||||
InAppBrowser,
|
||||
Camera,
|
||||
File,
|
||||
//File,
|
||||
WebView,
|
||||
FilePath,
|
||||
],
|
||||
|
||||
@@ -8,7 +8,7 @@ import { HomePageRoutingModule } from './home-routing.module';
|
||||
|
||||
import { HomePage } from './home.page';
|
||||
/* import { IonicSelectableModule } from 'ionic-selectable'; */
|
||||
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@@ -16,6 +16,7 @@ import { HomePage } from './home.page';
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
HomePageRoutingModule,
|
||||
SharedModule
|
||||
],
|
||||
declarations: [HomePage]
|
||||
})
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<ion-tabs>
|
||||
<ion-tab-bar slot="bottom">
|
||||
|
||||
|
||||
<ion-tabs class="tab">
|
||||
<ion-tab-bar class="bottoms" slot="bottom">
|
||||
<ion-tab-button tab="events">
|
||||
<!-- <ion-icon name="home"></ion-icon> -->
|
||||
<ion-icon class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
|
||||
@@ -22,11 +24,16 @@
|
||||
<ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
|
||||
<ion-label>Acções</ion-label>
|
||||
</ion-tab-button>
|
||||
<!-- <ion-tab-button tab="search">
|
||||
<ion-tab-button tab="search">
|
||||
<ion-icon name="search"></ion-icon>
|
||||
<ion-label>Pesquisa</ion-label>
|
||||
<<<<<<< HEAD
|
||||
</ion-tab-button> -->
|
||||
<ion-tab-button hidden tab="chat">
|
||||
=======
|
||||
</ion-tab-button>
|
||||
<!-- <ion-tab-button tab="chat">
|
||||
>>>>>>> feature/home
|
||||
<ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
|
||||
<ion-label>Chat</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
@@ -25,4 +25,12 @@ ion-badge {/* */
|
||||
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline; */
|
||||
}
|
||||
|
||||
|
||||
.tab{
|
||||
.bottoms{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
@@ -7,12 +7,14 @@ import { IonicModule } from '@ionic/angular';
|
||||
import { EventsPageRoutingModule } from './events-routing.module';
|
||||
|
||||
import { EventsPage } from './events.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
EventsPageRoutingModule
|
||||
],
|
||||
declarations: [EventsPage],
|
||||
|
||||
@@ -1,234 +1,91 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ion-no-border" class="bg-blue">
|
||||
<div class="div-top-header">
|
||||
<div class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-logo">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
<div class="div-profile">
|
||||
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-buttons slot="end">
|
||||
<div class="toggleBox">
|
||||
<div (click)="changeProfile()" class="toggle">
|
||||
<input type="checkbox">
|
||||
<label for="" class="onbtn">PR</label>
|
||||
<label for="" class="ofbtn">MDGPR</label>
|
||||
</div>
|
||||
</div>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-label>
|
||||
<ion-item class="ion-text-right" lines="none">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h3 class="header-medium"> {{greetting}} Excelência <br />
|
||||
Ministro Director do Gabinete do<!-- <br /> -->
|
||||
Presidente da República
|
||||
</h3>
|
||||
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-label>
|
||||
</ion-toolbar>
|
||||
<!-- TABS -->
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
|
||||
<ion-segment-button value="Combinada">
|
||||
Combinada
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Oficial">
|
||||
Oficial
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Pessoal">
|
||||
Pessoal
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
<app-header></app-header>
|
||||
</ion-header>
|
||||
|
||||
<ion-content >
|
||||
<ion-content class="main bg-blue">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
|
||||
<ion-label>
|
||||
<p class="p-small">{{customDate}}</p>
|
||||
<p class="time ion-text-center">{{customDate}}</p>
|
||||
</ion-label>
|
||||
<ion-label>
|
||||
<p class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> eventos agendados para hoje</p>
|
||||
</ion-label>
|
||||
<app-calendar></app-calendar>
|
||||
<!-- <ion-item lines="none">
|
||||
<ion-icon slot="start" src="assets/images/icons-agenda.svg"></ion-icon>
|
||||
<label>A sua Agenda</label>
|
||||
</ion-item> -->
|
||||
<!-- COMBINADA -->
|
||||
<div [ngSwitch]="segment">
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<!-- <ion-list *ngSwitchCase="'Combinada'" >
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<ion-item lines="none"
|
||||
*ngFor="let event of eventsList"
|
||||
[routerLink]="['/home/events', event.EventId, 'events']">
|
||||
<div class="div-item-{{event.CalendarName}}">
|
||||
<div class="div-up">
|
||||
<div class="div-icon">
|
||||
<ion-icon slot="start" name="reader"></ion-icon>
|
||||
</div>
|
||||
<div class="div-content-{{event.CalendarName}}">
|
||||
<h3 class="capitalizeText">{{event.Subject}}</h3>
|
||||
<p>{{event.StartDate | date: 'hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-botton">
|
||||
<div class="div-botton-left">
|
||||
<ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
|
||||
</div>
|
||||
<div class="div-botton-middle">
|
||||
<p class="item-list-small capitalizeText">{{event.Location}}</p>
|
||||
</div>
|
||||
<div *ngIf="event.HasAttachments" class="div-botton-right">
|
||||
<ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
</ion-list> -->
|
||||
<ion-list *ngSwitchCase="'Combinada'">
|
||||
<div *ngIf="eventsList">
|
||||
<ion-item-sliding>
|
||||
<ion-item class="Rectangle" lines="none"
|
||||
*ngFor="let event of eventsList"
|
||||
[routerLink]="['/home/events', event.EventId, 'events']">
|
||||
<div class="content-{{profile}}-{{event.CalendarName}}">
|
||||
<div class="approve-event-time">
|
||||
<p>{{event.StartDate | date: 'hh:mm'}}</p>
|
||||
<p>{{event.EndDate | date: 'hh:mm'}}</p>
|
||||
</div>
|
||||
<div class="approve-event-detail">
|
||||
<p>{{event.Location}}</p>
|
||||
<h3>{{event.Subject}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</div>
|
||||
</ion-list>
|
||||
<!-- OFICIAL -->
|
||||
<!-- <ion-list *ngSwitchCase="'Oficial'">
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<ion-item lines="none"
|
||||
*ngFor="let event of officialeventsList"
|
||||
[routerLink]="['/home/events', event.EventId, 'events']">
|
||||
<div class="div-item-{{event.CalendarName}}">
|
||||
<div class="div-up">
|
||||
<div class="div-icon">
|
||||
<ion-icon slot="start" name="reader"></ion-icon>
|
||||
</div>
|
||||
<div class="div-content-{{event.CalendarName}}">
|
||||
<h3 class="capitalizeText">{{event.Subject}}</h3>
|
||||
<p>{{event.StartDate | date: 'hh:mm'}} - {{event.EndDate | date: 'hh:mm'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-botton">
|
||||
<div class="div-botton-left">
|
||||
<ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
|
||||
</div>
|
||||
<div class="div-botton-middle">
|
||||
<p class="item-list-small capitalizeText">{{event.Location}}</p>
|
||||
</div>
|
||||
<div class="div-botton-right">
|
||||
<ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
</ion-list> -->
|
||||
<ion-list *ngSwitchCase="'Oficial'">
|
||||
<div *ngIf="officialeventsList">
|
||||
<ion-item-sliding>
|
||||
<ion-item class="Rectangle" lines="none"
|
||||
*ngFor="let event of officialeventsList"
|
||||
[routerLink]="['/home/events', event.EventId, 'events']">
|
||||
<div class="content-{{profile}}-{{event.CalendarName}}">
|
||||
<div class="approve-event-time">
|
||||
<p>{{event.StartDate | date: 'hh:mm'}}</p>
|
||||
<p>{{event.EndDate | date: 'hh:mm'}}</p>
|
||||
</div>
|
||||
<div class="approve-event-detail">
|
||||
<p>{{event.Location}}</p>
|
||||
<h3>{{event.Subject}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</div>
|
||||
</ion-list>
|
||||
<!-- OFICIAL -->
|
||||
<!-- <ion-list *ngSwitchCase="'Pessoal'">
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<ion-item lines="none"
|
||||
*ngFor="let event of personaleventsList"
|
||||
[routerLink]="['/home/events', event.EventId, 'events']">
|
||||
<div class="div-item-{{event.CalendarName}}">
|
||||
<div class="div-up">
|
||||
<div class="div-icon">
|
||||
<ion-icon slot="start" name="reader"></ion-icon>
|
||||
</div>
|
||||
<div class="div-content-{{event.CalendarName}}">
|
||||
<h3 class="capitalizeText">{{event.Subject}}</h3>
|
||||
<p>{{event.StartDate | date: 'hh:mm' }} - {{event.EndDate | date: 'hh:mm'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-botton">
|
||||
<div class="div-botton-left">
|
||||
<ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
|
||||
</div>
|
||||
<div class="div-botton-middle">
|
||||
<p class="item-list-small capitalizeText">{{event.Location}}</p>
|
||||
</div>
|
||||
<div class="div-botton-right">
|
||||
<ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
</ion-list> -->
|
||||
<ion-list *ngSwitchCase="'Pessoal'">
|
||||
<div *ngIf="personaleventsList">
|
||||
<ion-item-sliding>
|
||||
<ion-item class="Rectangle" lines="none"
|
||||
*ngFor="let event of personaleventsList"
|
||||
[routerLink]="['/home/events', event.EventId, 'events']">
|
||||
<div class="content-{{profile}}-{{event.CalendarName}}">
|
||||
<div class="approve-event-time">
|
||||
<p>{{event.StartDate | date: 'hh:mm'}}</p>
|
||||
<p>{{event.EndDate | date: 'hh:mm'}}</p>
|
||||
</div>
|
||||
<div class="approve-event-detail">
|
||||
<p>{{event.Location}}</p>
|
||||
<h3>{{event.Subject}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</div>
|
||||
</ion-list>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
<div class="next-meeting">
|
||||
<div class="meeting-time">{{hoursMinutes}}</div>
|
||||
<div class="meeting-description"> "{{currentEvent}}"</div>
|
||||
</div>
|
||||
|
||||
<div class="conteiner-box">
|
||||
<div class="schedule">
|
||||
<div class="schedule-header">
|
||||
<div class="title">
|
||||
<ion-icon class="icon" slot="end" src="assets/images/icons-default-agenda.svg" ></ion-icon>
|
||||
<div class="text">A sua Agenda</div>
|
||||
</div>
|
||||
<ion-icon class="icon-next" slot="end" src="assets/images/icons-arrow-circle-arrow-right.svg" ></ion-icon>
|
||||
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li *ngFor="let event of eventsList"
|
||||
[routerLink]="['/home/events', event.EventId, 'events']">
|
||||
<div class="d-flex content-{{profile}}-{{event.CalendarName}}">
|
||||
<div class="schedule-time">
|
||||
<div class="time-start">{{event.StartDate | date: 'hh:mm'}}</div>
|
||||
<div class="time-end">{{event.EndDate | date: 'hh:mm'}}</div>
|
||||
</div>
|
||||
<div class="schedule-details">
|
||||
<div class="location">{{event.Location}}</div>
|
||||
<div class="description">{{event.Subject}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--
|
||||
<div class="resume">
|
||||
<div class="title">
|
||||
Resumo para Amnahã
|
||||
</div>
|
||||
<div class="event-num">4 eventos ageandados para amanhã</div>
|
||||
<div class="first-event-time">08:30 "Reunião Staff" no Palácio Presidencial</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="schedule">
|
||||
<div class="schedule-header">
|
||||
<div class="title">
|
||||
<ion-icon class="icon" slot="end" src="assets/images/icons-correspondencias.svg"></ion-icon>
|
||||
<div class="text">Correspondência por ler</div>
|
||||
</div>
|
||||
<ion-icon class="icon-next" slot="end" src="assets/images/icons-arrow-circle-arrow-right.svg" ></ion-icon>
|
||||
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li *ngFor = "let task of taskslist"
|
||||
[routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]">
|
||||
<div class="d-flex">
|
||||
<div class="schedule-date">
|
||||
<div class="time-end">{{task.CreateDate | date: 'd/M/yy'}}</div>
|
||||
<div class="time-start">{{task.CreateDate | date: 'hh:mm'}}</div>
|
||||
</div>
|
||||
<div class="schedule-details pointer">
|
||||
<div class="description">{{ task.Remetente }}</div>
|
||||
<div class="location">{{ task.Folio }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</ion-content>
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '~src/function.scss';
|
||||
|
||||
/* HEADER */
|
||||
.bg-blue{
|
||||
--background:#0782c9;
|
||||
@@ -266,4 +268,215 @@ ion-toolbar{
|
||||
bottom: 15px;
|
||||
right: 14px;
|
||||
color: #e16817;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// new
|
||||
.main{
|
||||
padding: 0px em(20px);
|
||||
}
|
||||
|
||||
.event-number{
|
||||
color: white;
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
color: var(--white);
|
||||
|
||||
bold{
|
||||
font-family: Roboto;
|
||||
font-size: 25px;
|
||||
text-align: right;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-family: Roboto;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
line-height: unset;
|
||||
}
|
||||
|
||||
.next-meeting{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0px 20px;
|
||||
margin-top: 15px;
|
||||
|
||||
.meeting-time {
|
||||
font-size: em(25px);
|
||||
font-family: Roboto;
|
||||
font-weight: 300;
|
||||
color: var(--white);
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.meeting-description {
|
||||
margin-top: 2px;
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.conteiner-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.schedule {
|
||||
max-width: 400px;
|
||||
font-family: Roboto;
|
||||
margin: 10px 0px;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
|
||||
border: solid 1px #e9e9e9;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 25px;
|
||||
.schedule-header{
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon{
|
||||
color: #e8e8e8;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.text{
|
||||
font-family: Roboto;
|
||||
font-size: 20px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
.icon-next {
|
||||
color: #e8e8e8;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
font-size: 35px;
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
ul{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
.d-flex{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
li{
|
||||
padding-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.schedule-time{
|
||||
margin-right: 10px;
|
||||
.time-start{
|
||||
color: #797979 !important;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
}
|
||||
.time-end{
|
||||
color: #797979 !important;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.schedule-date{
|
||||
width: 22%;
|
||||
color: #797979 !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
.schedule-details{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.location{
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
color: black;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.description{
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #0d89d1;
|
||||
}
|
||||
}
|
||||
.color{
|
||||
width: 5px;
|
||||
height: 40px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
background-color: #f05d5e;
|
||||
}
|
||||
}
|
||||
li:last-child{
|
||||
border-bottom: unset !important;
|
||||
padding-bottom: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.resume{
|
||||
.title{
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #797979;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.event-num, .first-event-time{
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 804px) {
|
||||
|
||||
.schedule:first-child {
|
||||
margin-right: 2%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 478px) {
|
||||
.schedule{
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 478px) {
|
||||
.schedule{
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,8 @@ import { AuthConnstants } from 'src/app/config/auth-constants';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { EventDetailPage } from './event-detail/event-detail.page';
|
||||
import { EventDetailModalPage } from './event-detail-modal/event-detail-modal.page';
|
||||
import { ProcessesService } from '../../services/processes.service';
|
||||
import { DailyWorkTask } from '../../models/dailyworktask.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-events',
|
||||
@@ -35,6 +37,7 @@ export class EventsPage implements OnInit {
|
||||
/* Set segment variable */
|
||||
segment:string;
|
||||
public profile:string;
|
||||
currentEvent: any;
|
||||
|
||||
eventsList: Event[];
|
||||
officialeventsList: Event[];
|
||||
@@ -46,8 +49,12 @@ export class EventsPage implements OnInit {
|
||||
combinedEvents: Event[];
|
||||
|
||||
customText = false;
|
||||
totalEvent=0;
|
||||
currentHoursMinutes: String;
|
||||
|
||||
showLoader: boolean;
|
||||
|
||||
taskslist:DailyWorkTask[];
|
||||
|
||||
constructor(private eventService: EventsService,
|
||||
private router: Router,
|
||||
@@ -55,8 +62,18 @@ export class EventsPage implements OnInit {
|
||||
public activatedRoute: ActivatedRoute,
|
||||
private alertController: AlertService,
|
||||
private modalController: ModalController,
|
||||
private authService: AuthService) {
|
||||
private authService: AuthService,
|
||||
private processes:ProcessesService) {
|
||||
this.prEventList = null;
|
||||
|
||||
// update hours and minutes
|
||||
setInterval(()=> {
|
||||
this.currentHoursMinutes = formatDate(new Date(), 'HH:MM', 'pt');
|
||||
}, 1000);
|
||||
|
||||
// list
|
||||
this.LoadList();
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -65,7 +82,22 @@ export class EventsPage implements OnInit {
|
||||
//Initialize profile as mdgpr
|
||||
this.profile = "mdgpr";
|
||||
console.log(this.profile);
|
||||
|
||||
|
||||
// set event list
|
||||
/* if(this.profile == "mdgpr"){
|
||||
this.eventService.getAllMdEvents(formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59').subscribe(res => {
|
||||
this.eventsList = res;
|
||||
console.log(this.eventsList);
|
||||
this.totalEvent = this.eventsList.length;
|
||||
});
|
||||
}
|
||||
else{
|
||||
this.eventService.getAllPrEvents(formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59').subscribe(res => {
|
||||
this.eventsList = res;
|
||||
this.totalEvent = this.eventsList.length;
|
||||
});
|
||||
|
||||
} */
|
||||
|
||||
this.showGreeting();
|
||||
|
||||
@@ -97,14 +129,18 @@ export class EventsPage implements OnInit {
|
||||
{
|
||||
case "Combinada":
|
||||
if(this.profile == "mdgpr"){
|
||||
this.eventService.getAllMdEvents(formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 00:00:00', formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59').subscribe(res => {
|
||||
this.eventService.getAllMdEvents(formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss', 'pt') /* + ' 00:00:00' */, formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59').subscribe(res => {
|
||||
this.eventsList = res;
|
||||
this.currentEvent = res[0].Subject;
|
||||
this.totalEvent = this.eventsList.length;
|
||||
this.showLoader = false;
|
||||
});
|
||||
}else{
|
||||
this.eventService.getAllPrEvents(formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 00:00:00', formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59').subscribe(res => {
|
||||
this.eventsList = res;
|
||||
console.log(this.eventsList);
|
||||
this.currentEvent = res[0].Subject;
|
||||
this.totalEvent = this.eventsList.length;
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
@@ -201,5 +237,32 @@ export class EventsPage implements OnInit {
|
||||
return await modal.present();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @returns time in format HH:MM
|
||||
*/
|
||||
get hoursMinutes():String {
|
||||
|
||||
return this.currentHoursMinutes;
|
||||
|
||||
}
|
||||
|
||||
LoadList()
|
||||
{
|
||||
this.processes.GetTasksList("Expediente", false).subscribe(result => {
|
||||
this.taskslist = new Array();
|
||||
result.forEach(element => {
|
||||
let task: DailyWorkTask = {
|
||||
"SerialNumber": element.serialNumber,
|
||||
"Folio": element.workflowInstanceFolio,
|
||||
"Senders": element.originator.email,
|
||||
"CreateDate": formatDate(new Date(element.taskStartDate), 'yyyy-MM-dd HH:mm', 'pt'),
|
||||
"DocumentURL": element.formURL,
|
||||
"Remetente": element.workflowInstanceDataFields.Remetente
|
||||
}
|
||||
this.taskslist.push(task);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,147 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Pesquisa</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<!-- HEADER-->
|
||||
<ion-header class="ion-no-border header-main d-flex ion-justify-content-between">
|
||||
<ion-form>
|
||||
<div class="d-flex search-input-container">
|
||||
<div class="icon">
|
||||
<ion-icon class="icon-z" slot="end" name="search"></ion-icon>
|
||||
</div>
|
||||
<div class="input-text d-flex ion-align-items-center">
|
||||
<ion-input class="search-input" type="search" placeholder="Pesquisar"></ion-input>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ion-form>
|
||||
<div class="icon-z icon-most-searched-word-open">
|
||||
<ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
|
||||
</div>
|
||||
<div class="profile">
|
||||
<ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
|
||||
</div>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-form>
|
||||
<div class="div-search">
|
||||
<ion-input class="search-input" type="search" placeholder="FMI"></ion-input>
|
||||
<ion-icon class="icon-search" slot="end" name="search"></ion-icon>
|
||||
<ion-content class="content">
|
||||
|
||||
<!-- search result type-->
|
||||
<div class="options">
|
||||
<div class="container ion-justify-content-between ion-align-items-center">
|
||||
<div class="d-flex ion-justify-content-center ion-text-center">
|
||||
<div class="button">
|
||||
<p>Relatório</p>
|
||||
<ion-label class="label">10</ion-label>
|
||||
</div>
|
||||
<div class="button">
|
||||
<p>Relatório</p>
|
||||
<ion-label class="label">10</ion-label>
|
||||
</div>
|
||||
<div class="button">
|
||||
<p>Relatório</p>
|
||||
<ion-label class="label">10</ion-label>
|
||||
</div>
|
||||
<div class="button">
|
||||
<p>Relatório</p>
|
||||
<ion-label class="label">10</ion-label>
|
||||
</div>
|
||||
<div class="button">
|
||||
<p>Relatório</p>
|
||||
<ion-label class="label">10</ion-label>
|
||||
</div>
|
||||
<div class="button">
|
||||
<p>Relatório</p>
|
||||
<ion-label class="label">10</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-z icon-most-searched-word-open">
|
||||
<ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-form>
|
||||
|
||||
<div class="d-flex">
|
||||
<!-- most searched word-->
|
||||
<div class="most-searched-words">
|
||||
<p>Palavas mais pesquisdas</p>
|
||||
</div>
|
||||
|
||||
<!-- search result-->
|
||||
<div class="search-result">
|
||||
<div class="header">
|
||||
<div class="d-flex ion-justify-content-between ion-align-items-center">
|
||||
<div class="d-flex sort-by ion-justify-content-center">
|
||||
<p><span class="order">Order por:</span><span class="order-labal">Mais Recente</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<ion-icon src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="d-flex">
|
||||
<div class="icon">
|
||||
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="content ion-align-items-center">
|
||||
<p class="result-name">title</p>
|
||||
<div class="d-flex ion-justify-content-between ">
|
||||
<span>MINEC, MINFIN</span>
|
||||
<span>13/04/2020</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex">
|
||||
<div class="icon">
|
||||
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p class="result-name">title</p>
|
||||
<div class="d-flex ion-justify-content-between">
|
||||
<span>MINEC, MINFIN</span>
|
||||
<span>13/04/2020</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex">
|
||||
<div class="icon">
|
||||
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p class="result-name">title</p>
|
||||
<div class="d-flex ion-justify-content-between">
|
||||
<span>MINEC, MINFIN</span>
|
||||
<span>13/04/2020</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex">
|
||||
<div class="icon">
|
||||
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p class="result-name">title</p>
|
||||
<div class="d-flex ion-justify-content-between">
|
||||
<span>MINEC, MINFIN</span>
|
||||
<span>13/04/2020</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex">
|
||||
<div class="icon">
|
||||
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p class="result-name">title</p>
|
||||
<div class="d-flex ion-justify-content-between">
|
||||
<span>MINEC, MINFIN</span>
|
||||
<span>13/04/2020</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -1,18 +1,210 @@
|
||||
.div-search{
|
||||
width: 94%;
|
||||
margin: 3%;
|
||||
border: 0.5px solid #333;
|
||||
padding: 0 5px 0 5px;
|
||||
overflow: auto;
|
||||
.header-main{
|
||||
padding: 5px 18px;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 25px;
|
||||
.search-input-container{
|
||||
max-width: 309px;
|
||||
background-color: white;
|
||||
border-radius: 27.5px;
|
||||
border: solid 1px #ebebeb;
|
||||
.icon{
|
||||
color: #797979;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
align-items: center;
|
||||
}
|
||||
.icon-z{
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
.icon-z{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 45px;
|
||||
}
|
||||
.profile{
|
||||
display: none;
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// search result type
|
||||
.options{
|
||||
margin-top: 10px;
|
||||
.container{
|
||||
display: flex;
|
||||
.d-flex{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.button{
|
||||
width: 116px;
|
||||
border: solid 1px #e9e9e9;
|
||||
margin: 0px 5px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 20px;
|
||||
p{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: Roboto;
|
||||
color: #0d89d1;
|
||||
font-size: 15px;
|
||||
}
|
||||
.label{
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #797979;
|
||||
}
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.button:hover{
|
||||
background-color: #42b9fe;
|
||||
color: white;
|
||||
p{
|
||||
color: white;
|
||||
}
|
||||
.label{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
display: none;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
ion-icon{
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.search-input{
|
||||
width: 90%;
|
||||
float: left;
|
||||
|
||||
|
||||
|
||||
.d-flex{
|
||||
display: flex;
|
||||
// search result
|
||||
.search-result{
|
||||
width: 100%;
|
||||
border-bottom: unset;
|
||||
padding: 0px 20px;
|
||||
|
||||
.header{
|
||||
border-top: 1px solid #ebebeb;
|
||||
.sort-by{
|
||||
width: 100%;
|
||||
.order{
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color:#797979
|
||||
}
|
||||
.order-labal{
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
ion-icon{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
ul{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
li{
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-top: 1px solid #ebebeb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon{
|
||||
font-size: 35px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
p{
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
line-height: 1.67;
|
||||
}
|
||||
span{
|
||||
height: 15px;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #797979;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// most searched word
|
||||
.most-searched-words{
|
||||
width: 400px;
|
||||
display: none;
|
||||
p{
|
||||
height: 24px;
|
||||
font-family: Roboto;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
|
||||
.header-main {
|
||||
background-color: #0782c9;
|
||||
.profile{
|
||||
display: inline-block;
|
||||
}
|
||||
.icon-most-searched-word-open{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.options{
|
||||
.container{
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
.icon{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
|
||||
.most-searched-words{
|
||||
display: inline-block !important;
|
||||
}
|
||||
.search-result{
|
||||
border-left: 1px solid #d8d8d8;
|
||||
.header{
|
||||
border-top: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-search{
|
||||
width: 8%;
|
||||
padding: 8px 3px 5px 2px;
|
||||
font-size: 25px;
|
||||
float: right;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search',
|
||||
@@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class SearchPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
constructor(private modalController: ModalController) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,14 +1,26 @@
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="div-top-header">
|
||||
<div class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-logo">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
<div class="div-profile">
|
||||
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-grid>
|
||||
|
||||
<ion-row class="div-top-header ion-justify-content-between">
|
||||
<ion-col>
|
||||
<div (click)="openSearch()" class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div class="div-logo">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div class="div-profile">
|
||||
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
</ion-grid>
|
||||
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
@@ -1,28 +1,32 @@
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
background-color: #0782c9;
|
||||
overflow: auto;
|
||||
padding-top: 15px;
|
||||
border: 0!important;
|
||||
@import '~src/function.scss';
|
||||
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
float: left;
|
||||
margin: 0 0 0 10px
|
||||
}
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: 140px;
|
||||
margin: 5px 0 0px 71px;
|
||||
float: left;
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.div-top-header{
|
||||
margin: 0 auto;
|
||||
background-color: #0782c9;
|
||||
overflow: auto;
|
||||
padding-top: em(15px);
|
||||
border: 0!important;
|
||||
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
margin: 0 0 0 10px
|
||||
}
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: em(140px);
|
||||
margin: 0px auto;
|
||||
margin-top: 5px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
margin-right: 10px;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { SearchPage } from 'src/app/pages/search/search.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
@@ -7,9 +9,21 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class HeaderPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
constructor(private modalController: ModalController) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
async openSearch() {
|
||||
const modal = await this.modalController.create({
|
||||
component: SearchPage,
|
||||
cssClass: 'search',
|
||||
componentProps: {
|
||||
}
|
||||
});
|
||||
return await modal.present();
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
|
||||
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g stroke="#42B9FE" stroke-width="2">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M15.5 7.5L9.5 13 15.5 18.5" transform="translate(-969 -156) translate(421 151) translate(328) translate(220 5) matrix(0 -1 -1 0 25.5 25.5)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 544 B |
@@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g transform="translate(-325 -562) translate(20 542) translate(305 20)">
|
||||
<circle cx="17.5" cy="17.5" r="17.5" fill="#42B9FE"/>
|
||||
<path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 9L14 18 23 27" transform="matrix(-1 0 0 1 37 0)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 544 B |
@@ -0,0 +1,40 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
|
||||
<defs>
|
||||
<filter id="fapb0fzm7a" width="116%" height="123.6%" x="-8%" y="-5.9%" filterUnits="objectBoundingBox">
|
||||
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
|
||||
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
|
||||
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.187390734 0"/>
|
||||
</filter>
|
||||
<filter id="pi5d2sdvoc" width="116%" height="123.6%" x="-8%" y="-5.9%" filterUnits="objectBoundingBox">
|
||||
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
|
||||
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.187390734 0"/>
|
||||
</filter>
|
||||
<path id="6jl3ycknhb" d="M24 19.355H1c-.552 0-1-.448-1-1V3.419c0-.552.448-1 1-1h23c.552 0 1 .448 1 1v14.936c0 .552-.448 1-1 1z"/>
|
||||
<path id="ip12esh68d" d="M2.42 19.355L25 4.032V3.42c0-.552-.448-1-1-1h-1.42L0 17.742v.613c0 .552.448 1 1 1h1.42z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path stroke="#591E00" d="M15.935.5l.5 2.226H9.371V1l6.564-.5z" transform="translate(-40 -461) translate(20 441) translate(20 20) translate(5 7)"/>
|
||||
<g transform="translate(-40 -461) translate(20 441) translate(20 20) translate(5 7)">
|
||||
<use fill="#000" filter="url(#fapb0fzm7a)" xlink:href="#6jl3ycknhb"/>
|
||||
<path fill="#CE571A" stroke="#EBEBEB" stroke-linejoin="square" stroke-opacity=".194" d="M24 2.92l.5 15.435-23.5.5L.5 3.419l23.5-.5z"/>
|
||||
</g>
|
||||
<g transform="translate(-40 -461) translate(20 441) translate(20 20) translate(5 7)">
|
||||
<use fill="#000" filter="url(#pi5d2sdvoc)" xlink:href="#ip12esh68d"/>
|
||||
<use fill="#8B3002" xlink:href="#ip12esh68d"/>
|
||||
</g>
|
||||
<path fill="#797979" d="M2.92 1.613h1.419c.276 0 .5.224.5.5v.306h-2.42v-.306c0-.276.224-.5.5-.5z" transform="translate(-40 -461) translate(20 441) translate(20 20) translate(5 7)"/>
|
||||
<path fill="#591E00" d="M3.629 19.355c.223 0 .403.18.403.403v.403h-.806v-.403c0-.223.18-.403.403-.403z" transform="translate(-40 -461) translate(20 441) translate(20 20) translate(5 7) matrix(1 0 0 -1 0 39.516)"/>
|
||||
<path fill="#797979" d="M20.661 1.613h1.42c.276 0 .5.224.5.5v.306h-2.42v-.306c0-.276.224-.5.5-.5z" transform="translate(-40 -461) translate(20 441) translate(20 20) translate(5 7)"/>
|
||||
<path fill="#591E00" d="M21.371 19.355c.223 0 .403.18.403.403v.403h-.806v-.403c0-.223.18-.403.403-.403z" transform="translate(-40 -461) translate(20 441) translate(20 20) translate(5 7) matrix(1 0 0 -1 0 39.516)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
|
||||
<defs>
|
||||
<linearGradient id="bqyepfdqpc" x1="0%" x2="100%" y1="50%" y2="50%">
|
||||
<stop offset="0%" stop-color="#D30A0A"/>
|
||||
<stop offset="100%" stop-color="#B50202"/>
|
||||
</linearGradient>
|
||||
<filter id="cfta7yu3sa" width="117.4%" height="117.4%" x="-8.7%" y="-4.3%" filterUnits="objectBoundingBox">
|
||||
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
|
||||
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
|
||||
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.187390734 0"/>
|
||||
</filter>
|
||||
<rect id="a1lq6lsipb" width="23" height="23" x="0" y="0" rx="1"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g transform="translate(-40 -265) translate(20 245) translate(20 20) translate(6 6)">
|
||||
<rect width="21.357" height="23" x=".821" y=".821" fill="#FFF" rx="1"/>
|
||||
<g>
|
||||
<use fill="#000" filter="url(#cfta7yu3sa)" xlink:href="#a1lq6lsipb"/>
|
||||
<rect width="22" height="22" x=".5" y=".5" fill="#FFF" fill-opacity=".6" stroke="#EBEBEB" stroke-linejoin="square" stroke-opacity=".194" rx="1"/>
|
||||
</g>
|
||||
<path fill="#797979" stroke="#797979" stroke-linejoin="round" d="M3.286 12.321L3.286 9.036 6.571 9.036 6.571 12.321zM3.286 18.893L3.286 15.607 6.571 15.607 6.571 18.893zM9.857 12.321L9.857 9.036 13.143 9.036 13.143 12.321zM9.857 18.893L9.857 15.607 13.143 15.607 13.143 18.893zM16.429 12.321L16.429 9.036 19.714 9.036 19.714 12.321zM16.429 18.893L16.429 15.607 19.714 15.607 19.714 18.893z"/>
|
||||
<path fill="url(#bqyepfdqpc)" d="M.5 0h22c.276 0 .5.224.5.5v4.429H0V.5C0 .224.224 0 .5 0z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g transform="translate(-337 -26) translate(337 26)">
|
||||
<circle cx="22.5" cy="22.5" r="22.5" fill="#E0E9EE"/>
|
||||
<g>
|
||||
<g stroke="#061B52" stroke-width="2" transform="translate(11 11) translate(6)">
|
||||
<circle cx="7.714" cy="7.714" r="6.714"/>
|
||||
<path stroke-linecap="round" d="M12.857 12.857L17.357 17.357"/>
|
||||
</g>
|
||||
<g fill="#061B52" transform="translate(11 11) translate(.857 15.857)">
|
||||
<rect width="2" height="8" x="3" rx="1"/>
|
||||
<rect width="8" height="2" y="3" rx="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 886 B |
@@ -0,0 +1,40 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
|
||||
<defs>
|
||||
<filter id="u8uebrwgha" width="116%" height="123.6%" x="-8%" y="-5.9%" filterUnits="objectBoundingBox">
|
||||
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
|
||||
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
|
||||
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.187390734 0"/>
|
||||
</filter>
|
||||
<filter id="ddryqt9l8c" width="116%" height="123.6%" x="-8%" y="-5.9%" filterUnits="objectBoundingBox">
|
||||
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
|
||||
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.187390734 0"/>
|
||||
</filter>
|
||||
<path id="4bqjvg5qab" d="M24 19.355H1c-.552 0-1-.448-1-1V3.419c0-.552.448-1 1-1h23c.552 0 1 .448 1 1v14.936c0 .552-.448 1-1 1z"/>
|
||||
<path id="8ipw8ky0bd" d="M2.42 19.355L25 4.032V3.42c0-.552-.448-1-1-1h-1.42L0 17.742v.613c0 .552.448 1 1 1h1.42z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path stroke="#591E00" d="M15.935.5l.5 2.226H9.371V1l6.564-.5z" transform="translate(-40 -562) translate(20 542) translate(20 20) translate(5 7)"/>
|
||||
<g transform="translate(-40 -562) translate(20 542) translate(20 20) translate(5 7)">
|
||||
<use fill="#000" filter="url(#u8uebrwgha)" xlink:href="#4bqjvg5qab"/>
|
||||
<path fill="#CE571A" stroke="#EBEBEB" stroke-linejoin="square" stroke-opacity=".194" d="M24 2.92l.5 15.435-23.5.5L.5 3.419l23.5-.5z"/>
|
||||
</g>
|
||||
<g transform="translate(-40 -562) translate(20 542) translate(20 20) translate(5 7)">
|
||||
<use fill="#000" filter="url(#ddryqt9l8c)" xlink:href="#8ipw8ky0bd"/>
|
||||
<use fill="#8B3002" xlink:href="#8ipw8ky0bd"/>
|
||||
</g>
|
||||
<path fill="#797979" d="M2.92 1.613h1.419c.276 0 .5.224.5.5v.306h-2.42v-.306c0-.276.224-.5.5-.5z" transform="translate(-40 -562) translate(20 542) translate(20 20) translate(5 7)"/>
|
||||
<path fill="#591E00" d="M3.629 19.355c.223 0 .403.18.403.403v.403h-.806v-.403c0-.223.18-.403.403-.403z" transform="translate(-40 -562) translate(20 542) translate(20 20) translate(5 7) matrix(1 0 0 -1 0 39.516)"/>
|
||||
<path fill="#797979" d="M20.661 1.613h1.42c.276 0 .5.224.5.5v.306h-2.42v-.306c0-.276.224-.5.5-.5z" transform="translate(-40 -562) translate(20 542) translate(20 20) translate(5 7)"/>
|
||||
<path fill="#591E00" d="M21.371 19.355c.223 0 .403.18.403.403v.403h-.806v-.403c0-.223.18-.403.403-.403z" transform="translate(-40 -562) translate(20 542) translate(20 20) translate(5 7) matrix(1 0 0 -1 0 39.516)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g transform="translate(-287 -36) translate(18 24) translate(269 12)">
|
||||
<path fill="#FFF" d="M5 5H12.777999999999999V6H5z"/>
|
||||
<circle cx="7.778" cy="5.556" r="1.111" fill="#FFF"/>
|
||||
<g>
|
||||
<circle cx="12.5" cy="12.5" r="12.5" fill="#E0E9EE"/>
|
||||
<g stroke="#061B52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M6.782 0.163L6.782 12.94" transform="rotate(45 2.6 16.764) rotate(-90 6.782 6.552)"/>
|
||||
<path d="M6.782 0.163L6.782 12.94" transform="rotate(45 2.6 16.764)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 940 B |
@@ -0,0 +1,18 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g transform="translate(-20 -278) translate(20 224) translate(0 46) translate(0 8)">
|
||||
<path fill="#FFF" stroke="#0782C9" d="M21.351 2.5c.415 0 .79.168 1.061.44.271.27.44.646.44 1.06h0v20.297l-1.318 1.354-1.8 1.849H7.839c-.414 0-.79-.168-1.06-.44-.272-.27-.44-.646-.44-1.06h0V4c0-.414.168-.79.44-1.06.27-.272.646-.44 1.06-.44h0z"/>
|
||||
<rect width="9.73" height="1" x="9.73" y="8" fill="#0782C9" rx=".5"/>
|
||||
<rect width="9.73" height="1" x="9.73" y="11" fill="#0782C9" rx=".5"/>
|
||||
<rect width="9.73" height="1" x="9.73" y="14" fill="#0782C9" rx=".5"/>
|
||||
<rect width="9.73" height="1" x="9.73" y="17" fill="#0782C9" rx=".5"/>
|
||||
<rect width="5.351" height="1" x="9.73" y="20" fill="#0782C9" rx=".5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,60 @@
|
||||
|
||||
// =============== Custom function ==============================
|
||||
|
||||
// convert string number to int or double
|
||||
@function to-number($value) {
|
||||
@if type-of($value) == 'number' {
|
||||
@return $value;
|
||||
} @else if type-of($value) != 'string' {
|
||||
@error 'Value for `to-number` should be a number or a string.';
|
||||
}
|
||||
|
||||
$result: 0;
|
||||
$digits: 0;
|
||||
$minus: str-slice($value, 1, 1) == '-';
|
||||
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
|
||||
|
||||
@for $i from if($minus, 2, 1) through str-length($value) {
|
||||
$character: str-slice($value, $i, $i);
|
||||
|
||||
@if (index(map-keys($numbers), $character) or $character == '.') {
|
||||
@if $character == '.' {
|
||||
$digits: 1;
|
||||
} @else if $digits == 0 {
|
||||
$result: $result * 10 + map-get($numbers, $character);
|
||||
} @else {
|
||||
$digits: $digits * 10;
|
||||
$result: $result + map-get($numbers, $character) / $digits;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return if($minus, -$result, $result);;
|
||||
}
|
||||
|
||||
// convert px to rem
|
||||
@function rem($size) {
|
||||
$remSize: to-number($size) / 16;
|
||||
//Default font size on html is 16px;
|
||||
@return #{$remSize}rem;
|
||||
}
|
||||
|
||||
// convert px to em
|
||||
@function em($size) {
|
||||
$remSize: to-number($size) / 16px;
|
||||
@return #{$remSize}em;
|
||||
}
|
||||
|
||||
// convert pt to rem
|
||||
@function pt-rem($size) {
|
||||
$pxSize: to-number($size) * 1.328147;
|
||||
$remSize: $pxSize / 16;
|
||||
@return #{$remSize}rem;
|
||||
}
|
||||
|
||||
// convert pt to em
|
||||
@function pt-em($size) {
|
||||
$pxSize: to-number($size) * 1.328147;
|
||||
$remSize: $pxSize / 16;
|
||||
@return #{$remSize}em;
|
||||
}
|
||||
Reference in New Issue
Block a user