Merge pull request #8 from fabrixxm/master

expire settings, clean html from php, more work on quattro

21 files changed, 619 insertions, 73 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/include/items.php b/include/items.php
index 4e5617627..fd36dcadb 100644
--- a/include/items.php
+++ b/include/items.php
@@ -2814,14 +2814,27 @@ function item_expire($uid,$days) {
 
 	if(! count($r))
 		return;
+
+	$expire_items = get_pconfig($uid, 'expire','items');
+	$expire_items = (($expire_items===false)?1:intval($expire_items)); // default if not set: 1
+	
+	$expire_notes = get_pconfig($uid, 'expire','notes');
+	$expire_notes = (($expire_notes===false)?1:intval($expire_notes)); // default if not set: 1
+	
+	$expire_photos = get_pconfig($uid, 'expire','photos');
+	$expire_photos = (($expire_photos===false)?0:intval($expire_photos)); // default if not set: 0
  
-	logger('expire: # items=' . count($r) );
+	logger('expire: # items=' . count($r). "; expire items: $expire_items, expire notes: $expire_notes, expire photos: $expire_photos");
 
 	foreach($r as $item) {
 
 		// Only expire posts, not photos and photo comments
 
-		if(strlen($item['resource-id']))
+		if($expire_photos==0 && strlen($item['resource-id']))
+			continue;
+		if($expire_notes==0 && $item['type']=='note')
+			continue;
+		if($expire_items==0 && $item['type']!='note')
 			continue;
 
 		$r = q("UPDATE `item` SET `deleted` = 1, `edited` = '%s', `changed` = '%s' WHERE `id` = %d LIMIT 1",
@@ -2842,7 +2855,7 @@ function item_expire($uid,$days) {
 	}
 
 	proc_run('php',"include/notifier.php","expire","$uid");
-
+	
 }
 
 
diff --git a/js/main.js b/js/main.js
index 74e58e0e3..9741bfaec 100644
--- a/js/main.js
+++ b/js/main.js
@@ -78,6 +78,13 @@
 			menu.toggle();
 			return false;
 		});
