aboutsummaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2008-06-27 17:37:27 +0000
committerpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2008-06-27 17:37:27 +0000
commit75f47976ec1fe0b8ddcc0fd7c99a6339bc9dfae8 (patch)
tree95fd9bcdf07414b1744e595b564ca58fa18125a3 /views
parentfb6eeea8c2f54f5fc719450d61b9359ba1ee9758 (diff)
downloadelgg-75f47976ec1fe0b8ddcc0fd7c99a6339bc9dfae8.tar.gz
elgg-75f47976ec1fe0b8ddcc0fd7c99a6339bc9dfae8.tar.bz2
new widget gallery
git-svn-id: https://code.elgg.org/elgg/trunk@1195 36083f99-b078-4883-b0ff-0f9b5a30f544
Diffstat (limited to 'views')
-rw-r--r--views/default/canvas/layouts/widgets.php34
-rw-r--r--views/default/css.php233
2 files changed, 170 insertions, 97 deletions
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
*************************************** */