new 3 column widget gallery (needs wiring up), profile page profile box alignment sorted, topbar menu tweaked and image added,

git-svn-id: https://code.elgg.org/elgg/trunk@1558 36083f99-b078-4883-b0ff-0f9b5a30f544

6 files changed, 213 insertions, 121 deletions

diff --git a/_graphics/tools_over.png b/_graphics/tools_over.png
new file mode 100644
index 000000000..46f0f8b05
--- /dev/null
+++ b/_graphics/tools_over.png
diff --git a/javascript/initialise_elgg.js b/javascript/initialise_elgg.js
index 220c19c6b..1ba222e0f 100644
--- a/javascript/initialise_elgg.js
+++ b/javascript/initialise_elgg.js
@@ -31,7 +31,7 @@ $(document).ready(function () {
 	//////////////////
 	// WIDGET GALLERY
 	// sortable widgets
-	var els = ['#main_widgets', '#rightsidebar_widgets', '#widget_picker_gallery'];
+	var els = ['#leftcolumn_widgets', '#middlecolumn_widgets', '#rightcolumn_widgets', '#widget_picker_gallery' ];
 	var $els = $(els.toString());
 	
 	$els.sortable({
@@ -45,14 +45,14 @@ $(document).ready(function () {
 		connectWith: els,
 		start:function(e,ui) {
 			// prevent droppable drop function from running when re-sorting main lists
-			//$('#rightsidebar_widgets').droppable("disable");
-			//$('#main_widgets').droppable("disable");	
+			//$('#middlecolumn_widgets').droppable("disable");
+			//$('#leftcolumn_widgets').droppable("disable");	
 		},
 		stop: function(e,ui) {	
 			// refresh list before updating hidden fields with new widget order		
 			$(this).sortable( "refresh" );
-			var widgetNameRight = outputWidgetList('#rightsidebar_widgets');
-			var widgetNameMain = outputWidgetList('#main_widgets');
+			var widgetNameRight = outputWidgetList('#middlecolumn_widgets');
+			var widgetNameMain = outputWidgetList('#leftcolumn_widgets');
 			document.getElementById('debugField1').value = widgetNameMain;
 			document.getElementById('debugField2').value = widgetNameRight;
 		}
@@ -63,11 +63,15 @@ $(document).ready(function () {
     widget_moreinfo();
 
 	// setup hover class for dragged widgets
-	$("#rightsidebar_widgets").droppable({
+	$("#rightcolumn_widgets").droppable({
 		accept: ".draggable_widget",
 		hoverClass: 'droppable-hover'
 	});
-	$("#main_widgets").droppable({
+	$("#middlecolumn_widgets").droppable({
+		accept: ".draggable_widget",
+		hoverClass: 'droppable-hover'
+	});
+	$("#leftcolumn_widgets").droppable({
 		accept: ".draggable_widget",
 		hoverClass: 'droppable-hover'
 	});
diff --git a/languages/en.php b/languages/en.php
index ec897ba96..a2d6d7d46 100644
--- a/languages/en.php
+++ b/languages/en.php
@@ -423,8 +423,10 @@
 			'widget' => "Widget",

 			'layout:customise' => "Customise layout",

 			'widgets:gallery' => "Widget gallery",

-			'widgets:maincontent' => "Main content area widgets",

-			'widgets:sidebar' => "Sidebar widgets",

+			'widgets:leftcolumn' => "Left widgets",

+			'widgets:middlecolumn' => "Middle widgets",

+			'widgets:rightcolumn' => "Right widgets",

+			'widgets:profilebox' => "Profile box",

 			'widgets:panel:save:success' => "Your widgets were successfully saved.",

 			'widgets:panel:save:failure' => "There was a problem saving your widgets. Please try again.",

 			'widgets:save:success' => "The widget was successfully saved.",

diff --git a/views/default/canvas/layouts/widgets.php b/views/default/canvas/layouts/widgets.php
index b8c06e132..7201d2e19 100644
--- a/views/default/canvas/layouts/widgets.php
+++ b/views/default/canvas/layouts/widgets.php
@@ -43,7 +43,7 @@
 
 ?>
 
-<table class="draggable_widget" cellspacing="0"><tr><td width="149px">
+<table class="draggable_widget" cellspacing="0"><tr><td>
 	<h3>
 		<?php echo $widget->name; ?>
 		<input type="hidden" name="multiple" value="<?php echo $widgettypes[$widget->handler]->multiple; ?>" />
@@ -80,12 +80,68 @@ Choose the features you want to add to your page by dragging them from the <b>Wi
 
 
 <div id="customise_page_view">
-<table>
-<tr>
+
+<table cellspacing="0">
+  <tr>
+    <td colspan="2" align="left" valign="top">
+    
+    
+    <h2 class="profile_box"><?php echo elgg_echo("widgets:profilebox"); ?></h2>
+    <div id="profile_box_widgets">
+    <p><small>(Fixed position on page)</small></p>
+    </div>
+    
+    </td>
+    
+    
+    <td rowspan="2" align="left" valign="top">
+		<h2><?php echo elgg_echo("widgets:rightcolumn"); ?></h2>
+		<div id="rightcolumn_widgets">
+		
+		<?php
+			$sidebarwidgetstring = "";
+			if (is_array($area2widgets) && sizeof($area2widgets) > 0) {
+				foreach($area2widgets as $widget) {
+					if (!empty($sidebarwidgetstring)) {
+						$sidebarwidgetstring .= "::";
+					}
+					$sidebarwidgetstring .= "{$widget->handler}::{$widget->getGUID()}";
+		?>
+		
+		<table class="draggable_widget" cellspacing="0"><tr><td width="149px">
+			<h3>
+				<?php echo $widgettypes[$widget->handler]->name; ?>
+				<input type="hidden" name="handler" value="<?php 
+					echo $widget->handler; 
+				?>" />
+				<input type="hidden" name="multiple" value="<?php echo $widgettypes[$widget->handler]->multiple; ?>" />
+				<input type="hidden" name="side" value="<?php echo in_array('side',$widgettypes[$widget->handler]->positions); ?>" />
+				<input type="hidden" name="main" value="<?php echo in_array('main',$widgettypes[$widget->handler]->positions); ?>" />
+				<input type="hidden" name="description" value="<?php echo htmlentities($widgettypes[$widget->handler]->description); ?>" />
+				<input type="hidden" name="guid" value="<?php echo $widget->getGUID(); ?>" />
+			</h3>
+		</td>
+		<td width="17px" align="right"><!-- <a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a> --></td>
+		<td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
+		<td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
+		</tr></table>
+		
+		<?php
+					
+				}
+			}
+		?>
+		
+		</div>
+    </td><!-- /rightcolumn td -->
+    
+  </tr>
+  
+  <tr>
 
 <td>
-<h2 class="mainwidgets"><?php echo elgg_echo("widgets:maincontent"); ?></h2>
-<div id="main_widgets">
+<h2><?php echo elgg_echo("widgets:leftcolumn"); ?></h2>
+<div id="leftcolumn_widgets">
 
 <?php
 	$mainwidgetstring = "";
@@ -125,8 +181,8 @@ Choose the features you want to add to your page by dragging them from the <b>Wi
 
 <td>
 
-<h2><?php echo elgg_echo("widgets:sidebar"); ?></h2>
-<div id="rightsidebar_widgets">
+<h2><?php echo elgg_echo("widgets:middlecolumn"); ?></h2>
+<div id="middlecolumn_widgets">
 
 <?php
 	$sidebarwidgetstring = "";
@@ -165,6 +221,11 @@ Choose the features you want to add to your page by dragging them from the <b>Wi
 </div>
 </td>
 
+
+
+
+
+
 </tr>
 </table>
 
diff --git a/views/default/css.php b/views/default/css.php
index 5562607f8..babcca1f0 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -657,7 +657,7 @@ a.toggle_customise_edit_panel:hover {
 
 /* Top area - instructions */
 .customise_editpanel_instructions {
-	width:510px;
+	width:690px;
 	padding:0 0 10px 0;
 }
 .customise_editpanel_instructions h2 {
@@ -671,7 +671,7 @@ a.toggle_customise_edit_panel:hover {
 /* RHS (widget gallery area) */
 #customise_editpanel_rhs {
 	float:right;
-	width:230px;
+	width:230px; /* was 230px */
 	background:white;
 }
 #customise_editpanel #customise_editpanel_rhs h2 {
@@ -684,8 +684,8 @@ a.toggle_customise_edit_panel:hover {
 	/* float:right;*/
 	border-top:1px solid #cccccc;
 	background:white;
-	width:210px;
-	height:350px;
+	width:210px; /* was 210px */
+	height:440px;
 	padding:10px;
 	overflow:scroll;
 	overflow-x:hidden;
@@ -693,7 +693,7 @@ a.toggle_customise_edit_panel:hover {
 
 /* main page widget area */
 #customise_page_view {
-	width:490px;
+	width:656px;
 	padding:10px;
 	margin:0 0 10px 0;
 	background:white;
@@ -704,36 +704,61 @@ a.toggle_customise_edit_panel:hover {
 	border-left:1px solid #cccccc;
 	margin:0;
 	padding:5px;
+	width:200px;
 	color: #0054a7;
 	background: #f5f5f5;
 	font-size:1.25em;
 	line-height: 1.2em;
 }
-#customise_page_view h2.mainwidgets {
-	width:255px;
+
+#profile_box_widgets {
+	width:422px;
+	margin:0 10px 10px 0;
+	padding:5px 5px 0px 5px;
+	min-height: 50px;
+	border:1px solid #cccccc;
+	background: #f5f5f5;
+}
+#customise_page_view h2.profile_box {
+	width:422px;
+	color: #999999;
+}
+#profile_box_widgets p {
+	color:#999999;
 }
 
-#main_widgets {
-	width:255px;
+#leftcolumn_widgets {
+	width:200px;
 	margin:0 10px 0 0;
 	padding:5px 5px 40px 5px;
 	min-height: 190px;
 	border:1px solid #cccccc;
 }
-#rightsidebar_widgets {
+#middlecolumn_widgets {
 	width:200px;
+	margin:0 10px 0 0;
 	padding:5px 5px 40px 5px;
 	min-height: 190px;
 	border:1px solid #cccccc;
 }
+#rightcolumn_widgets {
+	width:200px;
+	margin:0;
+	padding:5px 5px 40px 5px;
+	min-height: 288px;
+	border:1px solid #cccccc;
+}
 
 /* IE6 fix */
-* html #main_widgets { 
+* html #leftcolumn_widgets { 
 	height: 190px;
 }
-* html #rightsidebar_widgets { 
+* html #middlecolumn_widgets { 
 	height: 190px;
 }
+* html #rightcolumn_widgets { 
+	height: 338px;
+}
 
 #customise_editpanel table.draggable_widget {
 	width:200px;
@@ -759,7 +784,7 @@ a.toggle_customise_edit_panel:hover {
 }
 #widget_picker_gallery table.draggable_widget h3 {
 	word-wrap:break-word;
-	width:140px;
+	width:145px;/* was 140px */
 	line-height: 1.1em;
 	overflow: hidden;
 	padding:4px;
@@ -909,7 +934,7 @@ a.toggle_customise_edit_panel:hover {
     margin:20px 20px 0px 20px;
     z-index: 99999;
     position:absolute;
-    width:776px;
+    width:611px;
 }
 .messages_error {
     border:1px solid #D3322A;
@@ -919,7 +944,7 @@ a.toggle_customise_edit_panel:hover {
     margin:20px 20px 0px 20px;
     z-index: 99999;
     position:absolute;
-    width:776px;
+    width:611px;
 }
 /* IE6 fix */
 * html .messages { 
@@ -1362,6 +1387,7 @@ background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_priv
 table.search_gallery {
 	border-spacing: 5px;
 	margin:0 0 20px 0;
+	background: #f5f5f5;
 }
 .search_gallery td {
 	padding: 5px;
@@ -1370,12 +1396,18 @@ table.search_gallery {
 .search_gallery_item {
 	border:1px dotted silver;
     background-color: white;
-    width: 179px;
+    /*
+	width: 179px;
     height: 179px;
+	*/
 }
 .search_gallery_item:hover {
 	border:1px dotted black;
 }
+/* temp force image width until upload size is changed */
+.search_gallery_item img {
+    width: 153px;
+}
 
 .search_gallery_item .search_listing {
 	background: none;
@@ -1809,15 +1841,90 @@ div.expandall p {
 }	
 	
 	
-	
-/* temp. force profile pic size */	
-#profile_info_column_left #profile_icon_wrapper .usericon a.icon img {
-/*
-	width:276px;
 
-*/}
-	
+/* ***************************************
+	Top bar - tools menu
+*************************************** */
+#tools_menu, #tools_menu ul{
+	margin:0;
+	padding:0;
+	display:inline;
+	float:left;
+	list-style-type:none;
+	list-style-position:outside;
+	/*position:relative;
+	line-height:1.5em;*/
+	z-index: 999999;
+}
+
+#tools_menu {
+	margin:0pt 15px 0pt 5px;
+}
+
+#tools_menu a {
+	display:block;
+	padding:3px;
+	color:white;
+	text-decoration:none;
+}
+
+#tools_menu a:hover {
+	background-color:#4690d6;
+}
+.tools_menu_on {
+	background:#4690d6;
+}
+
+#tools_menu li {
+	float:left;
+	position:relative;
+}
+
+#tools_menu ul {
+	position:absolute;
+	display:none;
+	top:24px;
+	border-top:1px solid #333;
+	border-bottom:1px solid #4690d6;
 	
+	width:134px;
+}
+
+#tools_menu ul a {
+	border-left:1px solid #4690d6;
+	border-right:1px solid #4690d6;
+	color:#4690d6;
+	padding:2px 6px 2px 6px;
+	background: white;
+}
+
+#tools_menu ul a:hover {
+	color:white;
+	background: #4690d6 url(<?php echo $vars['url']; ?>_graphics/tools_over.png) repeat-x top left;
+}
+
+#tools_menu li ul a {
+	width:120px;
+	height:auto;
+	float:left;
+}
+
+#tools_menu ul ul{
+	top:auto;
+}	
+
+#tools_menu li ul ul {
+	left:120px;
+	margin:0px 0 0 13px;
+}
+
+#tools_menu li:hover ul ul, #tools_menu li:hover ul ul ul, #tools_menu li:hover ul ul ul ul{
+	display:none;
+
+}
+#tools_menu li:hover ul, #tools_menu li li:hover ul, #tools_menu li li li:hover ul, #tools_menu li li li li:hover ul{
+	display:block;
+}
 	
 	
 	
