src/lib/elements/discuss-card/discuss-card.component.ts
OnInit
| selector | lib-discuss-card |
| styleUrls | ./discuss-card.component.scss |
| templateUrl | ./discuss-card.component.html |
Methods |
Inputs |
constructor()
|
| discussionData | |
Type : any
|
|
| Public getBgColor | ||||||
getBgColor(tagTitle: any)
|
||||||
|
Parameters :
Returns :
{ color: string; 'background-color': string; }
|
| getContrast |
getContrast()
|
|
Returns :
string
|
| IsSingleComent | ||||
IsSingleComent(postCount)
|
||||
|
Parameters :
Returns :
boolean
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| stringToColor | ||||
stringToColor(title)
|
||||
|
Parameters :
Returns :
string
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'lib-discuss-card',
templateUrl: './discuss-card.component.html',
styleUrls: ['./discuss-card.component.scss']
})
export class DiscussCardComponent implements OnInit {
@Input() discussionData: any;
constructor() { }
ngOnInit() {
console.log('discussionData', this.discussionData);
}
public getBgColor(tagTitle: any) {
const bgColor = this.stringToColor(tagTitle.toLowerCase());
const color = this.getContrast();
return { color, 'background-color': bgColor };
}
stringToColor(title) {
let hash = 0;
for (let i = 0; i < title.length; i++) {
// tslint:disable-next-line: no-bitwise
hash = title.charCodeAt(i) + ((hash << 5) - hash);
}
const hue = Math.abs(hash % 360);
// tslint:disable-next-line: prefer-template
const colour = 'hsl(' + hue + ',100%,30%)';
return colour;
}
getContrast() {
return 'rgba(255, 255, 255, 80%)';
}
IsSingleComent(postCount) {
if (postCount && (postCount - 1) == 1) {
return true;
} else {
return false;
}
}
}
<!-- Card container -->
<div class="discuss-card-content" tabindex="0" role="link">
<!-- Card header -->
<div tabindex="0" role="link">
<!-- <a href="javascript:void(0)" i18n-aria-label tabindex="0" role="link"> -->
<h3 class='discuss-card-title' *ngIf="discussionData?.title" [innerHTML]="discussionData?.title"></h3>
<h3 class='discuss-card-title' *ngIf="!discussionData?.title && discussionData?.topic?.title" [innerHTML]="discussionData?.topic?.title"></h3>
<h3 class='discuss-card-title' *ngIf="!discussionData?.title && !discussionData?.topic?.title && discussionData?.name" [innerHTML]="discussionData?.name"></h3>
<!-- </a> -->
<!-- Card subtitle -->
<div class="discuss-card-subtitle">
<div class="card-label-container">
<div *ngIf="discussionData?.category?.name" class="discuss-card-label">
<img src="./assets/discussion-ui/images/Buffer-512.webp" alt="category card icon" width="20px" class="mr-4">
{{discussionData.category.name}}
</div>
<div>
<span class="dot"></span>
<span class="discuss-user-label" *ngIf="discussionData?.user?.username">{{discussionData?.user?.username}}</span>
<span class="discuss-user-label" *ngIf="!(discussionData?.user?.username)">{{'Anonymous'}}</span>
</div>
</div>
<div class="timing">{{discussionData.lastposttime | date}}</div>
<!-- <span class="margin-left-l">{{discussionData.timestamp | pipeRelativeTime}}</span> -->
</div>
<!-- /Card subtitle -->
</div>
<!-- /Card header -->
<!-- Card content -->
<div class="tags">
<ng-container *ngIf="discussionData && discussionData.tags && discussionData.tags.length > 0">
<span *ngFor="let tag of discussionData.tags" class="tag" [ngStyle]="getBgColor(tag.value)">
{{tag.value}}
</span>
</ng-container>
</div>
<!-- /Card content -->
<!-- Card footer -->
<div class="discuss-card-comments">
<div class="comments-content">
<span class="votes-content">
<!-- <mat-icon class="cursor-pointer">import_export</mat-icon> -->
<img src="./assets/discussion-ui/images/votes.svg" alt="votes icon">
<span>{{(discussionData.upvotes + discussionData.downvotes) || 0 }} Votes</span>
</span>
<span class="views-content">
<!-- <mat-icon>trending_up</mat-icon> -->
<img src="./assets/discussion-ui/images/views.svg" alt="views icon">
<span>{{discussionData.viewcount || 0}} Views</span>
</span>
</div>
<div class="comments-count">{{((discussionData.postcount || 1) -1) }}
comments
</div>
</div>
<!-- /Card footer -->
</div>
<!-- /Card header -->
./discuss-card.component.scss
.discuss-card-content {
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12);
background: var(--df-card-bg);
color: var(--df-text);
flex: 1;
height: auto;
margin-bottom: 1rem;
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
display: block;
position: relative;
padding: 1rem;
border-radius: 0.25rem;
word-break: break-all;
cursor: pointer;
width: auto;
.discuss-card-title {
margin: 0px;
color: var(--df-text);
cursor: pointer;
font-size: 1rem;
font-weight: 700;
word-break: break-word;
}
.discuss-card-subtitle {
margin: 8px 0 0;
font-size: 0.875rem;
display: flex;
align-items: center;
@media screen and (max-width: 768px) {
align-items: flex-start;
}
.card-label-container {
display: flex;
align-items: center;
@media screen and (max-width: 768px) {
margin-right: auto;
flex-wrap: wrap;
}
.discuss-card-label {
color: var(--primary);
display: flex;
align-items: center;
img {
margin-right: 0.25rem;
}
@media screen and (max-width: 768px) {
flex-basis: 100%;
}
}
.dot{
height: 0.375rem;
width: 0.375rem;
background-color: var(--gray-400);
border-radius: 50%;
display: inline-block;
margin: 0 0.5rem;
position: relative;
bottom: 0.0625rem;
}
.discuss-user-label {
word-break: break-word;
}
}
.timing {
margin: 0 0.5rem;
@media screen and (max-width: 768px) {
flex: 0 0 auto;
}
}
}
.discuss-card-comments {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
flex-wrap: wrap;
font-weight: 700;
align-items: center;
padding-top: 0.5rem;
.comments-content{
display: flex;
.votes-content,
.views-content {
display: flex;
align-items: center;
font-size: 0.875rem;
span {
margin: 0 0.5rem;
}
}
.views-content {
margin-left: 1.5rem;
}
.votes-content img,
.views-content img {
height: 1rem;
width: 1rem;
cursor: pointer;
}
}
.comments-count {
color: var(--primary);
font-weight: 700;
}
}
}