Add author and created for thread on threadPage

Improve some UI details
topgoer · Jul 14, 2017 · add9ef1 · add9ef1
1 parent a5babe3
commit add9ef1
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 45 deletions.
diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html
@@ -1,42 +1,43 @@
-  <nav class="navbar navbar-toggleable-md bg-faded fixed-top navbar-inverse bg-primary">
-    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
-      aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+<nav class="navbar navbar-toggleable-md bg-faded fixed-top navbar-inverse bg-primary">
+  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
+    aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon test-toggler-icon"></span>
   </button>
-    <a class="navbar-brand" href="#" title="BBS">
+  <a class="navbar-brand" href="#" title="BBS">
     <img src="https://skycoin.net/img/log.png" width="140" height="30" alt="bbs">
   </a>
 
-    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
-      <ul class="navbar-nav mr-auto mt-2 mt-md-0">
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Boards<span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/userlist" routerLinkActive="active">Users</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/conn" routerLinkActive="active">Connections</a>
-        </li>
+  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
+      <li class="nav-item">
+        <a class="nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Boards<span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" routerLink="/userlist" routerLinkActive="active">Users</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" routerLink="/conn" routerLinkActive="active">Connections</a>
+      </li>
 
-        <li class="nav-item">
-          <a class="nav-name nav-link" routerLink="/user" routerLinkActive="active"><i class="fa fa-user" aria-hidden="true"></i>{{name}}</a>
-        </li>
-      </ul>
-      <span class="navbar-text">
+      <li class="nav-item">
+        <a class="nav-name nav-link" routerLink="/user" routerLinkActive="active"><i class="fa fa-user" aria-hidden="true"></i>{{name}}</a>
+      </li>
+    </ul>
+    <span class="navbar-text">
      <a class="nav-node nav-link" href="javascript:void(0);" *ngIf="isMasterNode">Master Node</a>
      <a class="nav-node nav-link" href="javascript:void(0);" *ngIf="!isMasterNode">Client Node</a>
     </span>
-    </div>
-  </nav>
-  <router-outlet></router-outlet>
-  <app-loading></app-loading>
-  <button class="top-btn btn btn-primary " *ngIf="common.topBtn" (click)="common.scrollToTop()">
+  </div>
+</nav>
+<router-outlet></router-outlet>
+<app-loading></app-loading>
+<app-fixed-button></app-fixed-button>
+<button class="top-btn btn btn-primary " *ngIf="common.topBtn" (click)="common.scrollToTop()">
   <div class="top"></div>
   <span>top</span>
 </button>
-  <div class="app-pop container">
-    <ngb-alert type="{{common.alertType}}" *ngIf="common.alert" (click)="common.alert = false">
-      {{common.alertMessage}}
-    </ngb-alert>
-  </div>
+<div class="app-pop container">
+  <ngb-alert type="{{common.alertType}}" *ngIf="common.alert" (click)="common.alert = false">
+    {{common.alertMessage}}
+  </ngb-alert>
+</div>
diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss
@@ -28,7 +28,8 @@
   position: fixed;
   z-index: 99;
   bottom: 2%;
-  right: 2%;
+  right: 5%;
+  box-shadow: 0 0.3rem 0.4rem hsla(0, 0%, 0%, 0.3);
   cursor: pointer;
   .top {
     width: 0;

diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ApiService, CommonService, UserService } from '../providers';
-import { LoadingComponent } from '../components';
+import { LoadingComponent, FixedButtonComponent } from '../components';
 import { NavigationStart, Router } from '@angular/router';
 import 'rxjs/add/operator/filter';
 