diff --git a/views/default/navigation/topbar_tools.php b/views/default/navigation/topbar_tools.php
index 3dd7c91dc..b6968d9ea 100644
--- a/views/default/navigation/topbar_tools.php
+++ b/views/default/navigation/topbar_tools.php
@@ -20,89 +20,7 @@
 		if (is_array($menu) && sizeof($menu) > 0) {

 		

 ?>

-<style type="text/css">

 

-

-#tools_menu, #tools_menu ul{

-	margin:0;

-	padding:0;

-	display:inline;

-	float:left;

-	list-style-type:none;

-	list-style-position:outside;

-	/*position:relative;

-	line-height:1.5em;*/

-	z-index: 999999;

-}

-

-#tools_menu {

-	margin:0pt 15px 0pt 5px;

-}

-

-#tools_menu a {

-	display:block;

-	padding:3px;

-	color:white;

-	text-decoration:none;

-}

-

-#tools_menu a:hover {

-	background-color:#4690d6;

-}

-.tools_menu_on {

-	background:#4690d6;

-}

-

-#tools_menu li {

-	float:left;

-	position:relative;

-}

-

-#tools_menu ul {

-	position:absolute;

-	display:none;

-	top:24px;

-	border-top:1px solid #333;

-	border-bottom:1px solid #333;

-	

-	width:134px;

-}

-

-#tools_menu ul a {

-	background:white;

-	border-left:1px solid #333;

-	border-right:1px solid #333;

-	color:#4690d6;

-	padding:6px;

-}

-

-#tools_menu ul a:hover {

-	color:white;

-}

-

-#tools_menu li ul a {

-	width:120px;

-	height:auto;

-	float:left;

-}

-

-#tools_menu ul ul{

-	top:auto;

-}	

-

-#tools_menu li ul ul {

-	left:120px;

-	margin:0px 0 0 13px;

-}

-

-#tools_menu li:hover ul ul, #tools_menu li:hover ul ul ul, #tools_menu li:hover ul ul ul ul{

-	display:none;

-

-}

-#tools_menu li:hover ul, #tools_menu li li:hover ul, #tools_menu li li li:hover ul, #tools_menu li li li li:hover ul{

-	display:block;

-}

-</style>

 <ul id="tools_menu">

     <li><a href="#">Tools</a>

       <ul>