kj
/
kxip-app
1
0
Çatalla 0
Kod Konular 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

Chat UI with faker data

master
kj1352 4 yıl önce
ebeveyn
6403d526c0
işleme
2d2b20b708
4 değiştirilmiş dosya ile 434 ekleme ve 13 silme
Görünümü Böl
Diff Seçenekleri
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir
  1. +56
    -6
      src/app/chat/chat.page.html
  2. +285
    -0
      src/app/chat/chat.page.scss
  3. +92
    -6
      src/app/chat/chat.page.ts
  4. +1
    -1
      src/app/match-details/match-details.page.scss

+ 56
- 6
src/app/chat/chat.page.html Dosyayı Görüntüle

@@ -1,9 +1,59 @@
<ion-header>
<ion-toolbar>
<ion-title>chat</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<section class="action-buttons">
<div class="nav">
<button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
</div>
<div class="action">
<button class="toggle" (click)="isPollChecked = !isPollChecked"> <ion-checkbox [(ngModel)]="isPollChecked"></ion-checkbox> Poll </button>
<button> <ion-icon name="link-outline"></ion-icon> </button>
</div>
</section>


<section class="chat">
<section class="chat-per-over" *ngFor="let overChat of chatData">
<header class="over-heading"> <h5> Over {{ overChat.over }} </h5> </header>

<section class="question-card" *ngIf="isPollChecked">
<header class="question">
{{ overChat.triviaQuestion.question }}
</header>

<ul class="options" [ngClass]="{'show-votes' : overChat.triviaQuestion.selectedAnswer !== null }">
<li *ngFor="let option of overChat.triviaQuestion.options; let i = index"
[ngClass]="{'active' : overChat.triviaQuestion.selectedAnswer === i }"
(click)="overChat.triviaQuestion.selectedAnswer = i">
<span class="progress"
[ngStyle]="{ 'width.%' : (overChat.triviaQuestion.selectedAnswer !== null ? ((option.pollUserCount * 100) / overChat.triviaQuestion.maxUserCount) : 0 ) }"></span>
<label> {{ option.text }} </label>
<p> {{ option.pollUserCount }} votes </p>
</li>
</ul>
</section>

<section class="chat-per-ball" *ngFor="let ballChats of overChat.ballChat;">
<header class="ball-heading"> Ball {{ ballChats.ball }} </header>

<ul>
<li *ngFor="let chat of ballChats.chat" [ngClass]="{'sender': chat.user && chat.user.name === 'You'}">
<div class="user-data" *ngIf="chat.user">
<img [src]="chat.user.image">
<label [ngStyle]="{'color' : chat.user.color }"> {{ chat.user.name }} </label>
</div>

<div class="user-data" *ngIf="!chat.user">
<img src="assets/home-team/KXIP.svg">
<label> A KXIP Fan </label>
</div>
<p> {{ chat.text }} </p>
</li>
</ul>

</section>
</section>

</section>


</ion-content>

+ 285
- 0
src/app/chat/chat.page.scss Dosyayı Görüntüle

@@ -0,0 +1,285 @@
$dark-blue: #161e2d;
$blue-grey: #949599;
$green: #01b868;
$pink: #d73e53;
$dark-blue-shade1: #24367c;
$dark-blue-shade2: #263982;

ion-content {
--background: transparent;
background-color: $dark-blue;
}

