etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UI improvement for left menu

This commit is contained in:
NIKITA 2010-10-15 17:43:27 -07:00
parent d0e4cf88d2
commit 8147d1241e
4 changed files with 95 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
ui/new/css/main.css
View File

@ -1264,6 +1264,7 @@ a:visited {
width:220px;
height:auto;
float:left;
position:relative;
background:#7f9bae url(../images/leftmenu_expanded.gif) repeat-x top left;
border-bottom:1px solid #FFF;
margin:0;
@ -1282,7 +1283,18 @@ a:visited {
padding:0;
}
.leftmenu_content{
.leftmenu_bigloading {
width:40px;
height:40px;
position:absolute;
background:url(../images/leftmenu_bigloading.gif) no-repeat top left;
top:25px;
left:90px;
margin:0;
padding:0;
}
.leftmenu_content_flevel{
width:220px;
height:auto;
float:left;
@ -1298,22 +1310,34 @@ a:visited {
.leftmenu_content.selected{
.leftmenu_content_flevel.selected{
color:#FFF;
background:#626262 url(../images/leftmenu_hover.gif) repeat-x top left;
background:#626262 url(../images/leftmenu_selected.gif) repeat-x top left;
}
.leftmenu_content.highlighted{
background:#a9b8c3 url(../images/leftmenu_highlighted.gif) repeat-x top left;
.leftmenu_content_flevel.highlighted{
background:#ced7dd url(../images/leftmenu_highlighted.gif) repeat-x top left;
font-weight:bold;
}
/*
.leftmenu_content:hover{
background:#626262 url(../images/leftmenu_hover.gif) repeat-x top left;
color:#FFF;
}
*/
.leftmenu_content_flevel:hover{
background:#ebf2f6 url(../images/leftmenu_hover.gif) repeat-x top left;
}
.leftmenu_content{
width:220px;
height:auto;
float:left;
color:#333;
text-align:left;
font-weight:normal;
font-size:11px;
cursor:pointer;
cursor:hand;
margin:0;
padding:0 0 3px 0;
}
.leftmenu_loadingbox {
width:100%;
@ -1450,7 +1474,14 @@ a:visited {
padding:0;
}
.leftmenu_arrows_firstlevel_open {
width:9px;
height:9px;
float:right;
margin:2px 4px 0 0;
background:url(../images/leftmenu_openarrow.png) no-repeat top left;
padding:0;
}
.leftmenu_arrows {
width:9px;
@ -1484,6 +1515,8 @@ a:visited {
background:url(../images/leftmenu_white_openedarrow.png) no-repeat top left;
}
.right_panel {
width:auto;
height:auto;
@ -2001,7 +2034,7 @@ a:hover.search_button {
}
.midmenu_content.selected{
background:#626262 url(../images/leftmenu_hover.gif) repeat-x top left;7497ae url(../images/mid_addingbg.gif) repeat-x top left;
background:#626262 url(../images/leftmenu_selected.gif) repeat-x top left;7497ae url(../images/mid_addingbg.gif) repeat-x top left;
color:#FFF;
}

BIN
ui/new/images/leftmenu_bigloading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
ui/new/images/leftmenu_white_closedarrow_nonexp.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 194 B

After

Width:  |  Height:  |  Size: 2.8 KiB

150
ui/new/index.jsp
View File

@ -254,34 +254,19 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_panel">
<div class="leftmenu_box" id="leftmenu_container" style="display: none">
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="leftmenu_dashboard">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_list_icons">
<img src="images/leftmenu_dashboardicon.png" alt="Dashboard" /></div>
<%=t.t("dashboard")%>
</div>
</div>
<div class="leftmenu_expandedbox" style="display: none">
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_dashboard">
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrow_icon">
</div>
<div class="leftmenu_list_icons">
<img src="images/leftmenu_dashboardicon.png" alt="Dashboard" /></div>
<%=t.t("dashboard")%>
</div>
</div>
</div>
</div>
</div>
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="expandable_first_level">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_list_icons">
<img src="images/instance_leftmenuicon.png" alt="Instance" /></div>
<%=t.t("instance")%>
@ -294,8 +279,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows expanded_close" id="arrow_icon">
</div>
<div class="leftmenu_list_icons">
<img src="images/instance_leftmenuicon.png" alt="Instance" /></div>
<%=t.t("instance")%>
</div>
</div>
@ -306,10 +290,9 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="expandable_first_level">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_list_icons">
<img src="images/storage_leftmenuicon.png" alt="Storage" /></div>
<%=t.t("storage")%>
@ -319,10 +302,11 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_volume">
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrow_icon">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/leftmenu_volumeicon.png" alt="Volume" /></div>
<%=t.t("volume")%>
</div>
</div>
@ -330,10 +314,9 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_snapshot">
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrow_icon">
</div>
<div class="leftmenu_list_icons">
<img src="images/leftmenu_snapshotsicon.png" alt="Snapshot" /></div>
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<%=t.t("snapshot")%>
</div>
</div>
@ -341,10 +324,9 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="expandable_first_level">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_list_icons">
<img src="images/network_leftmenuicon.png" alt="Network" /></div>
<%=t.t("Network")%>
@ -354,10 +336,9 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_ip">
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrow_icon">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/leftmenu_ipaddressicon.png" alt="IP Adress" /></div>
<%=t.t("ip.address")%>
</div>
</div>
@ -365,10 +346,9 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="expandable_first_level">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" alt="Template" /></div>
<%=t.t("template")%>
@ -380,8 +360,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows expanded_open" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" alt="Template" /></div>
<%=t.t("template")%>
</div>
</div>
@ -391,8 +370,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_thirdindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" alt="My Template" /></div>
<div>
<%=t.t("my.template")%></div>
</div>
@ -403,8 +381,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_thirdindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" alt="Featured Template" /></div>
<div>
<%=t.t("featured.template")%></div>
</div>
@ -415,8 +392,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_thirdindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" alt="Community Template" /></div>
<div>
<%=t.t("community.template")%></div>
</div>
@ -429,8 +405,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows expanded_open" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" alt="Templates" /></div>
<%=t.t("iso")%>
</div>
</div>
@ -440,8 +415,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_thirdindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" /></div>
<div>
<%=t.t("my.iso")%></div>
</div>
@ -452,8 +426,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_thirdindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" /></div>
<div>
<%=t.t("featured.iso")%></div>
</div>
@ -464,8 +437,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_thirdindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" /></div>
<div>
<%=t.t("community.iso")%></div>
</div>
@ -476,34 +448,20 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="leftmenu_account">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_list_icons">
<img src="images/accounts_leftmenuicon.png" alt="Account" /></div>
<%=t.t("account")%>
</div>
</div>
<div class="leftmenu_expandedbox" style="display: none">
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_account">
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrow_icon">
</div>
<div class="leftmenu_list_icons">
<img src="images/accounts_leftmenuicon.png" alt="Account" /></div>
<%=t.t("account")%>
</div>
</div>
</div>
</div>
</div>
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="expandable_first_level">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_list_icons">
<img src="images/domain_leftmenuicon.png" alt="Domain" /></div>
<%=t.t("domain")%>
@ -526,10 +484,9 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="expandable_first_level">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_list_icons">
<img src="images/events_leftmenuicon.png" alt="Event" /></div>
<%=t.t("event")%>
@ -541,8 +498,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/events_leftmenuicon.png" alt="Event" /></div>
<%=t.t("event")%>
</div>
</div>
@ -552,8 +508,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/alert_leftmenuicon.png" alt="Alert" /></div>
<%=t.t("alert")%>
</div>
</div>
@ -561,10 +516,9 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div class="leftmenu_list">
<div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_content_flevel" id="expandable_first_level">
<div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div>
<div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
<div class="leftmenu_list_icons">
<img src="images/configuration_leftmenuicon.png" alt="System" /></div>
<%=t.t("system")%>
@ -576,14 +530,15 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/configuration_leftmenuicon.png" alt="Resources" /></div>
<%=t.t("resources")%>
</div>
</div>
</div>
<div id="leftmenu_zone_tree">
<div class="leftmenu_bigloading" id="loading_container" style="display:none;" ></div>
<div id="tree_container"></div>
</div>
<div class="leftmenu_expandedlist">
@ -591,8 +546,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/configuration_leftmenuicon.png" alt="Service Offerings" /></div>
<%=t.t("service.offerings")%>
</div>
</div>
@ -602,8 +556,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/configuration_leftmenuicon.png" alt="Disk Offerings" /></div>
<%=t.t("disk.offerings")%>
</div>
</div>
@ -613,8 +566,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/configuration_leftmenuicon.png" alt="Global Settings" /></div>
<%=t.t("global.settings")%>
</div>
</div>
@ -709,8 +661,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_thirdindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_zoneicon.png" alt="Zone" /></div>
Zone: <strong><span id="zone_name"></span></strong>
</div>
</div>
@ -734,8 +685,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_fourthindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_podicon.png" alt="Pod" /></div>
Pod: <strong><span id="pod_name"></span></strong>
</div>
</div>
@ -757,8 +707,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_fifthindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_clustericon.png" alt="Cluster" /></div>
Cluster: <strong><span id="cluster_name"></span></strong>
</div>
</div>
@ -778,8 +727,7 @@ long milliseconds = new Date().getTime();
<div class="leftmenu_fourthindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_systemvmicon.png" alt="System VM" /></div>
System VM: <strong><span id="systemvm_name"></span></strong>
</div>
</div>