+		
+		// fancyboxes
+		$("a.popupbox").fancybox({
+			'transitionIn' : 'elastic',
+			'transitionOut' : 'elastic'
+		});
+		
 
 		/* notifications template */
 		var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
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/mod/settings.php b/mod/settings.php
index a073a5e98..f51a484c8 100644
--- a/mod/settings.php
+++ b/mod/settings.php
@@ -215,6 +215,12 @@ function settings_post(&$a) {
 	$openid           = ((x($_POST,'openid_url')) ? notags(trim($_POST['openid_url']))   : '');
 	$maxreq           = ((x($_POST,'maxreq'))     ? intval($_POST['maxreq'])             : 0);
 	$expire           = ((x($_POST,'expire'))     ? intval($_POST['expire'])             : 0);
+	
+	
+	$expire_items     = ((x($_POST,'expire_items')) ? intval($_POST['expire_items'])	 : 0);
+	$expire_notes     = ((x($_POST,'expire_notes')) ? intval($_POST['expire_notes'])	 : 0);
+	$expire_photos    = ((x($_POST,'expire_photos'))? intval($_POST['expire_photos'])	 : 0);
+	
 
 	$allow_location   = (((x($_POST,'allow_location')) && (intval($_POST['allow_location']) == 1)) ? 1: 0);
 	$publish          = (((x($_POST,'profile_in_directory')) && (intval($_POST['profile_in_directory']) == 1)) ? 1: 0);
@@ -297,6 +303,10 @@ function settings_post(&$a) {
 			$openidserver = '';
 	}
 
+	set_pconfig(local_user(),'expire','items', $expire_items);
+	set_pconfig(local_user(),'expire','notes', $expire_notes);
+	set_pconfig(local_user(),'expire','photos', $expire_photos);
+
 	$r = q("UPDATE `user` SET `username` = '%s', `email` = '%s', `openid` = '%s', `timezone` = '%s',  `allow_cid` = '%s', `allow_gid` = '%s', `deny_cid` = '%s', `deny_gid` = '%s', `notify-flags` = %d, `page-flags` = %d, `default-location` = '%s', `allow_location` = %d, `theme` = '%s', `maxreq` = %d, `expire` = %d, `openidserver` = '%s', `blockwall` = %d, `hidewall` = %d, `blocktags` = %d  WHERE `uid` = %d LIMIT 1",
 			dbesc($username),
 			dbesc($email),
@@ -586,6 +596,15 @@ function settings_content(&$a) {
 	$blockwall = $a->user['blockwall'];
 	$blocktags = $a->user['blocktags'];
 
+	$expire_items = get_pconfig(local_user(), 'expire','items');
+	$expire_items = (($expire_items===false)?1:$expire_items); // default if not set: 1
+	
+	$expire_notes = get_pconfig(local_user(), 'expire','notes');
+	$expire_notes = (($expire_notes===false)?1:$expire_notes); // default if not set: 1
+	
+	$expire_photos = get_pconfig(local_user(), 'expire','photos');
+	$expire_photos = (($expire_photos===false)?0:$expire_photos); // default if not set: 0
+	
 	if(! strlen($a->user['timezone']))
 		$timezone = date_default_timezone_get();
 
@@ -698,7 +717,13 @@ function settings_content(&$a) {
 
 	$celeb = ((($a->user['page-flags'] == PAGE_SOAPBOX) || ($a->user['page-flags'] == PAGE_COMMUNITY)) ? true : false);
 
-	
+	$expire_arr = array(
+		'days' => array('expire',  t("Automatically expire posts after days:"), $expire, t('If empty, posts will not expire. Expired posts will be deleted')),
+		'advanced' => t('Advanced expire settings'),
+		'items' => array('expire_items',  t("Expire posts:"), $expire_items, '', array(t('No'),t('Yes'))),
+		'notes' => array('expire_notes',  t("Expire personal notes:"), $expire_notes, '', array(t('No'),t('Yes'))),
+		'photos' => array('expire_photos',  t("Expire photos:"), $expire_photos, '', array(t('No'),t('Yes'))),		
+	);
 
 	$o .= replace_macros($stpl,array(
 		'$tabs' 	=> $tabs,
@@ -736,7 +761,7 @@ function settings_content(&$a) {
 
 		'$blockwall'=> $blockwall, // array('blockwall', t('Allow friends to post to your profile page:'), !$blockwall, ''),
 		'$blocktags'=> $blocktags, // array('blocktags', t('Allow friends to tag your posts:'), !$blocktags, ''),
-		'$expire'	=> array('expire', t("Automatically expire posts after days:"), $expire, t('If empty, posts will not expire. Expired posts will be deleted')),
+		'$expire'	=> $expire_arr,
 
 		'$profile_in_dir' => $profile_in_dir,
 		'$profile_in_net_dir' => $profile_in_net_dir,
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 52f989f99..cd9d53963 100644
--- a/view/settings.tpl
+++ b/view/settings.tpl
@@ -55,18 +55,35 @@ $blockwall
 
 $blocktags
 
-{{inc field_input.tpl with $field=$expire }}{{endinc}}
+{{inc field_input.tpl with $field=$expire.days }}{{endinc}}
+<div class="field input">
+	<span class="field_help"><a href="#advaced-expire-popup" id="advenced-expire" class='popupbox' title="$expire.advanced">Advanced</a></span>
+	<div style="display: none;">
+		<div id="advaced-expire-popup" style="width:auto;height:auto;overflow:auto;">
+			<h3>$expire.advanced</h3>
+			{{ inc field_yesno.tpl with $field=$expire.items }}{{endinc}}
+			{{ inc field_yesno.tpl with $field=$expire.notes }}{{endinc}}
+		</div>
+	</div>
+
+</div>
+
 
 <div id="settings-default-perms" class="settings-default-perms" >
-	<div id="settings-default-perms-menu" class="fakelink" onClick="openClose('settings-default-perms-select');" >$permissions $permdesc</div>
+	<a href="#profile-jot-acl-wrapper" id="settings-default-perms-menu" class='popupbox'>$permissions $permdesc</a>
 	<div id="settings-default-perms-menu-end"></div>
 
 	<div id="settings-default-perms-select" style="display: none; margin-bottom: 20px" >
 	
-		$aclselect
+	<div style="display: none;">
+		<div id="profile-jot-acl-wrapper" style="width:auto;height:auto;overflow:auto;">
+			$aclselect
+		</div>
+	</div>
 
 	</div>
 </div>
+<br/>
 <div id="settings-default-perms-end"></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>