new widget gallery

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

3 files changed, 235 insertions, 143 deletions

diff --git a/javascript/initialise_elgg.js b/javascript/initialise_elgg.js
index e19515f18..bde196913 100644
--- a/javascript/initialise_elgg.js
+++ b/javascript/initialise_elgg.js
@@ -27,36 +27,11 @@ $(document).ready(function () {
     }); 
     
     
-    // bind more info buttons (wrapped in a function so it can be called when new widgets are dragged/created)
-    //setupMoreInfoButton();
-    widget_moreinfo();
-    
-    // widget hover class
-	$("table.draggable_widget").bind("mouseenter mouseleave", function(e){
-		$(this).toggleClass("draggable_widget_over");
-	});
-       
-    
-	// remove widget button
-	$('img.remove_me').click(function () {
-		$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium", function () {
-			$(this).remove();
-			
-			var widgetNameMain = outputWidgetList('#main_widgets');
-			document.getElementById('debugField1').value = widgetNameMain;
-			
-			var widgetNameRight = outputWidgetList('#rightsidebar_widgets');
-			document.getElementById('debugField2').value = widgetNameRight;
-
-		  });
 
-		return false;
-    });
-
-	// draggable, droppable, and sortable elements
-	
+	//////////////////
+	// WIDGET GALLERY
 	// sortable widgets
