From 223b24e618146f85b20b5bf365bc18d14a5964cd Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 20 Dec 2019 17:49:57 +0100 Subject: [PATCH] Fix upnext, refactor avatar menu, add to playlist overflow --- .../src/app/+accounts/accounts.component.html | 2 +- .../menu/avatar-notification.component.html | 2 +- .../menu/avatar-notification.component.scss | 2 +- client/src/app/menu/menu.component.html | 18 +++++-- client/src/app/menu/menu.component.scss | 1 + client/src/app/shared/misc/utils.ts | 24 ++++++++- .../video-add-to-playlist.component.html | 14 ++--- .../video-add-to-playlist.component.scss | 10 ++-- .../+video-watch/video-watch.component.html | 4 +- .../+video-watch/video-watch.component.scss | 6 +-- .../+video-watch/video-watch.component.ts | 16 +++++- .../src/assets/player/upnext/upnext-plugin.ts | 54 ++++++++++--------- client/src/sass/player/upnext.scss | 6 +++ 13 files changed, 108 insertions(+), 51 deletions(-) diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html index 6269091df..70257162d 100644 --- a/client/src/app/+accounts/accounts.component.html +++ b/client/src/app/+accounts/accounts.component.html @@ -23,7 +23,7 @@ Instance muted by your instance diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html index 1b6e6dcf8..8ffec46da 100644 --- a/client/src/app/menu/avatar-notification.component.html +++ b/client/src/app/menu/avatar-notification.component.html @@ -25,7 +25,7 @@ -
+
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index 713ac7cb9..2ca7f24dc 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -45,7 +45,7 @@ align-items: center; padding: 0 10px; font-size: 16px; - height: 50px; + min-height: 50px; a { @include disable-default-a-behaviour; diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 3f406586e..848f9949f 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -5,8 +5,10 @@
@@ -14,13 +16,21 @@
- My public profile + Public profile + + - My account + Account settings + + Channels settings + + + + Log out diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 79a28d258..2963d4d19 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -69,6 +69,7 @@ menu { font-size: 13px; color: #C6C6C6; max-width: 140px; + cursor: pointer; } } diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index f26240d21..b1d1fc0b5 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -169,6 +169,26 @@ function importModule (path: string) { }) } +function isInViewport (el: HTMLElement) { + const bounding = el.getBoundingClientRect() + return ( + bounding.top >= 0 && + bounding.left >= 0 && + bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + bounding.right <= (window.innerWidth || document.documentElement.clientWidth) + ) +} + +function isXPercentInViewport (el: HTMLElement, percentVisible: number) { + const rect = el.getBoundingClientRect() + const windowHeight = (window.innerHeight || document.documentElement.clientHeight) + + return !( + Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible || + Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible + ) +} + export { sortBy, durationToString, @@ -183,5 +203,7 @@ export { objectLineFeedToHtml, removeElementFromArray, importModule, - scrollToTop + scrollToTop, + isInViewport, + isXPercentInViewport } diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html index 648d580fa..0cc8af345 100644 --- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html @@ -41,14 +41,16 @@
-