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 themes added

Browse Source
This commit is contained in:
Eudes Inácio
2021-10-20 17:46:03 +01:00
parent de29ff978d
commit 55f5fd822d
10 changed files with 222 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+8
View File
@@ -4417,6 +4417,14 @@
} }
} }
}, },
"angular-svg-icon": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/angular-svg-icon/-/angular-svg-icon-12.0.0.tgz",
"integrity": "sha512-nPAbF/U6sHdY+Dt/J5TZuUNOGRZmxoqJioRfLGMeNt8ycbBbTwq1OmkZ7DLuF02+XGafGHwzmI5/2y9OWAl+TA==",
"requires": {
"tslib": "^2.2.0"
}
},
"angular-tag-cloud-module": { "angular-tag-cloud-module": {
"version": "5.3.0", "version": "5.3.0",
"resolved": "https://registry.npmjs.org/angular-tag-cloud-module/-/angular-tag-cloud-module-5.3.0.tgz", "resolved": "https://registry.npmjs.org/angular-tag-cloud-module/-/angular-tag-cloud-module-5.3.0.tgz",
package.json
+1
View File
@@ -68,6 +68,7 @@
"@types/jest-environment-puppeteer": "^4.4.1", "@types/jest-environment-puppeteer": "^4.4.1",
"@types/puppeteer": "^5.4.4", "@types/puppeteer": "^5.4.4",
"angular-calendar": "^0.28.22", "angular-calendar": "^0.28.22",
"angular-svg-icon": "^12.0.0",
"angular-tag-cloud-module": "^5.2.2", "angular-tag-cloud-module": "^5.2.2",
"bootstrap": "^4.5.0", "bootstrap": "^4.5.0",
"build": "0.1.4", "build": "0.1.4",
src/app/app.module.ts
+4 -1
View File
@@ -58,6 +58,7 @@ import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { PdfViewerModule } from 'ng2-pdf-viewer'; import { PdfViewerModule } from 'ng2-pdf-viewer';
import { SQLite } from '@ionic-native/sqlite/ngx'; import { SQLite } from '@ionic-native/sqlite/ngx';
import { CookieService } from 'ngx-cookie-service'; import { CookieService } from 'ngx-cookie-service';
import { AngularSvgIconModule } from 'angular-svg-icon';
@NgModule({ @NgModule({
declarations: [AppComponent], declarations: [AppComponent],
@@ -92,6 +93,7 @@ import { CookieService } from 'ngx-cookie-service';
// //
PdfViewerModule, PdfViewerModule,
HammerModule, HammerModule,
AngularSvgIconModule.forRoot()
], ],
providers: [ providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'pt' }, { provide: MAT_DATE_LOCALE, useValue: 'pt' },
@@ -112,7 +114,8 @@ import { CookieService } from 'ngx-cookie-service';
Network, Network,
File, File,
SQLite, SQLite,
CookieService CookieService,
AngularSvgIconModule
], ],
bootstrap: [AppComponent], bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]
src/app/modals/profile/edit-profile/edit-profile.page.html
+38 -12
View File
@@ -21,9 +21,9 @@
</div> --> </div> -->
</div> </div>
<div > <div>
<div class="d-flex align-center"> <div class="d-flex align-center">
<ion-icon class="profile-pic" src="assets/images/icons-default-profile.svg"></ion-icon> <ion-icon class="profile-pic" src="assets/images/icons-default-profile.svg"></ion-icon>
</div> </div>
</div> </div>
@@ -51,15 +51,41 @@
</div> </div>
</div> </div>
</div> </div>
<div class="profile-title d-flex justify-space-between align-center width-100">
<div class="d-flex align-center">
<div>Tema</div>
</div>
</div>
<div class="profile-title d-flex justify-space-between align-center width-100">
<div class="d-flex align-center">
<div class="btn-close d-flex cursor-pointer" (click)="changeTheme('grey')">
<ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
</div>
<div class="btn-close d-flex cursor-pointer" (click)="changeTheme('blue')">
<ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
</div>
<div class="btn-close d-flex cursor-pointer" (click)="close()">
<ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
</div>
</div>
</div>
</div> </div>
<div class="login-preference width-100" *ngIf="!platform.is('desktop') && !platform.is('mobileweb')"> <div class="login-preference width-100" *ngIf="!platform.is('desktop') && !platform.is('mobileweb')">
<div class="preference">Preferência Login</div> <div class="preference">Preferência Login</div>
<ion-row> <ion-row>
<ion-col class="align-center d-flex"> <ion-col class="align-center d-flex">
<div class="d-flex align-center" (click)="LoginPreferenceMethod('Pin')"> <div class="d-flex align-center" (click)="LoginPreferenceMethod('Pin')">
<ion-checkbox [checked]="SessionStore.user.LoginPreference=='Pin' " class="checkBox" ></ion-checkbox> <ion-checkbox [checked]="SessionStore.user.LoginPreference=='Pin' " class="checkBox"></ion-checkbox>
PIN PIN
</div> </div>
</ion-col> </ion-col>
@@ -77,15 +103,15 @@
<div class="d-flex justify-space-between"> <div class="d-flex justify-space-between">
<ion-buttons slot="start" (click)="close()"> <ion-buttons slot="start" (click)="close()">
<button class="btn-cancel" fill="clear" color="#061b52" > <button class="btn-cancel" fill="clear" color="#061b52">
<ion-label>Cancelar</ion-label> <ion-label>Cancelar</ion-label>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons slot="end" (click)="close()"> <ion-buttons slot="end" (click)="close()">
<button class="btn-ok" fill="clear" color="#fff" > <button class="btn-ok" fill="clear" color="#fff">
<ion-label>Gravar</ion-label> <ion-label>Gravar</ion-label>
</button> </button>
</ion-buttons> </ion-buttons>
</div> </div>
</ion-footer> </ion-footer>
src/app/modals/profile/edit-profile/edit-profile.page.ts
+13 -2
View File
@@ -1,10 +1,10 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { AnimationController, ModalController } from '@ionic/angular'; import { AnimationController, ModalController,Platform } from '@ionic/angular';
import { FingerprintPage } from 'src/app/shared/fingerprint/fingerprint.page'; import { FingerprintPage } from 'src/app/shared/fingerprint/fingerprint.page';
import { PinPage } from 'src/app/shared/pin/pin.page'; import { PinPage } from 'src/app/shared/pin/pin.page';
import { SessionStore } from 'src/app/store/session.service'; import { SessionStore } from 'src/app/store/session.service';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { Platform } from '@ionic/angular'; import { BackgroundService } from 'src/app/services/background.service';
@Component({ @Component({
selector: 'app-edit-profile', selector: 'app-edit-profile',
@@ -19,6 +19,7 @@ export class EditProfilePage implements OnInit {
constructor(private modalController:ModalController, constructor(private modalController:ModalController,
private animationController: AnimationController, private animationController: AnimationController,
public platform: Platform, public platform: Platform,
private backgroundservice: BackgroundService
) {} ) {}
ngOnInit() {} ngOnInit() {}
@@ -113,5 +114,15 @@ export class EditProfilePage implements OnInit {
} }
changeTheme(name) {
/* this.theme.setTheme(themes[name]); */
if(name == 'grey') {
this.backgroundservice.greyTheme();
} else if (name == 'blue') {
this.backgroundservice.blueTheme();
}
}
} }
src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { NavigationEnd, NavigationExtras, Router } from '@angular/router';
import { customTask, DailyWorkTask } from '../../../models/dailyworktask.model'; import { customTask, DailyWorkTask } from '../../../models/dailyworktask.model';
import { ProcessesService } from 'src/app/services/processes.service'; import { ProcessesService } from 'src/app/services/processes.service';
import { formatDate } from '@angular/common'; import { formatDate } from '@angular/common';
import { ModalController, NavParams } from '@ionic/angular'; import { ModalController, NavParams, Platform } from '@ionic/angular';
import { AlertService } from 'src/app/services/alert.service'; import { AlertService } from 'src/app/services/alert.service';
import { DiplomaPage } from 'src/app/pages/gabinete-digital/diplomas/diploma/diploma.page'; import { DiplomaPage } from 'src/app/pages/gabinete-digital/diplomas/diploma/diploma.page';
import { CustomTaskPipe } from 'src/app/pipes/custom-task.pipe'; import { CustomTaskPipe } from 'src/app/pipes/custom-task.pipe';
src/app/services/background.service.ts
+31
View File
@@ -46,4 +46,35 @@ export class BackgroundService {
object object
}) })
} }
greyTheme() {
document.body.style.setProperty(`--color`, "#D9D9D9");
document.body.style.setProperty(`--color2`, "#f0f0f0");
document.body.style.setProperty(`--color3`, "#D9D9D9");
document.body.style.setProperty(`--color4`, "#d9d9d9ee");
document.body.style.setProperty(`--color5`, "#ececec");
document.body.style.setProperty(`--header-container-background`, "#fff");
document.body.style.setProperty(`--headercolor`, "#000");
document.body.style.setProperty(`--header-bottom-line-background`, "rgb(255, 0, 0)");
document.body.style.setProperty(`--header-bottom-line-background-image`, "linear-gradient(to right, #C63527, #FFB81C, #FFC72C)");
}
blueTheme() {
document.body.style.setProperty(`--color`, "#0782C9");
document.body.style.setProperty(`--color2`, "#45BAFF");
document.body.style.setProperty(`--color3`, "#0782C9");
document.body.style.setProperty(`--color4`, "#0782c9f0");
document.body.style.setProperty(`--color5`, "#f7f5f2");
document.body.style.setProperty(`--header-container-background`, "linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important");
document.body.style.setProperty(`--headercolor`, "#000");
document.body.style.setProperty(`--header-bottom-line-background`, "linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important");
document.body.style.setProperty(`--header-bottom-line-background-image`, "linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important");
}
} }
src/app/shared/header/header.page.html
+86 -75
View File
@@ -1,94 +1,105 @@
<div class="main-tab pb-10 ion-toolbar text-white"> <div class="header-container">
<div class="main-tab pb-10 ion-toolbar text-white">
<div class="mobile d-flex div-top-header justify-space-between"> <div class="mobile d-flex div-top-header justify-space-between">
<div *ngIf="!hideSearchBtn" class="div-search"> <div *ngIf="!hideSearchBtn" class="div-search">
<div (click)="openSearch()"> <div (click)="openSearch()">
<ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon> <ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon>
</div>
</div> </div>
</div> <div class="div-logo height-fit-content">
<div class="div-logo height-fit-content">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile cursor-pointer" (click)="openProfile()">
<div *ngIf="this.notificationLength > 0" class="icon-badge" >{{this.notificationLength}}</div>
<ion-icon class="icon" src='assets/images/icons-profile.svg'></ion-icon>
<ion-label class="profile-text">{{loggeduser.Profile}}</ion-label>
</div>
</div>
<div class="desktop mx-20">
<div class="d-flex justify-space-between align-center">
<div tab="events" class="div-logo height-fit-content">
<img src='assets/images/logo-no-bg.png' alt='logo'> <img src='assets/images/logo-no-bg.png' alt='logo'>
</div> </div>
<div class="div-profile cursor-pointer" (click)="openProfile()">
<div class="d-flex flex-1 pr-20 pl-50"> <div *ngIf="this.notificationLength > 0" class="icon-badge">{{this.notificationLength}}</div>
<ion-icon class="icon" src='assets/images/icons-profile.svg'></ion-icon>
<div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/events')" [class.active]="locationPathname() == '/home/events'"> <ion-label class="profile-text">{{loggeduser.Profile}}</ion-label>
<ion-icon class="font-40" src='assets/images/icons-nav-home-active.svg'></ion-icon>
<span>Início</span>
</div>
<div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/agenda')" [class.active]="locationPathname() == '/home/agenda'">
<ion-icon class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
<span>Agenda</span>
</div>
<div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/gabinete-digital')" [class.active]="locationPathname() == '/home/gabinete-digital'">
<ion-icon class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
<span>Gabinete</span>
</div>
<div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/publications')" [class.active]="locationPathname() == '/home/publications'">
<ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
<span>Acções</span>
</div>
<div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/chat')" [class.active]="locationPathname() == '/home/chat'">
<ion-icon class="font-40" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
<span>Chat</span>
</div>
</div> </div>
</div>
<div class="header-btns d-flex"> <div class="desktop mx-20">
<div *ngIf="!hideSearchBtn" class="mr-10 d-flex align-center cursor-pointer"> <div class="d-flex justify-space-between align-center">
<div style="padding-top: 5px;" (click)="openSearch();showSearch=true" *ngIf="!showSearch" > <div tab="events" class="div-logo height-fit-content">
<ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon> <img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="d-flex flex-1 pr-20 pl-50">
<div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/events')"
[class.active]="locationPathname() == '/home/events'">
<ion-icon class="font-40" src='assets/images/icons-nav-home-active-black.svg'></ion-icon>
<span>Início</span>
</div> </div>
<button class="btn-no-color" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch" >
<ion-icon class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
</button>
<div *ngIf="showSearch"> <div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/agenda')"
<div class="d-flex search-input-container ml-10 justify-between" *ngIf="showSearch" > [class.active]="locationPathname() == '/home/agenda'">
<div class="icon" (click)="basicSearch()"> <ion-icon class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
<ion-icon class="icon-z" slot="end" name="search"></ion-icon> <span>Agenda</span>
</div> </div>
<div class="input-text d-flex ion-align-items-center">
<ion-input (keyup.enter)="basicSearch()" [(ngModel)]='searchSubject' (ngModelChange)="dynamicSearch()" class="search-input text-black" type="search" placeholder="Pesquisar"></ion-input> <div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/gabinete-digital')"
</div> [class.active]="locationPathname() == '/home/gabinete-digital'">
<div class="icon" (click)="clearSearchInput()"> <ion-icon class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
<ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon> <span>Gabinete</span>
</div>
<div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/publications')"
[class.active]="locationPathname() == '/home/publications'">
<ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
<span>Acções</span>
</div>
<div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/chat')"
[class.active]="locationPathname() == '/home/chat'">
<ion-icon class="font-40" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
<span>Chat</span>
</div>
</div>
<div class="header-btns d-flex">
<div *ngIf="!hideSearchBtn" class="mr-10 d-flex align-center cursor-pointer">
<div style="padding-top: 5px;" (click)="openSearch();showSearch=true" *ngIf="!showSearch">
<ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon>
</div>
<button class="btn-no-color" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch">
<ion-icon class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
</button>
<div *ngIf="showSearch">
<div class="d-flex search-input-container ml-10 justify-between" *ngIf="showSearch">
<div class="icon" (click)="basicSearch()">
<ion-icon class="icon-z" slot="end" name="search"></ion-icon>
</div>
<div class="input-text d-flex ion-align-items-center">
<ion-input (keyup.enter)="basicSearch()" [(ngModel)]='searchSubject' (ngModelChange)="dynamicSearch()"
class="search-input text-black" type="search" placeholder="Pesquisar"></ion-input>
</div>
<div class="icon" (click)="clearSearchInput()">
<ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="div-profile d-flex cursor-pointer" (click)="openProfile()"> <div class="div-profile d-flex cursor-pointer" (click)="openProfile()">
<ion-icon class="icon" src='assets/images/icons-profile.svg'></ion-icon> <ion-icon class="icon" src='assets/images/icons-profile.svg'></ion-icon>
<div class="profile-text">
<ion-label>{{profileLabel(loggeduser.Profile)}}</ion-label>
<div *ngIf="this.notificationLength > 0 && !production" class="icon-badge"
style="right: -18px;top: -9px;">
{{notificationLength}}</div>
</div>
<div class="profile-text">
<ion-label>{{profileLabel(loggeduser.Profile)}}</ion-label>
<div *ngIf="this.notificationLength > 0 && !production" class="icon-badge" style="right: -18px;top: -9px;" >{{notificationLength}}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="header-bottom-line"></div>
</div> </div>
src/assets/images/icons-nav-home-active-black.svg
+18
View File
@@ -0,0 +1,18 @@
<svg class="svgInicioIcon" width="40" height="40" viewBox="0 0 40 40">
<defs>
<filter id="enll4xclfa">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g filter="url(#enll4xclfa)" transform="translate(-201 -12) translate(20) translate(176) translate(5 12)">
<path stroke="#080808" stroke-width="2" d="M20 8.136l12 6.461V30c0 .552-.224 1.052-.586 1.414-.362.362-.862.586-1.414.586h0-5v-5c0-.788-.304-1.505-.8-2.04-.51-.549-1.222-.906-2.017-.954h0L18 24c-.788 0-1.505.304-2.04.8-.549.51-.906 1.222-.954 2.017h0L15 32H10c-.552 0-1.052-.224-1.414-.586C8.224 31.052 8 30.552 8 30h0V14.597l12-6.461z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 940 B

