diff --git a/include/staff/templates/queue-navigation.tmpl.php b/include/staff/templates/queue-navigation.tmpl.php
index c736e3759862a6783f9ef582eb9d9d0dd0bd4009..733b5066b0b4d5658e447419a761f297200dff56 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 3d7de7722eb9418caa77a5c69ef541c335c97ceb..d7d32a8a3a0f523fd707bb195805145ca2ae65f5 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 e1f45d25b5cb29cd8ff4ec2184746c8da5edc13f..11602d21bf6e9520e4d1ad9a38d4c5997c0d9846 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 f5500a69f36a566ab88d3f98e128a4b0ba1eb868..de7b7af50d0d7d8981a552303a52ef6cb04b565c 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 3aae1c35d1ea65acbc5372cb7e9c2bcff6d29145..747dc5a98222bc4b1b65d132b8eb34334104b793 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);