.action-buttons {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5% 15px 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background-color: #161e2d;
box-shadow: 0px 0px 5px black;
button {
background-color: transparent;
border: none;
}
.nav button {
color: $blue-grey;
display: flex;
align-items: center;

ion-icon {
font-size: 24px;
}
span {
margin-left: 5px;
font-size: 0.9rem;
font-size: 14px;
}
}

.action {
display: flex;
}

.action button {
width: 35px;
height: 35px;
border: 1px solid $blue-grey;
background-color: rgba($blue-grey, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;

ion-icon {
color: $blue-grey;
font-size: 17px;
}

&.toggle {
width: auto;
padding: 0 10px;
border-radius: 7px;
color: $blue-grey;
font-weight: 500;
letter-spacing: 0.5px;

ion-checkbox {
pointer-events: none;
margin: 0;
margin-right: 10px;
--border-color: #949599a6;
--border-color-checked: #d73e53;
--background: #94959970;
--background-checked: #d73e53;
}
}
}

}


.chat {
margin-top: 65px;
padding: 10px 5%;
height: calc(100vh - 65px);
color: white;
}


.chat-per-over {
margin: 20px 0;

.over-heading {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;

&::before {
content: '';
position: absolute;
left: 0;
top: calc(50% - 2px);
height: 4px;
background-color: $blue-grey;
width: 100%;
}
h5 {
position: relative;
background-color: $dark-blue;
padding: 0 10px;
margin: 0;
font-size: 1.2rem;
color: $blue-grey;
font-weight: 500;
letter-spacing: 1px;
}
}
}

.chat-per-ball {
margin: 20px 0px 70px 0px;

.ball-heading {
font-size: 0.9rem;
color: $blue-grey;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
}

ul {
list-style: none;
padding: 0 10px;
margin: 0;
}

li {
background-color: lighten($dark-blue, 10%);
color: white;
max-width: 80%;
display: block;
border-radius: 15px;
padding: 10px;
margin: 25px auto 25px 0px;
box-shadow: -2px 2px 10px -2px black;

&.sender {
margin: 25px 0px 25px auto;
box-shadow: 2px 2px 10px -2px black;

.user-data {
flex-direction: row-reverse;
}
}

p {
margin: 0px;
font-size: 0.9rem;
color: white;
line-height: 1.5;
padding: 0 5px;
}
}

.user-data {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border-bottom: 2px solid rgba($blue-grey, 0.3);
padding-bottom: 10px;
margin-bottom: 10px;

img {
width: 30px;
height: 30px;
padding: 2px;
object-fit: contain;
border-radius: 50%;
border: 1px solid $blue-grey;
background-color: rgba($blue-grey, 0.3);
}

label {
font-size: 0.9rem;
color: $blue-grey;
font-weight: 500;
letter-spacing: 1px;
margin: 0px 10px;
}
}
}

.question-card {
background-color: white;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px -2px black;
margin: 40px 0;
overflow: hidden;
background-color: rgba($blue-grey, 0.3);

header {
font-size: 1.5rem;
line-height: 1.5;
color: $dark-blue;
border-bottom: 2px solid rgba(white, 0.5);
padding: 5px 5px 15px 5px;
color: white;
margin-bottom: 10px;
}
.options {
list-style: none;
padding: 0;
margin: 0;

&.show-votes {
p {
display: block;
}
}

li {
background-color: rgba(white, 0.1);
border-radius: 7px;
overflow: hidden;
padding: 0px 15px;
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
margin: 20px 0;
position: relative;

.progress {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background-color: $dark-blue;
pointer-events: none;
transition: transform 0.3s, width 0.3s, background-color 0.3s;
border-radius: 10px;
}

&.active {
.progress {
background-color: $pink;
}
}

label {
font-weight: 500;
font-size: 1.1rem;
position: relative;
}

&:last-child {
margin: 20px 0px 10px 0px;
}
}

p {
margin: 0;
display: none;
font-size: 0.9rem;
font-style: italic;
font-weight: 500;
position: relative;
}
}
}

+ 92
- 6
src/app/chat/chat.page.ts Dosyayı Görüntüle

@@ -1,15 +1,101 @@
import { Component, OnInit } from '@angular/core';
import * as faker from 'faker';
import * as moment from 'moment';

type IMember = {
name: string,
image: string,
color: string,
}

@Component({
selector: 'app-chat',
templateUrl: './chat.page.html',
styleUrls: ['./chat.page.scss'],
selector: 'app-chat',
templateUrl: './chat.page.html',
styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {
isPollChecked: boolean = true;

chatData: Array<{
over: number,
ballChat: Array<{
ball: number,
chat: Array<{
user: IMember,
text: string,
}>,
}>,
triviaQuestion: {
question: string,
selectedAnswer: number,
maxUserCount: number,
options: Array<{
text: string,
pollUserCount: string,
}>,
}
}> = [];

members: Array<IMember> = [];

constructor() { }

ngOnInit() {

let myAccountIndex = Math.floor(Math.random() * 11);

for (let i = 0; i < 12; i += 1) {
this.members.push({
name: myAccountIndex === i ? 'You' : faker.name.findName(),
image: 'assets/home-team/roster/' + (i + 1) + '.png',
color: faker.vehicle.color()
});
}

for (let i = 0; i < 5; i += 1) {
let options = [];
for (let j = 0; j < 4; j += 1) {
options.push({
text: faker.lorem.word(),
pollUserCount: faker.random.number()
});
}

let ballChat = [];

for (let balls = 0; balls < 6; balls += 1) {
let randomNumber = Math.floor(Math.random() * 15);
let chat = [];

for (let k = 0; k < randomNumber; k += 1) {
let randomMemberIndex = Math.floor(Math.random() * 19);
chat.push({
user: this.members[randomMemberIndex],
text: faker.lorem.sentence(),
time: faker.time.recent(),
});
}

ballChat.push({
ball: balls,
chat: chat
});
}

constructor() { }
this.chatData.push({
over: i,
ballChat: ballChat,
triviaQuestion: {
question: faker.lorem.sentence(),
maxUserCount: Math.max.apply(Math, options.map(function(o) { return o.pollUserCount; })),
options: options,
selectedAnswer: Math.floor(Math.random() * 4),
}
});
}

ngOnInit() {
}
}

}

+ 1
- 1
src/app/match-details/match-details.page.scss Dosyayı Görüntüle

@@ -144,7 +144,7 @@ ion-content {
width: 50px;
height: 10px;
border-radius: 50%;
background-color: white;
background-color: lighten($blue-grey, 20%);
box-shadow: 0px 2px 5px $dark-blue;
margin-top: -5px;
}


Yaz Önizleme
Yükleniyor…
İptal
Kaydet