src/global.scss
+22
View File
@@ -740,6 +740,10 @@ app-header-no-search .ion-toolbar{
--notificationtypeagenda2: #f7f5f2; --notificationtypeagenda2: #f7f5f2;
--notificationtypeagenda3: #f7f5f2; --notificationtypeagenda3: #f7f5f2;
--notificationtypeagenda4: #f7f5f2; --notificationtypeagenda4: #f7f5f2;
--header-container-background: linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important;
--headercolor: #000;
--header-bottom-line-background: linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important;
--header-bottom-line-background-image: linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important;
} }
body, .blue-background{ background: var(--color) !important;} body, .blue-background{ background: var(--color) !important;}
@@ -773,6 +777,24 @@ ion-content {
padding: 0px 20px 0 20px !important; padding: 0px 20px 0 20px !important;
} }
app-header .header-container{
background: var(--header-container-background) !important;
color: var(--headercolor);
}
app-header .header-bottom-line{
width: 100%;
height: 5px !important;
background-color: var(--header-bottom-line-background) !important;
background-image: var(--header-bottom-line-background-image) !important;
}
.svgInicioIcon {
fill: none;
stroke-width: 3;
stroke: #080808;
}
.chat-popover .popover-content { .chat-popover .popover-content {
width: 100% !important; width: 100% !important;