diff --git a/include/staff/footer.inc.php b/include/staff/footer.inc.php
index 5d0cc65aef0a245665d6921d8f7a2bb14b4be8be..65efa328211a3b7e4e769649cd105f80d54f957a 100644
--- a/include/staff/footer.inc.php
+++ b/include/staff/footer.inc.php
@@ -53,6 +53,7 @@ if(is_object($thisstaff) && $thisstaff->isStaff()) { ?>
<script type="text/javascript" src="<?php echo ROOT_PATH; ?>scp/js/jquery.translatable.js"></script>
<script type="text/javascript" src="<?php echo ROOT_PATH; ?>scp/js/jquery.dropdown.js"></script>
<script type="text/javascript" src="<?php echo ROOT_PATH; ?>scp/js/bootstrap-tooltip.js"></script>
+<script type="text/javascript" src="<?php echo ROOT_PATH; ?>scp/js/jb.overflow.menu.js"></script>
<script type="text/javascript" src="<?php echo ROOT_PATH; ?>js/fabric.min.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo ROOT_PATH; ?>scp/css/tooltip.css">
<script type="text/javascript">
diff --git a/include/staff/header.inc.php b/include/staff/header.inc.php
index b89c16ab49c93c57bfa790a1d2153cf1a77b2e6b..c37893e1f13926b7c76302491600a2e5cdac1f40 100644
--- a/include/staff/header.inc.php
+++ b/include/staff/header.inc.php
@@ -94,10 +94,13 @@ if ($lang) {
<ul id="nav">
<?php include STAFFINC_DIR . "templates/navigation.tmpl.php"; ?>
</ul>
- <ul id="sub_nav">
-<?php include STAFFINC_DIR . "templates/sub-navigation.tmpl.php"; ?>
- </ul>
- <div id="content">
+ <nav id="customQ_nav" class="jb-overflowmenu">
+ <ul>
+ <?php include STAFFINC_DIR . "templates/sub-navigation.tmpl.php"; ?>
+ </ul>
+ </nav>
+
+ <div id="content">
<?php if($errors['err']) { ?>
<div id="msg_error"><?php echo $errors['err']; ?></div>
<?php }elseif($msg) { ?>
diff --git a/include/staff/templates/sub-navigation.tmpl.php b/include/staff/templates/sub-navigation.tmpl.php
index 6e40d33c8274b9fd29bf85973c3dc968d17118c7..b0d3a0214229f4eb784f61cfd5a761dae59996c4 100644
--- a/include/staff/templates/sub-navigation.tmpl.php
+++ b/include/staff/templates/sub-navigation.tmpl.php
@@ -1,4 +1,4 @@
-<?php
+<?php /*
if(($subnav=$nav->getSubMenu()) && is_array($subnav)){
$activeMenu=$nav->getActiveMenu();
if($activeMenu>0 && !isset($subnav[$activeMenu-1]))
@@ -27,3 +27,643 @@ if(($subnav=$nav->getSubMenu()) && is_array($subnav)){
$class, $item['href'], $item['title'], $id, $attr, $item['desc']);
}
}
+*/ ?>
+<!-- .item is required for overflow of parent Q -->
+<li class="item">
+ <a class="open" href="#"><i class="icon-sort-down pull-right"></i>Open</a>
+ <!-- Start Dropdown -->
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <!-- SubQ class: only if top level Q has subQ -->
+ <li class="subQ">
+ <i class="icon-caret-down"></i>
+ <!-- Edit Queue -->
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End Edit Queue -->
+ <!-- Display Latest Ticket count -->
+ <span>(80)</span>
+ <a class="truncate">Open testing to see how long the top queue can be</a>
+ <ul>
+ <li>
+ <!-- Edit Queue -->
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End Edit Queue -->
+ <span>(60)</span>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <!-- Edit Queue -->
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End Edit Queue -->
+ <span class="disabled">(0)</span>
+ <a href="#">Answered</a>
+ </li>
+ <!-- Dropdown Titles -->
+ <li>
+ <h4>Personal Queue</h4>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <span>(33)</span>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ <!-- Add Queue button sticky at the bottom -->
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
+ <span>Add personal queue</span>
+ </a>
+ </div>
+ </div>
+</li>
+<li class="item">
+ <a class="mine" href="#"><i class="icon-sort-down pull-right"></i>My Tickets</a>
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <li>
+ <div class="editQ pull-right"><i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a href="#">My Tickets</a>
+ </li>
+ </ul>
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
+ <span>Add personal queue</span>
+ </a>
+ </div>
+ </div>
+</li>
+
+<li class="item">
+ <a href="#"><i class="icon-sort-down pull-right"></i>Search</a>
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <li>
+ <h4>Shared Searches</h4>
+ </li>
+ <li>
+ <div class="editQ pull-right"><i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-share"></i>Share</a>
+ </li>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate" href="#">item queue</a>
+ </li>
+ <li>
+ <h4>My Searches</h4>
+ </li>
+ <li>
+ <div class="editQ pull-right"><i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-share"></i>Share</a>
+ </li>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate" href="#">item queue</a>
+ </li>
+
+ </ul>
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class=" icon-plus-sign"></i></div>
+ <span>Add saved search</span>
+ </a>
+ </div>
+ </div>
+</li>
+<li class="item">
+ <a class="closed" href="#"><i class="icon-sort-down pull-right"></i>Closed</a>
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <li>
+ <div class="editQ pull-right"><i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a href="#">Closed</a>
+ </li>
+ </ul>
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
+ <span>Add personal queue</span>
+ </a>
+ </div>
+ </div>
+</li>
+<li class="item">
+ <a class="new" href="#">New Ticket</a>
+</li>
+<li class="item">
+ <a class="closed" href="#"><i class="icon-sort-down pull-right"></i>Custom item 1</a>
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <li class="subQ">
+ <i class="icon-caret-down"></i>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">Open</a>
+ <ul>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a href="#">Answered</a>
+ </li>
+ <li>
+ <h4>Personal Queue</h4>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
+ <span>Add personal queue</span>
+ </a>
+ </div>
+ </div>
+</li>
+<li class="item">
+ <a class="closed" href="#"><i class="icon-sort-down pull-right"></i>Custom item 2</a>
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <li class="subQ">
+ <i class="icon-caret-down"></i>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">Open</a>
+ <ul>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a href="#">Answered</a>
+ </li>
+ <li>
+ <h4>Personal Queue</h4>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
+ <span>Add personal queue</span>
+ </a>
+ </div>
+ </div>
+</li>
+<li class="item">
+ <a class="closed" href="#"><i class="icon-sort-down pull-right"></i>Custom item 3</a>
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <li class="subQ">
+ <i class="icon-caret-down"></i>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">Open</a>
+ <ul>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a href="#">Answered</a>
+ </li>
+ <li>
+ <h4>Personal Queue</h4>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
+ <span>Add personal queue</span>
+ </a>
+ </div>
+ </div>
+</li>
+<li class="item">
+ <a class="closed" href="#"><i class="icon-sort-down pull-right"></i>Custom item 4</a>
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <li class="subQ">
+ <i class="icon-caret-down"></i>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">Open</a>
+ <ul>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a href="#">Answered</a>
+ </li>
+ <li>
+ <h4>Personal Queue</h4>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
+ <span>Add personal queue</span>
+ </a>
+ </div>
+ </div>
+</li>
+<li class="item">
+ <a class="closed" href="#"><i class="icon-sort-down pull-right"></i>Custom item 5</a>
+ <div class="customQ-dropdown">
+ <ul class="scroll-height">
+ <li class="subQ">
+ <i class="icon-caret-down"></i>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">Open</a>
+ <ul>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li class="positive">
+ <a href="#"><i class="icon-fixed-width icon-plus-sign"></i>Add Queue</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a href="#">Answered</a>
+ </li>
+ <li>
+ <h4>Personal Queue</h4>
+ </li>
+ <li>
+ <div class="editQ pull-right">
+ <i class="icon-cog"></i>
+ <div class="manageQ">
+ <ul>
+ <li>
+ <a href="#"><i class="icon-fixed-width icon-pencil"></i>Edit</a>
+ </li>
+ <li class="danger">
+ <a href="#"><i class="icon-fixed-width icon-trash"></i>Delete</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <a class="truncate">testing to see how long I can make this go</a>
+ </li>
+ </ul>
+ <div class="add-queue">
+ <a class="flush-right" onclick="javascript:
+ $.dialog('ajax.php/tickets/search', 201);">
+ <div class="add pull-right"><i class="green icon-plus-sign"></i></div>
+ <span>Add personal queue</span>
+ </a>
+ </div>
+ </div>
+</li>
diff --git a/scp/css/dropdown.css b/scp/css/dropdown.css
index 1106463645a48208b3526afe37ee08423e7db3ff..62b54296052a052e2cf2295d080242ba527aacaf 100644
--- a/scp/css/dropdown.css
+++ b/scp/css/dropdown.css
@@ -29,7 +29,7 @@
margin: 0;
line-height: 18px;
}
-.action-dropdown ul li > a {
+.action-dropdown ul li > a{
display: block;
color: #555;
text-decoration: none;
@@ -53,15 +53,18 @@
background-color: rgba(0, 136, 204, 0.2);
color: #08C;
}
-.action-dropdown ul li.danger > a:hover {
+.action-dropdown ul li.positive > a:hover, .customQ-dropdown ul li.positive > a:hover {
+ background-color: #02aa4c;
+}
+.action-dropdown ul li.danger > a:hover, .customQ-dropdown ul li.danger > a:hover {
background-color: #CF3F3F;
}
-.action-dropdown ul li > a.disabled {
+.action-dropdown ul li > a.disabled, .customQ-dropdown ul li > a.disabled {
pointer-events: none;
color: #999;
color: rgba(85,85,85,0.5);
}
-.action-dropdown hr {
+.action-dropdown hr, .customQ-dropdown hr {
height: 1px;
border: none;
border-bottom: 1px solid #ddd;
diff --git a/scp/css/scp.css b/scp/css/scp.css
index 8e5e10b70b92025fa6b9fb27c9fdf92aaad77e42..144b83fd1cce52e26a21ec2666cfdeac1416a355 100644
--- a/scp/css/scp.css
+++ b/scp/css/scp.css
@@ -171,7 +171,7 @@ a time {
text-align:center;
}
-#nav, #sub_nav {
+#nav {
clear:both;
margin:0;
padding:0 20px;
@@ -182,7 +182,9 @@ a time {
white-space: nowrap;
}
-#nav .active, #sub_nav li {
+
+
+#nav .active {
padding:0;
list-style:none;
display:inline;
@@ -297,38 +299,426 @@ a time {
color:#E65524;
background-color: #fbfbfb;
background-color: rgba(0,0,0,0.05);
+
}
+/***********************************************************************
+ Start Custom Queues Menu System
+/***********************************************************************/
-#sub_nav {
+#customQ_nav {
background:#f7f7f7;
border-bottom:1px solid #bebebe;
- padding: 2px 20px;
+ clear:both;
+ margin:0;
+ padding:0;
+ line-height:26px;
+ border-left:1px solid #aaa;
+ border-right:1px solid #aaa;
}
-#sub_nav a {
+#customQ_nav li.item a > i {
+ margin-top:5px;
+}
+
+#customQ_nav li.item {
+ position:relative;
+ padding:3px 6px 4px;
+ display: inline-block;
+ border-top-right-radius: 6px;
+ border-top-left-radius: 6px;
+ z-index:10;
+}
+
+#customQ_nav li.item > a {
display:inline-block;
padding:0 10px 0 21px;
background-position:0 50%;
background-repeat:no-repeat;
color:#000;
}
-#sub_nav li + li > a {
- margin-left:10px;
+
+#customQ_nav li.item:hover {
+ padding:2px 5px 4px;
+ color:#E65524;
+ background-color: #fff;
+ border-left:1px solid #bebebe;
+ border-top:1px solid #bebebe;
+ border-right:1px solid #bebebe;
}
-#sub_nav a:hover {
+#customQ_nav li.item:hover > a {
color:#E65524;
+ text-decoration: none;
}
-#sub_nav a.active {
+#customQ_nav li.item > a.active {
font-weight:bold;
}
-#sub_nav .open { background-image:url(../images/icons/open.gif) }
-#sub_nav .answered { background-image:url(../images/icons/answered.gif) }
-#sub_nav .mine { background-image:url(../images/icons/mine.gif) }
-#sub_nav .closed { background-image:url(../images/icons/closed.gif) }
-#sub_nav .new { background-image:url(../images/icons/new.gif) }
+#customQ_nav .open { background-image:url(../images/icons/open.gif) }
+#customQ_nav .answered { background-image:url(../images/icons/answered.gif) }
+#customQ_nav .mine { background-image:url(../images/icons/mine.gif) }
+#customQ_nav .closed { background-image:url(../images/icons/closed.gif) }
+#customQ_nav .search { background-image:url(../images/icons/search.gif) }
+#customQ_nav .new { background-image:url(../images/icons/new.gif) }
+
+/**********************initiate Custom Queues Dropdown******************/
+
+#customQ_nav ul li.item div.customQ-dropdown {
+ display:none;
+}
+
+#customQ_nav ul li.item:hover div.customQ-dropdown {
+ display:block;
+}
+
+/***************************************
+ Custom Q Dropdown
+****************************************/
+
+/*** custom Queue global settings ***/
+
+.customQ-dropdown * {
+ padding:0;
+ margin:0;
+}
+
+.customQ-dropdown a:only-of-type {
+ padding-top:2px;
+ padding-bottom:2px;
+ display:inline-block;
+ text-decoration:none;
+ text-transform:capitalize;
+}
+
+.customQ-dropdown ul li {
+ list-style:none;
+ list-style-image: none;
+}
+
+.customQ-dropdown li h4 {
+ padding:2px 8px;
+ margin:0;
+ background-color:#ddd;
+ color:#666;
+}
+
+.customQ-dropdown li > span {
+ color:#CF3F3F;
+ font-weight:bold;
+ float:right;
+}
+.customQ-dropdown li > span.disabled {
+ color:#ccc;
+ font-weight:normal;
+}
+
+/*** custom queue dropdown container ***/
+
+.customQ-dropdown {
+ border-top-right-radius:6px;
+ border-bottom-right-radius:6px;
+ border-bottom-left-radius:6px;
+ border: solid 1px #ddd;
+ border: solid 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ padding:6px 0;
+ background:#fff;
+ text-align: left;
+ font-size: 0.95em;
+ min-width: 280px;
+
+ list-style: none;
+ left:-1px;
+ top:32px;
+ position:absolute;
+ z-index:-10;
+}
+
+.customQ-dropdown ul.scroll-height {
+ max-height:400px;
+ border-bottom:1px solid #ddd;
+ overflow-y:auto;
+ overflow-x:hidden;
+}
+
+/*** set max width for truncating long links ***/
+
+.customQ-dropdown ul li > a {
+ max-width:170px;
+}
+
+.customQ-dropdown ul li > ul li > a {
+ max-width:180px!IMPORTANT;
+}
+
+/************ Custom Queue Button Styles *************/
+
+.customQ-dropdown ul li, .customQ-dropdown ul li > a {
+ color:#666;
+ white-space: nowrap;
+
+}
+.customQ-dropdown ul li > a {
+ margin-right:42px;
+}
+
+.customQ-dropdown ul li:hover, .customQ-dropdown ul li:hover > a {
+ color:#fff;
+ background-color:#08C;
+ cursor:pointer;
+}
+/************ Custom Queue Button with Sub Queues *************/
+
+.customQ-dropdown ul li.subQ > i, .customQ-dropdown ul li div.editQ > i {
+ padding:0px 8px;
+}
+
+/************ Custom Queue Button without Sub Queues *************/
+
+.customQ-dropdown ul li.subQ > ul li > a:before {
+ content:"";
+ padding:0px 8px;
+
+}
+
+.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 li > a {
+ padding-left:10px;
+ padding-right:10px;
+}
+
+/************ Custom Queue Add/Save a Queue Button *************/
+
+.customQ-dropdown .add-queue a {
+ display:block;
+ padding:10px;
+ color:#666!IMPORTANT;
+ cursor:pointer;
+ white-space: nowrap;
+}
+
+.customQ-dropdown .add-queue a span {
+ padding:0 10px;
+ -webkit-opacity: .4;
+ -moz-opacity: .4;
+ opacity: .4;
+ -webkit-transition: all .5s ease;
+ -moz-transition: all .5s ease;
+ -ms-transition: all .5s ease;
+ -o-transition: all .5s ease;
+ transition: all .5s ease;
+}
+
+.customQ-dropdown .add-queue a:hover span {
+ -webkit-opacity: 1;
+ -moz-opacity: 1;
+ opacity: 1;
+}
+
+.customQ-dropdown .add-queue a:hover {
+ color:#666!IMPORTANT;
+ text-decoration: none;
+ background-color:#ddd;
+}
+
+.customQ-dropdown .add-queue .add {
+ color: #16ab39;
+}
+
+.no-queue.customQ-dropdown .add-queue a span {
+ opacity: 1;
+}
+
+/***************** Custom Queue Edit Nav ******************/
+
+/*** icon cog styles ***/
+
+.customQ-dropdown ul li > div.editQ {
+ margin-top:2px;
+}
+
+.customQ-dropdown ul li > div.editQ i {
+ color:rgba(255, 255, 255, 0);
+}
+
+.customQ-dropdown ul li:hover > div.editQ i {
+ color:rgba(255, 255, 255, 0.2);
+}
+
+.customQ-dropdown ul li > div.editQ:hover i {
+ color:rgba(255, 255, 255, 1);
+}
+
+/***edit nav popout ***/
+
+.customQ-dropdown ul li > div.editQ .manageQ a:before {
+ content:none;
+ padding:0;
+}
+
+.customQ-dropdown div.editQ .manageQ a {
+ padding-left:0px;
+ padding-right:10px;
+ white-space: nowrap;
+ margin-right:0px;
+
+}
+
+.customQ-dropdown div.editQ .manageQ a > i {
+ margin-left:5px;
+ margin-right:5px;
+}
+
+.customQ-dropdown div.editQ .manageQ {
+ display:none;
+ position:absolute;
+ top:0;
+ left:0px;
+ z-index:2;
+ padding:34px 28px;
+}
+
+.customQ-dropdown 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;
+ background-color:#fff;
+}
+
+/*** edit nav link styles ***/
+
+.customQ-dropdown div.editQ:hover .manageQ {
+ display:block;
+}
+
+.customQ-dropdown div.editQ:hover .manageQ i {
+ color:#555;
+}
+
+.customQ-dropdown div.editQ:hover .manageQ a {
+ min-width:100px;
+
+}
+
+.customQ-dropdown div.editQ:hover .manageQ a:hover i {
+ color:#fff;
+}
+
+/***************************************
+ Overflow Menu
+****************************************/
+
+.jb-overflowmenu {
+ position: relative;
+ height:35px;
+}
+
+.jb-overflowmenu-menu-secondary{
+ text-align: right;
+}
+
+.jb-overflowmenu ul.jb-overflowmenu-menu-primary {
+ padding: 0;
+ margin: 2px 0 0 0;
+ height:30px!IMPORTANT;
+ right:30px!IMPORTANT;
+}
+
+.jb-overflowmenu .jb-overflowmenu-helper-postion {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0px;
+ overflow: visible;
+ position: absolute;
+}
+
+/*holds the overflow menu and label*/
+
+.jb-overflowmenu .jb-overflowmenu-container {
+ display: inline;
+ left: auto;
+ bottom: 0px;
+}
+
+.jb-overflowmenu .jb-overflowmenu-container a {
+ color:#666;
+ padding:10px;
+ background-color:#eee;
+ border-left:1px solid #bebebe;
+}
+.jb-overflowmenu .jb-overflowmenu-container a:hover {
+ color:#000;
+ background-color:#ddd;
+ }
+
+.jb-overflowmenu .jb-overflowmenu-menu-secondary {
+ top: auto;
+ bottom: auto;
+ left: auto;
+ display: none;
+ position: absolute;
+ min-width: 15em;
+ z-index: 100;
+ max-height: 44em;
+ padding:0;
+ margin:0;
+}
+
+.jb-overflowmenu .jb-overflowmenu-menu-primary li.item {
+ display:inline-block;
+ padding:6px 0px;
+ margin:0 5px;
+}
+
+.jb-overflowmenu .jb-overflowmenu-menu-primary li.item > a {
+ padding:4px 15px;
+
+}
+
+.jb-overflowmenu .jb-overflowmenu-menu-secondary li {
+ display:block;
+ padding:5px;
+}
+
+.jb-overflowmenu .jb-overflowmenu-menu-secondary li > a {
+ display:block;
+ padding:11px;
+}
+
+.jb-overflowmenu .jb-overflowmenu-menu-secondary-handle {
+ width:12px;
+ text-align:center;
+ padding:5px;
+ line-height:15px;
+ color:#666;
+}
+
+.jb-overflowmenu .placeholder{
+ visibility: hidden;
+}
+
+/**********************End Custom Queues Dropdown******************/
a.test { background-image:url(../images/icons/open.gif) }
diff --git a/scp/js/jb.overflow.menu.js b/scp/js/jb.overflow.menu.js
new file mode 100755
index 0000000000000000000000000000000000000000..dcffe645abc2fcc6047f27e0f5fb28877315846f
--- /dev/null
+++ b/scp/js/jb.overflow.menu.js
@@ -0,0 +1,205 @@
+/*
+ * jQuery UI jb.overflowmenu
+ *
+ * Copyright 2011, Jesse Baird <jebaird@gmail.com> jebaird.com
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * http://jebaird.com/blog/overflow-menu-jquery-ui-widget
+ *
+ * Depends:
+ * jquery.ui.core.js
+ * jquery.ui.widget.js
+ *
+ *
+ * suggested markup
+ * <nav>
+ * <ul>
+ * <li>
+ * </ul>
+ * </nav>
+ *
+ * $('nav').overflowmenu()
+ *
+ *
+ *
+ * events
+ * change - after items are moved to / from the secondary menu
+ * beforeChange - called before items are moved to / from the secondary menu
+ * open - when the secondary menu is shown
+ * close - when the secondary menu is closed
+ */
+
+(function( $, undefined ) {
+
+$.widget( "jb.overflowmenu", {
+ options: {
+ items: '> *',
+ itemsParentTag: 'ul',
+ label: '<i class="icon-ellipsis-vertical"></i>',
+ //call the refresh method when this element changes size, with out a special event window is the only element that this gets called on
+ refreshOn: $( window ),
+
+ //attempt to guess the height of the menu, if not the target element needs to have a height
+ guessHeight: true
+ },
+
+ _create: function() {
+ var self = this;
+
+ this.element
+ .addClass('jb-overflowmenu');
+
+ this.primaryMenu = this.element
+ .children( this.options.itemsParentTag )
+ .addClass( 'jb-overflowmenu-menu-primary jb-overflowmenu-helper-postion' );
+
+ this._setHeight();
+
+ //TODO: allow the user to change the markup for this because they might not be using ul -> li
+ this.secondaryMenuContainer = $(
+ [
+ '<div class="jb-overflowmenu-container jb-overflowmenu-helper-postion">',
+ '<a href="javascript://" class="jb-overflowmenu-menu-secondary-handle"></a>',
+ '<' + this.options.itemsParentTag + ' class="jb-overflowmenu-menu-secondary jb-overflowmenu-helper-postion"></' + this.options.itemsParentTag + '>',
+ '</div>'
+ ].join('')
+ )
+ .appendTo( this.element )
+
+ this.secondaryMenu = this.secondaryMenuContainer.find('ul');
+
+ this.secondaryMenuContainer.children( 'a' ).bind( 'click.overflowmenu', function( e ){
+ self.toggle();
+ });
+
+ //has to be set first
+ this._setOption( 'label', this.options.label )
+ this._setOption( 'refreshOn', this.options.refreshOn )
+
+ },
+
+ destroy: function() {
+ this.element
+ .removeClass('jb-overflowmenu')
+
+ this.primaryMenu
+ .removeClass('jb-overflowmenu-menu-primary jb-overflowmenu-helper-postion')
+ .find( this.options.items )
+ .filter( ':hidden' )
+ .css( 'display', '' )
+
+ this.options.refreshOn.unbind( 'resize.overflowmenu' );
+
+ this.secondaryMenuContainer.remove()
+
+ //TODO: possibly clean up the height & right on the ul
+
+ $.Widget.prototype.destroy.apply( this, arguments );
+ },
+
+
+ refresh: function() {
+
+ this._trigger( 'beforeChange', {}, this._uiHash() );
+
+ //move any items in the secondary menu back in to the primary
+ this.secondaryMenu
+ .children()
+ .appendTo( this.primaryMenu )
+
+
+ var vHeight = this.primaryMenuHeight,
+ //get the items, filter out the the visible ones
+ itemsToHide = this._getItems()
+ .filter(function(){
+ return this.offsetTop + $(this).height() > vHeight;
+ })
+
+ itemsToHide.appendTo( this.secondaryMenu );
+
+
+ if( itemsToHide.length == 0 ){
+ this.close();
+ }
+
+ //TODO: add the items to the UI Hash
+ this._trigger( 'change', {}, this._uiHash() );
+ return this;
+ },
+
+ //more menu opitons
+
+ open: function(){
+ if( this.secondaryMenu.find( this.options.items ).length == 0){
+ return;
+ }
+ this.secondaryMenu.show();
+ this._trigger( 'open', {}, this._uiHash() );
+ return this;
+ },
+ close: function(){
+ this.secondaryMenu.hide();
+ this._trigger( 'close', {}, this._uiHash() );
+ return this;
+ },
+ toggle: function(){
+ if( this.secondaryMenu.is( ':visible') ){
+ this.close();
+ }else{
+ this.open();
+ }
+ return this;
+ },
+ _getItems: function(){
+ return this.primaryMenu.find( this.options.items );
+ },
+ _setHeight: function(){
+ if( this.options.guessHeight ){
+ //get the first items height and set that as the height of the parent
+ this.primaryMenuHeight = this.primaryMenu.find( this.options.items ).filter(':first').outerHeight();
+ this.primaryMenu.css('height', this.primaryMenuHeight )
+
+ }else{
+ this.primaryMenuHeight = this.element.innerHeight();
+ }
+
+ },
+ _setOption: function( key, value ) {
+ var self = this;
+ if( key == 'refreshOn' && value ){
+ this.options.refreshOn.unbind( 'resize.overflowmenu' );
+
+ this.options.refreshOn = $( value )
+ .bind( 'resize.overflowmenu', function(){
+ self.refresh();
+ })
+ //call to set option
+ self.refresh();
+
+ }else if( key == 'label' && value ){
+ //figure out the width of the hadel and subtract that from the parend with and set that as the right
+
+ var width = this.secondaryMenuContainer.find('.jb-overflowmenu-menu-secondary-handle')
+ .html( value )
+ .outerWidth();
+ this.primaryMenu.css( 'right', width )
+
+ }
+
+ $.Widget.prototype._setOption.apply( this, arguments );
+ },
+ _uiHash: function(){
+ return {
+ primary: this.primaryMenu,
+ secondary: this.secondaryMenu,
+ container: this.secondaryMenuContainer
+ };
+ }
+
+});
+
+
+
+
+
+})( jQuery );
diff --git a/scp/js/scp.js b/scp/js/scp.js
index 82e2cd81cf5c3c117402c661f0d64ca782a3956c..dc48639fbeb288860df1e676379d57f2ce572040 100644
--- a/scp/js/scp.js
+++ b/scp/js/scp.js
@@ -1276,3 +1276,35 @@ window.relativeAdjust = setInterval(function() {
});
};
})(jQuery);
+
+/*Custom Queues Dropdown*/
+
+$(function() {
+ // whenever we hover over a menu item that has a submenu
+ $('.editQ').on('mouseover', function() {
+ var $menuItem = $(this),
+ $submenuWrapper = $('.manageQ', $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 - 41,
+ left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0)
+ });
+ });
+});
+
+$( document ).ready(function(){
+ var target = $('#customQ_nav').overflowmenu({
+ change: function( e, ui ){
+ var handle = ui.container.find('.jb-overflowmenu-menu-secondary-handle');
+ if( ui.secondary.children().length ){
+ handle.css('display', 'inline-block')
+ }else{
+ handle.css('display', 'none')
+ }
+ }
+ });
+})