From 2359d23ab02157e1ed9b66445f649885ca656adf Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 10 Jul 2020 18:19:49 +0530 Subject: [PATCH] Add broadcast UI + softcoding --- .../add-broadcast.component.html | 25 +++- .../add-broadcast.component.scss | 125 ++++++++++++++++++ .../add-broadcast/add-broadcast.component.ts | 50 +++++++ src/app/chat-page/chat-page.component.html | 9 +- src/app/chat-page/chat-page.component.ts | 41 +++++- .../chat-window/chat-window.component.html | 3 + .../chat-window/chat-window.component.scss | 20 ++- .../chat-window/chat-window.component.ts | 8 +- src/assets/custom-icons/check.svg | 42 ++++++ src/assets/custom-icons/pencil.svg | 52 ++++++++ 10 files changed, 359 insertions(+), 16 deletions(-) create mode 100644 src/assets/custom-icons/check.svg create mode 100644 src/assets/custom-icons/pencil.svg diff --git a/src/app/chat-page/add-broadcast/add-broadcast.component.html b/src/app/chat-page/add-broadcast/add-broadcast.component.html index 31d380b..22e9ab2 100644 --- a/src/app/chat-page/add-broadcast/add-broadcast.component.html +++ b/src/app/chat-page/add-broadcast/add-broadcast.component.html @@ -1 +1,24 @@ -

add-broadcast works!

