peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 13:02:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added new icons

Browse Source 
change icon color when selected in mobile and tablet
This commit is contained in:
tiago.kayaya
2022-01-04 15:34:03 +01:00
parent d6cc05a312
commit d22e602f13
13 changed files with 102 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/home.page.html
+18 -13
View File
@@ -1,33 +1,38 @@
<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>
<ion-tab-button tab="events" (click)="selectedTab('/home/events')">
<ion-icon *ngIf="tabButton.home" class="nav-icon" src="assets/icon/tab/icons-nav-home-selected.svg"></ion-icon>
<ion-icon *ngIf="!tabButton.home" class="nav-icon" src="assets/icon/tab/icons-nav-home.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-icon name="calendar"></ion-icon> -->
<ion-icon class="nav-icon" src="assets/images/icons-nav-calendar.svg"></ion-icon>
<ion-tab-button tab="agenda" (click)="selectedTab('/home/agenda')">
<ion-icon *ngIf="tabButton.agenda" class="nav-icon" src="assets/icon/tab/icons-nav-agenda-selected.svg"></ion-icon>
<ion-icon *ngIf="!tabButton.agenda" class="nav-icon" src="assets/icon/tab/icons-nav-agenda.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-icon name="file-tray-stacked"></ion-icon> -->
<ion-icon class="nav-icon" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
<!-- (click)="goto('/home/gabinete-digital')" -->
<ion-tab-button tab="gabinete-digital" (click)="selectedTab('/home/gabinete-digital')">
<ion-icon *ngIf="tabButton.gabinete" class="nav-icon" src="assets/icon/tab/icons-nav-gabinete-selected.svg"></ion-icon>
<ion-icon *ngIf="!tabButton.gabinete" class="nav-icon" src="assets/icon/tab/icons-nav-gabinete.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" (click)="selectedTab('/home/publications')">
<ion-icon *ngIf="tabButton.actions" class="nav-icon" src="assets/icon/tab/icons-nav-actions-selected.svg"></ion-icon>
<ion-icon *ngIf="!tabButton.actions" class="nav-icon" src="assets/icon/tab/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" (click)="selectedTab('/home/chat')">
<ion-icon *ngIf="tabButton.chat" class="nav-icon" src="assets/icon/tab/icons-nav-chat-selected.svg"></ion-icon>
<ion-icon *ngIf="!tabButton.chat" class="nav-icon" src="assets/icon/tab/icons-nav-chat.svg"></ion-icon>
<ion-label>Chat</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
src/app/home/home.page.scss
+3 -3
View File
@@ -1,11 +1,11 @@
ion-tab-bar{
--background: #f9f9f9;
--color: #061b52;
--color: #797979;
}
ion-icon {
color: blue;
ion-tab-button{
--color-selected: #061b52;
}
// Badge
src/app/home/home.page.ts
+39 -1
View File
@@ -57,6 +57,13 @@ export class HomePage implements OnInit {
showAttendees: false,
showAttendeeModal: false
}
tabButton = {
home: false,
agenda: false,
gabinete: false,
actions: false,
chat: false,
}
eventToaprove: any = {
back: false,
serialNumber: "",
@@ -150,11 +157,42 @@ export class HomePage implements OnInit {
}
myWorker.postMessage('ali'); */
this.clearTabButtonSelection();
}
clearTabButtonSelection(){
this.tabButton.home = false;
this.tabButton.agenda = false;
this.tabButton.gabinete = false;
this.tabButton.actions = false;
this.tabButton.chat = false;
}
selectedTab(url?:string){
this.clearTabButtonSelection();
if(url =='/home/events'){
this.tabButton.home = true;
}
else if(url == '/home/agenda'){
this.tabButton.agenda = true;
}
else if(url =='/home/gabinete-digital'){
this.tabButton.gabinete = true;
}
else if(url =='/home/publications'){
this.tabButton.actions = true;
}
else if(url == '/home/chat'){
this.tabButton.chat = true;
}
else{
this.clearTabButtonSelection();
}
}
logDeviceInfo = async () => {
const info = await Device.getInfo();
console.log('Device info',info);
};