From b827319a8b0c17ea362bf55548557862a04f0ba9 Mon Sep 17 00:00:00 2001 From: cash Date: Sat, 20 Nov 2010 22:19:11 +0000 Subject: added collapsible state to widgets git-svn-id: http://code.elgg.org/elgg/trunk@7392 36083f99-b078-4883-b0ff-0f9b5a30f544 --- js/lib/ui.widgets.js | 24 ++++++++++++++++++++---- languages/en.php | 2 +- views/default/css.php | 36 ++++++++++++++++++++---------------- views/default/widgets/controls.php | 17 +++++++++++++---- views/default/widgets/wrapper.php | 10 +++++----- 5 files changed, 59 insertions(+), 30 deletions(-) diff --git a/js/lib/ui.widgets.js b/js/lib/ui.widgets.js index a26be4154..93de96407 100644 --- a/js/lib/ui.widgets.js +++ b/js/lib/ui.widgets.js @@ -32,6 +32,7 @@ elgg.ui.widgets.init = function() { $('a.widget_delete_button').click(elgg.ui.widgets.remove); $('a.widget_edit_button').click(elgg.ui.widgets.editToggle); $('.widget_edit > form ').submit(elgg.ui.widgets.saveSettings); + $('a.widget_collapse_button').click(elgg.ui.widgets.collapseToggle); elgg.ui.widgets.equalHeight(".widget_column"); }; @@ -65,8 +66,11 @@ elgg.ui.widgets.add = function(event) { }, success: function(json) { $('#widget_col_1').prepend(json.output); - $('#widget_col_1').children(":first").find('a.widget_delete_button').bind('click', elgg.ui.widgets.remove); - $('#widget_col_1').children(":first").find('a.widget_edit_button').bind('click', elgg.ui.widgets.editToggle); + var $widget = $('#widget_col_1').children(":first"); + $widget.find('a.widget_delete_button').click(elgg.ui.widgets.remove); + $widget.find('a.widget_edit_button').click(elgg.ui.widgets.editToggle); + $widget.find('a.widget_collapse_button').click(elgg.ui.widgets.collapseToggle); + $widget.find('.widget_edit > form ').submit(elgg.ui.widgets.saveSettings); } }); event.preventDefault(); @@ -108,7 +112,7 @@ elgg.ui.widgets.move = function(event, ui) { * @return void */ elgg.ui.widgets.remove = function(event) { - var $widget = $(this).parent().parent().parent().parent(); + var $widget = $(this).parent().parent(); // if widget type is single instance type, enable the add buton var type = $widget.attr('class'); @@ -146,7 +150,19 @@ elgg.ui.widgets.remove = function(event) { * @return void */ elgg.ui.widgets.editToggle = function(event) { - $(this).parent().parent().parent().parent().find('.widget_edit').slideToggle('medium'); + $(this).parent().parent().find('.widget_edit').slideToggle('medium'); + event.preventDefault(); +} + +/** + * Toogle the collapse state of the widget + * + * @param {Object} event + * @return void + */ +elgg.ui.widgets.collapseToggle = function(event) { + $(this).toggleClass('widget_collapsed'); + $(this).parent().parent().find('.widget_container').slideToggle('medium'); event.preventDefault(); } diff --git a/languages/en.php b/languages/en.php index 09c025f29..3d166789e 100644 --- a/languages/en.php +++ b/languages/en.php @@ -224,7 +224,7 @@ $english = array( */ 'dashboard' => "Dashboard", - 'dashboard:nowidgets' => "Your dashboard lets you track activity and content on this site that matters to you.", + 'dashboard:nowidgets' => "Your dashboard lets you track the activity and content on this site that matters to you.", 'widgets:add' => 'Add widgets', 'widgets:add:description' => "Click on any widget button below to add it to your page.", diff --git a/views/default/css.php b/views/default/css.php index 4e38aadc0..97748b7ab 100644 --- a/views/default/css.php +++ b/views/default/css.php @@ -870,7 +870,7 @@ li.navigation_more ul li { width: 50%; } .widget_3_columns { - width: 33.3%; + width: 33%; } .widget_4_columns { width: 25%; @@ -911,6 +911,7 @@ li.navigation_more ul li { background-color: #dedede; padding: 2px; margin: 0 5px 15px; + position: relative; } .widget:hover { background-color: #cccccc; @@ -919,35 +920,38 @@ li.navigation_more ul li { background-color: #dedede; height: 30px; line-height: 30px; + overflow: hidden; } .widget_title h3 { float: left; - padding: 0 5px; + padding: 0 45px 0 20px; } -.widget_title ul, .widget_title li { - float: right; - margin: 0; - padding: 0; - list-style: none; -} -.widget_title li { - margin: 5px 2px; -} -.widget_title li a { +.widget_controls a { + position: absolute; + top: 5px; display: block; width: 18px; height: 18px; border: 1px solid transparent; } -.widget_title li a:hover { - border: 1px solid #cccccc; +a.widget_collapse_button { + left: 5px; + background:transparent url(_graphics/elgg_sprites.png) no-repeat 0px -385px; } -a.widget_edit_button { - background:transparent url(_graphics/elgg_sprites.png) no-repeat -300px -1px; +.widget_controls a.widget_collapsed { + background-position: 0px -365px; } a.widget_delete_button { + right: 5px; background:transparent url(_graphics/elgg_sprites.png) no-repeat -198px 3px; } +a.widget_edit_button { + right: 25px; + background:transparent url(_graphics/elgg_sprites.png) no-repeat -300px -1px; +} +a.widget_edit_button:hover, a.widget_delete_button:hover { + border: 1px solid #cccccc; +} .widget_container { background-color: white; width: 100%; diff --git a/views/default/widgets/controls.php b/views/default/widgets/controls.php index 4336a3506..bd4af97a6 100644 --- a/views/default/widgets/controls.php +++ b/views/default/widgets/controls.php @@ -8,6 +8,14 @@ $widget = $vars['widget']; +$params = array( + 'text' => ' ', + 'href' => "#", + 'class' => 'widget_collapse_button', + 'internalid' => "widget_collapse_button_$widget->guid" +); +$collapse_link = elgg_view('output/url', $params); + $params = array( 'text' => ' ', 'title' => elgg_echo('widget:delete', array($widget->getTitle())), @@ -28,8 +36,9 @@ $params = array( $edit_link = elgg_view('output/url', $params); echo <<<___END - +
+ $collapse_link + $delete_link + $edit_link +
___END; diff --git a/views/default/widgets/wrapper.php b/views/default/widgets/wrapper.php index 8d589aabd..20faf85a8 100644 --- a/views/default/widgets/wrapper.php +++ b/views/default/widgets/wrapper.php @@ -27,12 +27,12 @@ $widget_instance = "widget_instance_$handler";

- $widget)); - } - ?>
+ $widget)); + } + ?>