more work on quattro. remove html from php for groups and saved searches widgets.

18 files changed, 549 insertions, 66 deletions

diff --git a/images/selected.png b/images/selected.png
new file mode 100644
index 000000000..79a7c77c6
--- /dev/null
+++ b/images/selected.png
diff --git a/include/group.php b/include/group.php
index 084cddcac..cae76eb6d 100644
--- a/include/group.php
+++ b/include/group.php
@@ -162,23 +162,20 @@ function group_side($every="contacts",$each="group",$edit = false, $group_id = 0
 	if(! local_user())
 		return '';
 
-	$createtext = t('Create a new group');
-	$linktext= t('Everybody');
-	$selected = (($group_id == 0) ? ' group-selected' : '');
-$o .= <<< EOT
-
-<div id="group-sidebar" class="widget">
-<h3>Groups</h3>
+	$groups = array();
+	
+	$groups[] = array(
+		'text' 	=> t('Everybody'),
+		'selected' => (($group_id == 0) ? 'group-selected' : ''),
+		'href' 	=> $every,
+	);
 
-<div id="sidebar-group-list">
-	<ul id="sidebar-group-ul">
-	<li class="sidebar-group-li" ><a href="$every" class="sidebar-group-element$selected" >$linktext</a></li>
 
-EOT;
 
 	$r = q("SELECT * FROM `group` WHERE `deleted` = 0 AND `uid` = %d ORDER BY `name` ASC",
 		intval($_SESSION['uid'])
 	);
+	$member_of = array();
 	if($cid) {
 		$member_of = groups_containing(local_user(),$cid);
 	} 
@@ -186,25 +183,38 @@ EOT;
 	if(count($r)) {
 		foreach($r as $rr) {
 			$selected = (($group_id == $rr['id']) ? ' group-selected' : '');
-			$o .= '	<li class="sidebar-group-li">' 
-			. (($edit) ? "<a href=\"group/{$rr['id']}\" title=\"" . t('Edit') 
-				. "\" class=\"groupsideedit\" ><span class=\"icon small-pencil\"></span></a> " : "") 
-			. (($cid) ? '<input type="checkbox" class="' . (($selected) ? 'ticked' : 'unticked') . '" onclick="contactgroupChangeMember(' . $rr['id'] . ',' . $cid . ');return true;" '
-				. ((in_array($rr['id'],$member_of)) ? ' checked="checked" ' : '') . '/>' : '')
-			. "<a href=\"$each/{$rr['id']}\" class=\"sidebar-group-element" . $selected ."\"  >{$rr['name']}</a></li>\r\n";
+			
+			if ($edit) {
+				$groupedit = array(
+					'href' => "group/".$rr['id'],
+					'title' => t('edit'),
+				);
+			} else {
+				$groupedit = null;
+			}
+			
+			$groups[] = array(
+				'id'		=> $rr['id'],
+				'cid'		=> $cid,
+				'text' 		=> $rr['name'],
+				'selected' 	=> $selected,
+				'href'		=> $each."/".$rr['id'],
+				'edit'		=> $groupedit,
+				'ismember'	=> in_array($rr['id'],$member_of),
+			);
 		}
 	}
-	$o .= "	</ul>\r\n	</div>";
-
-	$o .= <<< EOT
-
-  <div id="sidebar-new-group">
-  <a href="group/new">$createtext</a>
-  </div>
-</div>
 	
-EOT;
-
+	
+	$tpl = get_markup_template("group_side.tpl");
+	$o = replace_macros($tpl, array(
+		'$title'		=> t('Groups'),
+		'$createtext' 	=> t('Create a new group'),
+		'$groups'		=> $groups,
+		'$add'			=> t('add'),
+	));
+		
+	
 	return $o;
 }
 
@@ -246,4 +256,4 @@ function groups_containing($uid,$c) {
 	}
 
 	return $ret;
-}
\ No newline at end of file
+}
diff --git a/mod/network.php b/mod/network.php
index 9fed8592e..763b3693f 100644
--- a/mod/network.php
+++ b/mod/network.php
@@ -71,21 +71,30 @@ function saved_searches($search) {
 		intval(local_user())
 	);
 
