From be06d3b3d10af2fc4f729664924f3fe3814b8823 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Thu, 6 Jan 2022 11:21:20 +0100
Subject: [PATCH] icons

---
 src/app/home/home.page.html                   | 25 +++++++++++--------
 src/app/home/home.page.scss                   |  7 +++++-
 src/app/home/home.page.ts                     | 10 +++++++-
 .../images/nav-hover/icons-nav-actions.svg    |  5 ++++
 .../nav-hover/icons-nav-agenda-inactive.svg   |  4 +++
 .../nav-hover/icons-nav-calendar-active.svg   |  4 +++
 .../nav-hover/icons-nav-chat-active.svg       |  4 +++
 .../nav-hover/icons-nav-gabinete-active.svg   |  4 +++
 .../icons-nav-grupos-inactive-dk-white.svg    |  4 +++
 .../nav-hover/icons-nav-home-active.svg       |  3 +++
 10 files changed, 58 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/images/nav-hover/icons-nav-actions.svg
 create mode 100644 src/assets/images/nav-hover/icons-nav-agenda-inactive.svg
 create mode 100644 src/assets/images/nav-hover/icons-nav-calendar-active.svg
 create mode 100644 src/assets/images/nav-hover/icons-nav-chat-active.svg
 create mode 100644 src/assets/images/nav-hover/icons-nav-gabinete-active.svg
 create mode 100644 src/assets/images/nav-hover/icons-nav-grupos-inactive-dk-white.svg
 create mode 100644 src/assets/images/nav-hover/icons-nav-home-active.svg

diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 96fb9d42e..0a84abf12 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -1,31 +1,36 @@
 <ion-tabs class="tab">
   <ion-tab-bar class="bottoms" slot="bottom">
-    <ion-tab-button tab="events">
+    <ion-tab-button tab="events" [class.active]="pathname === '/home/events' ">
       <!-- <ion-icon name="home"></ion-icon> -->
-      <ion-icon class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
+      <ion-icon *ngIf="pathname != '/home/events'" class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
+      <ion-icon *ngIf="pathname == '/home/events'" class="nav-icon" src="assets/images/nav-hover/icons-nav-home-active.svg"></ion-icon>
       <!-- <ion-badge color="danger">{{toDayEventStorage.eventsList.length + expedienteGdStore.count}}</ion-badge> -->
       <ion-label>Início</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="agenda">
+    <ion-tab-button tab="agenda" [class.active]="pathname === '/home/agenda' ">
       <!-- <ion-icon name="calendar"></ion-icon> -->
-      <ion-icon class="nav-icon" src="assets/images/icons-nav-calendar.svg"></ion-icon>
+      <ion-icon *ngIf="pathname != '/home/agenda'" class="nav-icon" src="assets/images/icons-nav-calendar.svg"></ion-icon>
+      <ion-icon *ngIf="pathname == '/home/agenda'" class="nav-icon" src="assets/images/nav-hover/icons-nav-calendar-active.svg"></ion-icon>
       <ion-label style="margin-bottom: 2px;" class="overflow-visible">Agenda</ion-label>
     </ion-tab-button>
-    <ion-tab-button (click)="goto('/home/gabinete-digital')">
+    <ion-tab-button (click)="goto('/home/gabinete-digital')" [class.active]="pathname === '/home/gabinete-digital' ">
       <!-- <ion-icon name="file-tray-stacked"></ion-icon> -->
-      <ion-icon class="nav-icon" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
+      <ion-icon *ngIf="pathname != '/home/gabinete-digital'" class="nav-icon" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
+      <ion-icon *ngIf="pathname == '/home/gabinete-digital'" class="nav-icon" src="assets/images/nav-hover/icons-nav-gabinete-active.svg"></ion-icon>
       <!-- <ion-badge color="danger" *ngIf="!p.userRole(['PR'])" >{{ documentCounterService.mdTotalDocument }}</ion-badge>
       <ion-badge color="danger" *ngIf="p.userRole(['PR'])" >{{ documentCounterService.prTotalDocument }}</ion-badge> -->
       <ion-label>Gabinete</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="publications">