+
+ +
+ + +
+
+ +
+
Select Members
+ + +
+ + diff --git a/src/app/chat-page/add-broadcast/add-broadcast.component.scss b/src/app/chat-page/add-broadcast/add-broadcast.component.scss index e69de29..5ae8c0a 100644 --- a/src/app/chat-page/add-broadcast/add-broadcast.component.scss +++ b/src/app/chat-page/add-broadcast/add-broadcast.component.scss @@ -0,0 +1,125 @@ +.info { + margin-top: 20px; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + + .input-holder { + width: calc(100% - 100px); + } + + img { + width: 80px; + height: 80px; + border: 2px solid var(--teal-green); + background-color: #cecece; + overflow: hidden; + border-radius: 50%; + object-fit: cover; + display: block; + } + + input { + width: 100%; + display: block; + border: 0px; + border-bottom: 2px solid var(--light-grey); + color: var(--dark-grey); + padding: 10px 0; + font-size: 16px; + margin-bottom: 10px; + font-weight: 600; + } +} + +.friend-list-holder { + header { + font-size: 16px; + font-weight: bold; + color: var(--dark-grey); + margin: 30px auto 0px; + } + + ul { + list-style: none; + margin-top: 20px; + } + + li { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: 15px; + margin: 0px auto; + border-bottom: 1px solid #cecece; + + &.active { + background-color: var(--teal-green); + border-radius: 7px; + label { + color: white; + } + } + } + + 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); + } + + + input { + width: 100%; + display: block; + border: 0px; + border-bottom: 2px solid var(--light-grey); + color: var(--dark-grey); + font-size: 14px; + padding: 10px 0; + font-weight: 600; + } +} + +.add-broadcast-button { + position: fixed; + right: 20px; + bottom: 20px; + z-index: 1; + background-color: var(--danger); + border: 0px; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid white; + + .icon { + width: 60%; + position: relative; + top: 1px; + fill: white; + } + + &.active { + background-color: var(--teal-green); + + .icon { + width: 70%; + fill: white; + } + } +} diff --git a/src/app/chat-page/add-broadcast/add-broadcast.component.ts b/src/app/chat-page/add-broadcast/add-broadcast.component.ts index 8f250bc..c1b6454 100644 --- a/src/app/chat-page/add-broadcast/add-broadcast.component.ts +++ b/src/app/chat-page/add-broadcast/add-broadcast.component.ts @@ -11,11 +11,61 @@ export class AddBroadcastComponent implements OnInit { @Input() friendList: any = []; searchTerm: string = ''; tempFriendList: any = []; + tempBroadcastInfo: any = {} constructor() { } ngOnInit(): void { + if (this.broadcastInfo) { + this.tempBroadcastInfo = this.broadcastInfo; + } else { + this.tempBroadcastInfo = { + user: { + id: null, + name: '', + imgUrl: '' + }, + members: [], + conversation: [] + }; + } this.tempFriendList = this.friendList; } + isFriendMember(id: string | number) { + return this.tempBroadcastInfo.members.includes(id); + } + + toggleMember(id: string | number) { + if (this.tempBroadcastInfo.members.includes(id)) { + let index = this.tempBroadcastInfo.members.indexOf(id); + this.tempBroadcastInfo.members.splice(index, 1); + } else { + this.tempBroadcastInfo.members.push(id); + } + } + + searchMembers() { + if (this.searchTerm) { + this.tempFriendList = this.friendList.filter((friend) => { + return friend.user.name.toLowerCase().includes(this.searchTerm.toLowerCase()); + }); + } else { + this.tempFriendList = this.friendList; + } + } + + closeBroadcast() { + if (this.tempBroadcastInfo.user.name) { + this.addBroadcastEvents.emit({ + type: 'data', + data: this.tempBroadcastInfo + }); + } else { + this.addBroadcastEvents.emit({ + type: 'close' + }); + } + } + } diff --git a/src/app/chat-page/chat-page.component.html b/src/app/chat-page/chat-page.component.html index 94bd37a..992d5a0 100644 --- a/src/app/chat-page/chat-page.component.html +++ b/src/app/chat-page/chat-page.component.html @@ -51,7 +51,8 @@
-

+

{{ chat.members.length }} Member(s)

+

{{ chat.conversation[chat.conversation.length - 1].message }}

@@ -61,11 +62,11 @@ - - + @@ -101,7 +102,7 @@
+ (chatEvents)="getChatEvent($event)">
diff --git a/src/app/chat-page/chat-page.component.ts b/src/app/chat-page/chat-page.component.ts index fac1ad8..5e50e89 100644 --- a/src/app/chat-page/chat-page.component.ts +++ b/src/app/chat-page/chat-page.component.ts @@ -8,8 +8,9 @@ import * as moment from 'moment'; styleUrls: ['./chat-page.component.scss'] }) export class ChatPageComponent implements OnInit { - selectedSegment: string = 'messages'; + selectedSegment: string = 'broadcasts'; selectedChat: any = null; + selectedBroadcastChat: any; showSearch: boolean = false; searchTerm: string = ''; searchList = { @@ -109,10 +110,11 @@ export class ChatPageComponent implements OnInit { broadCastList = [{ user: { - id: 0, + id: 1, name: '10th Standard Channel', imgUrl: 'https://lh3.googleusercontent.com/9vppS4or0GIIqIdxU7vrMFbHMOOhO3FgFWPN1WYUH4xXd9GwFvZzeCGYrhezckELzAM' }, + members: [], conversation: [{ message: 'Hi Students, Hope your all are doing well. You will have special classes tomorrow by DK sir @4.30PM. \n Followed by Quiz. ATB!', user: 0 @@ -143,8 +145,14 @@ export class ChatPageComponent implements OnInit { this.selectedChat = this.broadCastList[index]; } - getChatEvent(e: boolean) { - if (e) { + getChatEvent(e: string) { + if (e === 'close') { + this.selectedChat = null; + } + + if (e === 'edit') { + this.showAddBroadCast = true; + this.selectedBroadcastChat = JSON.parse(JSON.stringify(this.selectedChat)); this.selectedChat = null; } } @@ -156,7 +164,7 @@ export class ChatPageComponent implements OnInit { } getFormattedDate() { - return moment().format('ddd, hh:MM a') + return moment().format('ddd, hh:MM a'); } searchChats() { @@ -174,4 +182,27 @@ export class ChatPageComponent implements OnInit { } } + getAddBroadcastEvents(e: any) { + if (e.type === 'close') { + this.showAddBroadCast = false; + } + + if (e.type === 'data') { + let broadcastData = e.data; + + if (!broadcastData.user.id) { + broadcastData.user.id = this.broadCastList[this.broadCastList.length - 1].user.id + 1; + this.broadCastList.push(broadcastData); + } else { + let index = this.broadCastList.findIndex((broadcast) => { + return broadcast.user.id === broadcastData.user.id; + }); + + this.broadCastList[index] = broadcastData; + } + + this.showAddBroadCast = false; + } + } + } diff --git a/src/app/chat-page/chat-window/chat-window.component.html b/src/app/chat-page/chat-window/chat-window.component.html index 0c10627..ab2b105 100644 --- a/src/app/chat-page/chat-window/chat-window.component.html +++ b/src/app/chat-page/chat-window/chat-window.component.html @@ -1,8 +1,11 @@
{{ conversation.user.name }} +
+ {{ conversation.members.length }} Member(s)
+