-	var els = ['#main_widgets', '#rightsidebar_widgets'];
+	var els = ['#main_widgets', '#rightsidebar_widgets', '#widget_picker_gallery'];
 	var $els = $(els.toString());
 	
 	$els.sortable({
@@ -64,17 +39,18 @@ $(document).ready(function () {
 		handle: '.drag_handle',
 		cursor: 'move',
 		revert: true,
-		opacity: 0.8,
+		opacity: 1.0,
 		appendTo: 'body',
 		placeholder: 'placeholder',
 		connectWith: els,
-		start:function(e,ui) {	// prevent droppable drop function from running when resorting main lists
-			$('#rightsidebar_widgets').droppable("disable");
-			$('#main_widgets').droppable("disable");		
+		start:function(e,ui) {
+			// prevent droppable drop function from running when re-sorting main lists
+			//$('#rightsidebar_widgets').droppable("disable");
+			//$('#main_widgets').droppable("disable");	
 		},
-		stop: function(e,ui) {			
+		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');
 			document.getElementById('debugField1').value = widgetNameMain;
@@ -82,17 +58,57 @@ $(document).ready(function () {
 		}
 	});
 	
-	// define draggable widgets from gallery
-	$("#widget_picker_gallery .draggable_widget").draggable({
-		helper: 'clone',
-		containment: '#customise_editpanel',
-		start: function(ev, ui) {
-			$('#rightsidebar_widgets').droppable("enable");
-			$('#main_widgets').droppable("enable");
-		}
+    // bind more info buttons
+    // it's wrapped in a function so it can be called when new widgets are created
+    widget_moreinfo();
+
+	// setup hover class for dragged widgets
+	$("#rightsidebar_widgets").droppable({
+		accept: ".draggable_widget",
+		hoverClass: 'droppable-hover'
 	});
+	$("#main_widgets").droppable({
+		accept: ".draggable_widget",
+		hoverClass: 'droppable-hover'
+	});
+
+
+    /*
+    // widget hover class
+	$("table.draggable_widget").bind("mouseenter mouseleave", function(e){
+		$(this).toggleClass("draggable_widget_over");
+	});
+    
+*/
+/*
+
+	// remove widget button
+	$('img.remove_me').click(function () {
+		$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium", function () {
+			$(this).remove();
+			// updating hidden fields with new widget order
+			var widgetNameMain = outputWidgetList('#main_widgets');
+			document.getElementById('debugField1').value = widgetNameMain;
+			var widgetNameRight = outputWidgetList('#rightsidebar_widgets');
+			document.getElementById('debugField2').value = widgetNameRight;
+		  });
+
+		return false;
+    });
+
+*/	
+	// define draggable widgets from gallery
+	//$("#widget_picker_gallery .draggable_widget").draggable({
+	//	helper: 'clone',
+	//	containment: '#customise_editpanel',
+	//	start: function(ev, ui) {
+	//		$('#rightsidebar_widgets').droppable("enable");
+	//		$('#main_widgets').droppable("enable");
+	//	}
+	//});
 	
 	// define what happens when new widgets are dragged from the gallery 
+/*
 	$("#rightsidebar_widgets").droppable({
 		accept: ".draggable_widget",
 		hoverClass: 'droppable-hover',
@@ -118,6 +134,10 @@ $(document).ready(function () {
 			document.getElementById('debugField2').value = widgetNameRight;
 		 }
 	});
+
+*/	
+/*
+
 	$("#main_widgets").droppable({
 		accept: ".draggable_widget",
 		hoverClass: 'droppable-hover',
@@ -144,8 +164,9 @@ $(document).ready(function () {
 		 }
 	});
 
-    
-});
+
+*/    
+}); /* end document ready function */
 
 
 jQuery.fn.makeDelimitedList = function(elementAttribute) {
@@ -213,8 +234,6 @@ function widget_moreinfo() {
 
 		$("body").append("<p id='widget_moreinfo'><b>"+ widgetdescription +" </b></p>");
 		
-		// alert('e.pageX = '+e.pageX);
-		
 		if (e.pageX < 900) {
 			$("#widget_moreinfo")
 				.css("top",(e.pageY + 10) + "px")
diff --git a/views/default/canvas/layouts/widgets.php b/views/default/canvas/layouts/widgets.php
index dcc969b9e..e90d9f1b3 100644
--- a/views/default/canvas/layouts/widgets.php
+++ b/views/default/canvas/layouts/widgets.php
@@ -25,8 +25,10 @@
 
 <div id="customise_editpanel">
 
-<div id="widget_picker_gallery">
+<div id="customise_editpanel_rhs">
 <h2><?php echo elgg_echo("widgets:gallery"); ?></h2>
+<div id="widget_picker_gallery">
+
 
 <?php
 
@@ -42,7 +44,7 @@
 		<input type="hidden" name="guid" value="0" />
 	</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_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>
@@ -51,6 +53,19 @@
 	}
 ?>
 
+<br /><!-- bit of space at the bottom of the widget gallery -->
+
+</div><!-- /#customise_editpanel_rhs -->
+</div><!-- /#widget_picker_gallery -->
+
+
+<div class="customise_editpanel_instructions">
+<h2>Add widgets to your page</h2>
+<p>
+Choose the features you want to add to your page by dragging them from the <b>Widget gallery</b> to either the <b>Main content area</b> or the <b>Sidebar</b>, and position them where you would like them to appear.
+</p>
+<p>To remove a widget drag it back to the <b>Widget gallery</b>.
+</p>
 </div>
 
 
@@ -58,10 +73,10 @@
 <table>
 <tr>
 
-<td width="300px">
-
+<td>
+<h2 class="mainwidgets"><?php echo elgg_echo("widgets:maincontent"); ?></h2>
 <div id="main_widgets">
-<h2><?php echo elgg_echo("widgets:maincontent"); ?></h2>
+
 <?php
 	$mainwidgetstring = "";
 	if (is_array($area1widgets) && sizeof($area1widgets) > 0) {
@@ -82,7 +97,7 @@
 		<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_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>
@@ -95,9 +110,10 @@
 </div>
 </td>
 
-<td width="240px">
-<div id="rightsidebar_widgets">
+<td>
+
 <h2><?php echo elgg_echo("widgets:sidebar"); ?></h2>
+<div id="rightsidebar_widgets">
 
 <?php
 	$sidebarwidgetstring = "";
@@ -119,7 +135,7 @@
 		<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_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>
diff --git a/views/default/css.php b/views/default/css.php
index 7e0c902aa..1b2f37ceb 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -253,7 +253,7 @@ h6 { font-size: 0.8em; }
    color:white;
 }
 /* ***************************************
-  CUSTOMISE PANEL (PROFILE & DASHBOARD)
+  WIDGET PICKER (PROFILE & DASHBOARD)
 *************************************** */
 #customise_editpanel {
 	display:none;
@@ -261,26 +261,85 @@ h6 { font-size: 0.8em; }
 	padding:20px;
 	background: #dedede;
 }
+
+/* Top area - instructions */
+.customise_editpanel_instructions {
+	width:510px;
+	padding:0 0 10px 0;
+}
+.customise_editpanel_instructions h2 {
+	padding:0 0 10px 0;
+}
+.customise_editpanel_instructions p {
+	margin:0 0 5px 0;
+	line-height: 1.4em;
+}
+
+/* RHS (widget gallery area) */
+#customise_editpanel_rhs {
+	float:right;
+	width:230px;
+	background:white;
+}
+#customise_editpanel #customise_editpanel_rhs h2 {
+	color:#333333;
+	font-size: 1.4em;
+	margin:0;
+	padding:6px;
+}
+#widget_picker_gallery {
+	/* float:right;*/
+	border-top:1px solid #cccccc;
+	background:white;
+	width:210px;
+	height:350px;
+	padding:10px;
+	overflow:scroll;
+	overflow-x:hidden;
+}
+
+/* main page widget area */
 #customise_page_view {
 	width:490px;
 	padding:10px;
-	background:#666666;
+	margin:0 0 10px 0;
+	background:white;
+}
+#customise_page_view h2 {
+	border-top:1px solid #cccccc;
+	border-right:1px solid #cccccc;
+	border-left:1px solid #cccccc;
+	margin:0;
+	padding:5px;
+	color: #0054a7;
+	background: #f5f5f5;
+	font-size:1.25em;
+	line-height: 1.2em;
 }
+#customise_page_view h2.mainwidgets {
+	width:255px;
+}
+
 #main_widgets {
-	padding-bottom:40px;
-	min-height: 200px;
+	width:255px;
+	margin:0 10px 0 0;
+	padding:5px 5px 40px 5px;
+	min-height: 190px;
+	border:1px solid #cccccc;
 }
 #rightsidebar_widgets {