-      <ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
+    <ion-tab-button tab="publications" [class.active]="pathname === '/home/publications' ">
+      <ion-icon *ngIf="pathname != '/home/publications'" class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
+      <ion-icon *ngIf="pathname == '/home/publications'" class="nav-icon" src="assets/images/nav-hover/icons-nav-actions.svg"></ion-icon>
       <ion-label style="margin-bottom: 2px;" class="overflow-visible">Ações</ion-label>
     </ion-tab-button>
-    <ion-tab-button tab="chat">
-      <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
+    <ion-tab-button tab="chat" [class.active]="pathname === '/home/chat' ">
+      <ion-icon *ngIf="pathname != '/home/chat'" class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
+      <ion-icon *ngIf="pathname == '/home/chat'" class="nav-icon" src="assets/images/nav-hover/icons-nav-chat-active.svg"></ion-icon>
       <ion-label>Chat</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index 8b6ee1ac6..f6ed8143e 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -1,7 +1,7 @@
 
 ion-tab-bar{
   --background: #f9f9f9;
-  --color: #061b52;
+  --color: #797979;
 }
 
 // Badge
@@ -41,4 +41,9 @@ ion-badge {/*  */
   ion-tabs.tab .bottoms{
     display: none;
   }
+}
+
+
+ion-tab-button.active{
+  color: #061b52;
 }
\ No newline at end of file
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 7d4f59046..dd078adfe 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -158,6 +158,14 @@ export class HomePage implements OnInit {
     console.log('Device info',info);
   };
 
