kolan
/
obsolete.ChilliProject
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[#692] Fix and simplify the top menu open/closing 

* Remove bunch of extra code from choosen
* Fix awkward indention
* Add admin menu items to the Modules menu
* Turn off bold on menu item hover, was causing jumping in width
* Fix color on opened top menus
* Fix a bunch of edge cases in the menu clicks.
* Remove gross 'html' binding in favor of a one time only one
This commit is contained in:
Eric Davis 2011-12-09 14:57:50 -08:00
parent b312bf387a
commit 612f2f98e4
3 changed files with 63 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/views/layouts/base.rhtml
View File

@ -67,20 +67,25 @@
<% more_top_menu_items.each do |item| %>
<%= render_menu_node(item) %>
<% end %>
<%# TODO: Extract to helper %>
<% if User.current.admin? %>
<% menu_items_for(:admin_menu) do |item| -%>
<li><%= link_to h(item.caption), item.url, item.html_options %></li>
<% end -%>
<% end %>
</ul>
</li>
<li>
<%= render_menu_node(help_menu_item) %>
<% unless User.current.logged? %>
<li>
<li id="login-menu" class="drop-down last-child">
<%= link_to l(:label_login), {:controller => 'account', :action => 'login'}, :class => 'login' %>
<!-- IE7 Fix - extra div needed for slideToggle animation -->
<div id="nav-login">
<div id="nav-login" style="display:none;">
<%= render :partial => 'account/login' %>
</div>
</li>
<% else %>
<li class="drop-down">
<li class="drop-down last-child">
<%= link_to_user(User.current) %>
<ul style="display:none;">
<% menu_items_for(:account_menu) do |item| %>

112
public/javascripts/application.js
View File

@ -469,32 +469,6 @@ jQuery.viewportHeight = function() {
jQuery(document).ready(function($) {
// show/hide header search box
$("#account a.search").live('click', function() {
var searchWidth = $("#account-nav").width();
$(this).toggleClass("open");
$("#nav-search").width(searchWidth).slideToggle(animationRate, function(){
$("#nav-search-box").select();
});
return false;
});
// show/hide login box
$("#account a.login").click(function() {
$(this).parent().toggleClass("open");
// Focus the username field if the login field has opened
$("#nav-login").slideToggle(animRate, function () {
if ($(this).parent().hasClass("open")) {
$("input#username").focus()
}
});
$("#account .drop-down.open").toggleClass("open").find("ul").mySlide();
return false;
});
// file table thumbnails
$("table a.has-thumb").hover(function() {
$(this).removeAttr("title").toggleClass("active");
@ -560,35 +534,53 @@ jQuery(document).ready(function($) {
return false;
});
jQuery("#account-nav > li").hover(function() {
if ($("#account-nav").hasClass("hover") && ($("#account-nav > li.drop-down.open").get(0) !== $(this).get(0))){
//Close all other open menus
//Used to work around the rendering bug TODO: fix
jQuery("input#username-pulldown").blur();
$("#account-nav > li.drop-down.open").toggleClass("open").find("> ul").mySlide();
$(this).slideAndFocus();
return false;
}
},
function(){
return false;
});
jQuery("#account-nav > li.drop-down").click(function() {
if (($("#account-nav > li.drop-down.open").get(0) !== $(this).get(0))){
$("#account-nav > li.drop-down.open").toggleClass("open").find("> ul").mySlide();
}
$(this).slideAndFocus();
$("#account-nav").toggleClass("hover");
// Toggle a top menu item open or closed, showing or hiding its submenu
function toggleTopMenu(menuItem) {
menuItem.toggleClass("open").find('ul').mySlide();
};
$("#account .drop-down:has(ul) > a").click(function() {
//Close all other open menus
$("#account .drop-down.open:has(ul)").not($(this).parent()).toggleClass("open").find("ul").mySlide();
//Close login pull down when open
$("li.open div#nav-login").parent().toggleClass("open").find("div#nav-login").slideToggle(animRate);
//Toggle clicked menu item
$(this).parent().toggleClass("open").find("ul").mySlide();
return false;
});
// Handle a single click event on the page to close an open menu item
function handleClickEventOnPageToCloseOpenMenu(openMenuItem) {
$('html').one("click", function(htmlEvent) {
if (openMenuItem.has(htmlEvent.target).length > 0) {
// Clicked on the open menu, let it bubble up
} else {
// Clicked elsewhere, close menu
toggleTopMenu(openMenuItem);
}
});
};
// Click on the menu header with a dropdown menu
$('#account-nav .drop-down').live('click', function(event) {
var menuItem = $(this);
toggleTopMenu(menuItem);
if (menuItem.hasClass('open')) {
handleClickEventOnPageToCloseOpenMenu(menuItem);
}
return false;
});
// Click on an actual item
$('#account-nav .drop-down ul a').live('click', function(event) {
event.stopPropagation();
});
// show/hide login box
$("#account-nav a.login").click(function() {
$(this).parent().toggleClass("open");
// Focus the username field if the login field has opened
$("#nav-login").slideToggle(animationRate, function () {
if ($(this).parent().hasClass("open")) {
$("input#username").focus()
}
});
return false;
});
// deal with potentially problematic super-long titles
$(".title-bar h2").css({paddingRight: $(".title-bar-actions").outerWidth() + 15 });
@ -612,12 +604,8 @@ jQuery(document).ready(function($) {
}
});
$('html').click(function() {
$("#header .drop-down.open").toggleClass("open").find("> ul").mySlide();
$("#account-nav.hover").toggleClass("hover");
});
// Do not close the login window when using it
$('#nav-login-content').click(function(event){
event.stopPropagation();
});
// Do not close the login window when using it
$('#nav-login-content').click(function(event){
event.stopPropagation();
});
});

7
public/stylesheets/application.css
View File

@ -1212,7 +1212,6 @@ a:hover {
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-color:#7F7F7F;
font-weight:bold;
color:#FFFFFF;
}
@ -1233,6 +1232,7 @@ li a.help:hover {
background-image:url(../images/icon_help_grey.png);
}
#header li.drop-down.open > a {
color: #6A0406;
background:#FFFFFF url(../images/arrow-down-grey.png) no-repeat right center;
padding-right:35px;
}
@ -1333,8 +1333,9 @@ input:-moz-placeholder {
width:94%;
}
#nav-login-content {
position: relative;
position-top:44px;
position: absolute;
top:44px;
right: 0px;
float: right;
background: white;
border:1px solid #194E60;