-	padding-bottom:40px;
-	min-height: 200px;
+	width:200px;
+	padding:5px 5px 40px 5px;
+	min-height: 190px;
+	border:1px solid #cccccc;
 }
-#customise_editpanel h2 {
-	color:white;
-	font-size: 1.2em;
+
+/* IE6 fix */
+* html #main_widgets { 
+	height: 190px;
 }
-#customise_editpanel #widget_picker_gallery h2 {
-	color:#333333;
-	font-size: 1.2em;
+* html #rightsidebar_widgets { 
+	height: 190px;
 }
 
 #customise_editpanel table.draggable_widget {
@@ -291,19 +350,6 @@ h6 { font-size: 0.8em; }
 	border:1px solid #cccccc;
 }
 
-.draggable_widget_over {
-	border: 1px solid white !important;
-}
-
-#widget_picker_gallery {
-	float:right;
-	border:1px solid black;
-	width:210px;
-	height:198px;
-	padding:10px;
-	overflow:auto;
-	overflow-x:hidden;
-}
 #widget_picker_gallery table.draggable_widget {
 	width:200px;
 	background: #cccccc;
@@ -344,18 +390,33 @@ h6 { font-size: 0.8em; }
 	display:none;
 	width: 200px;
 }
-.droppable-active {
-		
-}
+/* droppable area hover class  */
 .droppable-hover {
-	outline: 1px dotted white;
+	/* outline: 2px dotted red; */
+	background:#fdffc3;
 }
+/* target drop area class */
+.placeholder {
+	border:2px dashed #AAA;
+	width:196px !important;
+	margin: 10px 0 10px 0;
+}
+/* class of widget while dragging */
 .ui-sortable-helper {
-	background: lime;
+	background: #4690d6;
+	color:white;
 	padding: 4px;
 	margin: 10px 0 0 0;
 }
 /* IE6 fix */
+* html .placeholder { 
+	margin: 0;
+}
+/* IE7 */
+*:first-child+html .placeholder {
+	margin: 0;
+}
+/* IE6 fix */
 * html .ui-sortable-helper h3 { 
 	padding: 4px;
 }
@@ -370,10 +431,7 @@ h6 { font-size: 0.8em; }
 	padding-top: 4px;
 }
 
-.placeholder {
-	border:2px dashed #AAA;
-	margin: 10px 0 10px 0;
-}
+
 
 /* ***************************************
   TOPMENU (IN HEADER)
@@ -493,28 +551,7 @@ a.toggle_customise_edit_panel:hover {
     padding:3px 10px 3px 10px;
     margin:20px 20px 0px 20px;
 }
-

-/* ***************************************

-	COMMENTS

-*************************************** */

-

-.generic_comment {

-	margin-bottom: 50px;

-	padding-bottom: 10px;

-}

-.generic_comment_icon {

-	position: absolute;

-}

-.generic_comment_details {

-	margin-left: 60px;

-	border: 0px;

-	border-bottom: 1px;

-	border-style: solid;

-}

-.generic_comment_owner {

-	font-size: 80%;

-	margin: 0px;

-}
+
 
 /* ***************************************
 	ELGG TOOLBAR
@@ -816,40 +853,60 @@ p.user_menu_friends_of {
 .river_create {
 	background: url(<?php echo $vars['url']; ?>_graphics/dummy_river_icon.gif) no-repeat left top;
 }
-

-

-/* ***************************************

-	SEARCH LISTINGS	

-*************************************** */

-

-.search_listing {

-	display: block;

-	background-color: #eee;

-	padding: 5px;

-	margin-bottom: 10px;

-}

-

-.search_listing_icon {

-	position: absolute;

-}

-

-.search_listing_icon img {

-	width: 40px;

-}

-

-.search_listing_icon .avatar_menu_button img {

-	width: 15px;

-}

-	

-.search_listing_info {

-	margin-left: 60px;

-	height: 40px;

-}

-	

-.search_listing_info p {

-	margin: 0px;

+
+
+/* ***************************************
+	COMMENTS
+*************************************** */
+
+.generic_comment {
+	margin-bottom: 50px;
+	padding-bottom: 10px;
+}
+.generic_comment_icon {
+	position: absolute;
+}
+.generic_comment_details {
+	margin-left: 60px;
+	border: 0px;
+	border-bottom: 1px;
+	border-style: solid;
+}
+.generic_comment_owner {
+	font-size: 80%;
+	margin: 0px;
+}
+
+
+/* ***************************************
+	SEARCH LISTINGS	
+*************************************** */
+
+.search_listing {
+	display: block;
+	background-color: #eee;
+	padding: 5px;
+	margin-bottom: 10px;
+}
+
+.search_listing_icon {
+	position: absolute;
+}
+
+.search_listing_icon img {
+	width: 40px;
 }
 
+.search_listing_icon .avatar_menu_button img {
+	width: 15px;
+}
+	
+.search_listing_info {
+	margin-left: 60px;
+	height: 40px;
+}
+	
+
 /* ***************************************
 	STATUS
 *************************************** */