2014-08-04 Alejandro Gallardo <alejandro.gallardo@artica.es>

* general/header.php: Now the header can be configured
	to be fixed at the top.

	* general/main_menu.php: Now the menu can be configured
	to be fixed at the left.

	* godmode/setup/setup_visuals.php,
	  include/functions_config.php: Added new options to
	enable the fixed header and menu.

	* include/styles/menu.css,
	  include/styles/pandora.css: Changes on the menu styles.


git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@10377 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f

pandora_console/ChangeLog

@@ -1,3 +1,19 @@
+2014-08-04  Alejandro Gallardo <alejandro.gallardo@artica.es>
+	
+	* general/header.php: Now the header can be configured
+	to be fixed at the top.
+
+	* general/main_menu.php: Now the menu can be configured
+	to be fixed at the left.
+
+	* godmode/setup/setup_visuals.php,
+	  include/functions_config.php: Added new options to
+	enable the fixed header and menu.
+
+	* include/styles/menu.css,
+	  include/styles/pandora.css: Changes on the menu styles.
+
+
 2014-08-04  Miguel de Dios <miguel.dedios@artica.es>
 	
 	* include/functions_config.php,

pandora_console/general/header.php

@@ -303,8 +303,19 @@ config_check();
 
 <script type="text/javascript">
 	/* <![CDATA[ */
