aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--javascript/initialise_elgg.js111
-rw-r--r--views/default/canvas/layouts/widgets.php34
-rw-r--r--views/default/css.php233
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
*************************************** */