mirror of
https://github.com/OpenNebula/one.git
synced 2024-12-27 03:21:29 +03:00
Feature #1112: Fix ozones and SelfService UIs to work with Sunstone latest menus.
Since sunstone menus were reworked, some CSS needed to be updated. layout.js file, which is particular to SelfService, was updated to work with latest version of sunstone too.
This commit is contained in:
Hector Sanjuan
parent
3506116a5e
commit
7eec9e1111
@ -125,14 +125,44 @@ background-image: -moz-linear-gradient(
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#navigation li {
|
||||
.navigation li.topTab {
|
||||
line-height: 2em;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#navigation li a {
|
||||
.navigation li.subTab {
|
||||
line-height: 1.8em;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.navigation li.subsubTab {
|
||||
line-height: 1.7em;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.navigation li.topTab span.plusIcon,
|
||||
.navigation li.subTab span.plusIcon {
|
||||
display : none;
|
||||
float: right;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.navigation li.topTab span.plusIcon {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.navigation li.subTab span.plusIcon {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#navigation li {
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#navigation li:hover, .navigation-active-li {
|
||||
@ -163,10 +193,10 @@ background-image: -moz-linear-gradient(
|
||||
);
|
||||
*/
|
||||
}
|
||||
.navigation-active-li-a {
|
||||
.navigation-active-li {
|
||||
font-weight: bold;
|
||||
}
|
||||
#navigation li:hover a, .navigation-active-li-a {
|
||||
#navigation li:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
@ -181,3 +211,48 @@ background-image: -moz-linear-gradient(
|
||||
width: 100px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
/* top menu css */
|
||||
#menutop_container{
|
||||
margin:0px 171px;
|
||||
color:#FFFFFF;
|
||||
font-size:13px;
|
||||
font-weight:bold;
|
||||
}
|
||||
#menutop_navbar{
|
||||
float:left;
|
||||
height:25px;
|
||||
font-size:13px;
|
||||
}
|
||||
#menutop_navbar ul{
|
||||
float:left;
|
||||
height:25px;
|
||||
color:#000000;
|
||||
margin: 0 0;
|
||||
padding-left: 1px;
|
||||
}
|
||||
#menutop_navbar ul{
|
||||
background-color: #353735;
|
||||
}
|
||||
#menutop_navbar ul li{
|
||||
float:left;
|
||||
min-width:72px;
|
||||
margin:0px 0 0 0;
|
||||
height:22px;
|
||||
display: inline;
|
||||
text-align:center;
|
||||
padding-left:5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
border-left:1px solid white;
|
||||
cursor:pointer;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#menutop_navbar ul li:hover {
|
||||
background-color: #E69138;
|
||||
|
||||
}
|
||||
|
||||
/* end top menu css */
|
||||
@ -14,16 +14,21 @@
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
//This file is mostly a copy of layout.js from Sunstone.
|
||||
//Instead of opening a south panel, it opens an east panel.
|
||||
//Apart from document.ready() modifications, the rest of different lines are
|
||||
//makerd with MODIFIED
|
||||
|
||||
var activeTab;
|
||||
var outerLayout, innerLayout;
|
||||
|
||||
function hideDialog(){
|
||||
innerLayout.close("east");
|
||||
innerLayout.close("east");//MODIFIED
|
||||
}
|
||||
|
||||
function popDialog(content){
|
||||
$("#dialog").html(content);
|
||||
innerLayout.open("east");
|
||||
innerLayout.open("east");//MODIFIED
|
||||
}
|
||||
|
||||
function popDialogLoading(){
|
||||
@ -31,45 +36,98 @@ function popDialogLoading(){
|
||||
popDialog(loading);
|
||||
}
|
||||
|
||||
function showTab(tabname){
|
||||
activeTab = tabname;
|
||||
function showTab(tabname,highlight_tab){
|
||||
//Since menu items no longer have an <a> element
|
||||
//we no longer expect #tab_id here, but simply tab_id
|
||||
//So safety check - remove # from #tab_id if present to ensure compatibility
|
||||
if (tabname.indexOf('#') == 0)
|
||||
tabname = tabname.substring(1);
|
||||
if (highlight_tab && highlight_tab.indexOf('#') == 0)
|
||||
highlight_tab == highlight.substring(1);
|
||||
|
||||
var activeTab = tabname;
|
||||
|
||||
if (!highlight_tab) highlight_tab = activeTab;
|
||||
|
||||
//clean selected menu
|
||||
$("#navigation li").removeClass("navigation-active-li");
|
||||
$("#navigation li a").removeClass("navigation-active-li-a");
|
||||
$("div#header ul#menutop_ul li").removeClass("navigation-active-li");
|
||||
|
||||
//select menu
|
||||
var li = $("#navigation li:has(a[href='"+activeTab+"'])")
|
||||
var li_a = $("#navigation li a[href='"+activeTab+"']")
|
||||
//select tab in left menu
|
||||
var li = $("#navigation li#li_"+highlight_tab)
|
||||
li.addClass("navigation-active-li");
|
||||
li_a.addClass("navigation-active-li-a");
|
||||
|
||||
//select tab in top menu
|
||||
var top_li = $("div#header ul#menutop_ul li#top_"+highlight_tab);
|
||||
top_li.addClass("navigation-active-li");
|
||||
|
||||
|
||||
//show tab
|
||||
$(".tab").hide();
|
||||
$(activeTab).show();
|
||||
//~ if (activeTab == '#dashboard') {
|
||||
//~ emptyDashboard();
|
||||
//~ preloadTables();
|
||||
//~ }
|
||||
innerLayout.close("south");
|
||||
}
|
||||
$('#'+activeTab).show();
|
||||
// innerLayout.close("south");//MODIFIED commented
|
||||
};
|
||||
|
||||
function setupTabs(){
|
||||
|
||||
var topTabs = $(".outer-west ul li.topTab");
|
||||
var subTabs = $(".outer-west ul li.subTab");
|
||||
|
||||
subTabs.live("click",function(){
|
||||
//leave floor to topTab listener in case of tabs with both classes
|
||||
if ($(this).hasClass('topTab')) return false;
|
||||
|
||||
var tab = $(this).attr('id').substring(3);
|
||||
showTab(tab);
|
||||
return false;
|
||||
});
|
||||
|
||||
topTabs.live("click",function(e){
|
||||
var tab = $(this).attr('id').substring(3);
|
||||
//Subtabs have a class with the name of this tab
|
||||
var subtabs = $('div#menu li.'+tab);
|
||||
|
||||
//toggle subtabs only when clicking on the icon or when clicking on an
|
||||
//already selected menu
|
||||
if ($(e.target).is('span') ||
|
||||
$(this).hasClass("navigation-active-li")){
|
||||
//for each subtab, we hide the subsubtabs
|
||||
subtabs.each(function(){
|
||||
//for each subtab, hide its subtabs
|
||||
var subsubtabs = $(this).attr('id').substr(3);
|
||||
//subsubtabs class
|
||||
subsubtabs = $('div#menu li.'+subsubtabs);
|
||||
subsubtabs.hide();
|
||||
});
|
||||
//hide subtabs and reset icon to + position, since all subsubtabs
|
||||
//are hidden
|
||||
subtabs.fadeToggle('fast');
|
||||
$('span',subtabs).removeClass('ui-icon-circle-minus');
|
||||
$('span',subtabs).addClass('ui-icon-circle-plus');
|
||||
//toggle icon on this tab
|
||||
$('span',this).toggleClass('ui-icon-circle-plus ui-icon-circle-minus');
|
||||
};
|
||||
//if we are clicking on the icon only, do not show the tab
|
||||
if ($(e.target).is('span')) return false;
|
||||
|
||||
showTab(tab);
|
||||
return false;
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
function setupTopMenu(){
|
||||
$('div#header ul#menutop_ul li').live('click',function(){
|
||||
var tab = "#" + $(this).attr('id').substring(4);
|
||||
showTab(tab);
|
||||
});
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
$(".tab").hide();
|
||||
|
||||
$(".outer-west ul li.subTab").live("click",function(){
|
||||
var tab = $('a',this).attr('href');
|
||||
showTab(tab);
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".outer-west ul li.topTab").live("click",function(){
|
||||
var tab = $('a',this).attr('href');
|
||||
//toggle subtabs trick
|
||||
$('li.'+tab.substr(1)).toggle();
|
||||
showTab(tab);
|
||||
return false;
|
||||
});
|
||||
setupTabs();
|
||||
//setupTopMenu();
|
||||
|
||||
outerLayout = $('body').layout({
|
||||
applyDefaultStyles: false
|
||||
|
||||
@ -136,9 +136,31 @@ background-image: -moz-linear-gradient(
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.navigation li.subsubTab {
|
||||
line-height: 1.7em;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.navigation li a {
|
||||
.navigation li.topTab span.plusIcon,
|
||||
.navigation li.subTab span.plusIcon {
|
||||
display : none;
|
||||
float: right;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.navigation li.topTab span.plusIcon {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.navigation li.subTab span.plusIcon {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.navigation li {
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navigation li:hover, .navigation-active-li {
|
||||
@ -169,9 +191,54 @@ background-image: -moz-linear-gradient(
|
||||
);
|
||||
*/
|
||||
}
|
||||
.navigation-active-li-a {
|
||||
.navigation-active-li {
|
||||
font-weight: bold;
|
||||
}
|
||||
.navigation li:hover a, .navigation-active-li-a {
|
||||
.navigation li:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* top menu css */
|
||||
#menutop_container{
|
||||
margin:0px 171px;
|
||||
color:#FFFFFF;
|
||||
font-size:13px;
|
||||
font-weight:bold;
|
||||
}
|
||||
#menutop_navbar{
|
||||
float:left;
|
||||
height:25px;
|
||||
font-size:13px;
|
||||
}
|
||||
#menutop_navbar ul{
|
||||
float:left;
|
||||
height:25px;
|
||||
color:#000000;
|
||||
margin: 0 0;
|
||||
padding-left: 1px;
|
||||
}
|
||||
#menutop_navbar ul{
|
||||
background-color: #353735;
|
||||
}
|
||||
#menutop_navbar ul li{
|
||||
float:left;
|
||||
min-width:72px;
|
||||
margin:0px 0 0 0;
|
||||
height:22px;
|
||||
display: inline;
|
||||
text-align:center;
|
||||
padding-left:5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
border-left:1px solid white;
|
||||
cursor:pointer;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#menutop_navbar ul li:hover {
|
||||
background-color: #E69138;
|
||||
|
||||
}
|
||||
|
||||
/* end top menu css */
|
||||
Loading…
Reference in New Issue
Block a user