+
+	var fixed_header = <?php echo json_encode((bool)$config['fixed_header']); ?>;
+
 	var new_chat = <?php echo (int)$_SESSION['new_chat'];?>;
 	$(document).ready (function () {
+
+		if (fixed_header) {
+			$('div#head').addClass('fixed_header');
+			$('div#page')
+				.css('padding-top', $('div#head').innerHeight() + 'px')
+				.css('position', 'relative');
+		}
+		
 		check_new_chats_icon('icon_new_messages_chat');
 		
 		/* Temporal fix to hide graphics when ui_dialog are displayed */

pandora_console/general/main_menu.php

@@ -62,6 +62,7 @@ ui_require_jquery_file ('cookie');
 /* <![CDATA[ */
 
 var autohidden_menu = <?php echo $autohidden_menu; ?>;
+var fixed_menu = <?php echo json_encode((bool)$config['fixed_menu']); ?>;
 
 var menuState = $.cookie(btoa('pandora_menu_state'));
 if (!menuState) {
@@ -69,13 +70,28 @@ if (!menuState) {
 }
 else {
 	menuState = JSON.parse(menuState);
+	open_submenus();
+}
+
+function open_submenus () {
 	$.each(menuState, function (index, value) {
 		if (value)
 			$('div.menu>ul>li#' + index + '>ul').show();
 	});
+	$('div.menu>ul>li.selected>ul').removeClass('invisible');
+}
+
+
+function close_submenus () {
+	$.each(menuState, function (index, value) {
+		if (value)
+			$('div.menu>ul>li#' + index + '>ul').hide();
+	});
+	$('div.menu>ul>li.selected>ul').addClass('invisible');
 }
 
 $(document).ready( function() {
+
 	$("img.toggle").click (function (e) {
 		//In case the links gets activated, we don't want to follow link
 		e.preventDefault();
@@ -98,65 +114,96 @@ $(document).ready( function() {
 		$.cookie(btoa('pandora_menu_state'), JSON.stringify(menuState), {expires: 7});
 	});
 	
-	$('#menu_container').hover (handlerIn, handlerOut);
+	if (fixed_menu) {
-	var openTime = 0;
+		$('div#menu')
-	var handsIn = 0;
+			.css('position', 'fixed')
-	
+			.css('z-index', '9000')
-	function handlerIn() {
+			.css('left', '0')
-		handsIn = 1;
+			.css('top', $('div#head').innerHeight() + 'px')
-		if(openTime == 0) {
+			.css('height', '100%')
-			show_menu();
+			.css('overflow', 'hidden')
-			openTime = new Date().getTime();
+			.hover(function (e) {
-			
+				if (!autohidden_menu) {
-			// Close in 1 second if is not closed manually
+					$(this).css('overflow', 'auto').children('div').css('width', 'auto');
-			setTimeout(function() {
-				if(openTime > 0 && handsIn == 0) {
-					hide_menu();
-					openTime = 0;
 				}
-			}, 1000);
+			}, function (e) {
-		}
+				if (!autohidden_menu) {
+					$(this).css('overflow', 'hidden').children('div').css('width', '100%');
+				}
+			})
+			.children('div')
+				.css('margin-bottom', $('div#head').innerHeight() + 'px');
 	}
-	
+
-	function handlerOut() {
-		handsIn = 0;
-		var openedTime = new Date().getTime() - openTime;
-		
-		if(openedTime > 1000) {
-			hide_menu();
-			openTime = 0;
-		}
-	}
-	
-	function show_menu () {
-		$('#menu_container').animate({"left": "+=140px"}, 200);
-		show_menu_pretty();
-	}
-	
-	function show_menu_pretty() {
-		$('div.menu ul li').css('background-position', '');
-		$('ul.submenu li a, li.menu_icon a, li.links a, div.menu>ul>li>img.toggle').show();
-		$('.titop').css('color', 'white');
-		$('.bg3').css('color', 'white');
-		$('.bg4').css('color', 'white');
-	}
-	
-	function hide_menu () {
-		$('#menu_container').animate({"left": "-=140px"}, 100);
-		hide_menu_pretty();
-	}
-	
-	function hide_menu_pretty() {
-		$('div.menu li').css('background-position', '140px 3px');
-		$('ul.submenu li a, li.menu_icon a, li.links a, div.menu>ul>li>img.toggle').hide();
-		$('.titop').css('color', $('.titop').css('background-color'));
-		$('.bg3').css('color', $('.bg3').css('background-color'));
-		$('.bg4').css('color', $('.bg4').css('background-color'));
-	}
-	
 	if (autohidden_menu) {
-		$('#main').css('margin-left', '40px');
+
+		$('#menu_container').hover (handlerIn, handlerOut);
+		var openTime = 0;
+		var handsIn = 0;
+
+		$('#main').css('margin-left', '50px');
 		hide_menu_pretty();
+		
+		function handlerIn() {
+			handsIn = 1;
+			if (openTime == 0) {
+				show_menu();
+				openTime = new Date().getTime();
+				
+				// Close in 1 second if is not closed manually
+				setTimeout(function() {
+					if(openTime > 0 && handsIn == 0) {
+						hide_menu();
+						openTime = 0;
+					}
+				}, 1000);
+			}
+		}
+		
+		function handlerOut() {
+			handsIn = 0;
+			var openedTime = new Date().getTime() - openTime;
+			
+			if (openedTime > 1000) {
+				hide_menu();
+				openTime = 0;
+			}
+		}
+		
+		function show_menu () {
+			$('#menu_container').animate({"left": "+=80px"}, 200, function () {
+				if (fixed_menu) {
+					$('#menu_container').parent().css('overflow', 'auto');
+				}
+			});
+			show_menu_pretty();
+		}
+		
+		function show_menu_pretty() {
+			open_submenus();
+			$('div.menu ul li').css('background-position', '');
+			$('ul.submenu li a, li.menu_icon a, li.links a, div.menu>ul>li>img.toggle').show();
+			$('.titop').css('color', 'white');
+			$('.bg3').css('color', 'white');
+			$('.bg4').css('color', 'white');
+		}
+		
+		function hide_menu () {
+			if (fixed_menu) {
+				$('#menu_container').parent().css('overflow', 'hidden');
+			}
+			$('#menu_container').animate({"left": "-=80px"}, 100);
+			hide_menu_pretty();
+		}
+		
+		function hide_menu_pretty() {
+			close_submenus();
+			$('div.menu li').css('background-position', '85px 5px');
+			$('ul.submenu li a, li.menu_icon a, li.links a, div.menu>ul>li>img.toggle').hide();
+			$('.titop').css('color', $('.titop').css('background-color'));
+			$('.bg3').css('color', $('.bg3').css('background-color'));
+			$('.bg4').css('color', $('.bg4').css('background-color'));
+		}
 	}
 });
 /* ]]> */

pandora_console/godmode/setup/setup_visuals.php

@@ -399,6 +399,16 @@ $table->data[$row][1] = html_print_input_text ('networkmap_max_width', $config["
 
 $row++;
 
+$table->data[$row][0] = __('Fixed header');
+$table->data[$row][1] = html_print_checkbox('fixed_header', 1, $config['fixed_header'], true);
+
+$row++;
+
+$table->data[$row][0] = __('Fixed menu');
+$table->data[$row][1] = html_print_checkbox('fixed_menu', 1, $config['fixed_menu'], true);
+
+$row++;
+
 echo '<form id="form_setup" method="post">';
 html_print_input_hidden ('update_config', 1);
 html_print_table ($table);

pandora_console/include/functions_config.php

@@ -433,6 +433,10 @@ function config_update_config () {
 						$error_update[] = __('Default icon in GIS');
 					if (!config_update_value ('autohidden_menu', get_parameter('autohidden_menu')))
 						$error_update[] = __('Autohidden menu');
+					if (!config_update_value ('fixed_header', get_parameter('fixed_header')))
+						$error_update[] = __('Fixed header');
+					if (!config_update_value ('fixed_menu', get_parameter('fixed_menu')))
+						$error_update[] = __('Fixed menu');
 					if (!config_update_value ('paginate_module', get_parameter('paginate_module')))
 						$error_update[] = __('Paginate module');
 					if (!config_update_value ('graphviz_bin_dir', get_parameter('graphviz_bin_dir')))

pandora_console/include/styles/menu.css

@@ -81,7 +81,6 @@
 .submenu {
 	font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
 	margin: 0px 10px 0px 0;
-	width: 173px;
 }
 .submenu li a {
 	background-color: #222;
@@ -143,10 +142,6 @@
 	background-position: 4px 8px;
 }
 
-.menu {
-	width: 173px;
-
-}
 /* Icons specified here */
 #icon_oper-networkconsole {
  	background-image: url(../../images/op_network.png);
@@ -234,7 +229,6 @@
 #menu_container {
 	z-index: 3;
 	position: absolute;
-	left: -140px;
+	left: -80px;
 	background-color: #AAA;
-	height: 100%;
 }

pandora_console/include/styles/pandora.css

@@ -278,7 +278,7 @@ div#menu_container {
 }
 
 div#menu {
-	width: 165px;
+	width: 175px;
 	float: left;
 }
 
@@ -291,6 +291,14 @@ div#head {
 	background-color: #274C00;
 }
 
+.fixed_header {
+	z-index: 9999;
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+}
+
 div#foot {
 	font-size: 6pt !important;
 	border-top: solid 2px #222;
@@ -298,7 +306,6 @@ div#foot {
 	padding-bottom: 5px;
 	text-align: center;
 	background: #333333;
-	width: 960px;
 	height: 38px;
 	clear: both;
 	width: auto;
@@ -901,17 +908,10 @@ tr.disabled_row_user * {
 	padding: 6px 0px;
 	height: 14px;
 }
-.titop {
-	-moz-border-top-right-radius: 6px;
-	-webkit-border-top-right-radius: 6px;
-	border-top-right-radius: 6px;
-	heigth: 100px;
-}
 .tit, .titb {
 	font-weight: bold;
 	color: #fff;
 	text-align: center;
-	width: 173px;
 }
 
 .suc * {
@@ -1863,12 +1863,10 @@ div#page {
 div#main {
 	width: auto;
 	float: none;
-	padding-right: 0px;
+	margin-top: 10px;
-	padding-left: 0px;
+	margin-left: 185px;
-	padding-top: 0px;
+	margin-right: 10px;
-	padding-bottom: 20px;
+	padding-bottom: 10px;
-	margin-left: 182px;
-	margin-right: 20px;
 	background: #ECECEC;
 	min-width: 720px;
 }