From ebece14b45c0a3de39e67e5e88b05cc25e076b9f Mon Sep 17 00:00:00 2001
From: Nathan Febuary <nathan@enhancesoft.com>
Date: Mon, 23 Nov 2015 16:11:31 -0600
Subject: [PATCH] Custom Queue Dropdown menu enhancement
Queue modifications remove fronted quick queue manager for admins,
modifies the width of the queue dropdown and adds better nested
dropdown for queues admin i.e. multi level dropdown instead of
originally the file tree style. Optimizations for IE9 and up (screen
shots to show IE9 sauce labs test). Additional minor design changes in
the dropdown menus.
---
.../staff/templates/queue-navigation.tmpl.php | 12 +-
.../queue-savedsearches-nav.tmpl.php | 18 +--
.../templates/queue-subnavigation.tmpl.php | 38 ++---
scp/css/scp.css | 136 ++++++++++++------
scp/js/scp.js | 23 ++-
5 files changed, 147 insertions(+), 80 deletions(-)
diff --git a/include/staff/templates/queue-navigation.tmpl.php b/include/staff/templates/queue-navigation.tmpl.php
index c736e3759..733b5066b 100644
--- a/include/staff/templates/queue-navigation.tmpl.php
+++ b/include/staff/templates/queue-navigation.tmpl.php
@@ -17,20 +17,20 @@ $selected = $_REQUEST['queue'] == $this_queue->getId();
include 'queue-subnavigation.tmpl.php';
} ?>
<!-- Dropdown Titles -->
- <li>
- <h4><?php echo __('Personal Queues'); ?></h4>
- </li>
+ <li class="personalQ">
+ </li>
+
<?php foreach ($this_queue->getMyChildren() as $q) {
include 'queue-subnavigation.tmpl.php';
} ?>
</ul>
<!-- Add Queue button sticky at the bottom -->
<div class="add-queue">
- <a class="flush-right full-width" onclick="javascript:
+ <a class="full-width" onclick="javascript:
var pid = <?php echo $this_queue->getId() ?: 0; ?>;
$.dialog('ajax.php/tickets/search?parent_id='+pid, 201);">
- <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
- <span><?php echo __('Add personal queue'); ?></span>
+ <span><i class="green icon-plus-sign"></i>
+ <?php echo __('Add personal queue'); ?></span>
</a>
</div>
</div>
diff --git a/include/staff/templates/queue-savedsearches-nav.tmpl.php b/include/staff/templates/queue-savedsearches-nav.tmpl.php
index 3d7de7722..d7d32a8a3 100644
--- a/include/staff/templates/queue-savedsearches-nav.tmpl.php
+++ b/include/staff/templates/queue-savedsearches-nav.tmpl.php
@@ -5,7 +5,7 @@
// $child_selected - <bool> true if the selected queue is a descendent
// $adhoc - not FALSE if an adhoc advanced search exists
?>
-<li class="item <?php if ($child_selected) echo 'child active'; ?>">
+<li class="item <?php if ($child_selected) echo ''; ?>">
<?php
$href = 'href="tickets.php?queue=adhoc"';
if (!isset($_SESSION['advsearch']))
@@ -27,7 +27,8 @@
} ?>
<li>
<h4><?php echo __('Recent Searches'); ?></h4>
-<?php if (isset($_SESSION['advsearch'])) {
+ </li>
+ <?php if (isset($_SESSION['advsearch'])) {
foreach ($_SESSION['advsearch'] as $token=>$criteria) {
$q = new SavedSearch(array('root' => 'T'));
$q->id = 'adhoc,'.$token;
@@ -36,15 +37,16 @@
include 'queue-subnavigation.tmpl.php';
}
} ?>
- <!-- Dropdown Titles -->
- </li>
+ <!-- Dropdown Titles -->
+
</ul>
<!-- Add Queue button sticky at the bottom -->
- <div class="add-queue">
- <a class="flush-right full-width" onclick="javascript:
+
+ <div class="add-queue">
+ <a class="full-width" onclick="javascript:
$.dialog('ajax.php/tickets/search', 201);">
- <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
- <span><?php echo __('Add personal queue'); ?></span>
+ <span><i class="green icon-plus-sign"></i>
+ <?php echo __('Add personal search'); ?></span>
</a>
</div>
</div>
diff --git a/include/staff/templates/queue-subnavigation.tmpl.php b/include/staff/templates/queue-subnavigation.tmpl.php
index e1f45d25b..11602d21b 100644
--- a/include/staff/templates/queue-subnavigation.tmpl.php
+++ b/include/staff/templates/queue-subnavigation.tmpl.php
@@ -8,23 +8,16 @@ $selected = $_REQUEST['queue'] == $q->getId();
global $thisstaff;
?>
<!-- SubQ class: only if top level Q has subQ -->
-<li class="<?php if ($hasChildren) echo 'subQ'; ?>">
- <?php
- if ($hasChildren) { ?>
- <i class="icon-caret-down"></i>
- <?php }
- if ($thisstaff->isAdmin() || $q->isPrivate()) { ?>
+<li <?php if ($hasChildren) echo 'class="subQ"'; ?>>
+
+<?php
+ if ($q->isPrivate()) { ?>
<!-- Edit Queue -->
+ <div class="controlQ">
<div class="editQ pull-right">
<i class="icon-cog"></i>
<div class="manageQ">
<ul>
- <?php if ($hasChildren) { ?>
- <li class="positive">
- <a href="<?php echo $queue->getHref(); ?>">
- <i class="icon-fixed-width icon-plus-sign"></i><?php echo __('Add Queue'); ?></a>
- </li>
- <?php } ?>
<li>
<a href="<?php
echo $queue->isPrivate()
@@ -40,15 +33,24 @@ global $thisstaff;
</ul>
</div>
</div>
+ </div>
<?php } ?>
- <!-- Display Latest Ticket count -->
- <span class="pull-right">(?)</span>
+ <!-- Display Latest Ticket count -->
+ <span class="<?php if ($q->isPrivate()) echo 'personalQmenu'; ?> pull-right newItemQ">(90)</span>
+
<!-- End Edit Queue -->
<a class="truncate <?php if ($selected) echo ' active'; ?>" href="<?php echo $queue->getHref();
- ?>" title="<?php echo Format::htmlchars($q->getName()); ?>"><?php
- echo Format::htmlchars($q->getName()); ?></a>
-<?php if ($hasChildren) {
- echo '<ul>';
+ ?>" title="<?php echo Format::htmlchars($q->getName()); ?>">
+ <?php
+ echo Format::htmlchars($q->getName()); ?>
+ <?php
+ if ($hasChildren) { ?>
+ <i class="icon-caret-down"></i>
+ <?php } ?>
+ </a>
+
+ <?php if ($hasChildren) {
+ echo '<ul class="subMenuQ">';
foreach ($children as $q) {
include __FILE__;
}
diff --git a/scp/css/scp.css b/scp/css/scp.css
index f5500a69f..de7b7af50 100644
--- a/scp/css/scp.css
+++ b/scp/css/scp.css
@@ -358,7 +358,7 @@ a time {
}
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
- padding:2px 5px 4px;
+ padding:2px 5px 3px;
color:#E65524;
background-color: #fff;
border-left:1px solid #bebebe;
@@ -432,14 +432,29 @@ a time {
.customQ-dropdown li h4 {
padding:2px 8px;
margin:0;
- background-color:#ddd;
- color:#666;
+ background-color:#eee;
+ color:#bbb;
text-align:left;
}
+.customQ-dropdown li.personalQ {
+ font-size:1px;
+ border-bottom:2px dashed #eee;
+ background-color:#fff;
+ margin:4px 0;
+}
+.customQ-dropdown li:not(.personalQ) > span {
+ color:#E65524;
+ font-weight:bold;
+ margin-right:0;
+}
.customQ-dropdown li > span {
color:#E65524;
font-weight:bold;
+ margin-right:18px;
+}
+.customQ-dropdown li:hover > span {
+ color:#fff;
}
.customQ-dropdown li > span.disabled {
color:#ccc;
@@ -449,7 +464,6 @@ a time {
/*** custom queue dropdown container ***/
.jb-overflowmenu-menu-primary div.customQ-dropdown {
- border-top-right-radius:6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
border: solid 1px #ddd;
@@ -459,19 +473,21 @@ a time {
background:#fff;
text-align: left;
font-size: 0.95em;
- min-width: 245px;
+ min-width: 100%;
list-style: none;
left:-1px;
- top:32px;
+ top:31px;
position:absolute;
- z-index:10;
+ z-index:8;
}
+
.customQ-dropdown ul.scroll-height {
max-height:400px;
border-bottom:1px solid #ddd;
overflow-y:auto;
overflow-x:hidden;
+ padding:4px 0;
}
/*** set max width for truncating long links ***/
@@ -492,10 +508,10 @@ a time {
}
.customQ-dropdown ul li > a {
- margin-right:0px;
+ margin-right:60px;
}
-.customQ-dropdown ul li:hover {
+.customQ-dropdown ul li:not(.personalQ):hover {
color:#fff;
background-color:#08C;
cursor:pointer;
@@ -504,47 +520,78 @@ a time {
color:#fff;
cursor:pointer;
}
+.customQ-dropdown ul li:not(.personalQ) .controlQ {
+ position:absolute;
+ right:0;
+ z-index:20;
+}
/************ Custom Queue Button with Sub Queues *************/
-.customQ-dropdown ul li.subQ > i, .customQ-dropdown ul li div.editQ > i {
- padding:0px 8px;
+.customQ-dropdown ul li.subQ > a i {
+ padding:2px 6px 0;
+ display:inline-block;
+ color:#000;
+ opacity:0.5
}
+.customQ-dropdown ul li.subQ:hover > a i {
+ color:#fff;
+ opacity:0.5
+}
+
+.customQ-dropdown ul li div.editQ {
+ padding:0px 8px 0 0;
+
+}
/************ Custom Queue Button without Sub Queues *************/
.customQ-dropdown ul li.subQ > ul li > a:before {
content:"";
- padding:0px 8px;
+ padding:0px 4px;
+
+}
+.customQ-dropdown ul li.subQ > a:before {
+ content:"";
+ padding:0px 4px;
}
.customQ-dropdown ul li:not(.subQ) > a:before {
content:"";
padding:0px 4px;
-
}
+
.customQ-dropdown ul li:not(.subQ) > a {
max-width:190px;
}
/************ Custom Queue Nested Queue Container *************/
-.customQ-dropdown ul li > ul {
- background-color:#eee;
- border-top:1px dotted #ddd;
- border-bottom:1px dotted #ddd;
+.customQ-dropdown ul li.subQ > ul {
+ display:none;
+ position:absolute;
+ top:0;
+ left:0px;
+ background-color:#fff;
+ border:1px solid #ddd;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
-.customQ-dropdown ul li.subQ > ul li > a {
- padding-left:10px;
- padding-right:10px;
+.customQ-dropdown ul li.subQ:hover > ul {
+ display:block;
}
+.customQ-dropdown ul li > span.newItemQ {
+ padding:1px 8px 0 0;
+}
+.customQ-dropdown ul li > span.personalQmenu.newItemQ {
+ margin-right:20px;
+}
/************ Custom Queue Add/Save a Queue Button *************/
.customQ-dropdown .add-queue a {
display:block;
- padding:10px;
+ padding:2px 0;
color:#666!IMPORTANT;
cursor:pointer;
white-space: nowrap;
@@ -586,76 +633,74 @@ a time {
/*** icon cog styles ***/
-.jb-overflowmenu-menu-primary .customQ-dropdown ul li > div.editQ {
+.jb-overflowmenu-menu-primary .customQ-dropdown ul li > .controlQ div.editQ {
margin-top:2px;
}
-.customQ-dropdown ul li > div.editQ i {
+.customQ-dropdown ul li > .controlQ div.editQ i {
color:rgba(255, 255, 255, 0.6);
}
-.customQ-dropdown ul li:hover > div.editQ i {
+.customQ-dropdown ul li:hover > .controlQ div.editQ i {
color:rgba(255, 255, 255, 0.2);
}
-.customQ-dropdown ul li > div.editQ:hover i {
+.customQ-dropdown ul li > .controlQ div.editQ:hover i {
color:rgba(255, 255, 255, 1);
}
/*** edit nav popout ***/
-.customQ-dropdown ul li > div.editQ .manageQ a:before {
+.customQ-dropdown ul li > .controlQ div.editQ .manageQ a:before {
content:none;
padding:0;
}
-.customQ-dropdown div.editQ .manageQ a {
+.customQ-dropdown .controlQ div.editQ .manageQ a {
padding-left:0px;
padding-right:10px;
white-space: nowrap;
- margin-right:0px;
+ margin-right:0px!IMPORTANT;
}
-.customQ-dropdown div.editQ .manageQ a > i {
+.customQ-dropdown .controlQ div.editQ .manageQ a > i {
margin-left:5px;
margin-right:5px;
}
-.jb-overflowmenu-menu-primary .customQ-dropdown div.editQ .manageQ {
+.jb-overflowmenu-menu-primary .customQ-dropdown .controlQ div.editQ .manageQ {
display:none;
position:absolute;
- top:0;
+ top:-1px;
left:0px;
- padding:34px 28px;
+ margin-left:19px;
}
-.jb-overflowmenu-menu-primary .customQ-dropdown div.editQ .manageQ ul {
+.jb-overflowmenu-menu-primary .customQ-dropdown .controlQ div.editQ .manageQ ul {
border:1px solid #ddd;
min-width:75px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- border-top-right-radius: 6px;
- border-bottom-right-radius: 6px;
- padding:6px 0;
+ padding:0px 0;
background-color:#fff;
}
/*** edit nav link styles ***/
-.customQ-dropdown div.editQ:hover .manageQ {
+.customQ-dropdown .controlQ div.editQ:hover .manageQ {
display:block;
}
-.customQ-dropdown div.editQ:hover .manageQ i {
+.customQ-dropdown .controlQ div.editQ:hover .manageQ i {
color:#555;
}
-.customQ-dropdown div.editQ:hover .manageQ a {
+.customQ-dropdown .controlQ div.editQ:hover .manageQ a {
min-width:100px;
}
-.customQ-dropdown div.editQ:hover .manageQ a:hover i {
+.customQ-dropdown .controlQ div.editQ:hover .manageQ a:hover i {
color:#fff;
}
@@ -698,8 +743,7 @@ a time {
.jb-overflowmenu .jb-overflowmenu-menu-primary li.item > a {
padding:4px 10px;
-
-}
+ }
/******** Overflow menu and Dropdown *********/
@@ -810,11 +854,11 @@ a time {
position:absolute;
z-index:10;
}
-.jb-overflowmenu-menu-secondary .customQ-dropdown ul li > div.editQ {
+.jb-overflowmenu-menu-secondary .customQ-dropdown ul li > .controlQ div.editQ {
margin-top:2px;
float:left;
}
-.jb-overflowmenu-menu-secondary .customQ-dropdown div.editQ .manageQ {
+.jb-overflowmenu-menu-secondary .customQ-dropdown .controlQ div.editQ .manageQ {
display:none;
position:absolute;
z-index:20;
@@ -822,11 +866,11 @@ a time {
left:0px;
padding:34px 28px;
}
-.jb-overflowmenu-menu-secondary .customQ-dropdown div.editQ:hover .manageQ {
+.jb-overflowmenu-menu-secondary .customQ-dropdown .controlQ div.editQ:hover .manageQ {
display:block;
}
-.jb-overflowmenu-menu-secondary .customQ-dropdown div.editQ .manageQ ul {
+.jb-overflowmenu-menu-secondary .customQ-dropdown .controlQ div.editQ .manageQ ul {
border:1px solid #ddd;
min-width:75px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
diff --git a/scp/js/scp.js b/scp/js/scp.js
index 3aae1c35d..747dc5a98 100644
--- a/scp/js/scp.js
+++ b/scp/js/scp.js
@@ -492,8 +492,27 @@ var scp_prep = function() {
}
});
- /* Custom Queues Dropdown */
+
$(function() {
+ // whenever we hover over a menu item that has a submenu
+ $('.subQ').on('mouseover', function() {
+ var $menuItem = $(this),
+ $submenuWrapper = $('.subMenuQ', $menuItem);
+
+ // grab the menu item's position relative to its positioned parent
+ var menuItemPos = $menuItem.position();
+
+ // place the submenu in the correct position relevant to the menu item
+ $submenuWrapper.css({
+ top: menuItemPos.top - 1,
+ left: menuItemPos.left + Math.round($menuItem.outerWidth())
+ });
+ });
+ });
+};
+
+/* Custom Queues Dropdown */
+/* $(function() {
// whenever we hover over a menu item that has a submenu
$('.editQ').on('mouseover', function() {
var $menuItem = $(this),
@@ -509,7 +528,7 @@ var scp_prep = function() {
});
});
});
-};
+};*/
$(document).ready(scp_prep);
$(document).on('pjax:end', scp_prep);
--
GitLab