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 --- client/package.json | 2 +- client/src/app/+admin/admin.module.ts | 2 - .../edit-custom-config.component.html | 513 +++++++++++---------- .../following-add/following-add.component.html | 2 +- .../src/app/+admin/follows/follows.component.html | 12 +- .../src/app/+admin/follows/follows.component.scss | 6 - client/src/app/+admin/follows/follows.component.ts | 8 +- client/src/app/core/confirm/confirm.component.html | 44 +- client/src/app/core/confirm/confirm.component.ts | 37 +- client/src/app/core/core.module.ts | 2 - client/src/app/login/login.component.html | 50 +- client/src/app/login/login.component.ts | 11 +- .../src/app/menu/language-chooser.component.html | 21 +- .../src/app/menu/language-chooser.component.scss | 11 +- client/src/app/menu/language-chooser.component.ts | 16 +- client/src/app/menu/menu.component.html | 28 +- client/src/app/menu/menu.component.scss | 4 + client/src/app/search/search.component.html | 2 +- client/src/app/search/search.module.ts | 4 +- .../shared/forms/markdown-textarea.component.html | 13 +- client/src/app/shared/misc/help.component.html | 3 +- client/src/app/shared/shared.module.ts | 27 +- .../src/app/shared/video/video-feed.component.html | 13 +- .../src/app/shared/video/video-feed.component.scss | 1 + .../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 +- client/src/sass/application.scss | 60 ++- client/src/sass/include/_bootstrap.scss | 86 ++-- client/yarn.lock | 8 +- 44 files changed, 890 insertions(+), 950 deletions(-) diff --git a/client/package.json b/client/package.json index e6b6e3b05..0360502f9 100644 --- a/client/package.json +++ b/client/package.json @@ -46,6 +46,7 @@ "@angular/service-worker": "~6.1.0", "@angularclass/hmr": "^2.1.3", "@neos21/bootstrap3-glyphicons": "^1.0.1", + "@ng-bootstrap/ng-bootstrap": "^2.2.2", "@ngx-loading-bar/core": "^2.0.0", "@ngx-loading-bar/http-client": "^2.0.0", "@ngx-loading-bar/router": "^2.0.0", @@ -86,7 +87,6 @@ "linkifyjs": "^2.1.5", "lodash-es": "^4.17.4", "markdown-it": "^8.4.0", - "ngx-bootstrap": "3.0.1", "ngx-chips": "1.9.3", "ngx-clipboard": "11.1.1", "ngx-pipes": "^2.1.7", diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts index 8d50b8715..d7ae2f7f0 100644 --- a/client/src/app/+admin/admin.module.ts +++ b/client/src/app/+admin/admin.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core' import { ConfigComponent, EditCustomConfigComponent } from '@app/+admin/config' import { ConfigService } from '@app/+admin/config/shared/config.service' -import { TabsModule } from 'ngx-bootstrap/tabs' import { TableModule } from 'primeng/table' import { SharedModule } from '../shared' import { AdminRoutingModule } from './admin-routing.module' @@ -18,7 +17,6 @@ import { VideoBlacklistComponent, VideoBlacklistListComponent } from './video-bl @NgModule({ imports: [ AdminRoutingModule, - TabsModule.forRoot(), TableModule, SharedModule ], diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index 0a032df12..49b89cef4 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -1,290 +1,295 @@
- + - + + -
Instance
+
Instance
-
- - -
- {{ formErrors.instanceName }} -
-
- -
- - -
- {{ formErrors.instanceShortDescription }} -
-
- -
- - -
- {{ formErrors.instanceDescription }} -
-
- -
- - -
- {{ formErrors.instanceTerms }} -
-
- -
- -
- -
-
- {{ formErrors.instanceDefaultClientRoute }} -
-
- -
- - - -
- +
+ + +
+ {{ formErrors.instanceName }} +
-
- {{ formErrors.instanceDefaultNSFWPolicy }} + +
+ + +
+ {{ formErrors.instanceShortDescription }} +
-
- -
Signup
- - - -
- - -
- {{ formErrors.signupLimit }} + +
+ + +
+ {{ formErrors.instanceDescription }} +
-
- -
Import
- - - - - -
Administrator
- -
- - -
- {{ formErrors.adminEmail }} + +
+ + +
+ {{ formErrors.instanceTerms }} +
-
- -
Users
- -
- -
- + +
+ +
+ +
+
+ {{ formErrors.instanceDefaultClientRoute }} +
-
- {{ formErrors.userVideoQuota }} + +
+ + + +
+ +
+
+ {{ formErrors.instanceDefaultNSFWPolicy }} +
-
- - - - -
Twitter
- -
- - - -
- {{ formErrors.servicesTwitterUsername }} + +
Signup
+ + + +
+ + +
+ {{ formErrors.signupLimit }} +
-
- - +
Import
+ + - + -
Transcoding
+
Administrator
- +
+ + +
+ {{ formErrors.adminEmail }} +
+
- +
Users
- +
- +
-
- {{ formErrors.transcodingThreads }} +
+ {{ formErrors.userVideoQuota }}
+ + -
- + + +
Twitter
+
+ + + +
+ {{ formErrors.servicesTwitterUsername }} +
- -
- Cache - - -
- -
- - -
- {{ formErrors.cachePreviewsSize }} + + + + + + + +
Transcoding
+ + + + + +
+ +
+ +
+
+ {{ formErrors.transcodingThreads }} +
+
+ +
+ + +
+ + +
+ Cache + +
-
- -
- - -
- {{ formErrors.cacheCaptionsSize }} + +
+ + +
+ {{ formErrors.cachePreviewsSize }} +
-
- -
Customizations
- -
- - - -
- {{ formErrors.customizationJavascript }} + +
+ + +
+ {{ formErrors.cacheCaptionsSize }} +
-
- -
- - - -
- {{ formErrors.customizationCSS }} + +
Customizations
+ +
+ + + +
+ {{ formErrors.customizationJavascript }} +
-
- - + +
+ + + +
+ {{ formErrors.customizationCSS }} +
+
+ + + It seems the configuration is invalid. Please search potential errors in the different tabs. diff --git a/client/src/app/+admin/follows/following-add/following-add.component.html b/client/src/app/+admin/follows/following-add/following-add.component.html index 72635048c..e08decb3f 100644 --- a/client/src/app/+admin/follows/following-add/following-add.component.html +++ b/client/src/app/+admin/follows/following-add/following-add.component.html @@ -18,5 +18,5 @@ It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
- + diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html index a8258bf70..8eabb3392 100644 --- a/client/src/app/+admin/follows/follows.component.html +++ b/client/src/app/+admin/follows/follows.component.html @@ -1,13 +1,15 @@
Manage follows
- - - + + + + {{ link.title }} - - + + +
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss index 08b3737f8..766d7853b 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss @@ -2,9 +2,3 @@ flex-grow: 0; margin-right: 30px; } - -/deep/ .tab-content { - height: 0; - min-height: 0; - padding: 0; -} diff --git a/client/src/app/+admin/follows/follows.component.ts b/client/src/app/+admin/follows/follows.component.ts index f7af9826c..b6f7715b3 100644 --- a/client/src/app/+admin/follows/follows.component.ts +++ b/client/src/app/+admin/follows/follows.component.ts @@ -1,14 +1,14 @@ import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core' import { NavigationEnd, Router } from '@angular/router' -import { TabsetComponent } from 'ngx-bootstrap/tabs' import { I18n } from '@ngx-translate/i18n-polyfill' +import { NgbTabset } from '@ng-bootstrap/ng-bootstrap' @Component({ templateUrl: './follows.component.html', styleUrls: [ './follows.component.scss' ] }) export class FollowsComponent implements OnInit, AfterViewInit { - @ViewChild('followsMenuTabs') followsMenuTabs: TabsetComponent + @ViewChild('followsMenuTabs') followsMenuTabs: NgbTabset links: { path: string, title: string }[] = [] @@ -53,8 +53,8 @@ export class FollowsComponent implements OnInit, AfterViewInit { for (let i = 0; i < this.links.length; i++) { const path = this.links[i].path - if (url.endsWith(path) === true && this.followsMenuTabs.tabs[i]) { - this.followsMenuTabs.tabs[i].active = true + if (url.endsWith(path) === true) { + this.followsMenuTabs.select(path) return } } diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html index 0bb64cf00..43f0c6190 100644 --- a/client/src/app/core/confirm/confirm.component.html +++ b/client/src/app/core/confirm/confirm.component.html @@ -1,31 +1,25 @@ - -
-
-
- -
- -

Forgot your password

-
+ + +
+

Forgot your password

+ +
-
-
- - -
+
+
+ + +
+
-
- - Cancel - +
+ Cancel - -
-
-
+
-
+ diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index 9a68c12fa..8e8822510 100644 --- a/client/src/app/login/login.component.ts +++ b/client/src/app/login/login.component.ts @@ -2,12 +2,12 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' import { RedirectService, ServerService } from '@app/core' import { UserService } from '@app/shared' import { NotificationsService } from 'angular2-notifications' -import { ModalDirective } from 'ngx-bootstrap/modal' import { AuthService } from '../core' import { FormReactive } from '../shared' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { LoginValidatorsService } from '@app/shared/forms/form-validators/login-validators.service' +import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' @Component({ selector: 'my-login', @@ -16,14 +16,17 @@ import { LoginValidatorsService } from '@app/shared/forms/form-validators/login- }) export class LoginComponent extends FormReactive implements OnInit { - @ViewChild('forgotPasswordModal') forgotPasswordModal: ModalDirective + @ViewChild('forgotPasswordModal') forgotPasswordModal: ElementRef @ViewChild('forgotPasswordEmailInput') forgotPasswordEmailInput: ElementRef error: string = null forgotPasswordEmail = '' + private openedForgotPasswordModal: NgbModalRef + constructor ( protected formValidatorService: FormValidatorService, + private modalService: NgbModal, private loginValidatorsService: LoginValidatorsService, private authService: AuthService, private userService: UserService, @@ -84,10 +87,10 @@ export class LoginComponent extends FormReactive implements OnInit { } openForgotPasswordModal () { - this.forgotPasswordModal.show() + this.openedForgotPasswordModal = this.modalService.open(this.forgotPasswordModal) } hideForgotPasswordModal () { - this.forgotPasswordModal.hide() + this.openedForgotPasswordModal.close() } } diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html index f941e32f8..c37bf2826 100644 --- a/client/src/app/menu/language-chooser.component.html +++ b/client/src/app/menu/language-chooser.component.html @@ -1,15 +1,10 @@ -
-
-
- -
- -

Change the language

-
+ +
+

Change the language

+ +
-
- {{ lang.label }} -
-
+
+ {{ lang.label }}
-
+ diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss index 30c70c6a2..944e86f46 100644 --- a/client/src/app/menu/language-chooser.component.scss +++ b/client/src/app/menu/language-chooser.component.scss @@ -1,19 +1,12 @@ @import '_variables'; @import '_mixins'; -.modal { - z-index: 10005; -} - -.modal-title { - text-align: center; -} - .modal-body { text-align: center; a { + display: block; font-size: 16px; - margin-top: 10px; + margin: 15px; } } \ No newline at end of file diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts index 3de6a129d..45fa73e76 100644 --- a/client/src/app/menu/language-chooser.component.ts +++ b/client/src/app/menu/language-chooser.component.ts @@ -1,6 +1,6 @@ -import { Component, ViewChild } from '@angular/core' -import { ModalDirective } from 'ngx-bootstrap/modal' +import { Component, ElementRef, ViewChild } from '@angular/core' import { I18N_LOCALES } from '../../../../shared' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' @Component({ selector: 'my-language-chooser', @@ -8,21 +8,17 @@ import { I18N_LOCALES } from '../../../../shared' styleUrls: [ './language-chooser.component.scss' ] }) export class LanguageChooserComponent { - @ViewChild('modal') modal: ModalDirective + @ViewChild('modal') modal: ElementRef - languages: { [ id: string ]: string }[] = [] + languages: { id: string, label: string }[] = [] - constructor () { + constructor (private modalService: NgbModal) { this.languages = Object.keys(I18N_LOCALES) .map(k => ({ id: k, label: I18N_LOCALES[k] })) } show () { - this.modal.show() - } - - hide () { - this.modal.hide() + this.modalService.open(this.modal) } buildLanguageLink (lang: { id: string }) { diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index c487a6fc1..9657e5269 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -11,24 +11,22 @@
{{ user.username }}
-
- +
+ - + + Log out + +
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index e61f4acd3..39f1e9be0 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -69,6 +69,10 @@ menu { .glyphicon { cursor: pointer; font-size: 18px; + + &::after { + border: none; + } } } } diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html index 7fb2d4f7d..bbc70f772 100644 --- a/client/src/app/search/search.component.html +++ b/client/src/app/search/search.component.html @@ -17,7 +17,7 @@
-
+
diff --git a/client/src/app/search/search.module.ts b/client/src/app/search/search.module.ts index 488046cf1..5a715fb8e 100644 --- a/client/src/app/search/search.module.ts +++ b/client/src/app/search/search.module.ts @@ -4,14 +4,14 @@ import { SearchComponent } from '@app/search/search.component' import { SearchService } from '@app/search/search.service' import { SearchRoutingModule } from '@app/search/search-routing.module' import { SearchFiltersComponent } from '@app/search/search-filters.component' -import { CollapseModule } from 'ngx-bootstrap/collapse' +import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap' @NgModule({ imports: [ SearchRoutingModule, SharedModule, - CollapseModule.forRoot() + NgbCollapseModule.forRoot() ], declarations: [ diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html index 802562dd7..3de3b6fcd 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.html +++ b/client/src/app/shared/forms/markdown-textarea.component.html @@ -5,8 +5,13 @@ id="description" name="description"> - - - - + + +
+ + + +
+ +
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html index 1c3863e52..42a92d7f0 100644 --- a/client/src/app/shared/misc/help.component.html +++ b/client/src/app/shared/misc/help.component.html @@ -18,9 +18,8 @@ title="Get help" i18n-title [attr.aria-pressed]="isPopoverOpened" - [popover]="tooltipTemplate" + [ngbPopover]="tooltipTemplate" [placement]="tooltipPlacement" - [outsideClick]="true" (onHidden)="onPopoverHidden()" (onShown)="onPopoverShown()" > diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 94de3af9f..ea7f2c887 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -8,11 +8,6 @@ import { HelpComponent } from '@app/shared/misc/help.component' import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' import { MarkdownService } from '@app/videos/shared' -import { BsDropdownModule } from 'ngx-bootstrap/dropdown' -import { ModalModule } from 'ngx-bootstrap/modal' -import { PopoverModule } from 'ngx-bootstrap/popover' -import { TabsModule } from 'ngx-bootstrap/tabs' -import { TooltipModule } from 'ngx-bootstrap/tooltip' import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes' import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' @@ -53,6 +48,7 @@ import { VideoCaptionService } from '@app/shared/video-caption' import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component' import { VideoImportService } from '@app/shared/video-import/video-import.service' import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component' +import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' @NgModule({ imports: [ @@ -62,11 +58,11 @@ import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.com RouterModule, HttpClientModule, - BsDropdownModule.forRoot(), - ModalModule.forRoot(), - PopoverModule.forRoot(), - TabsModule.forRoot(), - TooltipModule.forRoot(), + NgbDropdownModule.forRoot(), + NgbModalModule.forRoot(), + NgbPopoverModule.forRoot(), + NgbTabsetModule.forRoot(), + NgbTooltipModule.forRoot(), PrimeSharedModule, NgPipesModule @@ -97,11 +93,12 @@ import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.com RouterModule, HttpClientModule, - BsDropdownModule, - ModalModule, - PopoverModule, - TabsModule, - TooltipModule, + NgbDropdownModule, + NgbModalModule, + NgbPopoverModule, + NgbTabsetModule, + NgbTooltipModule, + PrimeSharedModule, BytesPipe, KeysPipe, diff --git a/client/src/app/shared/video/video-feed.component.html b/client/src/app/shared/video/video-feed.component.html index 5ef13e1ed..2e687a7b9 100644 --- a/client/src/app/shared/video/video-feed.component.html +++ b/client/src/app/shared/video/video-feed.component.html @@ -1,13 +1,10 @@
- - + - + {{ item.label }}
\ No newline at end of file diff --git a/client/src/app/shared/video/video-feed.component.scss b/client/src/app/shared/video/video-feed.component.scss index 2efeb405e..a5d1aabf7 100644 --- a/client/src/app/shared/video/video-feed.component.scss +++ b/client/src/app/shared/video/video-feed.component.scss @@ -5,6 +5,7 @@ @include disable-default-a-behaviour; color: black; + display: block; } .icon { 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 ], diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 74759348e..b120d4090 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -42,6 +42,10 @@ input.readonly { background-color: #fff !important; } +input, textarea { + outline: none; +} + label { font-weight: $font-bold; font-size: 15px; @@ -174,9 +178,13 @@ label { @include icon(24px); position: relative; - right: -1px; + top: 3px; float: right; background-image: url('../assets/images/global/cross.svg'); + + margin: 0; + padding: 0; + opacity: 1; } } @@ -200,47 +208,35 @@ label { } } -tabset:not(.bootstrap) { - .nav { - font-size: 16px !important; - border: none !important; +// Nav customizations +.nav .nav-link { + display: flex !important; + align-items: center; + height: 30px !important; + padding: 10px 15px !important; +} - .nav-item .nav-link { - margin-right: 30px; - padding: 0; - border-radius: 3px; - border: none !important; - - .tab-link { - display: flex !important; - align-items: center; - min-height: 30px !important; - padding: 0 15px; - } +.nav.nav-pills { + font-size: 16px !important; - &, & a { - color: #000 !important; - @include disable-default-a-behaviour; - } + .nav-link.active { + font-weight: $font-semibold !important; + } - &.active, &:hover { - background-color: #F0F0F0; - } + a { + @include disable-default-a-behaviour; - &.active { - font-weight: $font-semibold !important; - } - } + color: #000; } } -tabset.bootstrap { - margin-left: 0; +ngb-tabset.bootstrap { - .nav-item .nav-link { + .nav-link { &, & a { - color: #000; @include disable-default-a-behaviour; + + color: #000 !important; } } } diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss index b56b71536..5abec02d5 100644 --- a/client/src/sass/include/_bootstrap.scss +++ b/client/src/sass/include/_bootstrap.scss @@ -1,37 +1,51 @@ -@import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/mixins"; -@import "~bootstrap/scss/root"; -@import "~bootstrap/scss/reboot"; -@import "~bootstrap/scss/type"; -//@import "~bootstrap/scss/images"; -//@import "~bootstrap/scss/code"; -@import "~bootstrap/scss/grid"; -//@import "~bootstrap/scss/tables"; -@import "~bootstrap/scss/forms"; -@import "~bootstrap/scss/buttons"; -//@import "~bootstrap/scss/transitions"; -@import "~bootstrap/scss/dropdown"; -//@import "~bootstrap/scss/button-group"; -@import "~bootstrap/scss/input-group"; -//@import "~bootstrap/scss/custom-forms"; -@import "~bootstrap/scss/nav"; -//@import "~bootstrap/scss/navbar"; -//@import "~bootstrap/scss/card"; -//@import "~bootstrap/scss/breadcrumb"; -//@import "~bootstrap/scss/pagination"; -//@import "~bootstrap/scss/badge"; -//@import "~bootstrap/scss/jumbotron"; -@import "~bootstrap/scss/alert"; -//@import "~bootstrap/scss/progress"; -//@import "~bootstrap/scss/media"; -//@import "~bootstrap/scss/list-group"; -@import "~bootstrap/scss/close"; -@import "~bootstrap/scss/modal"; -@import "~bootstrap/scss/tooltip"; -@import "~bootstrap/scss/popover"; -//@import "~bootstrap/scss/carousel"; -//@import "~bootstrap/scss/utilities"; -//@import "~bootstrap/scss/print"; +$dropdown-link-active-bg: inherit; -@import "~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons"; \ No newline at end of file +$zindex-modal: 10005; +$modal-footer-border-width: 0; +$modal-md: 600px; + +$input-btn-focus-width: 0; +$input-btn-focus-color: inherit; +$input-focus-border-color: #ced4da; + +$nav-pills-link-active-bg: #F0F0F0; +$nav-pills-link-active-color: #000; + +@import '~bootstrap/scss/functions'; +@import '~bootstrap/scss/variables'; + +@import '~bootstrap/scss/mixins'; +@import '~bootstrap/scss/root'; +@import '~bootstrap/scss/reboot'; +@import '~bootstrap/scss/type'; +//@import '~bootstrap/scss/images'; +//@import '~bootstrap/scss/code'; +@import '~bootstrap/scss/grid'; +//@import '~bootstrap/scss/tables'; +@import '~bootstrap/scss/forms'; +@import '~bootstrap/scss/buttons'; +//@import '~bootstrap/scss/transitions'; +@import '~bootstrap/scss/dropdown'; +//@import '~bootstrap/scss/button-group'; +@import '~bootstrap/scss/input-group'; +//@import '~bootstrap/scss/custom-forms'; +@import '~bootstrap/scss/nav'; +//@import '~bootstrap/scss/navbar'; +//@import '~bootstrap/scss/card'; +//@import '~bootstrap/scss/breadcrumb'; +//@import '~bootstrap/scss/pagination'; +//@import '~bootstrap/scss/badge'; +//@import '~bootstrap/scss/jumbotron'; +@import '~bootstrap/scss/alert'; +//@import '~bootstrap/scss/progress'; +//@import '~bootstrap/scss/media'; +//@import '~bootstrap/scss/list-group'; +@import '~bootstrap/scss/close'; +@import '~bootstrap/scss/modal'; +@import '~bootstrap/scss/tooltip'; +@import '~bootstrap/scss/popover'; +//@import '~bootstrap/scss/carousel'; +@import '~bootstrap/scss/utilities'; +//@import '~bootstrap/scss/print'; + +@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; diff --git a/client/yarn.lock b/client/yarn.lock index 32c0f7ea3..f350416d6 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -191,6 +191,10 @@ version "1.0.1" resolved "https://registry.yarnpkg.com/@neos21/bootstrap3-glyphicons/-/bootstrap3-glyphicons-1.0.1.tgz#e5eeec43e0153d4b51effd9ecb58cdf7029924d7" +"@ng-bootstrap/ng-bootstrap@^2.2.2": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-2.2.2.tgz#07c64badd48b563140eb5a6327b5516bf2226834" + "@ngtools/webpack@6.1.1": version "6.1.1" resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-6.1.1.tgz#dcfea287c0c1358f3e123621c65b0e3ccaab5b70" @@ -5350,10 +5354,6 @@ ng2-material-dropdown@0.10.1: dependencies: tslib "^1.9.0" -ngx-bootstrap@3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-3.0.1.tgz#e98d2fc6340f32a9d358cd08e8fda7dcb23bdab3" - ngx-chips@1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/ngx-chips/-/ngx-chips-1.9.3.tgz#0ebc13b4868d9cd480478ed93fd56bcc3b68ea66" -- cgit v1.2.3