UI of publication´s list page finished

src/app/pages/publications/gallery/gallery-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GalleryPage } from './gallery.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GalleryPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GalleryPageRoutingModule {}

src/app/pages/publications/gallery/gallery.module.ts

@@ -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 { GalleryPageRoutingModule } from './gallery-routing.module';
+
+import { GalleryPage } from './gallery.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    GalleryPageRoutingModule
+  ],
+  declarations: [GalleryPage]
+})
+export class GalleryPageModule {}

src/app/pages/publications/gallery/gallery.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>gallery</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/pages/publications/gallery/gallery.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GalleryPage } from './gallery.page';
+
+describe('GalleryPage', () => {
+  let component: GalleryPage;
+  let fixture: ComponentFixture<GalleryPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GalleryPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GalleryPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/publications/gallery/gallery.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-gallery',
+  templateUrl: './gallery.page.html',
+  styleUrls: ['./gallery.page.scss'],
+})
+export class GalleryPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/publications/new-action/new-action-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewActionPage } from './new-action.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewActionPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewActionPageRoutingModule {}

src/app/pages/publications/new-action/new-action.module.ts

@@ -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 { NewActionPageRoutingModule } from './new-action-routing.module';
+
+import { NewActionPage } from './new-action.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NewActionPageRoutingModule
+  ],
+  declarations: [NewActionPage]
+})
+export class NewActionPageModule {}

src/app/pages/publications/new-action/new-action.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>new-action</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/pages/publications/new-action/new-action.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewActionPage } from './new-action.page';
+
+describe('NewActionPage', () => {
+  let component: NewActionPage;
+  let fixture: ComponentFixture<NewActionPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewActionPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewActionPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/publications/new-action/new-action.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-new-action',
+  templateUrl: './new-action.page.html',
+  styleUrls: ['./new-action.page.scss'],
+})
+export class NewActionPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/publications/new-publication/new-publication-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewPublicationPage } from './new-publication.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewPublicationPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewPublicationPageRoutingModule {}

src/app/pages/publications/new-publication/new-publication.module.ts

@@ -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 { NewPublicationPageRoutingModule } from './new-publication-routing.module';
+
+import { NewPublicationPage } from './new-publication.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NewPublicationPageRoutingModule
+  ],
+  declarations: [NewPublicationPage]
+})
+export class NewPublicationPageModule {}

src/app/pages/publications/new-publication/new-publication.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>new-publication</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/pages/publications/new-publication/new-publication.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewPublicationPage } from './new-publication.page';
+
+describe('NewPublicationPage', () => {
+  let component: NewPublicationPage;
+  let fixture: ComponentFixture<NewPublicationPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewPublicationPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewPublicationPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-new-publication',
+  templateUrl: './new-publication.page.html',
+  styleUrls: ['./new-publication.page.scss'],
+})
+export class NewPublicationPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/publications/publication-detail/publication-detail-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PublicationDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PublicationDetailPageRoutingModule {}

src/app/pages/publications/publication-detail/publication-detail.module.ts

@@ -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 { PublicationDetailPageRoutingModule } from './publication-detail-routing.module';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PublicationDetailPageRoutingModule
+  ],
+  declarations: [PublicationDetailPage]
+})
+export class PublicationDetailPageModule {}

src/app/pages/publications/publication-detail/publication-detail.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>publication-detail</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/pages/publications/publication-detail/publication-detail.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+describe('PublicationDetailPage', () => {
+  let component: PublicationDetailPage;
+  let fixture: ComponentFixture<PublicationDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PublicationDetailPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PublicationDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/publications/publication-detail/publication-detail.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-publication-detail',
+  templateUrl: './publication-detail.page.html',
+  styleUrls: ['./publication-detail.page.scss'],
+})
+export class PublicationDetailPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/publications/publications-routing.module.ts

@@ -7,6 +7,26 @@ const routes: Routes = [
   {
     path: '',
     component: PublicationsPage
+  },
+  {
+    path: 'new-publication',
+    loadChildren: () => import('./new-publication/new-publication.module').then( m => m.NewPublicationPageModule)
+  },
+  {
+    path: 'gallery',
+    loadChildren: () => import('./gallery/gallery.module').then( m => m.GalleryPageModule)
+  },
+  {
+    path: 'new-action',
+    loadChildren: () => import('./new-action/new-action.module').then( m => m.NewActionPageModule)
+  },
+  {
+    path: 'publication-detail',
+    loadChildren: () => import('./publication-detail/publication-detail.module').then( m => m.PublicationDetailPageModule)
+  },
+  {
+    path: 'view-publications',
+    loadChildren: () => import('./view-publications/view-publications.module').then( m => m.ViewPublicationsPageModule)
   }
 ];
 

src/app/pages/publications/publications.page.html

@@ -24,7 +24,7 @@
         <ion-icon slot="end" src='assets/images/icons-add.svg'></ion-icon>
       </div>
     </div>
-    <div class="item">
+    <div class="item" [routerLink]="['/publications/view-publications']">
       <div class="item-icon">
         <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
       </div>

src/app/pages/publications/publications.page.scss

@@ -1,3 +1,13 @@
+:host{
+  background: #0782c9;
+}
+ion-content{
+  --background: transparent;
+}
+ion-toolbar{
+  background: transparent;
+  border-width: 0 !important;
+}
 .div-top-header{
     width: 400px;
     margin: 0 auto;
@@ -97,5 +107,4 @@
   .item-content-detail{
     color: #000000;
     font-size: 13px;
-
   }

src/app/pages/publications/view-publications/view-publications-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ViewPublicationsPage } from './view-publications.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ViewPublicationsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewPublicationsPageRoutingModule {}

