From 63347a0ff966c7863e5b7431effa1cb0668df893 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 9 Aug 2018 14:55:06 +0200 Subject: Migrate to bootstrap 4 and ng-bootstrap --- .../modal/video-download.component.html | 75 +++++++++----------- .../+video-watch/modal/video-download.component.ts | 14 ++-- .../+video-watch/modal/video-report.component.html | 55 +++++++-------- .../+video-watch/modal/video-report.component.ts | 13 ++-- .../+video-watch/modal/video-share.component.html | 82 ++++++++++------------ .../+video-watch/modal/video-share.component.scss | 7 ++ .../+video-watch/modal/video-share.component.ts | 15 ++-- .../modal/video-support.component.html | 28 +++----- .../+video-watch/modal/video-support.component.ts | 16 ++--- .../videos/+video-watch/video-watch.component.html | 58 +++++++-------- .../videos/+video-watch/video-watch.component.scss | 4 ++ .../app/videos/+video-watch/video-watch.module.ts | 6 +- 12 files changed, 170 insertions(+), 203 deletions(-) (limited to 'client/src/app/videos/+video-watch') diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html index 31b2f4228..edd054123 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.html +++ b/client/src/app/videos/+video-watch/modal/video-download.component.html @@ -1,47 +1,42 @@ -
-
-
- -
- -

Download video

-
- -
-
- -
+ +
+

Download video

