added collapsible state to widgets

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

diff --git a/js/lib/ui.widgets.js b/js/lib/ui.widgets.js
index a26be4154c8942ac16faa15ce8a8cf58a5a72d12..93de96407fc8968cba2fff40ee58e5ec5f3b38eb 100644 (file)
--- 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);\r
        $('a.widget_edit_button').click(elgg.ui.widgets.editToggle);\r
        $('.widget_edit > form ').submit(elgg.ui.widgets.saveSettings);\r
+       $('a.widget_collapse_button').click(elgg.ui.widgets.collapseToggle);\r
 \r
        elgg.ui.widgets.equalHeight(".widget_column");\r
 };\r
@@ -65,8 +66,11 @@ elgg.ui.widgets.add = function(event) {
                },\r
                success: function(json) {\r
                        $('#widget_col_1').prepend(json.output);\r
-                       $('#widget_col_1').children(":first").find('a.widget_delete_button').bind('click', elgg.ui.widgets.remove);\r
-                       $('#widget_col_1').children(":first").find('a.widget_edit_button').bind('click', elgg.ui.widgets.editToggle);\r
+                       var $widget = $('#widget_col_1').children(":first");\r
+                       $widget.find('a.widget_delete_button').click(elgg.ui.widgets.remove);\r
+                       $widget.find('a.widget_edit_button').click(elgg.ui.widgets.editToggle);\r
+                       $widget.find('a.widget_collapse_button').click(elgg.ui.widgets.collapseToggle);\r
+                       $widget.find('.widget_edit > form ').submit(elgg.ui.widgets.saveSettings);\r
                }\r
        });\r
        event.preventDefault();\r
@@ -108,7 +112,7 @@ elgg.ui.widgets.move = function(event, ui) {
  * @return void\r
  */\r
 elgg.ui.widgets.remove = function(event) {\r
-       var $widget = $(this).parent().parent().parent().parent();\r
+       var $widget = $(this).parent().parent();\r
 \r
        // if widget type is single instance type, enable the add buton\r
        var type = $widget.attr('class');\r
@@ -146,7 +150,19 @@ elgg.ui.widgets.remove = function(event) {
  * @return void\r
  */\r
 elgg.ui.widgets.editToggle = function(event) {\r
-       $(this).parent().parent().parent().parent().find('.widget_edit').slideToggle('medium');\r
+       $(this).parent().parent().find('.widget_edit').slideToggle('medium');\r
+       event.preventDefault();\r
+}\r
+\r
+/**\r
+ * Toogle the collapse state of the widget\r
+ *\r
+ * @param {Object} event\r
+ * @return void\r
+ */\r
+elgg.ui.widgets.collapseToggle = function(event) {\r
+       $(this).toggleClass('widget_collapsed');\r
+       $(this).parent().parent().find('.widget_container').slideToggle('medium');\r
        event.preventDefault();\r
 }\r
 \r

diff --git a/languages/en.php b/languages/en.php
index 09c025f2939a092aa5bd3f467a89ac781be8fac9..3d166789e30e849cd1122d6585ffa49f7539306c 100644 (file)
--- 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 4e38aadc0d8e662dce404852164da22623ef5ac5..97748b7ab5fccf5ce5a9d5f3e965d91d21c5eb79 100644 (file)
--- 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(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat 0px -385px;
 }
-a.widget_edit_button {
-       background:transparent url(<?php echo elgg_get_site_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(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -198px 3px;
 }
+a.widget_edit_button {
+       right: 25px;
+       background:transparent url(<?php echo elgg_get_site_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 4336a350664d4354c0ca2394b02cca7fe47edbcc..bd4af97a64bfa48d3bc6d2f6a42091cb94bb905d 100644 (file)
--- 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
-<ul>
-       <li>$delete_link</li>
-       <li>$edit_link</li>
-</ul>
+<div class="widget_controls">
+       $collapse_link
+       $delete_link
+       $edit_link
+</div>
 ___END;

diff --git a/views/default/widgets/wrapper.php b/views/default/widgets/wrapper.php
index 8d589aabd95912d4e5ef25fc8494369f23f47474..20faf85a8c73ed76fbd0c5f9d71f90310fc1956c 100644 (file)
--- a/views/default/widgets/wrapper.php
+++ b/views/default/widgets/wrapper.php
@@ -27,12 +27,12 @@ $widget_instance = "widget_instance_$handler";
 <div class="widget draggable <?php echo $widget_instance?>" id="<?php echo $widget_id; ?>">
        <div class="widget_title drag_handle">
                <h3><?php echo $title; ?></h3>
-               <?php
-               if ($can_edit) {
-                       echo elgg_view('widgets/controls', array('widget' => $widget));
-               }
-               ?>
        </div>
+       <?php
+       if ($can_edit) {
+               echo elgg_view('widgets/controls', array('widget' => $widget));
+       }
+       ?>
        <div class="widget_container">
                <?php
                if ($can_edit) {