diff options
| -rw-r--r-- | javascript/initialise_elgg.js | 111 | ||||
| -rw-r--r-- | views/default/canvas/layouts/widgets.php | 34 | ||||
| -rw-r--r-- | views/default/css.php | 233 |
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 *************************************** */ |