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

fix

Browse Source
This commit is contained in:
Lorito Tiago
2023-07-26 16:48:27 +01:00
parent a08bb5d4f4
commit d31394ad39
7 changed files with 626 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ios/App/Podfile
+1
View File
@@ -20,6 +20,7 @@ def capacitor_pods
pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard' pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
pod 'CapacitorLocalNotifications', :path => '../../node_modules/@capacitor/local-notifications' pod 'CapacitorLocalNotifications', :path => '../../node_modules/@capacitor/local-notifications'
pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network' pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
pod 'CapacitorPushNotifications', :path => '../../node_modules/@capacitor/push-notifications'
pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share' pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage' pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
pod 'SentryCapacitor', :path => '../../node_modules/@sentry/capacitor' pod 'SentryCapacitor', :path => '../../node_modules/@sentry/capacitor'
src/app/modals/profile/edit-profile/edit-profile.page.html
+25 -14
View File
@@ -1,13 +1,15 @@
<ion-content class=" bg-blue"> <ion-content class=" bg-blue">
<div class="main-content width-100 overflow-y-auto height-100"> <div class="main-content width-100 overflow-y-auto height-100 header-fix">
<div class="profile-header width-100"> <div class="profile-header width-100">
<div class="div-logo width-40"> <div class="div-logo width-40">
<div class="logo-icon"> <div class="logo-icon">
<img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'> <img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'>
<img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'> <img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'>
<img *ngIf="ThemeService.currentTheme == 'doneIt' " src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A1.png' alt='logo'> <img *ngIf="ThemeService.currentTheme == 'doneIt' "
src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A1.png' alt='logo'>
</div> </div>
<div *ngIf="ThemeService.currentTheme == 'gov'" class="logo-description d-flex align-center justify-content-center"> <div *ngIf="ThemeService.currentTheme == 'gov'"
class="logo-description d-flex align-center justify-content-center">
<div class="logo-description-content"> <div class="logo-description-content">
<!-- <p class="logo-description-text">Calendário Partilhado</p> --> <!-- <p class="logo-description-text">Calendário Partilhado</p> -->
<p class="logo-description-text tp-5">{{ environment.logoLabel }}</p> <p class="logo-description-text tp-5">{{ environment.logoLabel }}</p>
@@ -15,7 +17,8 @@
<p class="logo-description-text tp-5">GABINETE DIGITAL</p> <p class="logo-description-text tp-5">GABINETE DIGITAL</p>
</div> </div>
</div> </div>
<div *ngIf="ThemeService.currentTheme == 'default'" class="logo-description d-flex align-center justify-content-center"> <div *ngIf="ThemeService.currentTheme == 'default'"
class="logo-description d-flex align-center justify-content-center">
<div class="logo-description-content"> <div class="logo-description-content">
<!-- <p class="logo-description-text color-white">Calendário Partilhado</p> --> <!-- <p class="logo-description-text color-white">Calendário Partilhado</p> -->
<p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p> <p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p>
@@ -24,18 +27,23 @@
</div> </div>
</div> </div>
<div *ngIf="ThemeService.currentTheme == 'doneIt'" class="logo-description d-flex align-center justify-content-center"> <div *ngIf="ThemeService.currentTheme == 'doneIt'"
class="logo-description d-flex align-center justify-content-center">
<div class="logo-description-content"> <div class="logo-description-content">
<!-- <p class="logo-description-text color-white">Calendário Partilhado</p> --> <!-- <p class="logo-description-text color-white">Calendário Partilhado</p> -->
<p class="logo-description-text tp-5 color-white" style="color: transparent;">{{ environment.logoLabel }}</p> <p class="logo-description-text tp-5 color-white" style="color: transparent;">{{ environment.logoLabel }}
</p>
<div class="add-line-white"></div> <div class="add-line-white"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="btn-close d-flex cursor-pointer" (click)="close()"> <div class="btn-close d-flex cursor-pointer" (click)="close()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" src="assets/images/icons-search-close.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon"
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon> src="assets/images/icons-search-close.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon"
src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon"
src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon>
</div> </div>
</div> </div>
<div class="profile-content overflow-y-auto width-100 height-100"> <div class="profile-content overflow-y-auto width-100 height-100">
@@ -51,9 +59,12 @@
<div> <div>
<div class="d-flex align-center"> <div class="d-flex align-center">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="profile-pic" src="assets/images/icons-default-profile.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="profile-pic"
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="profile-pic" src="assets/images/theme/gov/icons-profile.svg"></ion-icon> src="assets/images/icons-default-profile.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="profile-pic" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="profile-pic"
src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="profile-pic"
src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
</div> </div>
</div> </div>
@@ -94,8 +105,8 @@
<img style="width: 40px;" src="assets/images/theme/gov/governoangola_A.png"> <img style="width: 40px;" src="assets/images/theme/gov/governoangola_A.png">
</div> </div>
<div class="btn-close d-flex cursor-pointer pr-10 pl-10" (click)="changeTheme('default')" > <div class="btn-close d-flex cursor-pointer pr-10 pl-10" (click)="changeTheme('default')">
<img style="width: 40px;" src="assets/images/logo-removebg-preview.png"/> <img style="width: 40px;" src="assets/images/logo-removebg-preview.png" />
</div> </div>
<!-- <div class="btn-close d-flex cursor-pointer pr-10" (click)="changeTheme('doneIt')" > <!-- <div class="btn-close d-flex cursor-pointer pr-10" (click)="changeTheme('doneIt')" >
src/app/modals/profile/profile.page.html
+32 -23
View File
@@ -1,19 +1,22 @@
<ion-header class=" bg-blue ion-no-border"> <ion-header class=" bg-blue ion-no-border header-fix">
<div class="profile-header width-100"> <div class="profile-header width-100">
<div class="div-logo d-md-none width-40"> <div class="div-logo d-md-none width-40">
<div class="logo-icon" *ngIf="hideImage"> <div class="logo-icon" *ngIf="hideImage">
<img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'> <img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'>
<img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'> <img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'>
<img *ngIf="ThemeService.currentTheme == 'doneIt' " src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A.png' alt='logo'> <img *ngIf="ThemeService.currentTheme == 'doneIt' "
src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A.png' alt='logo'>
</div> </div>
<div *ngIf="ThemeService.currentTheme == 'gov'" class="logo-description d-flex align-center justify-content-center"> <div *ngIf="ThemeService.currentTheme == 'gov'"
class="logo-description d-flex align-center justify-content-center">
<div class="logo-description-content"> <div class="logo-description-content">
<p class="logo-description-text tp-5">{{ environment.logoLabel }}</p> <p class="logo-description-text tp-5">{{ environment.logoLabel }}</p>
<div class="add-line"></div> <div class="add-line"></div>
<p class="logo-description-text tp-5">GABINETE DIGITAL</p> <p class="logo-description-text tp-5">GABINETE DIGITAL</p>
</div> </div>
</div> </div>
<div *ngIf="ThemeService.currentTheme == 'default'" class="logo-description d-flex align-center justify-content-center"> <div *ngIf="ThemeService.currentTheme == 'default'"
class="logo-description d-flex align-center justify-content-center">
<div class="logo-description-content"> <div class="logo-description-content">
<p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p> <p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p>
<div class="add-line-white"></div> <div class="add-line-white"></div>
@@ -22,9 +25,12 @@
</div> </div>
</div> </div>
<div class="btn-close d-flex cursor-pointer" *ngIf="hideImage" (click)="close()"> <div class="btn-close d-flex cursor-pointer" *ngIf="hideImage" (click)="close()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' "class="icon" src="assets/images/icons-search-close.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon"
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon> src="assets/images/icons-search-close.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon"
src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon"
src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon>
</div> </div>
</div> </div>
</ion-header> </ion-header>
@@ -32,18 +38,18 @@
<div class="profile-content"> <div class="profile-content">
<div class="profile-name d-flex justify-content-center width-100"> <div class="profile-name d-flex justify-content-center width-100">
<ion-label >{{SessionStore.user.FullName}}</ion-label> <ion-label>{{SessionStore.user.FullName}}</ion-label>
</div> </div>
<div class="profile-title d-flex justify-content-center width-100"> <div class="profile-title d-flex justify-content-center width-100">
<ion-label *ngIf="SessionStore.user.RoleDescription" >{{SessionStore.user.RoleDescription}}</ion-label> <ion-label *ngIf="SessionStore.user.RoleDescription">{{SessionStore.user.RoleDescription}}</ion-label>
</div> </div>
<div class="d-flex mt-10 width-100"> <div class="d-flex mt-10 width-100">
<ion-buttons slot="start" class="buttonSize" > <ion-buttons slot="start" class="buttonSize">
<button (click)="logout()" class="btn-delete" fill="clear" > <button (click)="logout()" class="btn-delete" fill="clear">
<ion-label style="color:#d30a0a;">Terminar sessão</ion-label> <ion-label style="color:#d30a0a;">Terminar sessão</ion-label>
</button> </button>
<button (click)="editProfile()" class="btn-cancel" fill="clear" color="#fff" > <button (click)="editProfile()" class="btn-cancel" fill="clear" color="#fff">
<ion-label>Editar Perfil</ion-label> <ion-label>Editar Perfil</ion-label>
</button> </button>
</ion-buttons> </ion-buttons>
@@ -60,24 +66,27 @@
<ion-list> <ion-list>
<div class="item cursor-pointer ion-no-padding ion-no-margin" lines="none" <div class="item cursor-pointer ion-no-padding ion-no-margin" lines="none"
*ngFor = "let item of notificationdata; let i = index" *ngFor="let item of notificationdata; let i = index"
(click)="notificatinsRoutes(item.index,item.Service,item.Object,item.IdObject,item.FolderId)" (click)="notificatinsRoutes(item.index,item.Service,item.Object,item.IdObject,item.FolderId)">
>
<div class="item-conten-{{item.Service}}-{{item.TypeAgenda}}-{{item.Role}}"> <div class="item-conten-{{item.Service}}-{{item.TypeAgenda}}-{{item.Role}}">
<div class="notification-item"> <div class="notification-item">
<img class="notification-icon" slot="end" *ngIf = "item.Service == 'agenda'" src="assets/images/icons-default-agenda.svg" > <img class="notification-icon" slot="end" *ngIf="item.Service == 'agenda'"
<img class="notification-icon" slot="end" *ngIf = "item.Service == 'gabinete-digital'" src="assets/images/icons-correspondencias.svg" > src="assets/images/icons-default-agenda.svg">
<img class="notification-icon" slot="end" *ngIf = "item.Service == 'accoes'" src="assets/images/icons-nav-accoes-active.svg" > <img class="notification-icon" slot="end" *ngIf="item.Service == 'gabinete-digital'"
<img class="notification-icon" slot="end" *ngIf = "item.Service == 'chat'" src="assets/images/icons-nav-agenda-active.svg" > src="assets/images/icons-correspondencias.svg">
<img class="notification-icon" slot="end" *ngIf="item.Service == 'accoes'"
src="assets/images/icons-nav-accoes-active.svg">
<img class="notification-icon" slot="end" *ngIf="item.Service == 'chat'"
src="assets/images/icons-nav-agenda-active.svg">
</div> </div>
<div class="approve-event-time"> <div class="approve-event-time">
<p *ngIf = "item.Service == 'agenda'">{{item.dateInit}}</p> <p *ngIf="item.Service == 'agenda'">{{item.dateInit}}</p>
<p *ngIf = "item.Service == 'agenda'">{{item.dateEnd}}</p> <p *ngIf="item.Service == 'agenda'">{{item.dateEnd}}</p>
</div> </div>
<div class="approve-event-detail"> <div class="approve-event-detail">
<p *ngIf = "item.Service == 'agenda'">{{item.Location}}</p> <p *ngIf="item.Service == 'agenda'">{{item.Location}}</p>
<h3 id="profile-title">{{item.title}}</h3> <h3 id="profile-title">{{item.title}}</h3>
<p id="profile-title" *ngIf = "item.Service != 'agenda'">{{item.body}}</p> <p id="profile-title" *ngIf="item.Service != 'agenda'">{{item.body}}</p>
</div> </div>
</div> </div>
</div> </div>
src/app/pages/chat/group-messages/group-messages.page.scss
+96 -71
View File
@@ -1,68 +1,73 @@
@import '~src/function.scss'; @import '~src/function.scss';
.header-toolbar{
--background:transparent; .header-toolbar {
--background: transparent;
--opacity: 1; --opacity: 1;
.main-header{ .main-header {
width: 100%; /* 400px */ width: 100%;
/* 400px */
height: 100%; height: 100%;
font-family: Roboto; font-family: Roboto;
border-top-left-radius: 25px; border-top-left-radius: 25px;
border-top-right-radius: 25px; border-top-right-radius: 25px;
background-color: #fff; background-color: #fff;
overflow:hidden; overflow: hidden;
padding: 30px 20px 0px 20px; padding: 30px 20px 0px 20px;
color:#000; color: #000;
transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0);
.header-top{ .header-top {
overflow: auto; overflow: auto;
padding: 0 !important; padding: 0 !important;
background: #fff; background: #fff;
.left{ .left {
width: fit-content; width: fit-content;
float: left; float: left;
//font-size: rem(35); //font-size: rem(35);
overflow: hidden; overflow: hidden;
} }
.middle-container{ .middle-container {
display: flex; display: flex;
overflow: auto; overflow: auto;
height: auto; height: auto;
width:calc(100% - 47px); width: calc(100% - 47px);
float: left; float: left;
/* white-space: nowrap; /* white-space: nowrap;
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; */ text-overflow: ellipsis !important; */
.middle{ .middle {
width: 100%; width: 100%;
padding: 0!important; padding: 0 !important;
margin: 0 0 0 10px; margin: 0 0 0 10px;
font-size: rem(25); font-size: rem(25);
} }
} }
.middle-container-options{
padding: 0!important; .middle-container-options {
padding: 0 !important;
float: left; float: left;
width: calc(100% - 67px); width: calc(100% - 67px);
text-align: right; text-align: right;
.middle-container-options-icons{ .middle-container-options-icons {
color: #0782c9; color: #0782c9;
font-size: rem(23); font-size: rem(23);
} }
} }
.right{
padding: 0!important; .right {
padding: 0 !important;
float: right; float: right;
font-size: rem(25); font-size: rem(25);
color: #0782c9; color: #0782c9;
} }
.header-top-btn{
.header-top-btn {
background: transparent; background: transparent;
font-size: rem(25) !important; font-size: rem(25) !important;
font-weight: 100 !important; font-weight: 100 !important;
@@ -71,19 +76,21 @@
padding: 0 5px 0 5px; padding: 0 5px 0 5px;
} }
} }
.header-bottom{
.header-bottom {
padding-left: 10px; padding-left: 10px;
overflow: auto; overflow: auto;
margin: 0 auto; margin: 0 auto;
.header-bottom-icon{ .header-bottom-icon {
width: rem(30); width: rem(30);
font-size: rem(25); font-size: rem(25);
float: left; float: left;
padding: 2px; padding: 2px;
} }
.header-bottom-contacts{
.header-bottom-contacts {
width: calc(100% - 40px); width: calc(100% - 40px);
font-size: rem(15); font-size: rem(15);
color: #797979; color: #797979;
@@ -94,7 +101,7 @@
padding: 5px; padding: 5px;
margin: 1px; margin: 1px;
.contacts-list{ .contacts-list {
white-space: nowrap; white-space: nowrap;
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
@@ -102,21 +109,23 @@
} }
} }
.div-icon{ .div-icon {
width: rem(40); width: rem(40);
float: right; float: right;
font-size: rem(35); font-size: rem(35);
overflow: auto; overflow: auto;
padding: 1px; padding: 1px;
} }
.div-icon ion-icon{
.div-icon ion-icon {
float: right; float: right;
padding-left: 20px; padding-left: 20px;
} }
} }
} }
ion-content{
.welcome-text{ ion-content {
.welcome-text {
/* width: 322px; */ /* width: 322px; */
width: em(422px); width: em(422px);
background: #ebebeb; background: #ebebeb;
@@ -129,7 +138,8 @@
margin: 20px 39px 25px; margin: 20px 39px 25px;
border-radius: 8px; border-radius: 8px;
} }
.info-text{
.info-text {
display: flex; display: flex;
width: fit-content; width: fit-content;
height: auto; height: auto;
@@ -142,7 +152,8 @@
line-height: 1.2rem; line-height: 1.2rem;
border-radius: 8px; border-radius: 8px;
} }
.info-text-leave{
.info-text-leave {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -155,12 +166,13 @@
font-size: rem(13) !important; font-size: rem(13) !important;
/* margin: 15px 0px 15px 0px; */ /* margin: 15px 0px 15px 0px; */
.info-text-leave ion-label{ .info-text-leave ion-label {
font-size: rem(13) !important; font-size: rem(13) !important;
line-height: 1.2rem; line-height: 1.2rem;
} }
} }
.messages{
.messages {
font-size: rem(13); font-size: rem(13);
font-family: Roboto; font-family: Roboto;
overflow: auto; overflow: auto;
@@ -176,66 +188,74 @@
word-wrap: break-word; word-wrap: break-word;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
.messages-list-item-wrapper{ .messages-list-item-wrapper {
overflow: hidden; overflow: hidden;
} }
.messages-list-item-wrapper-active{
.messages-list-item-wrapper-active {
background: #e6f6ff75 !important; background: #e6f6ff75 !important;
} }
.message-container{ .message-container {
//border: 1px solid red; //border: 1px solid red;
} }
.incoming-true, .incoming-false{ .incoming-true,
.incoming-false {
width: 305px; width: 305px;
padding: 15px 20px; padding: 15px 20px;
border-radius: 10px; border-radius: 10px;
} }
.incoming-true{ .incoming-true {
margin: 10px 75px 10px 20px; margin: 10px 75px 10px 20px;
background: #ebebeb; background: #ebebeb;
float: left; float: left;
} }
} }
.incoming-false{
.incoming-false {
margin: 10px 20px 10px 75px; margin: 10px 20px 10px 75px;
background: var(--chat-incoming-msg-color); background: var(--chat-incoming-msg-color);
float: right; float: right;
} }
.title{
.title {
color: var(--title-text-color); color: var(--title-text-color);
font-weight: bold; font-weight: bold;
margin-bottom: 5px; margin-bottom: 5px;
.time{ .time {
color: #797979; color: #797979;
text-align: right; text-align: right;
float: right; float: right;
} }
} }
.online{ .online {
color:#99e47b !important; color: #99e47b !important;
}
.offline{
color:#cbced1 !important;
}
.away{
color:#ffd21f !important;
}
.invisible{
color:#cbced1 !important;
}
.busy{
color:#f5455c !important;
}
} }
.info-meeting{ .offline {
color: #cbced1 !important;
}
.away {
color: #ffd21f !important;
}
.invisible {
color: #cbced1 !important;
}
.busy {
color: #f5455c !important;
}
}
.info-meeting {
/* width: 322px; */ /* width: 322px; */
width: em(422); width: em(422);
background: var(--chat-alert-msg-color); background: var(--chat-alert-msg-color);
@@ -248,52 +268,56 @@
/* margin: 15px 0px 15px 0px; */ /* margin: 15px 0px 15px 0px; */
border-radius: 8px; border-radius: 8px;
.info-meeting-small{ .info-meeting-small {
font-size: rem(10); font-size: rem(10);
font-style: italic; font-style: italic;
} }
.info-meeting-medium{
.info-meeting-medium {
font-size: rem(12); font-size: rem(12);
} }
.info-meeting-normal{
.info-meeting-normal {
color: #0782c9; color: #0782c9;
font-weight: 700; font-weight: 700;
text-decoration: underline; text-decoration: underline;
} }
.info-meeting-normal:hover{
.info-meeting-normal:hover {
text-decoration: underline; text-decoration: underline;
color: #0782c9; color: #0782c9;
} }
} }
ion-footer{ ion-footer {
padding-top: 7.5px; padding-top: 7.5px;
padding-bottom: 7.5px; padding-bottom: 20px;
.container{
.container {
justify-content: center; justify-content: center;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
.message-box{ .message-box {
margin: 0 5px 0 5px; margin: 0 5px 0 5px;
} }
} }
.chat-icon-options{ .chat-icon-options {
display:block !important; display: block !important;
font-size: rem(35); font-size: rem(35);
float: right !important; float: right !important;
margin-top: 5px; margin-top: 5px;
} }
.chat-icon-send{ .chat-icon-send {
font-size: rem(40); font-size: rem(40);
margin: 0 auto; margin: 0 auto;
margin-top: 4px; margin-top: 4px;
} }
.type-message{ .type-message {
display: flex; display: flex;
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
border-radius: 25px; border-radius: 25px;
@@ -302,13 +326,14 @@
overflow: auto; overflow: auto;
ion-textarea{ ion-textarea {
margin: 0 !important; margin: 0 !important;
align-self: center; align-self: center;
} }
} }
} }
.preview-slides { .preview-slides {
margin-top: 20%; margin-top: 20%;
background: #e6e6e6; background: #e6e6e6;
@@ -361,14 +386,14 @@
} }
.float-status{ .float-status {
position: relative !important; position: relative !important;
float: right; float: right;
display: flex; display: flex;
align-items: self-end; align-items: self-end;
} }
.float-status-image{ .float-status-image {
position: relative !important; position: relative !important;
float: right; float: right;
display: flex; display: flex;
src/app/pages/chat/messages/messages.page.scss
+105 -84
View File
@@ -4,48 +4,49 @@
@media only screen and (min-width: 100px) { @media only screen and (min-width: 100px) {
:host{ :host {
font-size: 14px; font-size: 14px;
} }
} }
@media only screen and (min-width: 500px) { @media only screen and (min-width: 500px) {
:host{ :host {
font-size: 16px; font-size: 16px;
} }
} }
.header-toolbar{ .header-toolbar {
--background:transparent; --background: transparent;
--opacity: 1; --opacity: 1;
.main-header{ .main-header {
width: 100%; /* 400px */ width: 100%;
/* 400px */
height: 100%; height: 100%;
font-family: Roboto; font-family: Roboto;
border-top-left-radius: 25px; border-top-left-radius: 25px;
border-top-right-radius: 25px; border-top-right-radius: 25px;
background-color: #fff; background-color: #fff;
overflow:hidden; overflow: hidden;
padding: 30px 20px 0px 20px; padding: 30px 20px 0px 20px;
color:#000; color: #000;
transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0);
.header-top{ .header-top {
margin: 0px auto; margin: 0px auto;
overflow: auto; overflow: auto;
padding: 0 !important; padding: 0 !important;
background: #fff; background: #fff;
.left{ .left {
width: fit-content; width: fit-content;
float: left; float: left;
//font-size: rem(35); //font-size: rem(35);
overflow: hidden; overflow: hidden;
.header-top-btn{ .header-top-btn {
background: transparent; background: transparent;
font-size: rem(25) !important; font-size: rem(25) !important;
font-weight: 100 !important; font-weight: 100 !important;
@@ -54,54 +55,57 @@
} }
} }
.middle-container{ .middle-container {
overflow: auto; overflow: auto;
height: auto; height: auto;
.middle{ .middle {
padding: 0!important; padding: 0 !important;
float: left; float: left;
width:calc(100% - 77px); width: calc(100% - 77px);
margin: 0px 0 0 10px; margin: 0px 0 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
.middle-container-options{ .middle-container-options {
padding: 0!important; padding: 0 !important;
float: left; float: left;
width: calc(100% - 25px); width: calc(100% - 25px);
text-align: right; text-align: right;
.middle-container-options-icons{ .middle-container-options-icons {
color: #0782c9; color: #0782c9;
font-size: rem(23); font-size: rem(23);
} }
} }
.right{
padding: 0!important; .right {
padding: 0 !important;
float: right; float: right;
font-size: rem(25 ); font-size: rem(25);
color: #0782c9; color: #0782c9;
margin: 5px 0 0 0; margin: 5px 0 0 0;
} }
} }
.header-bottom{
.header-bottom {
width: 310px; width: 310px;
overflow: auto; overflow: auto;
margin: 0 auto; margin: 0 auto;
.header-bottom-icon{ .header-bottom-icon {
width: rem(30); width: rem(30);
font-size: rem(25); font-size: rem(25);
float: left; float: left;
padding: 2px; padding: 2px;
} }
.header-bottom-contacts{
.header-bottom-contacts {
width: 275px; width: 275px;
font-size: rem(15) ; font-size: rem(15);
color: #797979; color: #797979;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -112,34 +116,36 @@
} }
} }
.title{ .title {
font-size: rem(25); font-size: rem(25);
white-space: nowrap; white-space: nowrap;
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
float: left; float: left;
} }
.div-icon{
.div-icon {
width: rem(40); width: rem(40);
float: right; float: right;
font-size: rem(35); font-size: rem(35);
overflow: auto; overflow: auto;
padding: 1px; padding: 1px;
} }
.div-icon ion-icon{
.div-icon ion-icon {
float: right; float: right;
padding-left: 20px; padding-left: 20px;
} }
} }
} }
ion-content{ ion-content {
.welcome-text{ .welcome-text {
/* width: 322px; */ /* width: 322px; */
width: rem(422); width: rem(422);
background: #ebebeb; background: #ebebeb;
text-align: center; text-align: center;
font-size: rem(13) ; font-size: rem(13);
color: #797979; color: #797979;
padding: 10px; padding: 10px;
margin: 0 auto; margin: 0 auto;
@@ -147,8 +153,9 @@
margin: 20px 39px 25px; margin: 20px 39px 25px;
border-radius: 8px; border-radius: 8px;
} }
.messages{
font-size: rem(13) ; .messages {
font-size: rem(13);
font-family: Roboto; font-family: Roboto;
overflow: auto; overflow: auto;
@@ -163,55 +170,59 @@
word-wrap: break-word; word-wrap: break-word;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
.messages-list-itrem-wrapper{ .messages-list-itrem-wrapper {
overflow: hidden; overflow: hidden;
} }
.messages-list-itrem-wrapper-active{
.messages-list-itrem-wrapper-active {
background: #e6f6ff75 !important; background: #e6f6ff75 !important;
} }
.message-container{ .message-container {
//border: 1px solid red; //border: 1px solid red;
} }
.incoming-true, .incoming-false{ .incoming-true,
.incoming-false {
width: 305px; width: 305px;
padding: 15px 20px; padding: 15px 20px;
border-radius: 10px; border-radius: 10px;
} }
.incoming-true{ .incoming-true {
margin: 10px 75px 10px 20px; margin: 10px 75px 10px 20px;
background: #ebebeb; background: #ebebeb;
float: left; float: left;
} }
} }
.incoming-false{
.incoming-false {
margin: 10px 20px 10px 75px; margin: 10px 20px 10px 75px;
background: var(--chat-incoming-msg-color); background: var(--chat-incoming-msg-color);
float: right; float: right;
} }
.title{
.title {
display: inline; display: inline;
color: var(--title-text-color); color: var(--title-text-color);
font-weight: bold; font-weight: bold;
margin-bottom: 5px; margin-bottom: 5px;
.time{ .time {
color: #797979; color: #797979;
text-align: right; text-align: right;
float: right; float: right;
} }
} }
} }
.info-meeting{ .info-meeting {
/* width: 322px; */ /* width: 322px; */
width: rem(422); width: rem(422);
background: var(--chat-alert-msg-color); background: var(--chat-alert-msg-color);
text-align: center; text-align: center;
font-size: rem(13) ; font-size: rem(13);
color: #262420; color: #262420;
padding: 10px; padding: 10px;
margin: 10px auto; margin: 10px auto;
@@ -219,47 +230,51 @@
/* margin: 15px 0px 15px 0px; */ /* margin: 15px 0px 15px 0px; */
border-radius: 8px; border-radius: 8px;
.info-meeting-small{ .info-meeting-small {
font-size: rem(10) ; font-size: rem(10);
font-style: italic; font-style: italic;
} }
.info-meeting-medium{
.info-meeting-medium {
font-size: rem(12); font-size: rem(12);
} }
.info-meeting-normal{
.info-meeting-normal {
color: #0782c9; color: #0782c9;
font-weight: 700; font-weight: 700;
text-decoration: underline; text-decoration: underline;
} }
.info-meeting-normal:hover{
.info-meeting-normal:hover {
text-decoration: underline; text-decoration: underline;
color: #0782c9; color: #0782c9;
} }
} }
ion-footer{ ion-footer {
padding-top: 7.5px; padding-top: 7.5px;
padding-bottom: 7.5px; padding-bottom: 20px;
.container{
.container {
justify-content: center; justify-content: center;
justify-content: space-evenly; justify-content: space-evenly;
align-itrems: center; align-itrems: center;
} }
.chat-icon-options{ .chat-icon-options {
display:block !important; display: block !important;
font-size: rem(35); font-size: rem(35);
float: right !important; float: right !important;
margin-top: 5px; margin-top: 5px;
} }
.chat-icon-send{ .chat-icon-send {
font-size: rem(40); font-size: rem(40);
margin: 0 auto; margin: 0 auto;
margin-top: 4px; margin-top: 4px;
} }
.type-message{ .type-message {
display: flex; display: flex;
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
border-radius: 25px; border-radius: 25px;
@@ -267,7 +282,7 @@
align-itrems: center; align-itrems: center;
overflow: auto; overflow: auto;
ion-textarea{ ion-textarea {
margin: 0 !important; margin: 0 !important;
align-self: center; align-self: center;
overflow: auto; overflow: auto;
@@ -276,44 +291,50 @@
} }
.text-color-blue{ .text-color-blue {
font-size: rem(15); font-size: rem(15);
color: #0782c9; color: #0782c9;
font-weight: 500; font-weight: 500;
letter-spacing: normal; letter-spacing: normal;
} }
.user-status-online{
.user-status-online {
display: block; display: block;
float: left; float: left;
color:#99e47b; color: #99e47b;
padding-left: 10px;
}
.online{
display: block;
float: left;
color:#99e47b;
padding-left: 10px; padding-left: 10px;
} }
.offline{
color:#cbced1; .online {
display: block;
float: left;
color: #99e47b;
padding-left: 10px;
}
.offline {
color: #cbced1;
display: block; display: block;
float: left; float: left;
padding-left: 10px; padding-left: 10px;
} }
.away{
color:#ffd21f; .away {
display: block; color: #ffd21f;
float: left;
padding-left: 10px;
}
.invisible{
color:#cbced1;
display: block; display: block;
float: left; float: left;
padding-left: 10px; padding-left: 10px;
} }
.busy{
color:#f5455c; .invisible {
color: #cbced1;
display: block;
float: left;
padding-left: 10px;
}
.busy {
color: #f5455c;
display: block; display: block;
float: left; float: left;
padding-left: 10px; padding-left: 10px;
@@ -337,7 +358,7 @@ display: block;
} }
button{ button {
padding: 0px; padding: 0px;
border: 0px; border: 0px;
} }
@@ -348,14 +369,14 @@ button::-moz-focus-inner {
} }
.float-status{ .float-status {
position: relative !important; position: relative !important;
float: right; float: right;
display: flex; display: flex;
align-itrems: self-end; align-itrems: self-end;
} }
.float-status-image{ .float-status-image {
position: relative !important; position: relative !important;
float: right; float: right;
display: flex; display: flex;
src/app/shared/popover/chat-popover/chat-popover.page.html
+10 -7
View File
@@ -1,16 +1,19 @@
<ion-content class="options-container"> <ion-content class="options-container">
<div class="arrow-right"> <div class="arrow-right header-fix">
<button class="btn-no-color" (click)="close('cancel')"> <button class="btn-no-color" (click)="close('cancel')">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' "slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" class="arrow-right-icon"
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" class="arrow-right-icon" src='assets/images/theme/gov/icons-calendar-arrow-right.svg'></ion-icon> src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" class="arrow-right-icon"
src='assets/images/theme/gov/icons-calendar-arrow-right.svg'></ion-icon>
</button> </button>
</div> </div>
<div class="buttons"> <div class="buttons">
<button *ngIf="isAdmin" (click)="addUser()" class="btn-cancel" shape="round" >Adicionar</button> <button *ngIf="isAdmin" (click)="addUser()" class="btn-cancel" shape="round">Adicionar</button>
<button (click)="leaveGroup()" class="btn-cancel" shape="round" >Sair do Grupo</button> <button (click)="leaveGroup()" class="btn-cancel" shape="round">Sair do Grupo</button>
<button *ngIf="isAdmin" (click)="openChangeGroupName()" class="btn-cancel btn-cancel mt-10" shape="round" >Alterar nome do grupo</button> <button *ngIf="isAdmin" (click)="openChangeGroupName()" class="btn-cancel btn-cancel mt-10" shape="round">Alterar
nome do grupo</button>
<div class="solid"></div> <div class="solid"></div>
<button (click)="close('cancel')" full class="btn-cancel mobile-only" shape="round" >Cancelar</button> <button (click)="close('cancel')" full class="btn-cancel mobile-only" shape="round">Cancelar</button>
<button *ngIf="isAdmin" (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button> <button *ngIf="isAdmin" (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
</div> </div>
</ion-content> </ion-content>
src/style/ios.scss
+36 -24
View File
@@ -82,6 +82,7 @@
-o-transform: none !important; -o-transform: none !important;
} }
} }
.modal-desktop-remove-background::part(backdrop) { .modal-desktop-remove-background::part(backdrop) {
display: none; display: none;
transform: none !important; transform: none !important;
@@ -159,34 +160,45 @@ ion-modal::part(content) {
bottom: 0 !important; bottom: 0 !important;
right: 0 !important; right: 0 !important;
top: unset !important; top: unset !important;
} }
.group-duration::part(content) {
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: unset !important;
}
.chat-popover::part(content) { .group-duration::part(content) {
width: 100% !important; width: 100% !important;
left: 0 !important; left: 0 !important;
bottom: 0 !important; bottom: 0 !important;
right: 0 !important; right: 0 !important;
top: unset !important; top: unset !important;
} }
.messages-options::part(content) {
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: unset !important;
}
.events-options::part(content) {
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: unset !important;
}
.chat-popover::part(content) {
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: unset !important;
}
.messages-options::part(content) {
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: unset !important;
}
.events-options::part(content) {
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: unset !important;
}
ion-toolbar {
padding-top: 0px !important;
}
.header-fix {
padding-top: var(--ion-safe-area-top);
}