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
2025-11-03 21:02:34 +00:00 · 2011-09-28 20:01:24 +00:00
parent e4e977649f
commit a5adea2fd4
6 changed files with 166 additions and 44 deletions
--- a/xCAT-UI/css/style.css
+++ b/xCAT-UI/css/style.css
@@ -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;
 }

--- a/xCAT-UI/js/custom/zvm.js
+++ b/xCAT-UI/js/custom/zvm.js
@@ -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;

--- a/xCAT-UI/js/nodes/nodes.js
+++ b/xCAT-UI/js/nodes/nodes.js
@@ -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());
--- a/xCAT-UI/js/nodes/physical.js
+++ b/xCAT-UI/js/nodes/physical.js
@@ -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;
 }

--- a/xCAT-UI/js/ui.js
+++ b/xCAT-UI/js/ui.js
@@ -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();
 	}
 }
--- a/xCAT-UI/lib/ui.php
+++ b/xCAT-UI/lib/ui.php
@@ -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>";
 	}