From 59ca950548a5b902078e8f7152bd9c5fed6984ff Mon Sep 17 00:00:00 2001
From: Jared Hancock <jared@osticket.com>
Date: Mon, 11 May 2015 12:41:03 -0500
Subject: [PATCH] ui: Add floating bar to make ticket options more accessible
---
include/staff/ticket-view.inc.php | 26 ++++++++++----------
include/staff/tickets.inc.php | 4 +++-
scp/css/scp.css | 15 ++++++++++++
scp/js/scp.js | 40 +++++++++++++++++++++++++++++++
4 files changed, 72 insertions(+), 13 deletions(-)
diff --git a/include/staff/ticket-view.inc.php b/include/staff/ticket-view.inc.php
index 9bc13c7aa..78844c8aa 100644
--- a/include/staff/ticket-view.inc.php
+++ b/include/staff/ticket-view.inc.php
@@ -54,14 +54,10 @@ if($ticket->isOverdue())
$warn.=' <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)) { ?>
diff --git a/include/staff/tickets.inc.php b/include/staff/tickets.inc.php
index bc10b9284..7a606522a 100644
--- a/include/staff/tickets.inc.php
+++ b/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">
diff --git a/scp/css/scp.css b/scp/css/scp.css
index 0f7077ae1..061e241a1 100644
--- a/scp/css/scp.css
+++ b/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;
+}
diff --git a/scp/js/scp.js b/scp/js/scp.js
index d3026828d..7bfaf9a91 100644
--- a/scp/js/scp.js
+++ b/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);
--
GitLab