src/app/pages/publications/view-publications/view-publications.module.ts

@@ -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 { ViewPublicationsPageRoutingModule } from './view-publications-routing.module';
+
+import { ViewPublicationsPage } from './view-publications.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ViewPublicationsPageRoutingModule
+  ],
+  declarations: [ViewPublicationsPage]
+})
+export class ViewPublicationsPageModule {}

src/app/pages/publications/view-publications/view-publications.page.html

@@ -0,0 +1,69 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar class="ion-no-border">
+    <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-content>
+  <div class="content-top"></div>
+  <div class="content-container">
+    <div class="title-content">
+      <div class="back-icon">
+        <ion-icon [routerLink]="['/publications']" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+      </div>
+      <div class="div-title">
+        <ion-label class="title">Viagem a Maputo</ion-label>
+        <p class="item-content-detail">Investida de Filipe Nyusi</p>
+        <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>
+      </div>
+    </div>
+    <ion-list>
+      <div class="post-item">
+        <div class="post-img">
+          <img src='assets/images/logo.png' alt='image'>
+        </div>
+        <div class="post-content">
+          <div class="post-title-time">
+            <div class="post-title">
+              <ion-label>Ateragem em Maputo</ion-label>
+            </div>
+            <div class="post-data">1h</div>
+          </div>
+          <div class="post-description">
+            <p>Presidente João Lourenço chega a Maputo para investidura de Filipe Nyusi como presidente de Moçambique</p>
+          </div>
+        </div>
+      </div>
+      <div class="post-item">
+        <div class="post-img">
+          <img src='assets/images/logo.png' alt='image'>
+        </div>
+        <div class="post-content">
+          <div class="post-title-time">
+            <div class="post-title">
+              <ion-label>Ateragem em Maputo</ion-label>
+            </div>
+            <div class="post-data">1h</div>
+          </div>
+          <div class="post-description">
+            <p>Presidente João Lourenço chega a Maputo para investidura de Filipe Nyusi como presidente de Moçambique</p>
+          </div>
+        </div>
+      </div>
+    </ion-list>
+  </div>    
+</ion-content>

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -0,0 +1,138 @@
+:host{
+    background: #0782c9;
+  }
+  ion-content{
+    --background: transparent;
+    transform: translate3d(0, 5px, 0);
+    --border-radius: 30px;
+  }
+  ion-toolbar{
+    --background:#0782c9;
+    border-width: 0 !important;
+  }
+
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+  }
+  .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;
+  }
+  .content-top{
+    width: 90%;
+    background: #f3f2f2;
+    height: 20px;
+    margin: 0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+}
+  .content-container{
+    width: 100%;
+    margin:0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background: #ffffff;
+    height: 100%;
+    box-shadow: 20px 10px 18px #888888;
+    padding: 25px 20px 0 20px;
+    overflow: auto;
+  }
+  .title-content{
+    width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+  .back-icon{
+    width: 37px;
+    float: left;
+    font-size: 35px;
+    overflow: auto;
+    
+  }
+  .div-title{
+      width: 221px;
+    /* padding: 0!important; */
+    float: left;
+    margin: 5px 0 0 5px;
+  }
+  .title{
+    font-size: 25px;
+  }
+  
+  .actions-icon{
+    width: 92px;
+    float: right;
+    overflow: auto;
+  }
+  .actions-icon ion-icon{
+      margin-left: 10px;
+      font-size: 35px;
+  }
+  .item-content-date{
+    color: #797979;
+    font-size: 13px;
+  }
+  .item-content-detail{
+    color: #000000;
+    font-size: 13px;
+  }
+  .post-item{
+    width: 360px;
+    overflow: auto;
+    margin: 0 auto;
+  }
+  .post-img{
+      width: 100%;
+      margin: 0 auto;
+  }
+  .post-img img{
+      width: 100%;
+      height: 100%;
+  }
+  .post-content{
+    width: 360px;
+    margin: 0 auto;
+  }
+  .post-title-time{
+    width: 100%;
+    overflow: auto;
+    margin-top: 5px;
+  }
+  .post-title{
+      width: 80%;
+      float: left;
+      font-size: 15px;
+      color: #0d89d1;
+  }
+  .post-data{
+      width: 20%;
+      float: left;
+      font-size: 13px;
+      color: #797979;
+  }
+  .post-description{
+      font-size: 13px;
+      color: #000;
+
+  }

src/app/pages/publications/view-publications/view-publications.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ViewPublicationsPage } from './view-publications.page';
+
+describe('ViewPublicationsPage', () => {
+  let component: ViewPublicationsPage;
+  let fixture: ComponentFixture<ViewPublicationsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewPublicationsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ViewPublicationsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/publications/view-publications/view-publications.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-view-publications',
+  templateUrl: './view-publications.page.html',
+  styleUrls: ['./view-publications.page.scss'],
+})
+export class ViewPublicationsPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/assets/images/icons-add-photo.svg

@@ -0,0 +1,26 @@
+<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>
+                    <g>
+                        <g transform="translate(-295 -124) translate(0 99) translate(20 25) translate(275)">
+                            <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 stroke="#FFF">
+                            <path stroke-linejoin="round" stroke-width="2" d="M0 0H15V18H0z" transform="translate(-295 -124) translate(0 99) translate(20 25) translate(275) rotate(-90 17 8.5)"/>
+                            <g transform="translate(-295 -124) translate(0 99) translate(20 25) translate(275) rotate(-90 17 8.5) rotate(90 4.25 4.25)">
+                                <circle cx="11.5" cy="2" r="2"/>
+                                <path d="M.5 4c2.308-1 5.308-1.5 9-1.5M13.5 2.5L17 2.5"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>