+
-
@@ -61,6 +62,33 @@
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
diff --git a/src/app/chat-page/chat-page.component.scss b/src/app/chat-page/chat-page.component.scss
index d5fbcbb..ae30c09 100644
--- a/src/app/chat-page/chat-page.component.scss
+++ b/src/app/chat-page/chat-page.component.scss
@@ -17,6 +17,13 @@
border-radius: 50%;
overflow: hidden;
margin: 0 10px 5px 0px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.hidden {
+ display: none;
+ }
.icon {
width: 18px;
@@ -30,6 +37,17 @@
object-fit: cover;
}
}
+
+ input {
+ border: 0px;
+ border-bottom: 2px solid var(--light-grey);
+ width: calc(100% - 60px);
+ margin-right: auto;
+ height: 40px;
+ background-color: transparent;
+ color: white;
+ font-size: 16px;
+ }
}
.segment-buttons {
@@ -146,3 +164,41 @@
transform: translateY(0);
}
}
+
+.search-list {
+ header {
+ font-size: 16px;
+ font-weight: bold;
+ color: var(--dark-grey);
+ margin: 20px auto 0px;
+ }
+
+ ul {
+ list-style: none;
+ }
+
+ li {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15px 0;
+ margin: 0px auto;
+ border-bottom: 1px solid #cecece;
+ }
+
+ img {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 15px;
+ }
+
+ label {
+ display: block;
+ font-size: 15px;
+ font-weight: 500;
+ color: var(--dark-grey);
+ width: calc(100% - 50px);
+ }
+}
diff --git a/src/app/chat-page/chat-page.component.ts b/src/app/chat-page/chat-page.component.ts
index d4777d8..5873c37 100644
--- a/src/app/chat-page/chat-page.component.ts
+++ b/src/app/chat-page/chat-page.component.ts
@@ -10,6 +10,12 @@ import * as moment from 'moment';
export class ChatPageComponent implements OnInit {
selectedSegment: string = 'messages';
selectedChat: any = null;
+ showSearch: boolean = false;
+ searchTerm: string = '';
+ searchList = {
+ chatList: [],
+ broadCastList: []
+ };
chatList = [{
user: {
@@ -91,6 +97,13 @@ export class ChatPageComponent implements OnInit {
message: 'I topped the class, hehe',
user: 2
}]
+ }, {
+ user: {
+ id: 3,
+ name: 'Dwayne The Rock',
+ imgUrl: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+ },
+ conversation: []
}];
broadCastList = [{
@@ -106,13 +119,15 @@ export class ChatPageComponent implements OnInit {
message: 'Hi Students, I have uploaded a question in the forum. Please take a look!',
user: 0
}]
- }]
+ }];
constructor(
private location: Location
) { }
ngOnInit(): void {
+ this.searchList.chatList = this.chatList;
+ this.searchList.broadCastList = this.broadCastList;
}
back() {
@@ -133,8 +148,29 @@ export class ChatPageComponent implements OnInit {
}
}
+ getChatList() {
+ return this.chatList.filter((chat) => {
+ return chat.conversation && chat.conversation.length > 0;
+ })
+ }
+
getFormattedDate() {
return moment().format('ddd, hh:MM a')
}
+ searchChats() {
+ if (this.searchTerm) {
+ this.searchList.chatList = this.chatList.filter((chat) => {
+ return chat.user.name.toLowerCase().includes(this.searchTerm.toLowerCase());
+ });
+
+ this.searchList.broadCastList = this.broadCastList.filter((chat) => {
+ return chat.user.name.toLowerCase().includes(this.searchTerm.toLowerCase());
+ });
+ } else {
+ this.searchList.chatList = this.chatList;
+ this.searchList.broadCastList = this.broadCastList;
+ }
+ }
+
}
diff --git a/src/app/chat-page/chat-window/chat-window.component.ts b/src/app/chat-page/chat-window/chat-window.component.ts
index 77cad41..f88695b 100644
--- a/src/app/chat-page/chat-window/chat-window.component.ts
+++ b/src/app/chat-page/chat-window/chat-window.component.ts
@@ -39,10 +39,14 @@ export class ChatWindowComponent implements OnInit {
}
scrollToBottom() {
- document.querySelector('.message-' + (this.conversation.conversation.length - 1)).scrollIntoView({
- behavior: 'smooth',
- block: 'end'
- });
+ try {
+ document.querySelector('.message-' + (this.conversation.conversation.length - 1)).scrollIntoView({
+ behavior: 'smooth',
+ block: 'end'
+ });
+ } catch {
+ return;
+ }
}
closeChat() {
diff --git a/src/app/tabs/more/more.component.scss b/src/app/tabs/more/more.component.scss
index 958b2e0..dffb69c 100644
--- a/src/app/tabs/more/more.component.scss
+++ b/src/app/tabs/more/more.component.scss
@@ -168,6 +168,7 @@
height: 40px;
display: block;
margin: 0 auto;
+ fill: var(--dark-grey);
}
h4 {
diff --git a/src/assets/custom-icons/attendance-1.svg b/src/assets/custom-icons/attendance-1.svg
index 22621d1..1ffb690 100644
--- a/src/assets/custom-icons/attendance-1.svg
+++ b/src/assets/custom-icons/attendance-1.svg
@@ -1 +1,65 @@
-
+
+
+
diff --git a/src/assets/custom-icons/chat-color.svg b/src/assets/custom-icons/chat-color.svg
index 07cbb85..286e187 100644
--- a/src/assets/custom-icons/chat-color.svg
+++ b/src/assets/custom-icons/chat-color.svg
@@ -1 +1 @@
-
+
\ No newline at end of file
diff --git a/src/assets/custom-icons/class.svg b/src/assets/custom-icons/class.svg
index 114982f..8929827 100644
--- a/src/assets/custom-icons/class.svg
+++ b/src/assets/custom-icons/class.svg
@@ -1,99 +1 @@
-
-
-
+
\ No newline at end of file
diff --git a/src/assets/custom-icons/duel.svg b/src/assets/custom-icons/duel.svg
index 01768a6..8071fe5 100644
--- a/src/assets/custom-icons/duel.svg
+++ b/src/assets/custom-icons/duel.svg
@@ -1,100 +1,57 @@
-
+
+