Merge pull request #2043 from greezybacon/feature/fixed-bar

ui: Add floating bar to make ticket options more accessible

Reviewed-By: Peter Rotich <peter@osticket.com>

include/staff/ticket-view.inc.php

@@ -54,14 +54,10 @@ if($ticket->isOverdue())
     $warn.='&nbsp;&nbsp;<span class="Icon overdueTicket">'.__('Marked overdue!').'</span>';
 
 ?>
-<table width="940" cellpadding="2" cellspacing="0" border="0">
-    <tr>
-        <td width="20%" class="has_bottom_border">
-             <h2><a href="tickets.php?id=<?php echo $ticket->getId(); ?>"
-             title="<?php echo __('Reload'); ?>"><i class="icon-refresh"></i>
-             <?php echo sprintf(__('Ticket #%s'), $ticket->getNumber()); ?></a></h2>
-        </td>
-        <td width="auto" class="flush-right has_bottom_border">
+<div class="has_bottom_border">
+    <div class="sticky bar">
+       <div class="content">
+        <div class="pull-right flush-right">
             <?php
             if ($role->hasPerm(EmailModel::PERM_BANLIST)
                     || $role->hasPerm(TicketModel::PERM_EDIT)
@@ -166,9 +162,15 @@ if($ticket->isOverdue())
                 }?>
               </ul>
             </div>
-        </td>
-    </tr>
-</table>
+        </div>
+        <div class="flush-left">
+             <h2><a href="tickets.php?id=<?php echo $ticket->getId(); ?>"
+             title="<?php echo __('Reload'); ?>"><i class="icon-refresh"></i>
+             <?php echo sprintf(__('Ticket #%s'), $ticket->getNumber()); ?></a></h2>
+        </div>
+    </div>
+  </div>
+</div>
 <table class="ticket_info" cellspacing="0" cellpadding="0" width="940" border="0">
     <tr>
         <td width="50%">
@@ -407,7 +409,7 @@ $tcount = $ticket->getThreadEntries($types)->count();
     <div id="msg_warning"><?php echo $warn; ?></div>
 <?php } ?>
 
-<div id="response_options">
+<div class="sticky bar stop" id="response_options">
     <ul class="tabs">
         <?php
         if ($role->hasPerm(TicketModel::PERM_REPLY)) { ?>

include/staff/tickets.inc.php

@@ -306,7 +306,8 @@ $_SESSION[':Q:tickets'] = $orig_tickets;
 <!-- SEARCH FORM END -->
 <div class="clear"></div>
 <div style="margin-bottom:20px; padding-top:10px;">
-<div>
+<div class="sticky bar">
+    <div class="content">
         <div class="pull-left flush-left">
             <h2><a href="<?php echo $refresh_url; ?>"
                 title="<?php echo __('Refresh'); ?>"><i class="icon-refresh"></i> <?php echo
@@ -336,6 +337,7 @@ $_SESSION[':Q:tickets'] = $orig_tickets;
             <?php
             } ?>
         </div>
+    </div>
 </div>
 <div class="clear" style="margin-bottom:10px;"></div>
 <form action="tickets.php" method="POST" name='tickets' id="tickets">

scp/css/scp.css

@@ -2185,3 +2185,18 @@ td.indented {
 .form-simple select, .form-simple input, .form-simple textarea {
     margin-left: 0;
 }
+.sticky.bar.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 6;
+  width: 100%;
+  border-bottom: 5px solid #ffffff;
+  background-color: white;
+  padding: 10px 20px 5px;
+  box-sizing: border-box;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
+}
+.sticky.bar .content {
+  margin: auto;
+}

scp/js/scp.js

@@ -436,6 +436,46 @@ var scp_prep = function() {
    if (window.location.hash) {
      $('ul.tabs li a[href="' + window.location.hash + '"]').trigger('click');
    }
+
+   // Make sticky bars float on scroll
+   // Thanks, https://stackoverflow.com/a/17166225/1025836
+   $('.sticky.bar').each(function() {
+     var $that = $(this),
+         placeholder = $('<div class="sticky placeholder">').insertBefore($that),
+         offset = $that.offset(),
+         top = offset.top - parseFloat($that.css('marginTop').replace(/auto/, 100)),
+         stop = $('div.sticky.bar.stop'),
+         stopAt,
+         visible = false;
+     if (stop.length)
+       stopAt = stop.offset().top - $that.height();
+
+     $that.find('.content').width($that.width());
+     $(window).scroll(function (event) {
+       // what the y position of the scroll is
+       var y = $(this).scrollTop();
+
+       // whether that's below the form
+       if (y >= top && (!stopAt || stopAt > y)) {
+         // if so, add the fixed class
+         if (!visible) {
+           visible = true;
+           setTimeout(function() {
+             placeholder.height($that.height());
+             $that.addClass('fixed').css('top', '-'+$that.height()+'px')
+                .animate({top:0}, {easing: 'swing', duration:'fast'});
+           }, 1);
+         }
+       } else {
+         // otherwise remove it
+         visible = false;
+         setTimeout(function() {
+           placeholder.removeAttr('style');
+           $that.stop().removeClass('fixed');
+         }, 1);
+       }
+    });
+  });
 };
 
 $(document).ready(scp_prep);