-	$o .= '<div id="saved-search-list" class="widget">';
-	$o .= '<h3 id="search">' . t('Saved Searches') . '</h3>' . "\r\n";
-	$o .= search($search,'netsearch-box',$srchurl,true);
+	$saved = array();
+
+
 	
 	if(count($r)) {
-		$o .= '<ul id="saved-search-ul">' . "\r\n";
 		foreach($r as $rr) {
-			$o .= '<li class="saved-search-li clear"><a href="network/?f=&remove=1&search=' . $rr['term'] . '" class="icon drophide savedsearchdrop" title="' . t('Remove term') . '" onclick="return confirmDelete();" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a> <a href="network/?f=&search=' . urlencode($rr['term']) . '" class="savedsearchterm" >' . $rr['term'] . '</a></li>' . "\r\n";
+			$saved[] = array(
+				'term'			=> $rr['term'],
+				'encodedterm' 	=> urlencode($rr['term']),
+				'delete'		=> t('Remove term'),
+				'selected'		=> ($search==$rr['term']),
+			);
 		}
-		$o .= '</ul>';
 	}		
 
-	$o .= '<div class="clear"></div>';
-
-	$o .= '</div>' . "\r\n";
+	
+	$tpl = get_markup_template("saved_searches_aside.tpl");
+	$o = replace_macros($tpl, array(
+		'$title'	 => t('Saved Searches'),
+		'$add'		 => t('add'),
+		'$searchbox' => search($search,'netsearch-box',$srchurl,true),
+		'$saved' 	 => $saved,
+	));
+	
 	return $o;
 
 }
