Adding animation to the left navigation for 2.2 UI

This commit is contained in:
will 2010-10-19 18:19:13 -07:00
parent 00b81a13e0
commit 97cda5f975
2 changed files with 19 additions and 13 deletions

View File

@ -324,7 +324,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_list">
<div class="leftmenu_content_flevel" id="leftmenu_instances">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
<div class="leftmenu_list_icons">
<img src="images/instance_leftmenuicon.png" alt="Instance" /></div>
<%=t.t("instance")%>
@ -350,7 +350,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_list">
<div class="leftmenu_content_flevel" id="leftmenu_storage">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
<div class="leftmenu_list_icons">
<img src="images/storage_leftmenuicon.png" alt="Storage" /></div>
<%=t.t("storage")%>
@ -384,7 +384,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_list">
<div class="leftmenu_content_flevel" id="leftmenu_network">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
<div class="leftmenu_list_icons">
<img src="images/network_leftmenuicon.png" alt="Network" /></div>
<%=t.t("Network")%>
@ -406,7 +406,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_list">
<div class="leftmenu_content_flevel" id="leftmenu_templates">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" alt="Template" /></div>
<%=t.t("template")%>
@ -519,7 +519,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_list">
<div class="leftmenu_content_flevel" id="leftmenu_domain">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
<div class="leftmenu_list_icons">
<img src="images/domain_leftmenuicon.png" alt="Domain" /></div>
<%=t.t("domain")%>
@ -544,7 +544,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_list">
<div class="leftmenu_content_flevel" id="leftmenu_events">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
<div class="leftmenu_list_icons">
<img src="images/events_leftmenuicon.png" alt="Event" /></div>
<%=t.t("event")%>
@ -576,7 +576,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_list">
<div class="leftmenu_content_flevel" id="leftmenu_system">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
<div class="leftmenu_list_icons">
<img src="images/configuration_leftmenuicon.png" alt="System" /></div>
<%=t.t("system")%>

View File

@ -492,21 +492,27 @@ function clearRightPanel() {
var $selectedLeftMenu;
var $expandedLeftMenu;
function selectLeftMenu($menuToSelect, expandable) {
if ($menuToSelect != $selectedLeftMenu) {
if ($selectedLeftMenu == null || ($menuToSelect.attr("id") != $selectedLeftMenu.attr("id"))) {
if($selectedLeftMenu != null)
$selectedLeftMenu.removeClass("selected");
$menuToSelect.addClass("selected");
$selectedLeftMenu = $menuToSelect;
// collapse any current expanded menu
if ($expandedLeftMenu != null) {
$expandedLeftMenu.hide();
$expandedLeftMenu = null;
var $menuToExpand;
if (expandable != undefined && expandable) {
$menuToExpand = $selectedLeftMenu.siblings(".leftmenu_expandedbox");
}
if (expandable != undefined && expandable) {
$expandedLeftMenu = $selectedLeftMenu.siblings(".leftmenu_expandedbox").show();
if ($expandedLeftMenu != null) {
$expandedLeftMenu.hide(0, function() {
if ($menuToExpand != null) $menuToExpand.slideDown();
});
$expandedLeftMenu = null;
} else if ($menuToExpand != null) {
$menuToExpand.slideDown();
}
$expandedLeftMenu = $menuToExpand;
}
}