Styled book-meeting-modal

This commit is contained in:
Tiago Kayaya
2020-11-10 16:44:38 +01:00
parent 247c6e0a51
commit 87d643f451
19 changed files with 628 additions and 44 deletions
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BookMeetingModalPage } from './book-meeting-modal.page';
const routes: Routes = [
{
path: '',
component: BookMeetingModalPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class BookMeetingModalPageRoutingModule {}
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { BookMeetingModalPageRoutingModule } from './book-meeting-modal-routing.module';
import { BookMeetingModalPage } from './book-meeting-modal.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
BookMeetingModalPageRoutingModule
],
declarations: [BookMeetingModalPage]
})
export class BookMeetingModalPageModule {}
@@ -0,0 +1,102 @@
<ion-content>
<ion-item lines="none">
<ion-label class="title">Convocar Reunião</ion-label>
</ion-item>
<div class="ion-item-container">
<ion-input placeholder="Assunto"></ion-input>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Venue"></ion-input>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Data início"></ion-input>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Data fim"></ion-input>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select value="Nunca" interface="action-sheet" Cancel-text="Cancelar" required>
<ion-select-option Pessoal="Reunião">Nunca</ion-select-option>
<ion-select-option Oficial="Viagem">Sim</ion-select-option>
</ion-select>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Intervenientes"></ion-input>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Com Conhecimento"></ion-input>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Detalhes"></ion-input>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-item lines="none">
<p>
<ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
</p>
<p>
<ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
</p>
</ion-item>
</ion-toolbar>
</ion-footer>
@@ -0,0 +1,69 @@
.title{
font-family: Roboto;
font-size: 25px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #000000;
margin: 28px 0 8px 5px;
}
.container-div{
margin-bottom: 15px;
overflow: auto;
}
.ion-item-container{
width: 360px;
margin: 15px auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 10px;
}
.ion-item-class-2{
width: 360px;
margin: 0px auto;
}
.ion-icon-class{
width: 45px;
height: 45px;
float: left;
padding: 10px;
font-size: 25px;
}
.ion-input-class{
width: 315px;
height: 45px;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 10px;
float: left;
}
.container-footer{
margin:0 auto;
overflow: auto;
}
.button-cancel {
width: 170px;
height: 44px;
border-radius: 22.5px;
--background: #e0e9ee;
--color: #061b52;
margin:10px;
}
.button-save {
width: 170px;
height: 44px;
border-radius: 22.5px;
--background: #42b9fe;
--color:#ffffff;
margin:10px;
}
.text-input{
width: 100%;
border: 1px solid #ebebeb;
margin: 0px 15px 15px 0px;
padding: 0 !important;
border-radius: 5px;
}
@@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { BookMeetingModalPage } from './book-meeting-modal.page';
describe('BookMeetingModalPage', () => {
let component: BookMeetingModalPage;
let fixture: ComponentFixture<BookMeetingModalPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BookMeetingModalPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(BookMeetingModalPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,29 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-book-meeting-modal',
templateUrl: './book-meeting-modal.page.html',
styleUrls: ['./book-meeting-modal.page.scss'],
})
export class BookMeetingModalPage implements OnInit {
constructor(private modalController: ModalController,
private router:Router,) { }
ngOnInit() {
}
close(){
this.router.navigate(['/home/gabinete-digital/expediente']);
this.modalController.dismiss(null);
}
cancelTask(){
this.modalController.dismiss(null);
}
saveTask(){
}
}
@@ -1,9 +1,84 @@
<ion-header>
<ion-toolbar>
<ion-title>expedient-task-modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item lines="none">
<ion-label class="title">Solicitar Parecer</ion-label>
</ion-item>
<div class="ion-item-container">
<ion-input placeholder="Assunto"></ion-input>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input class="add-border" placeholder="Descrição"></ion-input>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select value="Normal" interface="action-sheet" Cancel-text="Cancelar" required>
<ion-select-option Pessoal="Reunião">Normal</ion-select-option>
<ion-select-option Oficial="Viagem">Urgente</ion-select-option>
<ion-select-option Oficial="Viagem">Muito Urgente</ion-select-option>
<ion-select-option Oficial="Viagem">Urgentíssimo</ion-select-option>
</ion-select>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
</div>
<div class="ion-input-class-no-height">
<ion-item lines="none">
<ion-button slot="end"><ion-icon name="people"></ion-icon></ion-button>
<ion-list>
<ion-item lines="none">segpr@exemplo.gov.ao</ion-item>
<ion-item lines="none">segpr@exemplo.gov.ao</ion-item>
</ion-list>
</ion-item>
<!-- <ion-input class="add-border" placeholder="Adicionar Destinatários"></ion-input> -->
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input class="add-border" placeholder="Adicionar CC"></ion-input>
</div>
</div>
</div>
<div class="ion-item-container-no-border">
<ion-item lines="none">
<ion-icon slot="start" src="assets/images/icons-attach-doc.svg"></ion-icon>
<ion-label>Anexar Documentos</ion-label>
</ion-item>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-item lines="none">
<p>
<ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
</p>
<p>
<ion-button class="button-save" shape="round" (click)="saveTask()">Guardar</ion-button>
</p>
</ion-item>
</ion-toolbar>
</ion-footer>
@@ -0,0 +1,73 @@
.title{
font-family: Roboto;
font-size: 25px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #000000;
margin: 28px 0 8px 8px;
}
.container-div{
margin-bottom: 15px;
overflow: auto;
}
.ion-item-container{
width: 360px;
margin: 15px auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
}
.ion-item-container-no-border{
width: 360px;
margin: 15px auto;
}
.ion-item-class-2{
width: 360px;
margin: 0px auto;
}
.ion-icon-class{
width: 45px;
height: 45px;
float: left;
padding: 10px;
font-size: 25px;
}
ion-select{
padding-left: 5px;
margin-left: 0;
}
.ion-input-class{
width: 315px;
height: 45px;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
}
.ion-input-class-no-height{
border: 1px solid red;
}
.container-footer{
margin:0 auto;
overflow: auto;
}
.button-cancel {
width: 170px;
height: 44px;
border-radius: 22.5px;
--background: #e0e9ee;
--color: #061b52;
margin:10px;
}
.button-save {
width: 170px;
height: 44px;
border-radius: 22.5px;
--background: #42b9fe;
--color:#ffffff;
margin:10px;
}
@@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-expedient-task-modal',
@@ -7,9 +9,21 @@ import { Component, OnInit } from '@angular/core';
})
export class ExpedientTaskModalPage implements OnInit {
constructor() { }
constructor(private modalController: ModalController,
private router:Router,) { }
ngOnInit() {
}
close(){
this.router.navigate(['/home/gabinete-digital/expediente']);
this.modalController.dismiss(null);
}
cancelTask(){
this.modalController.dismiss(null);
}
saveTask(){
}
}
@@ -20,23 +20,23 @@
</ion-header>
<ion-content>
<ion-list>
<ion-item disabled>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Apresentação de OGE 2020</ion-label>
</ion-item>
<ion-item (click)="dispatchExpedient()">
<ion-item (click)="openExpedientActionsModal()">
<ion-icon name="documents" slot="start"></ion-icon>
<ion-label>Efectuar Despacho</ion-label>
</ion-item>
<ion-item disabled>
<ion-item (click)="openExpedientActionsModal()">
<ion-icon name="arrow-undo" slot="start"></ion-icon>
<ion-label>Pedido de Parecer</ion-label>
</ion-item>
<ion-item disabled>
<ion-item (click)="openExpedientActionsModal()">
<ion-icon name="arrow-redo" slot="start"></ion-icon>
<ion-label>Pedido de Deferimento</ion-label>
</ion-item>
<ion-item disabled>
<ion-item (click)="openBookMeetingModal()">
<ion-icon name="calendar" slot="start"></ion-icon>
<ion-label>Marcar reunião</ion-label>
</ion-item>
<ion-item (click)="discartExpedient()">
<ion-icon name="trash" slot="start"></ion-icon>
<ion-label>Descartar</ion-label>
</ion-item>
@@ -44,10 +44,6 @@
<ion-icon name="paper-plane" slot="start"></ion-icon>
<ion-label>Enviar para pendentes</ion-label>
</ion-item>
<ion-item disabled>
<ion-icon name="calendar" slot="start"></ion-icon>
<ion-label>Marcar reunião</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
@@ -7,8 +7,10 @@ import { DailyWorkTask } from '../../../../models/dailyworktask.model';
import { ActivatedRoute } from '@angular/router';
import { formatDate } from '@angular/common';
import { Event } from '../../../../models/event.model';
import { MenuController } from '@ionic/angular';
import { MenuController, ModalController } from '@ionic/angular';
import { AlertService } from 'src/app/services/alert.service';
import { ExpedientTaskModalPage } from '../expedient-task-modal/expedient-task-modal.page';
import { BookMeetingModalPage } from '../book-meeting-modal/book-meeting-modal.page';
@Component({
selector: 'app-expediente-detail',
@@ -23,6 +25,7 @@ export class ExpedienteDetailPage implements OnInit {
private attachments: AttachmentsService,
private events: EventsService,
private menu: MenuController,
private modalController: ModalController,
private alertService: AlertService) { }
task: DailyWorkTask;
@@ -89,4 +92,35 @@ export class ExpedienteDetailPage implements OnInit {
dispatchExpedient(){
this.alertService.presentAlert('Funcionalidade em desenvolvimento');
}
async openExpedientActionsModal(eventSerialNumber){
const modal = await this.modalController.create({
component: ExpedientTaskModalPage,
componentProps:{
serialNumber: eventSerialNumber,
},
cssClass: 'expedient-task-modal',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss();
}
discartExpedient(){
}
async openBookMeetingModal(eventSerialNumber){
const modal = await this.modalController.create({
component: BookMeetingModalPage,
componentProps:{
serialNumber: eventSerialNumber,
},
cssClass: 'book-meeting-modal',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss();
}
}
@@ -1,26 +1,30 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExpedientePage } from './expediente.page';
const routes: Routes = [
{
path: '',
component: ExpedientePage
},
{
path: 'expediente-detail',
loadChildren: () => import('./expediente-detail/expediente-detail.module').then( m => m.ExpedienteDetailPageModule)
},
{
path: 'expedient-task-modal',
loadChildren: () => import('./expedient-task-modal/expedient-task-modal.module').then( m => m.ExpedientTaskModalPageModule)
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExpedientePage } from './expediente.page';
const routes: Routes = [
{
path: '',
component: ExpedientePage
},
{
path: 'expediente-detail',
loadChildren: () => import('./expediente-detail/expediente-detail.module').then( m => m.ExpedienteDetailPageModule)
},
{
path: 'expedient-task-modal',
loadChildren: () => import('./expedient-task-modal/expedient-task-modal.module').then( m => m.ExpedientTaskModalPageModule)
},
{
path: 'book-meeting-modal',
loadChildren: () => import('./book-meeting-modal/book-meeting-modal.module').then( m => m.BookMeetingModalPageModule)
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ExpedientePageRoutingModule {}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
+16
View File
@@ -0,0 +1,16 @@
<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(-20 -494) translate(20 494)">
<path fill="#FFF" d="M7 7H18V8H7z"/>
<circle cx="10.5" cy="7.5" r="1.5" fill="#FFF"/>
<g fill="#42B9FE">
<circle cx="17.5" cy="17.5" r="17.5"/>
</g>
</g>
<path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 15.535v6.018C23 23.615 21.663 26 18 26c-3.663 0-5-2.385-5-4.447v-8.869C13 10.228 14.071 9 16.214 9s3.215 1.228 3.215 3.684V19.387C19.476 20.462 19 21 18 21s-1.476-.538-1.429-1.613h0v-3.852h0" transform="translate(-20 -494) translate(20 494)"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 893 B

+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<defs>
<filter id="8167czx5pa">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g filter="url(#8167czx5pa)" transform="translate(-30 -324) translate(20 314)">
<g>
<g stroke="#42B9FE" stroke-width="2" transform="translate(10 10) translate(5 5)">
<rect width="14" height="15" rx="2"/>
<path d="M1 5H14V6H1zM10 8H11V9H10zM7 8H8V9H7zM7 11H8V12H7zM10 11H11V12H10zM4 8H5V9H4zM4 11H5V12H4z"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 830 B

+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<defs>
<filter id="e7rrl0my1a">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g filter="url(#e7rrl0my1a)" transform="translate(-30 -249) translate(20 239)">
<g fill="#42B9FE" transform="translate(10 10)">
<rect width="16" height="2" x="5" y="5" rx="1"/>
<rect width="16" height="2" x="5" y="11" rx="1"/>
<rect width="9" height="2" x="5" y="17" rx="1"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 766 B

+20
View File
@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<defs>
<filter id="j0hdqa7hha">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g filter="url(#j0hdqa7hha)" transform="translate(-30 -249) translate(0 99) translate(20 25) translate(0 115)">
<g>
<path stroke="#42B9FE" stroke-width="2" d="M17.006 5.106c2.324 2.324 2.669 5.972.821 8.69L13 20.9h0l-4.827-7.102c-1.848-2.719-1.503-6.367.821-8.69 2.213-2.213 5.8-2.213 8.012 0z" transform="translate(10 10)"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 890 B

+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<defs>
<filter id="zvw46mr06a">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g filter="url(#zvw46mr06a)" transform="translate(-30 -444) translate(20 434)">
<g stroke="#42B9FE">
<path stroke-linejoin="round" stroke-width="2" d="M12.5 4C14.985 4 17 6.015 17 8.5c0 1.42-.658 2.687-1.685 3.511 2.903 1.13 4.963 3.952 4.963 7.257 0 4.296-15.556 4.296-15.556 0 0-3.305 2.06-6.128 4.967-7.255C8.658 11.187 8 9.92 8 8.5 8 6.015 10.015 4 12.5 4z" transform="translate(10 10)"/>
<path stroke-linecap="round" d="M12 15.586c-.318-.362-.757-.586-1.243-.586C9.787 15 9 15.895 9 17s.787 2 1.757 2c.486 0 .925-.224 1.243-.586M16 15.586c-.318-.362-.757-.586-1.243-.586-.97 0-1.757.895-1.757 2s.787 2 1.757 2c.486 0 .925-.224 1.243-.586" transform="translate(10 10)"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<defs>
<filter id="45naugphia">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" stroke-linejoin="round">
<g>
<g filter="url(#45naugphia)" transform="translate(-30 -384) translate(20 374)">
<g>
<path stroke="#42B9FE" stroke-width="2" d="M12.5 4C14.985 4 17 6.015 17 8.5c0 1.42-.658 2.687-1.685 3.511 2.903 1.13 4.963 3.952 4.963 7.257 0 4.296-15.556 4.296-15.556 0 0-3.305 2.06-6.128 4.967-7.255C8.658 11.187 8 9.92 8 8.5 8 6.015 10.015 4 12.5 4z" transform="translate(10 10)"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 843 B

+21
View File
@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<defs>
<filter id="z35ht3f2ca">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g>
<g>
<g>
<g filter="url(#z35ht3f2ca)" transform="translate(-30 -429) translate(0 99) translate(20 25) translate(0 295)">
<g stroke="#42B9FE" stroke-width="2">
<path d="M19 12.5C19 8.358 15.642 5 11.5 5 7.358 5 4 8.358 4 12.5c0 4.142 3.358 7.5 7.5 7.5 2.071 0 3.946-.84 5.303-2.197" transform="translate(10 10)"/>
<path d="M21.5 10.5L19 13 16.5 10.5" transform="translate(10 10) rotate(-9 19 11.75)"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB