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 --- .../shared/video-caption-add-modal.component.html | 76 ++--- .../shared/video-caption-add-modal.component.ts | 13 +- .../+video-edit/shared/video-edit.component.html | 380 +++++++++++---------- .../+video-edit/shared/video-edit.component.scss | 10 +- .../videos/+video-edit/shared/video-edit.module.ts | 2 - .../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 +- 17 files changed, 410 insertions(+), 444 deletions(-) (limited to 'client/src/app/videos') diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html index 9cd303b29..30aefdbfc 100644 --- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html +++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html @@ -1,47 +1,45 @@ -
-
-
+ + -
- -

Add caption

-
+
+

Add caption

+ +
-
- -
- -
+
+ +
+ +
-
- {{ formErrors.language }} -
+
+ {{ formErrors.language }} +
-
- -
+
+ +
-
- This will replace an existing caption! -
+
+ This will replace an existing caption! +
+
-
- - Cancel - +
+ + Cancel + - -
-
+
-
-
+ + diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts index d084a4908..07c33030a 100644 --- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts +++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts @@ -1,10 +1,10 @@ -import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' -import { ModalDirective } from 'ngx-bootstrap/modal' +import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' import { FormReactive } from '@app/shared' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service' import { ServerService } from '@app/core' import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' +import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' @Component({ selector: 'my-video-caption-add-modal', @@ -17,14 +17,16 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni @Output() captionAdded = new EventEmitter() - @ViewChild('modal') modal: ModalDirective + @ViewChild('modal') modal: ElementRef videoCaptionLanguages = [] + private openedModal: NgbModalRef private closingModal = false constructor ( protected formValidatorService: FormValidatorService, + private modalService: NgbModal, private serverService: ServerService, private videoCaptionsValidatorsService: VideoCaptionsValidatorsService ) { @@ -51,13 +53,12 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni show () { this.closingModal = false - this.modal.show() + this.openedModal = this.modalService.open(this.modal, { keyboard: false }) } hide () { this.closingModal = true - - this.modal.hide() + this.openedModal.close() } isReplacingExistingCaption () { diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 2c40747ba..26c9e977e 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -1,215 +1,223 @@ -
- - - -
-
- - -
- {{ formErrors.name }} +
+ + + + +
+
+
+ + +
+ {{ formErrors.name }} +
+
+ +
+ (press Enter to add) + +
+ +
+ + + + +
+ {{ formErrors.description }} +
+
-
- -
- (press Enter to add) - -
-
- - - +
+
+ +
+ +
+
+ +
+ +
+ +
+ +
+ {{ formErrors.category }} +
+
+ +
+ +
+ +
+ +
+ {{ formErrors.licence }} +
+
+ +
+ +
+ +
+ +
+ {{ formErrors.language }} +
+
+ +
+ +
+ +
+ +
+ {{ formErrors.privacy }} +
+
+ +
+ + + + +
+ {{ formErrors.schedulePublicationAt }} +
+
+ + + + + + -
- {{ formErrors.description }}
-
- -
-
- -
- + + + + + +
+ +
+ + + Add another caption +
-
-
- -
- -
+
-
- {{ formErrors.category }} -
-
+
+ + {{ videoCaption.language.label }} -
- -
- -
+
Already uploaded ✔
-
- {{ formErrors.licence }} -
-
+ Delete + -
- -
- -
+ + {{ videoCaption.language.label }} -
- {{ formErrors.language }} -
-
+
Will be created on update
-
- -
- -
+ Cancel create + -
- {{ formErrors.privacy }} -
-
+ + {{ videoCaption.language.label }} -
- - - +
Will be deleted on update
-
- {{ formErrors.schedulePublicationAt }} + Cancel deletion + +
-
- - - - - - -
- - - -
- -
- - - Add another caption - -
- -
- -
- - {{ videoCaption.language.label }} - -
Already uploaded ✔
- - Delete - - - - {{ videoCaption.language.label }} - -
Will be created on update
- - Cancel create - - - - {{ videoCaption.language.label }} - -
Will be deleted on update
- - Cancel deletion - +
+ No captions for now.
-
- -
- No captions for now. -
-
- - - -
-
-
+ + + + + +
+
+ +
-
- -
+
+ +
-
- - - -
- {{ formErrors.support }} +
+ + + +
+ {{ formErrors.support }} +
-
- + + - +
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index f3d9ee44a..4d1871231 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -111,6 +111,8 @@ border: none; padding: 0; outline: 0; + color: inherit; + font-weight: $font-semibold; } .icon.icon-validate { @@ -143,15 +145,7 @@ p-calendar { /deep/ { .root-tabset > .nav { - margin-left: 15px; margin-bottom: 15px; - - .nav-link { - display: flex !important; - align-items: center; - height: 30px !important; - padding: 0 15px !important; - } } .ng2-tag-input { diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts index f6bd65fdc..f441d3fde 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts +++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts @@ -1,5 +1,4 @@ import { NgModule } from '@angular/core' -import { TabsModule } from 'ngx-bootstrap/tabs' import { TagInputModule } from 'ngx-chips' import { SharedModule } from '../../../shared/' import { VideoEditComponent } from './video-edit.component' @@ -23,7 +22,6 @@ import { VideoCaptionAddModalComponent } from './video-caption-add-modal.compone exports: [ TagInputModule, - TabsModule, CalendarModule, VideoEditComponent 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