Set theme for all elements on UI.
git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10666 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
This commit is contained in:
phamt
parent
e4e977649f
commit
a5adea2fd4
@ -36,7 +36,6 @@
|
||||
height: 39px;
|
||||
width: 1000px;
|
||||
margin: 0px auto;
|
||||
background: url(../images/jquery/default/ui-bg_highlight-soft_75_2191c0_1x100.png) 50% 50% repeat-x;
|
||||
-moz-border-radius: .3em;
|
||||
-webkit-border-radius: .3em;
|
||||
border-radius: .3em;
|
||||
@ -63,15 +62,10 @@
|
||||
float: left;
|
||||
font: 14px verdana, arial, helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
padding: 11px 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#header ul a:hover {
|
||||
background-color: #A9D0F5;
|
||||
}
|
||||
|
||||
/* User name and log out */
|
||||
#header div {
|
||||
float: right;
|
||||
@ -115,6 +109,11 @@ body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ui-widget-content {
|
||||
background: white;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*--------------- Groups ---------------*/
|
||||
#groups {
|
||||
width: 150px;
|
||||
@ -229,7 +228,6 @@ span.ui-icon-info {
|
||||
|
||||
.tab a {
|
||||
cursor: pointer;
|
||||
color: #0000FF;
|
||||
}
|
||||
|
||||
.tab .ui-icon-close {
|
||||
@ -249,19 +247,15 @@ span.ui-icon-info {
|
||||
|
||||
.tab th {
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
color: #424242;
|
||||
padding: 10px;
|
||||
background-color: #A9D0F5;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #BDBDBD;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab td {
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
color: #424242;
|
||||
padding: 5px 15px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
@ -318,16 +312,27 @@ legend {
|
||||
|
||||
/*--------------- menu Div Actions bar ---------------*/
|
||||
.menuDiv {
|
||||
background:none repeat scroll 0 0 #79B7E7;
|
||||
padding: 0.5em;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.sf-menu {
|
||||
background : none repeat scroll 0 0 #79B7E7;
|
||||
border :1px solid #f5f5f5;
|
||||
border-radius :0.3em 0.3em 0.3em 0.3em;
|
||||
margin-bottom: 0;
|
||||
background: none;
|
||||
border: 0px solid;
|
||||
}
|
||||
|
||||
.sf-menu ul li {
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.sf-menu .sf-menu {
|
||||
border: 0px solid;
|
||||
}
|
||||
|
||||
.sf-menu li:hover,.sf-menu li.sfHover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.sf-sub-indicator{
|
||||
@ -336,7 +341,7 @@ legend {
|
||||
|
||||
.actionBar {
|
||||
display: inline-table;
|
||||
width:50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.actionBar div {
|
||||
@ -344,14 +349,9 @@ legend {
|
||||
}
|
||||
|
||||
.actionBar a {
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.actionBar a:hover {
|
||||
color: #026890;
|
||||
}
|
||||
|
||||
.actionBar li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -409,7 +409,6 @@ legend {
|
||||
/*** Table ***/
|
||||
.datatable {
|
||||
width: 100%;
|
||||
border: solid 1px #BDBDBD;
|
||||
border-spacing: 0px;
|
||||
border-collapse: collapse;
|
||||
display: inline-table;
|
||||
@ -419,7 +418,6 @@ legend {
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
padding: 5px 0px;
|
||||
white-space: nowrap; /* Do not use word wrap */
|
||||
border: solid 1px #BDBDBD;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
min-width: 30px;
|
||||
@ -427,7 +425,6 @@ legend {
|
||||
|
||||
.datatable th {
|
||||
font: bold 12px verdana, arial, helvetica, sans-serif;
|
||||
background-color: #F2F2F2;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
|
||||
@ -494,7 +494,7 @@ zvmPlugin.prototype.loadInventory = function(data) {
|
||||
var procFooter = $('<tfoot></tfoot>');
|
||||
|
||||
// Table columns - Type, Address, ID, Base, Dedicated, and Affinity
|
||||
var procTabRow = $('<thead> <th>Type</th> <th>Address</th> <th>ID</th> <th>Base</th> <th>Dedicated</th> <th>Affinity</th> </thead>');
|
||||
var procTabRow = $('<thead class="ui-widget-header"> <th>Type</th> <th>Address</th> <th>ID</th> <th>Base</th> <th>Dedicated</th> <th>Affinity</th> </thead>');
|
||||
procTable.append(procTabRow);
|
||||
var procType, procAddr, procId, procAff;
|
||||
|
||||
@ -631,7 +631,7 @@ zvmPlugin.prototype.loadInventory = function(data) {
|
||||
}];
|
||||
|
||||
// Table columns - Virtual Device, Type, VolID, Type of Access, and Size
|
||||
var dasdTabRow = $('<thead> <th>Virtual Device #</th> <th>Type</th> <th>VolID</th> <th>Type of Access</th> <th>Size</th> </thead>');
|
||||
var dasdTabRow = $('<thead class="ui-widget-header"> <th>Virtual Device #</th> <th>Type</th> <th>VolID</th> <th>Type of Access</th> <th>Size</th> </thead>');
|
||||
dasdTable.append(dasdTabRow);
|
||||
var dasdVDev, dasdType, dasdVolId, dasdAccess, dasdSize;
|
||||
|
||||
@ -721,7 +721,7 @@ zvmPlugin.prototype.loadInventory = function(data) {
|
||||
} ];
|
||||
|
||||
// Table columns - Virtual device, Adapter Type, Port Name, # of Devices, MAC Address, and LAN Name
|
||||
var nicTabRow = $('<th>Virtual Device #</th> <th>Adapter Type</th> <th>Port Name</th> <th># of Devices</th> <th>LAN Name</th>');
|
||||
var nicTabRow = $('<thead class="ui-widget-header"> <th>Virtual Device #</th> <th>Adapter Type</th> <th>Port Name</th> <th># of Devices</th> <th>LAN Name</th></thead>');
|
||||
nicTable.append(nicTabRow);
|
||||
var nicVDev, nicType, nicPortName, nicNumOfDevs, nicMacAddr, nicLanName;
|
||||
|
||||
|
||||
@ -814,6 +814,49 @@ function loadNodes(data) {
|
||||
actionsMenu.superfish();
|
||||
actionsMenu.css('display', 'inline-block');
|
||||
actionBar.append(actionsMenu);
|
||||
|
||||
// Set correct theme for action menu
|
||||
actionsMenu.find('li').hover(function() {
|
||||
// On hover
|
||||
var background = '', color = '';
|
||||
var theme = $.cookie('xcat_theme');
|
||||
if (theme) {
|
||||
switch (theme) {
|
||||
case 'cupertino':
|
||||
background = '#3BAAE3';
|
||||
color = 'white';
|
||||
break;
|
||||
case 'dark_hive':
|
||||
background = '#0972A5';
|
||||
break;
|
||||
case 'redmond':
|
||||
background = '#F5F8F9';
|
||||
color = '#E17009';
|
||||
break;
|
||||
case 'start':
|
||||
background = '#6EAC2C';
|
||||
break;
|
||||
case 'sunny':
|
||||
background = 'white';
|
||||
color = '#0074C7';
|
||||
break;
|
||||
case 'ui_dark':
|
||||
background = '#F58400';
|
||||
break;
|
||||
default:
|
||||
background = '#6EAC2C';
|
||||
}
|
||||
} else {
|
||||
background = '#6EAC2C';
|
||||
}
|
||||
|
||||
$(this).css('background', background);
|
||||
$(this).find('a:eq(0)').css('color', color);
|
||||
}, function() {
|
||||
// Change back to normal
|
||||
$(this).css('background', '');
|
||||
$(this).find('a:eq(0)').css('color', '');
|
||||
});
|
||||
|
||||
// Insert action bar and nodes datatable
|
||||
$('#nodesTab').append(nodesTable.object());
|
||||
|
||||
@ -542,6 +542,49 @@ function createActionMenu(){
|
||||
actionBar.append(actionsMenu);
|
||||
actionBar.css('margin-top', '10px');
|
||||
|
||||
// Set correct theme for action menu
|
||||
actionsMenu.find('li').hover(function() {
|
||||
// On hover
|
||||
var background = '', color = '';
|
||||
var theme = $.cookie('xcat_theme');
|
||||
if (theme) {
|
||||
switch (theme) {
|
||||
case 'cupertino':
|
||||
background = '#3BAAE3';
|
||||
color = 'white';
|
||||
break;
|
||||
case 'dark_hive':
|
||||
background = '#0972A5';
|
||||
break;
|
||||
case 'redmond':
|
||||
background = '#F5F8F9';
|
||||
color = '#E17009';
|
||||
break;
|
||||
case 'start':
|
||||
background = '#6EAC2C';
|
||||
break;
|
||||
case 'sunny':
|
||||
background = 'white';
|
||||
color = '#0074C7';
|
||||
break;
|
||||
case 'ui_dark':
|
||||
background = '#F58400';
|
||||
break;
|
||||
default:
|
||||
background = '#6EAC2C';
|
||||
}
|
||||
} else {
|
||||
background = '#6EAC2C';
|
||||
}
|
||||
|
||||
$(this).css('background', background);
|
||||
$(this).find('a:eq(0)').css('color', color);
|
||||
}, function() {
|
||||
// Change back to normal
|
||||
$(this).css('background', '');
|
||||
$(this).find('a:eq(0)').css('color', '');
|
||||
});
|
||||
|
||||
return actionBar;
|
||||
}
|
||||
|
||||
|
||||
@ -149,7 +149,7 @@ var Table = function(tableId) {
|
||||
Table.prototype.init = function(headers) {
|
||||
// Create a table
|
||||
this.table = $('<table id="' + this.tableId + '"></table>');
|
||||
var thead = $('<thead></thead>');
|
||||
var thead = $('<thead class="ui-widget-header"></thead>');
|
||||
var headRow = $('<tr></tr>');
|
||||
|
||||
// Append headers
|
||||
@ -247,7 +247,7 @@ var DataTable = function(tableId) {
|
||||
DataTable.prototype.init = function(headers) {
|
||||
// Create a table
|
||||
this.dataTable = $('<table class="datatable" id="' + this.dataTableId + '"></table>');
|
||||
var thead = $('<thead></thead>');
|
||||
var thead = $('<thead class="ui-widget-header"></thead>');
|
||||
var headRow = $('<tr></tr>');
|
||||
|
||||
// Append headers
|
||||
@ -418,7 +418,7 @@ function createButton(name) {
|
||||
* @return A division containing the menu
|
||||
*/
|
||||
function createMenu(items) {
|
||||
var menu = $('<ul class="sf-menu"></ul>');
|
||||
var menu = $('<ul class="sf-menu ui-state-default"></ul>');
|
||||
|
||||
// Loop through each item
|
||||
for ( var i in items) {
|
||||
@ -434,16 +434,10 @@ function createMenu(items) {
|
||||
} else {
|
||||
item.append(items[i]);
|
||||
}
|
||||
|
||||
// Do not add border for 1st item
|
||||
if (i > 0) {
|
||||
item.css( {
|
||||
'border-left' : '1px solid #BDBDBD'
|
||||
});
|
||||
}
|
||||
|
||||
menu.append(item);
|
||||
}
|
||||
|
||||
|
||||
return menu;
|
||||
}
|
||||
|
||||
@ -522,32 +516,77 @@ function initPage() {
|
||||
$('#xcat_settings').click(function() {
|
||||
openSettings();
|
||||
});
|
||||
|
||||
// Set header to theme
|
||||
var background = '', color = '';
|
||||
var theme = $.cookie('xcat_theme');
|
||||
if (theme) {
|
||||
switch (theme) {
|
||||
case 'cupertino':
|
||||
background = '#3BAAE3';
|
||||
color = 'white';
|
||||
break;
|
||||
case 'dark_hive':
|
||||
background = '#0972A5';
|
||||
break;
|
||||
case 'redmond':
|
||||
background = '#F5F8F9';
|
||||
color = '#E17009';
|
||||
break;
|
||||
case 'start':
|
||||
background = '#6EAC2C';
|
||||
break;
|
||||
case 'sunny':
|
||||
background = 'white';
|
||||
color = '#0074C7';
|
||||
break;
|
||||
case 'ui_dark':
|
||||
background = '#F58400';
|
||||
break;
|
||||
default:
|
||||
background = '#6EAC2C';
|
||||
}
|
||||
} else {
|
||||
background = '#6EAC2C';
|
||||
}
|
||||
|
||||
$('#header').addClass('ui-state-default');
|
||||
$('#header').css('border', '0px');
|
||||
|
||||
// Set theme to user span
|
||||
$('#login_user').css('color', color);
|
||||
|
||||
// Style for selected page
|
||||
var style = {
|
||||
'background-color': background,
|
||||
'color': color
|
||||
};
|
||||
|
||||
// Get the page being loaded
|
||||
var url = window.location.pathname;
|
||||
var page = url.replace('/xcat/', '');
|
||||
var headers = $('#header ul li a');
|
||||
|
||||
|
||||
// Show the page
|
||||
$("#content").children().remove();
|
||||
if (page == 'configure.php') {
|
||||
includeJs("js/configure/update.js");
|
||||
includeJs("js/configure/discover.js");
|
||||
headers.eq(1).css('background-color', '#A9D0F5');
|
||||
headers.eq(1).css(style);
|
||||
loadConfigPage();
|
||||
} else if (page == 'provision.php') {
|
||||
includeJs("js/provision/images.js");
|
||||
headers.eq(2).css('background-color', '#A9D0F5');
|
||||
headers.eq(2).css(style);
|
||||
loadProvisionPage();
|
||||
} else if (page == 'monitor.php') {
|
||||
includeJs("js/monitor/xcatmon.js");
|
||||
includeJs("js/monitor/rmcmon.js");
|
||||
includeJs("js/monitor/gangliamon.js");
|
||||
headers.eq(3).css('background-color', '#A9D0F5');
|
||||
headers.eq(3).css(style);
|
||||
loadMonitorPage();
|
||||
} else if (page == 'guide.php') {
|
||||
includeJs("js/guide/guide.js");
|
||||
headers.eq(4).css('background-color', '#A9D0F5');
|
||||
headers.eq(4).css(style);
|
||||
loadGuidePage();
|
||||
} else {
|
||||
// Load nodes page by default
|
||||
@ -557,7 +596,7 @@ function initPage() {
|
||||
includeJs("js/nodes/updatenode.js");
|
||||
includeJs("js/nodes/physical.js");
|
||||
includeJs("js/nodes/mtm.js");
|
||||
headers.eq(0).css('background-color', '#A9D0F5');
|
||||
headers.eq(0).css(style);
|
||||
loadNodesPage();
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ function loadPage() {
|
||||
if (isset($_SESSION['username'])){
|
||||
echo
|
||||
"<div>
|
||||
<span style='padding: 0 6px; color: white; font-weight: bold;'>{$_SESSION['username']}</span> | <a id='xcat_settings'>Settings</a> | <a href='lib/logout.php'>Log out</a>
|
||||
<span id='login_user' style='padding: 0 6px; font-weight: bold;'>{$_SESSION['username']}</span> | <a id='xcat_settings'>Settings</a> | <a href='lib/logout.php'>Log out</a>
|
||||
</div>";
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user