From 3b4ee202e2b184ecfab64333f3eb1173f1a18d69 Mon Sep 17 00:00:00 2001
From: Michael Radionov <micrddrgn@gmail.com>
Date: Tue, 8 Dec 2015 22:35:43 +0300
Subject: [PATCH] Bug: Queue list dropdown nav is overlapped

Closes: #440
---
 app/public/js/common/queueCtrl.js             | 34 +++++++++++++++++++
 .../sass/_components/_queueList.scss          | 28 ++++++++++++---
 app/views/common/queueList.html               |  5 +--
 3 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/app/public/js/common/queueCtrl.js b/app/public/js/common/queueCtrl.js
index 8df87291..eae4d585 100644
--- a/app/public/js/common/queueCtrl.js
+++ b/app/public/js/common/queueCtrl.js
@@ -141,4 +141,38 @@ app.controller('QueueCtrl', function(
         $anchorScroll();
     }
 
+    /**
+     * Dynamically change position of menu not to overlap fixed footer and header
+     * @param  {object} $event - Angular event
+     */
+    $scope.menuPosition = function ($event) {
+        var $hover = $($event.target);
+        var $menu = $hover.find('.queueListView_list_item_options_list');
+        var $arrow = $hover.find('.queueListView_list_item_options_arrow');
+
+        var menuHeight = $menu.height();
+        var arrowHeight = $arrow.outerHeight();
+        var headerHeight = $('.topFrame').outerHeight();
+        var footerHeight = $('.player_inner').outerHeight();
+        var hoverHeight = $hover.outerHeight();
+
+        // Calculate top and bottom edge position and compare it with current
+        var borderTop = headerHeight;
+        var borderBottom = window.innerHeight - footerHeight;
+        var hoverTop = $hover.offset().top;
+
+        // Arrow in the middle by default
+        var newTop = -menuHeight / 2 + arrowHeight / 2;
+
+        // If overlapping top border - move list to the bottom
+        if (hoverTop - menuHeight / 2 < borderTop) {
+            newTop = -arrowHeight;
+        // If overlapping bottom border - move list to the top
+        } else if (hoverTop + hoverHeight + menuHeight / 2 > borderBottom) {
+            newTop = -menuHeight + arrowHeight;
+        }
+
+        $menu.css({ top: newTop });
+    };
+
 });
\ No newline at end of file
diff --git a/app/public/stylesheets/sass/_components/_queueList.scss b/app/public/stylesheets/sass/_components/_queueList.scss
index df6cf0b7..1cc34e94 100644
--- a/app/public/stylesheets/sass/_components/_queueList.scss
+++ b/app/public/stylesheets/sass/_components/_queueList.scss
@@ -18,6 +18,9 @@
 
 .queueListView_list {
     width: 100%;
+    // Keep some offset from the bottom not to mix last queue item
+    // with player progress bar on mouse over
+    padding-bottom: 15px;
 
     & .queueListView_list_itemTitle {
         text-align: center;
@@ -78,16 +81,19 @@
     text-align: center;
     height: 17px;
 
-    &.active .queueListView_list_item_options_list {
-        display: block;
+    &.active {
+        .queueListView_list_item_options_list,
+        .queueListView_list_item_options_arrow {
+            display: block;
+        }
     }
 }
 
 .queueListView_list_item_options_list {
     display: none;
     position: absolute;
-    right: 0;
-    top: 17px;
+    right: 19px;
+    top: -11px;
     background: $separatorCleanColor;
     z-index: 10;
     border-radius: 2px;
@@ -105,4 +111,16 @@
     &:hover {
         background: $separatorDarkColor;
     }
-}
\ No newline at end of file
+}
+
+.queueListView_list_item_options_arrow {
+    display: none;
+    position: absolute;
+    top: -3px;
+    right: 8px;
+    width: 0;
+    height: 0;
+    border-top: 12px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 12px solid #3E3E40;
+}
diff --git a/app/views/common/queueList.html b/app/views/common/queueList.html
index d4209459..42dbbfce 100644
--- a/app/views/common/queueList.html
+++ b/app/views/common/queueList.html
@@ -22,10 +22,11 @@
             <span class="queueListView_list_item_user" title="by: {{ item.songUser }}">by: {{ item.songUser }} </span>
             <div class="queueListView_list_item_options"
                  ng-class="{ active: hover }"
-                 ng-mouseover="hover = true"
+                 ng-mouseover="menuPosition($event); hover = true"
                  ng-mouseleave="hover = false" >
                 <i class="fa fa-ellipsis-v"></i>
-                <ul class="queueListView_list_item_options_list" >
+                <div class="queueListView_list_item_options_arrow"></div>
+                <ul class="queueListView_list_item_options_list">
                     <li class="queueListView_list_item_options_list_button" ng-click="remove($event); $event.stopPropagation();">Remove</li>
                     <li class="queueListView_list_item_options_list_button" ng-click="like($event); $event.stopPropagation();">Like</li>
                     <li class="queueListView_list_item_options_list_button" ng-click="repost($event); $event.stopPropagation();">Repost</li>