drag n drop interface test

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

4 files changed, 237 insertions, 25 deletions

diff --git a/views/default/css.php b/views/default/css.php
index 09e81b55a..4f59ab88c 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -24,8 +24,14 @@
   Globals

 */

 

+* {

+	/* border: 0; */

+	margin: 0;

+	padding: 0;

+}

+

 body {

-    background:#fff url(<?php echo $vars['url']; ?>/_graphics/header.gif) repeat-x; /* #d9e2f2  */

+    background:#ffffff; /* url(<?php echo $vars['url']; ?>/_graphics/header.gif) repeat-x; */

 	color:#697C83;

 	font-family:'Trebuchet MS','Lucida Grande', Arial, sans-serif;

 	text-align:left;

@@ -45,6 +51,10 @@ a {
 	color:#336699;

 }

 

+a:hover {

+	text-decoration:underline;

+}

+

 ol, ul {

 	color:#697C83;

 }

@@ -57,6 +67,8 @@ h2, h3, h4, h5 {
 	font-size:100%;

 }

 

+input { vertical-align:middle; }

+

 blockquote{

 	background: #EEE url(<?php echo $vars['url']; ?>/_graphics/blockquote.png) no-repeat bottom left;

 	padding: 10px;

@@ -98,31 +110,31 @@ div#container {
 */

 

 div#header {

-	margin:0;

-	padding:0;

+	margin:0 0 10px 0;

+	padding:5px;

 	text-align:left;

 	position:relative;

-	background:transparent;

+	background:#006699;

 	width:100%;

-	height:120px;

+	height:50px;

 }

 

 div#header h1 {

-	font-size:30px;

-	padding:20px 0 0 0;

-	margin:10px 0 6px 0;

+	font-size:20px;

+	padding:0;

+	margin:0;

 }

 

 div#header h2 {

-	font-size:20px;

-	padding:20px 0 0 0;

-	margin:10px 0 6px 0;

-	color: #fff;

+	font-size:16px;

+	padding:5px 0 0 0;

+	margin:0;

+	color:#ffffff;

 }

 

 div#header h1 a{

 	color:#fff;

-	font-family:Helvetica, "Myriad Web", Arial, sans-serif;

+	/* font-family:Helvetica, "Myriad Web", Arial, sans-serif;*/

 }

 

 /**** End header ****/

@@ -135,7 +147,8 @@ div#header h1 a{
     position:absolute;

     top:2px;

     right:10px;

-    width: 300px;

+    width: 500px;

+    text-align: right;

 }

 

 #topmenu li {

@@ -145,6 +158,11 @@ div#header h1 a{
 

 #topmenu li a {

     color:#fff;

+    margin:0 10px 0 10px;

+}

+

+#topmenu .usericon {

+	float:right;

 }

 

 /**** end top menu ****/

@@ -161,10 +179,21 @@ div#header h1 a{
 	background:#f5f5f5; /* url(<?php echo $vars['url']; ?>/_graphics/sidebar-top.gif) no-repeat top;*/

 }

 

+#sidebar_right {

+	width:380px;

+	min-height: 380px;

+	float:right;

+	margin: 0;

+	padding: 0;

+	border-top:1px solid white;

+}

+

 #mainContent {

-    margin:0 0 0 180px;

-    width:680px;

-    padding:20px;

+    margin:0 380px 0 170px;

+    width:380px;

+    min-height: 380px;

+    padding:0;

+    border-top:1px solid white;

 }

 

 #login-box {

@@ -233,7 +262,14 @@ div#footer a:link, div#footer a:visited {
 .input-tags,

 .input-url,

 .input-textarea {

-	width: 600px;

+	/* width: 600px;*/

+	width:95%;

+	font-weight: inherit;

+	font-style: inherit;

+	font-size: 100%;

+	line-height: 1.4;

+	font-family: inherit;

+	padding:5px;

 }

 

 .input-textarea {

@@ -284,6 +320,130 @@ div#footer a:link, div#footer a:visited {
 	background-color: #666666;

 }

 

+/* 

+	rounded corner widget boxes

+*/	