+ +
-
-
- - -
- -
- - -
+
+
+ +
-
- - -
-
+
+
+ + +
-
- - Cancel - +
+ + +
- -
+
+ +
-
+ +
+ + Cancel + + + +
+ diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.ts b/client/src/app/videos/+video-watch/modal/video-download.component.ts index 2de706e47..1361146dd 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-download.component.ts @@ -1,6 +1,6 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core' -import { ModalDirective } from 'ngx-bootstrap/modal' +import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core' import { VideoDetails } from '../../../shared/video/video-details.model' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' @Component({ selector: 'my-video-download', @@ -10,12 +10,12 @@ import { VideoDetails } from '../../../shared/video/video-details.model' export class VideoDownloadComponent implements OnInit { @Input() video: VideoDetails = null - @ViewChild('modal') modal: ModalDirective + @ViewChild('modal') modal: ElementRef downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' resolutionId: number | string = -1 - constructor () { + constructor (private modalService: NgbModal) { // empty } @@ -24,11 +24,7 @@ export class VideoDownloadComponent implements OnInit { } show () { - this.modal.show() - } - - hide () { - this.modal.hide() + this.modalService.open(this.modal) } download () { diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html index 4ee3721fb..8d9a49276 100644 --- a/client/src/app/videos/+video-watch/modal/video-report.component.html +++ b/client/src/app/videos/+video-watch/modal/video-report.component.html @@ -1,36 +1,31 @@ -
-
-
- -
- -

Report video

-
- -
+ +
+

Report video

+ +
-
-
- -
- {{ formErrors.reason }} -
-
+
-
- - Cancel - + +
+ +
+ {{ formErrors.reason }} +
+
- -
- +
+ + Cancel + +
-
+ +
-
+ diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.ts b/client/src/app/videos/+video-watch/modal/video-report.component.ts index d9768fdac..297afb19f 100644 --- a/client/src/app/videos/+video-watch/modal/video-report.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-report.component.ts @@ -1,11 +1,12 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core' import { NotificationsService } from 'angular2-notifications' -import { ModalDirective } from 'ngx-bootstrap/modal' import { FormReactive, VideoAbuseService } from '../../../shared/index' import { VideoDetails } from '../../../shared/video/video-details.model' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' @Component({ selector: 'my-video-report', @@ -15,12 +16,15 @@ import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/v export class VideoReportComponent extends FormReactive implements OnInit { @Input() video: VideoDetails = null - @ViewChild('modal') modal: ModalDirective + @ViewChild('modal') modal: NgbModal error: string = null + private openedModal: NgbModalRef + constructor ( protected formValidatorService: FormValidatorService, + private modalService: NgbModal, private videoAbuseValidatorsService: VideoAbuseValidatorsService, private videoAbuseService: VideoAbuseService, private notificationsService: NotificationsService, @@ -36,11 +40,12 @@ export class VideoReportComponent extends FormReactive implements OnInit { } show () { - this.modal.show() + this.openedModal = this.modalService.open(this.modal, { keyboard: false }) } hide () { - this.modal.hide() + this.openedModal.close() + this.openedModal = null } report () { diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html index 74a3a57d4..02f5f0f44 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.html +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html @@ -1,52 +1,46 @@ -
-
-
- -
- -

Share

-
- -
-
- -
- -
- -
-
-
+ +
+

Share

+ +
-
- -
- -
- -
-
+
+
+ +
+ +
+
+
+
-
- The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). +
+ +
+ +
+
+
+
-
- - -
+
+ The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). +
-
- - Cancel - -
-
+
+ +
-
+ +
+ Cancel +
+ + diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss index c7f30bec5..a9e9b8498 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.scss +++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss @@ -1,7 +1,14 @@ +@import '~bootstrap/scss/functions'; +@import '~bootstrap/scss/variables'; + .action-button-cancel { margin-right: 0 !important; } +.btn-outline-secondary { + border-color: $input-border-color; +} + .qr-code-group { text-align: center; } diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts index 5c988a43b..14f557f9a 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts @@ -1,11 +1,9 @@ -import { Component, Input, ViewChild } from '@angular/core' - +import { Component, ElementRef, Input, ViewChild } from '@angular/core' import { NotificationsService } from 'angular2-notifications' - -import { ModalDirective } from 'ngx-bootstrap/modal' import { VideoDetails } from '../../../shared/video/video-details.model' import { buildVideoEmbed } from '../../../../assets/player/utils' import { I18n } from '@ngx-translate/i18n-polyfill' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' @Component({ selector: 'my-video-share', @@ -15,9 +13,10 @@ import { I18n } from '@ngx-translate/i18n-polyfill' export class VideoShareComponent { @Input() video: VideoDetails = null - @ViewChild('modal') modal: ModalDirective + @ViewChild('modal') modal: ElementRef constructor ( + private modalService: NgbModal, private notificationsService: NotificationsService, private i18n: I18n ) { @@ -25,11 +24,7 @@ export class VideoShareComponent { } show () { - this.modal.show() - } - - hide () { - this.modal.hide() + this.modalService.open(this.modal) } getVideoIframeCode () { diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html index 9bcfcea47..00c304709 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.html +++ b/client/src/app/videos/+video-watch/modal/video-support.component.html @@ -1,22 +1,12 @@ -
-
-
- -
- -

Support

-
- -
+ +
+

Support

+ +
-
+
-
- - Cancel - -
-
-
+
+ Cancel
-
+ diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts index c515298a0..2d400e0be 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts @@ -1,8 +1,8 @@ import { Component, Input, ViewChild } from '@angular/core' import { MarkdownService } from '@app/videos/shared' -import { ModalDirective } from 'ngx-bootstrap/modal' import { VideoDetails } from '../../../shared/video/video-details.model' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' @Component({ selector: 'my-video-support', @@ -12,21 +12,19 @@ import { VideoDetails } from '../../../shared/video/video-details.model' export class VideoSupportComponent { @Input() video: VideoDetails = null - @ViewChild('modal') modal: ModalDirective + @ViewChild('modal') modal: NgbModal videoHTMLSupport = '' - constructor (private markdownService: MarkdownService) { + constructor ( + private markdownService: MarkdownService, + private modalService: NgbModal + ) { // empty } show () { - this.modal.show() - this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support) - } - - hide () { - this.modal.hide() + this.modalService.open(this.modal) } } 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 5a132112d..dd0d628bd 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -76,48 +76,38 @@ Share
-
-
+
+
- +
+ *ngIf="video.likes !== 0 || video.dislikes !== 0" [ngbTooltip]="likesBarTooltipText">
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index b27a70197..7d269b31f 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -177,6 +177,10 @@ padding: 0 10px 0 10px; white-space: nowrap; + &::after { + display: none; + } + .icon { @include icon(21px); 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 4af993043..09d5133e4 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core' import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service' import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' -import { TooltipModule } from 'ngx-bootstrap/tooltip' import { ClipboardModule } from 'ngx-clipboard' import { SharedModule } from '../../shared' import { MarkdownService } from '../shared' @@ -12,18 +11,17 @@ import { VideoCommentsComponent } from './comment/video-comments.component' import { VideoDownloadComponent } from './modal/video-download.component' import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' - import { VideoWatchRoutingModule } from './video-watch-routing.module' - import { VideoWatchComponent } from './video-watch.component' import { NgxQRCodeModule } from 'ngx-qrcode2' +import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' @NgModule({ imports: [ VideoWatchRoutingModule, SharedModule, ClipboardModule, - TooltipModule.forRoot(), + NgbTooltipModule.forRoot(), NgxQRCodeModule ], -- cgit v1.2.3