interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix videos more dropdown position/loading

This commit is contained in:
Chocobozzz 2019-04-26 10:47:07 +02:00
parent a18f275d30
commit 743f023c53
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/app/shared/video/video-actions-dropdown.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core' import { AfterContentInit, AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
import { I18n } from '@ngx-translate/i18n-polyfill' import { I18n } from '@ngx-translate/i18n-polyfill'
import { DropdownAction, DropdownButtonSize, DropdownDirection } from '@app/shared/buttons/action-dropdown.component' import { DropdownAction, DropdownButtonSize, DropdownDirection } from '@app/shared/buttons/action-dropdown.component'
import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core' import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
@ -28,7 +28,7 @@ export type VideoActionsDisplayType = {
templateUrl: './video-actions-dropdown.component.html', templateUrl: './video-actions-dropdown.component.html',
styleUrls: [ './video-actions-dropdown.component.scss' ] styleUrls: [ './video-actions-dropdown.component.scss' ]
}) })
export class VideoActionsDropdownComponent implements OnChanges { export class VideoActionsDropdownComponent implements AfterViewInit, OnChanges {
@ViewChild('playlistDropdown') playlistDropdown: NgbDropdown @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
@ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
@ -78,6 +78,13 @@ export class VideoActionsDropdownComponent implements OnChanges {
return this.authService.getUser() return this.authService.getUser()
} }
ngAfterViewInit () {
// We rely on mouseenter to lazy load actions
if (this.screenService.isInTouchScreen()) {
this.loadDropdownInformation()
}
}
ngOnChanges () { ngOnChanges () {
this.buildActions() this.buildActions()
} }

11
client/src/app/shared/video/video-miniature.component.scss
View File

@ -2,6 +2,9 @@
@import '_mixins'; @import '_mixins';
@import '_miniature'; @import '_miniature';
$more-button-width: 41px;
$more-margin-right: 10px;
.video-miniature { .video-miniature {
width: $video-miniature-width; width: $video-miniature-width;
display: inline-flex; display: inline-flex;
@ -14,7 +17,7 @@
display: flex; display: flex;
.video-miniature-information { .video-miniature-information {
width: 200px; width: $video-miniature-width - $more-button-width - $more-margin-right;
line-height: normal; line-height: normal;
.video-miniature-name { .video-miniature-name {
@ -61,7 +64,9 @@
.video-actions { .video-actions {
margin-top: 3px; margin-top: 3px;
margin-right: 10px; margin-right: $more-margin-right;
width: $more-button-width;
height: 30px;
/deep/ .dropdown-root:not(.show) { /deep/ .dropdown-root:not(.show) {
opacity: 0; opacity: 0;
@ -86,7 +91,7 @@
top: -3px; top: -3px;
/deep/ .dropdown-root { /deep/ .dropdown-root {
display: block !important; opacity: 1 !important;
} }
} }
} }

2
client/src/app/shared/video/video-miniature.component.ts
View File

@ -74,7 +74,7 @@ export class VideoMiniatureComponent implements OnInit {
// We rely on mouseenter to lazy load actions // We rely on mouseenter to lazy load actions
if (this.screenService.isInTouchScreen()) { if (this.screenService.isInTouchScreen()) {
this.showActions = true this.loadActions()
} }
} }