+.ui-sortable { color:#222; margin:0; padding:0 10px 10px; }

+.ui-sortable h2 {color:#555; font-size:11px; margin:0; line-height:2; padding:0; }

+

+.ui-sortable-helper {

+	/* width:150px !important; */

+}

+

+.placeholder {

+	border:2px dashed #AAA;

+	margin-left:-12px;

+}

+

+

+.sort {

+	margin:10px 0;

+	position:relative;

+	/* margin:0px auto;*/

+	z-index:1;

+	margin-left:12px; /* default, width of left corner */

+	margin-bottom:0.5em; /* spacing under box */

+}

+

+.sort h1 { 

+	color:#5d9ed6;

+	font-size:14px;

+	margin:0 43px 0 0; /* margin so edit buttons are not obscured */

+	cursor:move;

+	height:1.8em;

+	padding:8px 0 0 0;

+	position:relative;

+}

+

+.sort .content,

+.sort .t,

+.sort .b,

+.sort .b div {

+	background:transparent url(<?php echo $vars['url']; ?>/_graphics/box.png) no-repeat top right;

+	_background-image:url(<?php echo $vars['url']; ?>/_graphics/box.gif); /* for ie 6 as can't use AlphaImageLoader due to div width/height not being known */

+    /* _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/box.png', sizingMethod='crop'); */

+}

+

+.sort .content {

+	position:relative;

+	zoom:1;

+	_overflow-y:hidden;

+	padding:0 12px 0 0;

+}

+

+.sort .t {

+	/* top+left vertical slice */

+	position:absolute;

+	left:0px;

+	top:0px;

+	width:12px; /* top slice width */

+	margin-left:-12px;

+	height:100%;

+	_height:1600px; /* arbitrary long height, IE 6 */

+	background-position:top left;

+}

+

+.sort .b {

+	/* bottom */

+	position:relative;

+	width:100%;

+}

+

+.sort .b,

+.sort .b div {

+	height:6px; /* height of bottom round */

+	font-size:1px;

+}

+

+.sort .b {

+	background-position:bottom right;

+}

+

+.sort .b div {

+	position:relative;

+	width:12px; /* bottom corner width */

+	margin-left:-12px;

+	background-position:bottom left;

+}

+

+.sort p {

+	margin:0px;

+	padding:0.5em 0px 0.5em 0px;

+	line-height: 1.4em;

+	color:#555;

+}

+

+.editpanel {

+	background: #cccccc;

+	height: 100px;

+	display: none;

+}

+.button_editpanel {

+	z-index:1;

+	float:right;

+	/* background: url(images/ todo - add arrow graphic ) no-repeat right -50px; */

+	text-align: right;

+	padding: 10px 0 0 0;

+	cursor:pointer;

+	color: #cccccc;

+	text-decoration: none;

+	outline: none;

+	-moz-outline-style: none;

+}

+.active {

+	/* background-position: right 12px;*/

+	color: #666666;

+}

+a.togglepanel {

+	color: #cccccc;

+	cursor:pointer;

+	text-decoration:none;

+	float:right;

+	padding: 9px 0 0 8px;

+	font-weight: bold;

+	outline: none;

+	-moz-outline-style: none;

+}

 

 

 

diff --git a/views/default/navigation/topmenu.php b/views/default/navigation/topmenu.php
index 6e1ccd533..fe289a7ba 100644
--- a/views/default/navigation/topmenu.php
+++ b/views/default/navigation/topmenu.php
@@ -19,7 +19,7 @@
      if (isloggedin()) {

 ?>

 <div id="topmenu">

-	<div style="float:right">

+	<div class="usericon">

 	<?php

 

     	echo elgg_view("profile/icon",array('entity' => $vars['user'], 'size' => 'small'));

diff --git a/views/default/page_elements/header.php b/views/default/page_elements/header.php
index 7a44cd178..56bc98101 100644
--- a/views/default/page_elements/header.php
+++ b/views/default/page_elements/header.php
@@ -28,12 +28,18 @@
 		}

 		

 ?>

-<!DOCTYPE html PUBLIC Ò-//W3C//DTD XHTML 1.0 Transitional//ENÓ Òhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdÓ>

-<html xmlns=Óhttp://www.w3.org/1999/xhtmlÓ>

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 	<head>

+		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 		<title><?php echo $title; ?></title>

 		<!-- include links to jQuery here? -->

-		<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery.js"></script>

+		<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-1.2.4a.js"></script>

+		<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/ui.base.js"></script>

+		<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/ui.draggable.js"></script>

+		<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/ui.droppable.js"></script>

+		<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/ui.sortable.js"></script>

+		<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/init.js"></script>

 		<!-- include the default css file -->

 		<link rel="stylesheet" href="<?php echo $vars['url']; ?>_css/css.css" type="text/css" />

 	</head>

diff --git a/views/default/pageshells/pageshell.php b/views/default/pageshells/pageshell.php
index d0c043e03..3e800e468 100644
--- a/views/default/pageshells/pageshell.php
+++ b/views/default/pageshells/pageshell.php
@@ -40,11 +40,57 @@
     <div id="sidebar_menu">

         <?php echo elgg_view("navigation/toolbox", $vars); ?>

     </div>

+    

+<div id="sidebar_right" class="ui-sortable">

+	

+	<div class="sort">

+		<div class="content">

+			<!-- top/left PNG -->

+			<div class="t"></div>

+			<!-- box content -->

+			<a href="#" class="togglepanel">[-]</a>

+			<a href="#" class="button_editpanel">Edit</a>

+			<h1>title in here</h1>

+	

+				<div class="editpanel">

+				<p>Here's the edit controls for this widget</p>

+				</div>

+				<div class="panelcontent">

+					<?php echo $vars['body']; ?>

+				</div>

+		</div>

+		<!-- bottom PNG -->

+		<div class="b"><div></div></div>

+	</div>

+	

+</div><!-- /sidebar_right -->   

         

-	<!-- get the main body -->

-	<div id="mainContent">

-		<?php echo $vars['body']; ?>

+<!-- get the main body -->

+<div id="mainContent" class="ui-sortable">

+	

+	<div class="sort">

+		<div class="content">

+			<!-- top/left PNG -->

+			<div class="t"></div>

+			<!-- box content -->

+			<a href="#" class="togglepanel">[-]</a>

+			<a href="#" class="button_editpanel">Edit</a>

+			<h1>title in here</h1>

+	

+				<div class="editpanel">

+				<p>Here's the edit controls for this widget</p>

+				</div>

+				<div class="panelcontent">

+					<?php echo $vars['body']; ?>

+				</div>

+		</div>

+		<!-- bottom PNG -->

+		<div class="b"><div></div></div>

 	</div>

+	

+</div><!-- /mainContent -->	

+	

+	

 

 <!-- include the footer -->

 <?php echo elgg_view('page_elements/footer', $vars); ?>
\ No newline at end of file