@@ -102,7 +111,7 @@ function network_content(&$a, $update = 0) {
 
 	// item filter tabs
 	// TODO: fix this logic, reduce duplication
-	$a->page['content'] .= '<div class="tabs-wrapper">';
+	//$a->page['content'] .= '<div class="tabs-wrapper">';
 	
 	$starred_active = '';
 	$new_active = '';
diff --git a/view/conversation.tpl b/view/conversation.tpl
index 446814959..86445aab8 100644
--- a/view/conversation.tpl
+++ b/view/conversation.tpl
@@ -5,9 +5,7 @@
 {{ endfor }}
 
 {{ if $dropping }}
-<div id="item-delete-selected" class="fakelink" onclick="deleteCheckedItems();">
-	<div id="item-delete-selected-icon" class="icon drophide" title="$dropping" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></div>
-	<div id="item-delete-selected-desc" >$dropping</div>
-</div>
-<div id="item-delete-selected-end"></div>
+<a href="#" onclick="deleteCheckedItems();return false;">
+	<span class="icon s22 delete text">$dropping</span>
+</a>
 {{ endif }}
diff --git a/view/group_side.tpl b/view/group_side.tpl
new file mode 100644
index 000000000..596a8d13f
--- /dev/null
+++ b/view/group_side.tpl
@@ -0,0 +1,29 @@
+<div id="group-sidebar" class="widget">
+	<div class="title tool">
+		<h3 class="label">$title</h3>
+		<a href="group/new" title="$createtext" class="action"><span class="icon text s16 add"> $add</span></a>
+	</div>
+
+	<div id="sidebar-group-list">
+		<ul>
+			{{ for $groups as $group }}
+			<li class="tool  {{ if $group.selected }}selected{{ endif }}">
+				<a href="$group.href" class="label">
+					$group.text
+				</a>
+				{{ if $group.edit }}
+					<a href="$group.edit.href" class="action"><span class="icon text s10 edit">$group.edit.title</span></a>
+				{{ endif }}
+				{{ if $group.cid }}
+					<input type="checkbox" 
+						class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" 
+						onclick="contactgroupChangeMember('$group.id','$group.cid');return true;"
+						{{ if $group.ismember }}checked="checked"{{ endif }}
+					/>
+				{{ endif }}
+			</li>
+			{{ endfor }}
+		</ul>
+	</div>
+</div>	
+
diff --git a/view/saved_searches_aside.tpl b/view/saved_searches_aside.tpl
new file mode 100644
index 000000000..9c10a26de
--- /dev/null
+++ b/view/saved_searches_aside.tpl
@@ -0,0 +1,15 @@
+<div id="saved-search-list" class="widget">
+	<h3 class="title">$title</h3>
+
+	<ul id="saved-search-ul">
+		{{ for $saved as $search }}
+			<li class="tool {{if $search.selected}}selected{{endif}}">
+					<a href="network/?f=&search=$search.encodedterm" class="label" >$search.term</a>
+					<a href="network/?f=&remove=1&search=$search.encodedterm" class="action icon s10 delete" title="$search.delete" onclick="return confirmDelete();"></a>
+			</li>
+		{{ endfor }}
+	</ul>
+	
+	$searchbox
+	
+</div>
diff --git a/view/settings.tpl b/view/settings.tpl
index e269d97f1..cd9d53963 100644
--- a/view/settings.tpl
+++ b/view/settings.tpl
@@ -63,7 +63,6 @@ $blocktags
 			<h3>$expire.advanced</h3>
 			{{ inc field_yesno.tpl with $field=$expire.items }}{{endinc}}
 			{{ inc field_yesno.tpl with $field=$expire.notes }}{{endinc}}
-			{{ inc field_yesno.tpl with $field=$expire.photos }}{{endinc}}			
 		</div>
 	</div>
 
diff --git a/view/theme/dispy/group_side.tpl b/view/theme/dispy/group_side.tpl
new file mode 100644
index 000000000..a1fc70a22
--- /dev/null
+++ b/view/theme/dispy/group_side.tpl
@@ -0,0 +1,28 @@
+<div class="widget" id="group-sidebar">
+<h3>$title</h3>
+
+<div id="sidebar-group-list">
+	<ul id="sidebar-group-ul">
+		{{ for $groups as $group }}
+			<li class="sidebar-group-li">
+				{{ if $group.cid }}
+					<input type="checkbox" 
+						class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" 
+						onclick="contactgroupChangeMember('$group.id','$group.cid');return true;"
+						{{ if $group.ismember }}checked="checked"{{ endif }}
+					/>
+				{{ endif }}			
+				{{ if $group.edit }}
+					<a class="groupsideedit" href="$group.edit.href"><span class="icon small-pencil"></span></a>
+				{{ endif }}
+				<a class="sidebar-group-element {{ if $group.selected }}group-selected{{ endif }}" href="$group.href">$group.text</a>
+			</li>
+		{{ endfor }}
+	</ul>
+	</div>
+  <div id="sidebar-new-group">
+  <a href="group/new">$createtext</a>
+  </div>
+</div>
+
+
diff --git a/view/theme/dispy/saved_searches_aside.tpl b/view/theme/dispy/saved_searches_aside.tpl
new file mode 100644
index 000000000..e2aae1e77
--- /dev/null
+++ b/view/theme/dispy/saved_searches_aside.tpl
@@ -0,0 +1,14 @@
+<div class="widget" id="saved-search-list">
+	<h3 id="search">$title</h3>
+	$searchbox
+	
+	<ul id="saved-search-ul">
+		{{ for $saved as $search }}
+		<li class="saved-search-li clear">
+			<a onmouseout="imgdull(this);" onmouseover="imgbright(this);" onclick="return confirmDelete();" class="icon savedsearchdrop drophide" href="network/?f=&amp;remove=1&amp;search=$search.encodedterm"></a>
+			<a class="savedsearchterm" href="network/?f=&amp;search=$search.encodedterm">$search.term</a>
+		</li>
+		{{ endfor }}
+	</ul>
+	<div class="clear"></div>
+</div>
diff --git a/view/theme/duepuntozero/group_side.tpl b/view/theme/duepuntozero/group_side.tpl
new file mode 100644
index 000000000..a1fc70a22
--- /dev/null
+++ b/view/theme/duepuntozero/group_side.tpl
@@ -0,0 +1,28 @@
+<div class="widget" id="group-sidebar">
+<h3>$title</h3>
+
+<div id="sidebar-group-list">
+	<ul id="sidebar-group-ul">
+		{{ for $groups as $group }}
+			<li class="sidebar-group-li">
+				{{ if $group.cid }}
+					<input type="checkbox" 
+						class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" 
+						onclick="contactgroupChangeMember('$group.id','$group.cid');return true;"
+						{{ if $group.ismember }}checked="checked"{{ endif }}
+					/>
+				{{ endif }}			
+				{{ if $group.edit }}
+					<a class="groupsideedit" href="$group.edit.href"><span class="icon small-pencil"></span></a>
+				{{ endif }}
+				<a class="sidebar-group-element {{ if $group.selected }}group-selected{{ endif }}" href="$group.href">$group.text</a>
+			</li>
+		{{ endfor }}
+	</ul>
+	</div>
+  <div id="sidebar-new-group">
+  <a href="group/new">$createtext</a>
+  </div>
+</div>
+
+
diff --git a/view/theme/duepuntozero/saved_searches_aside.tpl b/view/theme/duepuntozero/saved_searches_aside.tpl
new file mode 100644
index 000000000..e2aae1e77
--- /dev/null
+++ b/view/theme/duepuntozero/saved_searches_aside.tpl
@@ -0,0 +1,14 @@
+<div class="widget" id="saved-search-list">
+	<h3 id="search">$title</h3>
+	$searchbox
+	
+	<ul id="saved-search-ul">
+		{{ for $saved as $search }}
+		<li class="saved-search-li clear">
+			<a onmouseout="imgdull(this);" onmouseover="imgbright(this);" onclick="return confirmDelete();" class="icon savedsearchdrop drophide" href="network/?f=&amp;remove=1&amp;search=$search.encodedterm"></a>
+			<a class="savedsearchterm" href="network/?f=&amp;search=$search.encodedterm">$search.term</a>
+		</li>
+		{{ endfor }}
+	</ul>
+	<div class="clear"></div>
+</div>
diff --git a/view/theme/loozah/group_side.tpl b/view/theme/loozah/group_side.tpl
new file mode 100644
index 000000000..a1fc70a22
--- /dev/null
+++ b/view/theme/loozah/group_side.tpl
@@ -0,0 +1,28 @@
+<div class="widget" id="group-sidebar">
+<h3>$title</h3>
+
+<div id="sidebar-group-list">
+	<ul id="sidebar-group-ul">
+		{{ for $groups as $group }}
+			<li class="sidebar-group-li">
+				{{ if $group.cid }}
+					<input type="checkbox" 
+						class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" 
+						onclick="contactgroupChangeMember('$group.id','$group.cid');return true;"
+						{{ if $group.ismember }}checked="checked"{{ endif }}
+					/>
+				{{ endif }}			
+				{{ if $group.edit }}
+					<a class="groupsideedit" href="$group.edit.href"><span class="icon small-pencil"></span></a>
+				{{ endif }}
+				<a class="sidebar-group-element {{ if $group.selected }}group-selected{{ endif }}" href="$group.href">$group.text</a>
+			</li>
+		{{ endfor }}
+	</ul>
+	</div>
+  <div id="sidebar-new-group">
+  <a href="group/new">$createtext</a>
+  </div>
+</div>
+
+
diff --git a/view/theme/loozah/saved_searches_aside.tpl b/view/theme/loozah/saved_searches_aside.tpl
new file mode 100644
index 000000000..e2aae1e77
--- /dev/null
+++ b/view/theme/loozah/saved_searches_aside.tpl
@@ -0,0 +1,14 @@
+<div class="widget" id="saved-search-list">
+	<h3 id="search">$title</h3>
+	$searchbox
+	
+	<ul id="saved-search-ul">
+		{{ for $saved as $search }}
+		<li class="saved-search-li clear">
+			<a onmouseout="imgdull(this);" onmouseover="imgbright(this);" onclick="return confirmDelete();" class="icon savedsearchdrop drophide" href="network/?f=&amp;remove=1&amp;search=$search.encodedterm"></a>
+			<a class="savedsearchterm" href="network/?f=&amp;search=$search.encodedterm">$search.term</a>
+		</li>
+		{{ endfor }}
+	</ul>
+	<div class="clear"></div>
+</div>
diff --git a/view/theme/quattro/icons.less b/view/theme/quattro/icons.less
index 525ca48d8..f87327703 100644
--- a/view/theme/quattro/icons.less
+++ b/view/theme/quattro/icons.less
@@ -20,7 +20,7 @@
 .icon {
 	background-color: transparent ;
 	background-repeat: no-repeat;
-	background-position: center center;
+	background-position: left center;
 	display: block;
 	overflow: hidden;
 	text-indent: -9999px;
@@ -31,16 +31,19 @@
 	}
 
 	&.s10 {
-		width:10px; height: 10px;
+		min-width:10px; height: 10px;
 		.icons(10);
+		&.text { padding: 2px 0px 0px 15px;  }
 	}
 	&.s16 {
-		width:22px; height: 22px;
+		min-width:16px; height: 16px;
 		.icons(16);
+		&.text { padding: 4px 0px 0px 20px;  }
 	}
 	&.s22 {
-		width:22px; height: 22px;
+		min-width:22px; height: 22px;
 		.icons(22);
+		&.text { padding: 10px 0px 0px 25px;  }
 	}
 	&.s48 {
 		width:48px; height: 48px;
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index babcff3e8..235d38db5 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -42,12 +42,17 @@ a:hover {color: @LinkHover; text-decoration: underline; }
 .hidden { display: none; }
 
 
+/* tool */
+
 .tool {
 	height: auto; overflow: auto;
 	.label { float: left;}
 	.action { float: right; }
 }
 
+
+
+
 /* popup notifications */
 div.jGrowl div.notice {
 	background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
@@ -74,7 +79,7 @@ header {
 	}
 	
 	#banner {
-		
+		overflow: hidden;
 	    text-align: center;
 		width: 100%;
 		a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
@@ -228,6 +233,7 @@ ul.menu-popup {
 /* aside */
 aside { 
 	display: table-cell;
+	vertical-align: top;
 	width: 200px;
 	padding:0px 10px 0px 20px;
 	border-right: 1px solid @AsideBorder;
@@ -260,6 +266,7 @@ aside {
 
 	#profiles-menu { width: 20em; }
 
+
 }
 
 #contact-block {
@@ -277,11 +284,40 @@ aside {
 }
 
 
+/* widget */
+.widget {
+	margin-bottom: 2em;
+	
+	h3 { padding: 0px; margin: 2px;}
+	.action { .opaque(0.1); }
+	input.action { .opaque(0.5); }
+	&:hover .title .action { .opaque(1); }
+	.tool:hover .action { .opaque(1); }
+	.tool:hover .action.ticked { .opaque(1); }
+
+	ul { padding: 0px;}
+	ul li {padding-left: 16px; min-height: 16px; list-style: none; }
+	
+	.tool.selected {
+		background: url('../../../images/selected.png') no-repeat left center;
+	}
+	
+	/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
+	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+	
+}
+
+/* widget: search */
+#add-search-popup {
+	width: 200px;
+	top: 18px;
+}
 
 
 /* section */
 section { 
 	display: table-cell;
+	vertical-align: top;
 	width: 800px;
 	padding:0px 20px 0px 10px;
 }
@@ -472,14 +508,14 @@ section {
 	margin-top: 15px;
 }
 /** buttons **/
-input[type="submit"] {
+/*input[type="submit"] {
 	border: 0px;
     background-color: @ButtonBackgroundColor;
     color: @ButtonColor;
     padding: 0px 10px;
 	.rounded(5px);
     height: 18px;
-}
+}*/
 
 
 /** acl **/
@@ -589,6 +625,77 @@ ul.tabs {
     li {
         float: left;
         margin-left: 20px;
+        
+        .active {
+			border-bottom: 1px solid @LinkVisited;
+        }
     }
+    
 }
 
+
+/**
+ * Form fields
+ */
+.field {
+	margin-bottom: 10px;
+	padding-bottom: 10px;
+	overflow: auto;
+	width: 100%;
+
+
+	label {
+		float: left;
+		width: 200px;
+	}
+
+	input,
+	textarea {
+		width: 400px;
+	}
+	textarea { height: 100px; }
+	.field_help {
+		display: block;
+		margin-left: 200px;
+		color: #666666;
+		
+	}
+
+
+	.onoff {
+		float: left;
+		width: 80px;
+	}
+	.onoff a {
+		display: block;
+		border:1px solid #666666;
+		background-image:url("../../../images/onoff.jpg");
+		background-repeat: no-repeat;
+		padding: 4px 2px 2px 2px;
+		height: 16px;
+		text-decoration: none;
+	}
+	.onoff .off {
+		border-color:#666666;
+		padding-left: 40px;
+		background-position: left center;
+		background-color: #cccccc;
+		color: #666666;
+		text-align: right;
+	}
+	.onoff .on {
+		border-color:#204A87;
+		padding-right: 40px;
+		background-position: right center;
+		background-color: #D7E3F1;
+		color: #204A87;
+		text-align: left;
+	}
+	.hidden { display: none!important; }
+
+	&.radio .field_help { margin-left: 0px; }
+}
+
+
+/* page footer */
+footer { height: 100px; display: table-row; }
diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 560f53c2c..c13d21398 100644
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -5,7 +5,7 @@
 .icon {
   background-color: transparent ;
   background-repeat: no-repeat;
-  background-position: center center;
+  background-position: left center;
   display: block;
   overflow: hidden;
   text-indent: -9999px;
@@ -15,7 +15,7 @@
   text-indent: 0px;
 }
 .icon.s10 {
-  width: 10px;
+  min-width: 10px;
   height: 10px;
 }
 .icon.s10.notify {
@@ -48,9 +48,12 @@
 .icon.s10.unlock {
   background-image: url("../../../images/icons/10/unlock.png");
 }
+.icon.s10.text {
+  padding: 2px 0px 0px 15px;
+}
 .icon.s16 {
-  width: 22px;
-  height: 22px;
+  min-width: 16px;
+  height: 16px;
 }
 .icon.s16.notify {
   background-image: url("../../../images/icons/16/notify_off.png");
@@ -82,8 +85,11 @@
 .icon.s16.unlock {
   background-image: url("../../../images/icons/16/unlock.png");
 }
+.icon.s16.text {
+  padding: 4px 0px 0px 20px;
+}
 .icon.s22 {
-  width: 22px;
+  min-width: 22px;
   height: 22px;
 }
 .icon.s22.notify {
@@ -116,6 +122,9 @@
 .icon.s22.unlock {
   background-image: url("../../../images/icons/22/unlock.png");
 }
+.icon.s22.text {
+  padding: 10px 0px 0px 25px;
+}
 .icon.s48 {
   width: 48px;
   height: 48px;
@@ -180,6 +189,7 @@ a:hover {
 .hidden {
   display: none;
 }
+/* tool */
 .tool {
   height: auto;
   overflow: auto;
@@ -218,6 +228,7 @@ header #site-location {
   display: none;
 }
 header #banner {
+  overflow: hidden;
   text-align: center;
   width: 100%;
 }
@@ -430,6 +441,7 @@ ul.menu-popup .empty {
 /* aside */
 aside {
   display: table-cell;
+  vertical-align: top;
   width: 200px;
   padding: 0px 10px 0px 20px;
   border-right: 1px solid #bdcdd4;
@@ -506,9 +518,77 @@ aside #profiles-menu {
   float: left;
   margin: 0px 2px 2px 0px;
 }
+/* widget */
+.widget {
+  margin-bottom: 2em;
+  /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
+	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
+}
+.widget h3 {
+  padding: 0px;
+  margin: 2px;
+}
+.widget .action {
+  opacity: 0.1;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.widget input.action {
+  opacity: 0.5;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.widget:hover .title .action {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.widget .tool:hover .action {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.widget .tool:hover .action.ticked {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.widget ul {
+  padding: 0px;
+}
+.widget ul li {
+  padding-left: 16px;
+  min-height: 16px;
+  list-style: none;
+}
+.widget .tool.selected {
+  background: url('../../../images/selected.png') no-repeat left center;
+}
+/* widget: search */
+#add-search-popup {
+  width: 200px;
+  top: 18px;
+}
 /* section */
 section {
   display: table-cell;
+  vertical-align: top;
   width: 800px;
   padding: 0px 20px 0px 10px;
 }
@@ -743,16 +823,14 @@ section {
   margin-top: 15px;
 }
 /** buttons **/
-input[type="submit"] {
-  border: 0px;
-  background-color: #2d2d2d;
-  color: #ffffff;
-  padding: 0px 10px;
-  -moz-border-radius: 5px 5px 5px 5px;
-  -webkit-border-radius: 5px 5px 5px 5px;
-  border-radius: 5px 5px 5px 5px;
-  height: 18px;
-}
+/*input[type="submit"] {
+	border: 0px;
+    background-color: @ButtonBackgroundColor;
+    color: @ButtonColor;
+    padding: 0px 10px;
+	.rounded(5px);
+    height: 18px;
+}*/
 /** acl **/
 #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
   display: block!important;
@@ -866,3 +944,70 @@ ul.tabs li {
   float: left;
   margin-left: 20px;
 }
+ul.tabs li .active {
+  border-bottom: 1px solid #005c94;
+}
+/**
+ * Form fields
+ */
+.field {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  overflow: auto;
+  width: 100%;
+}
+.field label {
+  float: left;
+  width: 200px;
+}
+.field input, .field textarea {
+  width: 400px;
+}
+.field textarea {
+  height: 100px;
+}
+.field .field_help {
+  display: block;
+  margin-left: 200px;
+  color: #666666;
+}
+.field .onoff {
+  float: left;
+  width: 80px;
+}
+.field .onoff a {
+  display: block;
+  border: 1px solid #666666;
+  background-image: url("../../../images/onoff.jpg");
+  background-repeat: no-repeat;
+  padding: 4px 2px 2px 2px;
+  height: 16px;
+  text-decoration: none;
+}
+.field .onoff .off {
+  border-color: #666666;
+  padding-left: 40px;
+  background-position: left center;
+  background-color: #cccccc;
+  color: #666666;
+  text-align: right;
+}
+.field .onoff .on {
+  border-color: #204A87;
+  padding-right: 40px;
+  background-position: right center;
+  background-color: #D7E3F1;
+  color: #204A87;
+  text-align: left;
+}
+.field .hidden {
+  display: none!important;
+}
+.field.radio .field_help {
+  margin-left: 0px;
+}
+/* page footer */
+footer {
+  height: 100px;
+  display: table-row;
+}
diff --git a/view/theme/testbubble/group_side.tpl b/view/theme/testbubble/group_side.tpl
new file mode 100644
index 000000000..a1fc70a22
--- /dev/null
+++ b/view/theme/testbubble/group_side.tpl
@@ -0,0 +1,28 @@
+<div class="widget" id="group-sidebar">
+<h3>$title</h3>
+
+<div id="sidebar-group-list">
+	<ul id="sidebar-group-ul">
+		{{ for $groups as $group }}
+			<li class="sidebar-group-li">
+				{{ if $group.cid }}
+					<input type="checkbox" 
+						class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" 
+						onclick="contactgroupChangeMember('$group.id','$group.cid');return true;"
+						{{ if $group.ismember }}checked="checked"{{ endif }}
+					/>
+				{{ endif }}			
+				{{ if $group.edit }}
+					<a class="groupsideedit" href="$group.edit.href"><span class="icon small-pencil"></span></a>
+				{{ endif }}
+				<a class="sidebar-group-element {{ if $group.selected }}group-selected{{ endif }}" href="$group.href">$group.text</a>
+			</li>
+		{{ endfor }}
+	</ul>
+	</div>
+  <div id="sidebar-new-group">
+  <a href="group/new">$createtext</a>
+  </div>
+</div>
+
+
diff --git a/view/theme/testbubble/saved_searches_aside.tpl b/view/theme/testbubble/saved_searches_aside.tpl
new file mode 100644
index 000000000..e2aae1e77
--- /dev/null
+++ b/view/theme/testbubble/saved_searches_aside.tpl
@@ -0,0 +1,14 @@
+<div class="widget" id="saved-search-list">
+	<h3 id="search">$title</h3>
+	$searchbox
+	
+	<ul id="saved-search-ul">
+		{{ for $saved as $search }}
+		<li class="saved-search-li clear">
+			<a onmouseout="imgdull(this);" onmouseover="imgbright(this);" onclick="return confirmDelete();" class="icon savedsearchdrop drophide" href="network/?f=&amp;remove=1&amp;search=$search.encodedterm"></a>
+			<a class="savedsearchterm" href="network/?f=&amp;search=$search.encodedterm">$search.term</a>
+		</li>
+		{{ endfor }}
+	</ul>
+	<div class="clear"></div>
+</div>