@@ -12,6 +12,7 @@ import 'rxjs/add/operator/filter';
 })
 export class AppComponent implements OnInit {
   @ViewChild(LoadingComponent) loading: LoadingComponent;
+  @ViewChild(FixedButtonComponent) fb: FixedButtonComponent;
   public title = 'app';
   public name = '';
   public isMasterNode = false;
@@ -24,6 +25,7 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.common.fb = this.fb;
     this.common.loading = this.loading;
     this.user.getCurrent().subscribe(user => {
       this.name = user.alias;

diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts
@@ -18,7 +18,8 @@ import {
   UserComponent,
   ConnectionComponent,
   AlertComponent,
-  LoadingComponent
+  LoadingComponent,
+  FixedButtonComponent
 } from '../components';
 import { SafeHTMLPipe, OrderByPipe } from '../pipes';
 import { ClipDirective, IscrollDirective } from '../directives/index';
@@ -45,13 +46,16 @@ import { ClipDirective, IscrollDirective } from '../directives/index';
     ConnectionComponent,
     AlertComponent,
     LoadingComponent,
+    FixedButtonComponent,
+
     // Pipes
     SafeHTMLPipe,
     OrderByPipe,
 
     // Directives
     ClipDirective,
-    IscrollDirective
+    IscrollDirective,
+    FixedButtonComponent,
   ],
   entryComponents: [AlertComponent],
   providers: [CommonService, ApiService, UserService, ConnectionService],

diff --git a/static/src/assets/user-thumbnail.png b/static/src/assets/user-thumbnail.png
diff --git a/static/src/components/fixed-button/fixed-button.component.html b/static/src/components/fixed-button/fixed-button.component.html
@@ -0,0 +1 @@
+<i class="fa fa-reply"></i>
diff --git a/static/src/components/fixed-button/fixed-button.component.scss b/static/src/components/fixed-button/fixed-button.component.scss
@@ -0,0 +1,20 @@
+app-fixed-button {
+  position: fixed;
+  display: flex;
+  cursor: pointer;
+  bottom: 10%;
+  right: 5%;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #d23f31;
+  box-shadow: 0 0.3rem 0.4rem hsla(0, 0%, 0%, 0.3);
+  &:hover {
+    background-color: #d4756c;
+  }
+  .fa {
+    margin: auto !important;
+    font-size: 1.5em;
+    color: #fff;
+  }
+}
diff --git a/static/src/components/fixed-button/fixed-button.component.ts b/static/src/components/fixed-button/fixed-button.component.ts
@@ -0,0 +1,24 @@
+import { Component, ViewEncapsulation, HostListener, OnDestroy, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'app-fixed-button',
+  templateUrl: './fixed-button.component.html',
+  styleUrls: ['./fixed-button.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class FixedButtonComponent implements OnDestroy {
+  @HostBinding('style.display') display = 'none';
+  handle: Function = null;
+  constructor() { }
+  ngOnDestroy() {
+    this.handle = null;
+  }
+  @HostListener('click', ['$event'])
+  _click(ev: Event) {
+    ev.stopImmediatePropagation();
+    ev.stopPropagation();
+    if (this.handle !== null) {
+      this.handle();
+    }
+  }
+}
diff --git a/static/src/components/index.ts b/static/src/components/index.ts
@@ -4,8 +4,10 @@ export * from './threadPage/threadPage';
 export * from './userlist/userlist.component';
 export * from './user/user.component';
 export * from './connection/connection.component';
-
+export * from './fixed-button/fixed-button.component';
 
 // Modal
 export * from './alert/alert.component';
 export * from './loading/loading.component';
+
+
diff --git a/static/src/components/threadPage/threadPage.html b/static/src/components/threadPage/threadPage.html
@@ -1,19 +1,28 @@
-<div class="container-fluid">
+<div class="container">
   <div class="card thread border-top-0 border-left-0 border-right-0" *ngIf="data?.thread?.name != '' ">
+    <div class="other-block">
+      <a href="javascript:void(0)" class="img-box">
+        <div class="author" title="user"></div>
+      </a>
+      <div class="info-box">
+        <small class="single-line author-name " title="{{data?.thread?.author}}">{{data?.thread?.author}}</small>
+        <small class="text-muted">
+          replies
+          <span class="replies">{{data?.posts?.length}}</span> &nbsp;• &nbsp;
+          created &nbsp;<span>{{data?.thread?.created / 1000000 | date:'yMMMdjms'}}</span>
+        </small>
+      </div>
+    </div>
     <div class="card-block">
       <div class="content">
         <div class="title-box">
           <h4 class="card-title single-line title">{{data?.thread?.name}}</h4>
-          <small class="text-muted"><i class="fa fa-users"></i><span>{{data?.posts?.length}}</span></small>
         </div>
         <p class="card-text break-line text-muted">{{data?.thread?.description}}</p>
       </div>
     </div>
     <div class="card-block">
-      <p class="d-flex justify-content-end">
-        <button class="btn btn-sm btn-primary" (click)="openReply(addPost)"><i class="fa fa-reply"></i>Post</button>
-      </p>
-      <p class="d-flex justify-content-end thread-vote-box">
+      <p class="d-flex justify-content-center thread-vote-box">
         <span (click)="addThreadVote(1,data.thread,$event)"><i class="fa fa-thumbs-o-up"></i>{{data?.thread?.votes?.up_votes}}</span>
         <span (click)="addThreadVote(-1,data.thread,$event)"><i class="fa fa-thumbs-o-down"></i>{{data?.thread?.votes?.down_votes}}</span>
       </p>

diff --git a/static/src/components/threadPage/threadPage.scss b/static/src/components/threadPage/threadPage.scss
@@ -11,14 +11,51 @@ app-threadpage {
     margin-bottom: 5rem;
   }
   .card {
+    .other-block {
+      display: flex;
+      padding: 0 1.25rem;
+      .img-box {
+        display: inline-block;
+      }
+      .img-box {
+        outline: 0;
+        text-decoration: none;
+        margin-right: 1rem;
+        .author {
+          width: 60px;
+          height: 60px;
+          background-image: url("../../assets/user-thumbnail.png");
+          background-size: 100% 100%;
+        }
+      }
+      .info-box {
+        display: inline-flex;
+        flex-direction: column;
+        align-self: center;
+        small {
+          display: block;
+        }
+        .replies {
+          color: red;
+        }
+        .author-name {
+          color: #636363;
+          max-width: 6rem;
+        }
+      }
+    }
     .card-block {
       .thread-vote-box {
         color: red;
         span {
+          margin: 0 2em;
           cursor: pointer;
           &:hover {
             color: #b10909;
           }
+          .fa {
+            font-size: 2em;
+          }
         }
       }
       .content {

diff --git a/static/src/components/threadPage/threadPage.ts b/static/src/components/threadPage/threadPage.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, HostBinding, HostListener, OnInit, ViewEncapsulation, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
 import { ApiService, CommonService, ThreadPage, Post, VotesSummary, Thread } from '../../providers';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
@@ -13,9 +13,10 @@ import { slideInLeftAnimation } from '../../animations/router.animations';
   animations: [slideInLeftAnimation],
 })
 
-export class ThreadPageComponent implements OnInit {
+export class ThreadPageComponent implements OnInit, OnDestroy {
   @HostBinding('@routeAnimation') routeAnimation = true;
   @HostBinding('style.display') display = 'block';
+  @ViewChild('addPost') replyBox: any;
   public sort = 'esc';
   public boardKey = '';
   public threadKey = '';
@@ -80,8 +81,17 @@ export class ThreadPageComponent implements OnInit {
       this.threadKey = res['thread'];
       this.open(this.boardKey, this.threadKey);
     });
+    setTimeout(() => {
+      this.common.fb.display = 'flex';
+      this.common.fb.handle = () => {
+        this.openReply(this.replyBox);
+      }
+    }, 2000);
+  }
+  ngOnDestroy() {
+    this.common.fb.display = 'none';
+    this.common.fb.handle = null;
   }
-
   public setSort() {
     this.sort = this.sort === 'desc' ? 'esc' : 'desc';
   }

diff --git a/static/src/providers/api/msg.ts b/static/src/providers/api/msg.ts
@@ -38,6 +38,8 @@ export interface Stats {
 export interface Thread {
   name?: string;
   description?: string;
+  author?: string;
+  created?: string;
   master_board?: string;
   ref?: string;
   votes?: VotesSummary; // Threads now have vote summary here.

diff --git a/static/src/providers/common/common.service.ts b/static/src/providers/common/common.service.ts
@@ -3,14 +3,15 @@ import { Injectable } from '@angular/core';
 import 'rxjs/add/observable/throw';
 import 'rxjs/add/operator/filter';
 import { Observable } from 'rxjs/Observable';
-import { LoadingComponent } from '../../components';
+import { LoadingComponent, FixedButtonComponent } from '../../components';
 
 @Injectable()
 export class CommonService {
   public alertType = 'info';
   public alertMessage = 'test alert';
   public alert = false;
   public topBtn = false;
+  public fb: FixedButtonComponent = null;
   public loading: LoadingComponent = null;
   // public sortBy = 'desc';
   constructor(private http: Http) {