From ff103f9d79b14ed458709bbe7991d16208743c55 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 25 Jun 2020 18:22:20 +0530 Subject: [PATCH] Partial commit ---Chat UI --- src/app/chat-page/chat-page.component.html | 14 ++++- src/app/chat-page/chat-page.component.scss | 50 +++++++++++++++++ src/app/chat-page/chat-page.component.ts | 19 ++++--- src/app/tabs/more/more.component.html | 5 ++ src/assets/custom-icons/chat-color.svg | 1 + src/assets/custom-icons/chat.svg | 62 ++++++++++++++++++++++ 6 files changed, 144 insertions(+), 7 deletions(-) create mode 100644 src/assets/custom-icons/chat-color.svg create mode 100644 src/assets/custom-icons/chat.svg diff --git a/src/app/chat-page/chat-page.component.html b/src/app/chat-page/chat-page.component.html index 2b820cf..be5ba90 100644 --- a/src/app/chat-page/chat-page.component.html +++ b/src/app/chat-page/chat-page.component.html @@ -1 +1,13 @@ -

chat-page works!

+
+
+ +
+ + Chat with friends +
+
+ +
+
diff --git a/src/app/chat-page/chat-page.component.scss b/src/app/chat-page/chat-page.component.scss index e69de29..b4e1066 100644 --- a/src/app/chat-page/chat-page.component.scss +++ b/src/app/chat-page/chat-page.component.scss @@ -0,0 +1,50 @@ +.page { + background-color: var(--ash-black); + height: 100vh; + overflow: auto; +} + +.nav-header { + background-color: var(--ash-black); + display: flex; + align-items: center; + padding: 0 5%; + height: 60px; + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 1; + box-shadow: 0px 0px 5px var(--black); + + .close-button { + border: 0px; + background-color: transparent; + .icon { + width: 15px; + height: 15px; + fill: var(--light-grey); + } + } + + h5 { + font-size: 16px; + color: white; + font-weight: 400; + margin-left: 20px; + letter-spacing: 1px; + + .icon { + width: 15px; + height: 15px; + fill: white; + margin-right: 3px; + vertical-align: middle; + position: relative; + top: -1px; + } + } +} + +.upfold { + height: 30vh; +} diff --git a/src/app/chat-page/chat-page.component.ts b/src/app/chat-page/chat-page.component.ts index 19084f1..60b99a1 100644 --- a/src/app/chat-page/chat-page.component.ts +++ b/src/app/chat-page/chat-page.component.ts @@ -1,15 +1,22 @@ import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; @Component({ - selector: 'app-chat-page', - templateUrl: './chat-page.component.html', - styleUrls: ['./chat-page.component.scss'] + selector: 'app-chat-page', + templateUrl: './chat-page.component.html', + styleUrls: ['./chat-page.component.scss'] }) export class ChatPageComponent implements OnInit { - constructor() { } + constructor( + private location: Location + ) { } - ngOnInit(): void { - } + ngOnInit(): void { + } + + back() { + this.location.back(); + } } diff --git a/src/app/tabs/more/more.component.html b/src/app/tabs/more/more.component.html index 365830f..2e7e301 100644 --- a/src/app/tabs/more/more.component.html +++ b/src/app/tabs/more/more.component.html @@ -130,6 +130,11 @@

Forum

+ +
  • + +

    Chats

    +
    • diff --git a/src/assets/custom-icons/chat-color.svg b/src/assets/custom-icons/chat-color.svg new file mode 100644 index 0000000..07cbb85 --- /dev/null +++ b/src/assets/custom-icons/chat-color.svg @@ -0,0 +1 @@ + diff --git a/src/assets/custom-icons/chat.svg b/src/assets/custom-icons/chat.svg new file mode 100644 index 0000000..6420191 --- /dev/null +++ b/src/assets/custom-icons/chat.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +