aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-21 10:49:52 +0100
committerChocobozzz <me@florianbigard.com>2017-12-21 10:49:52 +0100
commite91890011e100b677d35598e2feec7c6252e89bf (patch)
tree868fc7edd71f72d19747acfd9fa383c22b5d7bd8 /client/src/app
parent604abfbef5e80d94e46658e4efa762adeab855ea (diff)
downloadPeerTube-e91890011e100b677d35598e2feec7c6252e89bf.tar.gz
PeerTube-e91890011e100b677d35598e2feec7c6252e89bf.tar.zst
PeerTube-e91890011e100b677d35598e2feec7c6252e89bf.zip
Add tooltip to likes/dislikes bar
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts35
-rw-r--r--client/src/app/videos/+video-watch/video-watch.module.ts4
3 files changed, 27 insertions, 16 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index e9ca336dd..d9b572430 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -65,7 +65,9 @@
65 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views 65 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
66 </div> 66 </div>
67 67
68 <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar"> 68 <div
69 class="video-info-likes-dislikes-bar"
70 *ngIf="video.likes !== 0 || video.dislikes !== 0" [tooltip]="likesBarTooltipText">
69 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> 71 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
70 </div> 72 </div>
71 </div> 73 </div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index df4cfa666..c388b138b 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -44,6 +44,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
44 completeVideoDescription: string 44 completeVideoDescription: string
45 shortVideoDescription: string 45 shortVideoDescription: string
46 videoHTMLDescription = '' 46 videoHTMLDescription = ''
47 likesBarTooltipText = ''
47 48
48 private paramsSub: Subscription 49 private paramsSub: Subscription
49 50
@@ -228,23 +229,24 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
228 removeVideo (event: Event) { 229 removeVideo (event: Event) {
229 event.preventDefault() 230 event.preventDefault()
230 231
231 this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe( 232 this.confirmService.confirm('Do you really want to delete this video?', 'Delete')
232 res => { 233 .subscribe(
233 if (res === false) return 234 res => {
235 if (res === false) return
234 236
235 this.videoService.removeVideo(this.video.id) 237 this.videoService.removeVideo(this.video.id)
236 .subscribe( 238 .subscribe(
237 status => { 239 status => {
238 this.notificationsService.success('Success', `Video ${this.video.name} deleted.`) 240 this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
239 241
240 // Go back to the video-list. 242 // Go back to the video-list.
241 this.router.navigate([ '/videos/list' ]) 243 this.router.navigate([ '/videos/list' ])
242 }, 244 },
243 245
244 error => this.notificationsService.error('Error', error.text) 246 error => this.notificationsService.error('Error', error.text)
245 ) 247 )
246 } 248 }
247 ) 249 )
248 } 250 }
249 251
250 private updateVideoDescription (description: string) { 252 private updateVideoDescription (description: string) {
@@ -261,6 +263,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
261 this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description) 263 this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
262 } 264 }
263 265
266 private setVideoLikesBarTooltipText () {
267 this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes`
268 }
269
264 private handleError (err: any) { 270 private handleError (err: any) {
265 const errorMessage: string = typeof err === 'string' ? err : err.message 271 const errorMessage: string = typeof err === 'string' ? err : err.message
266 let message = '' 272 let message = ''
@@ -346,6 +352,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
346 } 352 }
347 353
348 this.setVideoDescriptionHTML() 354 this.setVideoDescriptionHTML()
355 this.setVideoLikesBarTooltipText()
349 356
350 this.setOpenGraphTags() 357 this.setOpenGraphTags()
351 this.checkUserRating() 358 this.checkUserRating()
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 18319de1a..d0ed29d06 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -4,6 +4,7 @@ import { VideoWatchRoutingModule } from './video-watch-routing.module'
4import { MarkdownService } from '../shared' 4import { MarkdownService } from '../shared'
5import { SharedModule } from '../../shared' 5import { SharedModule } from '../../shared'
6import { ClipboardModule } from 'ngx-clipboard' 6import { ClipboardModule } from 'ngx-clipboard'
7import { TooltipModule } from 'ngx-bootstrap/tooltip';
7 8
8import { VideoWatchComponent } from './video-watch.component' 9import { VideoWatchComponent } from './video-watch.component'
9import { VideoReportComponent } from './video-report.component' 10import { VideoReportComponent } from './video-report.component'
@@ -14,7 +15,8 @@ import { VideoDownloadComponent } from './video-download.component'
14 imports: [ 15 imports: [
15 VideoWatchRoutingModule, 16 VideoWatchRoutingModule,
16 SharedModule, 17 SharedModule,
17 ClipboardModule 18 ClipboardModule,
19 TooltipModule.forRoot()
18 ], 20 ],
19 21
20 declarations: [ 22 declarations: [