+  get pathname(){
+    return  window.location.pathname
+  }
+
+  get color() {
+    return '#797979'
+  }
+
   updateList() {
 
     /*  this.notificationsService.registerCallback(
@@ -176,7 +184,7 @@ export class HomePage implements OnInit {
     });
 
   }
-
+  
   async synchWhenOnline() {
     try {
       await this.storage.get('eventEdit').then((req) => {
diff --git a/src/assets/images/nav-hover/icons-nav-actions.svg b/src/assets/images/nav-hover/icons-nav-actions.svg
new file mode 100644
index 000000000..b3cff32ad
--- /dev/null
+++ b/src/assets/images/nav-hover/icons-nav-actions.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 34.5C26.023 34.5 31 33.523 31 28C31 22.477 26.523 18 21 18C15.477 18 11 22.477 11 28C11 33.523 14.977 34.5 20.5 34.5Z" stroke="#061B52" stroke-width="2"/>
+<path d="M21 18C24.3137 18 27 15.3137 27 12C27 8.68629 24.3137 6 21 6C17.6863 6 15 8.68629 15 12C15 15.3137 17.6863 18 21 18Z" stroke="#061B52" stroke-width="2"/>
+<path d="M12.657 33.093L26.343 19.907M29.157 23.343L17.843 34.657L29.157 23.343Z" stroke="#061B52" stroke-width="2" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/nav-hover/icons-nav-agenda-inactive.svg b/src/assets/images/nav-hover/icons-nav-agenda-inactive.svg
new file mode 100644
index 000000000..07bb69f11
--- /dev/null
+++ b/src/assets/images/nav-hover/icons-nav-agenda-inactive.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 7H9C7.89543 7 7 7.89543 7 9V31C7 32.1046 7.89543 33 9 33H31C32.1046 33 33 32.1046 33 31V9C33 7.89543 32.1046 7 31 7Z" stroke="#061B52" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 14H31V15H9V14ZM25 19H27V21H25V19ZM19 19H21V21H19V19ZM19 25H21V27H19V25ZM25 25H27V27H25V25ZM13 19H15V21H13V19ZM13 25H15V27H13V25Z" stroke="#061B52" stroke-width="2"/>
+</svg>
diff --git a/src/assets/images/nav-hover/icons-nav-calendar-active.svg b/src/assets/images/nav-hover/icons-nav-calendar-active.svg
new file mode 100644
index 000000000..09ce7870f
--- /dev/null
+++ b/src/assets/images/nav-hover/icons-nav-calendar-active.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 31H8V13H33V31H26ZM33 31H26H33ZM26 9V13H15V9H23H26Z" stroke="#061B52" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 30.5L32.5 15.5M8.5 28.5L30.5 13.5L8.5 28.5Z" stroke="#061B52"/>
+</svg>
diff --git a/src/assets/images/nav-hover/icons-nav-chat-active.svg b/src/assets/images/nav-hover/icons-nav-chat-active.svg
new file mode 100644
index 000000000..54f038f34
--- /dev/null
+++ b/src/assets/images/nav-hover/icons-nav-chat-active.svg
@@ -0,0 +1,4 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.34 26.1C23.744 26.1 25.09 25.892 26.333 25.51C26.999 25.304 30.585 27.268 31.186 26.969C31.793 26.667 29.416 24.102 29.943 23.716C32.333 21.966 33.84 19.404 33.84 16.55C33.84 11.276 28.691 7 22.34 7C15.989 7 10.84 11.276 10.84 16.55C10.84 21.825 15.989 26.1 22.34 26.1Z" stroke="#061B52" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.84 32.37C14.863 32.37 13.927 32.224 13.062 31.956C12.599 31.813 10.104 33.188 9.686 32.978C9.264 32.768 10.918 30.972 10.551 30.701C8.889 29.476 7.84 27.683 7.84 25.685C7.84 24.133 8.473 22.705 9.535 21.57C10.999 20.006 13.279 19 15.84 19C20.258 19 23.84 21.993 23.84 25.685C23.84 26.722 23.558 27.703 23.054 28.579C21.763 30.822 19.018 32.37 15.84 32.37Z" stroke="#061B52" stroke-width="2"/>
+</svg>
diff --git a/src/assets/images/nav-hover/icons-nav-gabinete-active.svg b/src/assets/images/nav-hover/icons-nav-gabinete-active.svg
new file mode 100644
index 000000000..09ce7870f
--- /dev/null
+++ b/src/assets/images/nav-hover/icons-nav-gabinete-active.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 31H8V13H33V31H26ZM33 31H26H33ZM26 9V13H15V9H23H26Z" stroke="#061B52" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 30.5L32.5 15.5M8.5 28.5L30.5 13.5L8.5 28.5Z" stroke="#061B52"/>
+</svg>
diff --git a/src/assets/images/nav-hover/icons-nav-grupos-inactive-dk-white.svg b/src/assets/images/nav-hover/icons-nav-grupos-inactive-dk-white.svg
new file mode 100644
index 000000000..54f038f34
--- /dev/null
+++ b/src/assets/images/nav-hover/icons-nav-grupos-inactive-dk-white.svg
@@ -0,0 +1,4 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.34 26.1C23.744 26.1 25.09 25.892 26.333 25.51C26.999 25.304 30.585 27.268 31.186 26.969C31.793 26.667 29.416 24.102 29.943 23.716C32.333 21.966 33.84 19.404 33.84 16.55C33.84 11.276 28.691 7 22.34 7C15.989 7 10.84 11.276 10.84 16.55C10.84 21.825 15.989 26.1 22.34 26.1Z" stroke="#061B52" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.84 32.37C14.863 32.37 13.927 32.224 13.062 31.956C12.599 31.813 10.104 33.188 9.686 32.978C9.264 32.768 10.918 30.972 10.551 30.701C8.889 29.476 7.84 27.683 7.84 25.685C7.84 24.133 8.473 22.705 9.535 21.57C10.999 20.006 13.279 19 15.84 19C20.258 19 23.84 21.993 23.84 25.685C23.84 26.722 23.558 27.703 23.054 28.579C21.763 30.822 19.018 32.37 15.84 32.37Z" stroke="#061B52" stroke-width="2"/>
+</svg>
diff --git a/src/assets/images/nav-hover/icons-nav-home-active.svg b/src/assets/images/nav-hover/icons-nav-home-active.svg
new file mode 100644
index 000000000..fa2b1fd71
--- /dev/null
+++ b/src/assets/images/nav-hover/icons-nav-home-active.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 8.13599L32 14.597V30C32 30.552 31.776 31.052 31.414 31.414C31.052 31.776 30.552 32 30 32H25V27C25 26.212 24.696 25.495 24.2 24.96C23.69 24.411 22.978 24.054 22.183 24.006L18 24C17.212 24 16.495 24.304 15.96 24.8C15.411 25.31 15.054 26.022 15.006 26.817L15 32H10C9.448 32 8.948 31.776 8.586 31.414C8.224 31.052 8 30.552 8 30V14.597L20 8.13599Z" stroke="#061B52" stroke-width="2"/>
+</svg>