peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 12:37:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

New action page and new publication page finished.

Browse Source
This commit is contained in:
Tiago Kayaya
2020-12-01 17:22:45 +01:00
parent 8e31026caa
commit 2c7b72a84a
12 changed files with 356 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/publications/new-action/new-action.page.html
+55 -2
View File
@@ -1,9 +1,62 @@
<ion-header>
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>new-action</ion-title>
<div class="title-content">
<div class="div-title">
<ion-label class="title">Nova Ação</ion-label>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<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-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-datetime
placeholder="Fim"
displayFormat="D MMM YYYY H:mm"
minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018"
max="2022">
</ion-datetime>
</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-textarea-class">
<ion-textarea rows="3" cols="20" placeholder="Descrição da ação..."></ion-textarea>
</div>
</div>
</div>
</ion-content>
<ion-footer class="ion-no-border">
<ion-toolbar class="footer-toolbar">
<ion-buttons slot="start">
<ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
<ion-label>Cancelar</ion-label>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
<ion-label>Criar</ion-label>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
src/app/pages/publications/new-action/new-action.page.scss
+67
View File
@@ -0,0 +1,67 @@
ion-content{
--background: transparent;
transform: translate3d(0, 5px, 0);
}
ion-toolbar{
--padding-top: 15px;
--background: transparent;
border-width: 0 !important;
}
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
}
.div-title{
width: 221px;
/* padding: 0!important; */
float: left;
margin: 5px 0 0 5px;
}
.title{
font-size: 25px;
}
.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-container-no-border{
width: 100%;
margin: 0px auto;
padding: 0 !important;
overflow: 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-textarea-class{
width: 315px;
height: auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
}
.ion-input-class-no-height{
border: 1px solid #ebebeb;
border-radius: 5px;
overflow: auto;
}
src/app/pages/publications/new-action/new-action.page.ts
+10 -1
View File
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-new-action',
@@ -7,9 +8,17 @@ import { Component, OnInit } from '@angular/core';
})
export class NewActionPage implements OnInit {
constructor() { }
constructor(
private modalController: ModalController,
) { }
ngOnInit() {
}
save(){
console.log('Salvar...');
}
close(){
this.modalController.dismiss();
}
}
src/app/pages/publications/new-publication/new-publication.page.html
+57 -2
View File
@@ -1,9 +1,64 @@
<ion-header>
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>new-publication</ion-title>
<div class="title-content">
<div class="div-title">
<ion-label class="title">{{publicationTitle}}</ion-label>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngIf="publicationType=='2'" class="ion-item-container">
<ion-input placeholder="Título" ></ion-input>
</div>
<div *ngIf="publicationType=='2'" 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-textarea-class">
<ion-textarea rows="6" cols="20" placeholder="Corpo de texto..."></ion-textarea>
</div>
</div>
</div>
<div class="ion-item-container-no-border">
<ion-label>
<div class="attach-icon">
<ion-icon src="assets/images/icons-add-photo.svg"></ion-icon>
</div>
<div class="attach-document">
<ion-label>Tirar Fotografia</ion-label>
</div>
</ion-label>
</div>
<div class="ion-item-container-no-border">
<ion-label>
<div class="attach-icon">
<ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
</div>
<div class="attach-document">
<ion-label>Anexar Fotografia</ion-label>
</div>
</ion-label>
</div>
</ion-content>
<ion-footer class="ion-no-border">
<ion-toolbar class="footer-toolbar">
<ion-buttons slot="start">
<ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
<ion-label>Cancelar</ion-label>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
<ion-label>Criar</ion-label>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
src/app/pages/publications/new-publication/new-publication.page.scss
+81
View File
@@ -0,0 +1,81 @@
ion-content{
--background: transparent;
transform: translate3d(0, 5px, 0);
--padding-start: 20px;
--padding-end: 20px;
}
ion-toolbar{
--padding-top: 15px;
--background: transparent;
border-width: 0 !important;
}
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
}
.div-title{
width: 100%;
float: left;
margin: 5px 0 0 5px;
}
.title{
font-size: 25px;
}
.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-container-no-border{
width: 100%;
margin: 0px auto;
padding: 0 !important;
overflow: 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-textarea-class{
width: 315px;
height: auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
}
.ion-input-class-no-height{
border: 1px solid #ebebeb;
border-radius: 5px;
overflow: auto;
}
.attach-document{
font-size: 15px;
color: #0d89d1;
margin: 5px 5px 20px 10px;
padding: 5px;
float: left;
}
.attach-icon{
width: 37px;
font-size: 35px;
float: left;
}
src/app/pages/publications/new-publication/new-publication.page.ts
+25 -2
View File
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
@Component({
selector: 'app-new-publication',
@@ -6,10 +7,32 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./new-publication.page.scss'],
})
export class NewPublicationPage implements OnInit {
constructor() { }
publicationType:string;
publicationTitle:string;
constructor(
private modalController: ModalController,
private navParams: NavParams,
) {
this.publicationType = this.navParams.get('publicationType');
this.publicationTitle = 'Nova Publicação';
}
ngOnInit() {
this.setTitle();
}
save(){
}
close(){
this.modalController.dismiss();
}
setTitle(){
if(this.publicationType == '1'){
this.publicationTitle = 'Nova Publicação Rápida'
}
else{
this.publicationTitle = 'Nova Publicação'
}
}
}
src/app/pages/publications/publications.page.html
+1 -1
View File
@@ -21,7 +21,7 @@
<ion-label class="title">Ações Presidenciais</ion-label>
</div>
<div class="div-icon">
<ion-icon slot="end" src='assets/images/icons-add.svg'></ion-icon>
<ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
</div>
</div>
<div class="item" [routerLink]="['/publications/view-publications']">
src/app/pages/publications/publications.page.ts
+16 -1
View File
@@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { NewActionPage } from './new-action/new-action.page';
@Component({
selector: 'app-publications',
@@ -7,9 +9,22 @@ import { Component, OnInit } from '@angular/core';
})
export class PublicationsPage implements OnInit {
constructor() { }
constructor(private modalController: ModalController,) { }
ngOnInit() {
}
async AddPublicationFolder(item:any) {
const modal = await this.modalController.create({
component: NewActionPage,
componentProps:{
item: item,
},
cssClass: 'new-action',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss();
}
}
src/app/pages/publications/view-publications/view-publications.page.html
+2 -2
View File
@@ -27,8 +27,8 @@
<p class="item-content-date">12 de Janeiro</p>
</div>
<div class="actions-icon">
<ion-icon slot="end" src='assets/images/icons-add-photo.svg'></ion-icon>
<ion-icon slot="end" src='assets/images/icons-add.svg'></ion-icon>
<ion-icon (click)="AddPublication('1')" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon>
<ion-icon (click)="AddPublication('2')" slot="end" src='assets/images/icons-add.svg'></ion-icon>
</div>
</div>
<ion-list>
src/app/pages/publications/view-publications/view-publications.page.ts
+16 -1
View File
@@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { NewPublicationPage } from '../new-publication/new-publication.page';
@Component({
selector: 'app-view-publications',
@@ -7,9 +9,22 @@ import { Component, OnInit } from '@angular/core';
})
export class ViewPublicationsPage implements OnInit {
constructor() { }
constructor(private modalController: ModalController,) { }
ngOnInit() {
}
async AddPublication(publicationType:any) {
const modal = await this.modalController.create({
component: NewPublicationPage,
componentProps:{
publicationType: publicationType,
},
cssClass: 'new-publication',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss();
}
}
src/assets/images/icons-add-photos.svg
+21
View File
@@ -0,0 +1,21 @@
<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 -454) translate(20 454)">
<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>
<g transform="translate(-20 -454) translate(20 454) translate(10 9)">
<path stroke="#FFF" stroke-linejoin="round" stroke-width="2" d="M0 0H15V18H0z"/>
<path fill="#FFF" d="M0 14H15V18H0z"/>
<circle cx="9" cy="8" r="2" stroke="#FFF"/>
<path stroke="#FFF" d="M.5 10C2.167 9 4.333 8.5 7 8.5M11 8.5L14.5 8.5"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 966 B

src/theme/variables.scss
+5
View File
@@ -357,6 +357,11 @@
margin: 10px;
overflow: auto;
}
.footer-toolbar{
width: 360px;
margin: 20px auto;
overflow: auto;
}
.btn-ok{
width: 160px !important;
height: 45px !important;