less html in mod/group.php, template for group members editor, quattro theme for group edit.

mod/group.php

@@ -76,14 +76,17 @@ function group_content(&$a) {
 	if($switchtotext === false)
 		$switchtotext = 400;
 
+	$tpl = get_markup_template('group_edit.tpl');
+	$context = array('$submit' => t('Submit'));
+
 	if(($a->argc == 2) && ($a->argv[1] === 'new')) {
-		$tpl = get_markup_template('group_new.tpl');
+		
-		$o .= replace_macros($tpl,array(
+		return replace_macros($tpl, $context + array(
-			'$desc' => t('Create a group of contacts/friends.'),
+			'$title' => t('Create a group of contacts/friends.'),
-			'$name' => t('Group Name: '),
+			'$gname' => array('groupname',t('Group Name: '),$group['name'], ''),
-			'$submit' => t('Submit')
 		));
-		return $o;
+
+
 	}
 
 	if(($a->argc == 3) && ($a->argv[1] === 'drop')) {
@@ -156,44 +159,37 @@ function group_content(&$a) {
 
 		$celeb = ((($a->user['page-flags'] == PAGE_SOAPBOX) || ($a->user['page-flags'] == PAGE_COMMUNITY)) ? true : false);
 
-		$tpl = get_markup_template('group_edit.tpl');
+		
-		$o .= replace_macros($tpl, array(
+		$context = $context + array(
-			'$gid' => $group['id'],
-			'$name' => $group['name'],
-			'$drop' => $drop_txt,
-			'$desc' => t('Click on a contact to add or remove.'),
 			'$title' => t('Group Editor'),
-			'$gname' => t('Group Name: '),
+			'$gname' => array('groupname',t('Group Name: '),$group['name'], ''),
-			'$submit' => t('Submit')
+			'$gid' => $group['id'],
-		));
+			'$drop' => $drop_txt,
+		);
 
 	}
 
 	if(! isset($group))
 		return;
 
-	$o .= '<div id="group-update-wrapper">';
+	$groupeditor = array(
-	if($change) 
+		'label_members' => t('Members'),
-		$o = '';
+		'members' => array(),
+		'label_contacts' => t('All Contacts'),
+		'contacts' => arraY(),
+	);
+		
 
-	$o .= '<h3>' . t('Members') . '</h3>';
-	$o .= '<div id="group-members">';
 	$textmode = (($switchtotext && (count($members) > $switchtotext)) ? true : false);
 	foreach($members as $member) {
 		if($member['url']) {
 			$member['click'] = 'groupChangeMember(' . $group['id'] . ',' . $member['id'] . '); return true;';
-			$o .= micropro($member,true,'mpgroup', $textmode);
+			$groupeditor['members'][] = micropro($member,true,'mpgroup', $textmode);
 		}
 		else
 			group_rmv_member(local_user(),$group['name'],$member['id']);
 	}
 
-	$o .= '</div><div id="group-members-end"></div>';
-	$o .= '<hr id="group-separator" />';
-	
-	$o .= '<h3>' . t('All Contacts') . '</h3>';
-	$o .= '<div id="group-all-contacts">';
-
 	$r = q("SELECT * FROM `contact` WHERE `uid` = %d AND `blocked` = 0 and `pending` = 0 and `self` = 0 ORDER BY `name` ASC",
 		intval(local_user())
 	);
@@ -203,19 +199,21 @@ function group_content(&$a) {
 		foreach($r as $member) {
 			if(! in_array($member['id'],$preselected)) {
 				$member['click'] = 'groupChangeMember(' . $group['id'] . ',' . $member['id'] . '); return true;';
-					$o .= micropro($member,true,'mpall', $textmode);
+				$groupeditor['contacts'][] = micropro($member,true,'mpall', $textmode);
 			}
 		}
 	}
 
-		$o .= '</div><div id="group-all-contacts-end"></div>';
+	$context['$groupeditor'] = $groupeditor;
+	$context['$desc'] = t('Click on a contact to add or remove.');
 
 	if($change) {
-		echo $o;
+		$tpl = get_markup_template('groupeditor.tpl');
+		echo replace_macros($tpl, $context);
 		killme();
 	}
-	$o .= '</div>';
+	
-	return $o;
+	return replace_macros($tpl, $context);
 
 }
 

view/group_edit.tpl

@@ -3,16 +3,20 @@
 
 <div id="group-edit-wrapper" >
 	<form action="group/$gid" id="group-edit-form" method="post" >
-<div id="group-edit-name-wrapper" >
+		
-<label id="group-edit-name-label" for="group-edit-name" >$gname</label>
+		{{ inc field_input.tpl with $field=$gname }}{{ endinc }}
-<input type="text" id="group-edit-name" name="groupname" value="$name" />
+		{{ if $drop }}$drop{{ endif }}
-</div>
-<div id="group-edit-name-end"></div>
-$drop
 		<div id="group-edit-submit-wrapper" >
 			<input type="submit" name="submit" value="$submit" >
 		</div>
-<div id="group-edit-desc">$desc</div>
 		<div id="group-edit-select-end" ></div>
 	</form>
 </div>
+
+
+{{ if $groupeditor }}
+	<div id="group-update-wrapper">
+		{{ inc groupeditor.tpl }}{{ endinc }}
+	</div>
+{{ endif }}
+{{ if $desc }}<div id="group-edit-desc">$desc</div>{{ endif }}

view/group_new.tpl

@@ -1,23 +0,0 @@
-
-
-
-<div id="group-new-wrapper" >
-<form action="group/new" method="post">
-
-<div id="group-new-text">
-<p>
-$desc
-
-<div id="group-new-input-wrapper">
-<label id="group-new-label" for="group-new-name" >$name</label>
-<input name="groupname" id="group-new-name" />
-</div>
-<div id="group-new-input-end" ></div>
-
-<div id="group-new-submit-wrapper" >
-<input type="submit" name="submit" value="$submit" />
-</form>
-</div>
-<div id="group-new-end"></div>
-
- 

view/groupeditor.tpl

@@ -0,0 +1,16 @@
+<div id="group">
+<h3>$groupeditor.label_members</h3>
+<div id="group-members" class="contact_list">
+{{ for $groupeditor.contacts as $c}} $c {{ endfor }}
+</div>
+<div id="group-members-end"></div>
+<hr id="group-separator" />
+</div>
+
+<div id="contacts">
+<h3>$groupeditor.label_contacts</h3>
+<div id="group-all-contacts" class="contact_list">
+{{ for $groupeditor.members as $m}} $m {{ endfor }}
+</div>
+<div id="group-all-contacts-end"></div>
+</div>

view/theme/quattro/colors.less

@@ -71,6 +71,8 @@
 @NoticeColor: @Grey1;
 @NoticeBackgroundColor: #511919;
 
+@FieldHelpColor: @Grey3;
+
 @ThreadBackgroundColor: #f6f7f8;
 @ShinyBorderColor: @Yellow1;
 

view/theme/quattro/quattro.less

@@ -890,6 +890,31 @@ ul.tabs {
 }
 
 
+/** group editor **/
+#group-edit-desc { margin-top: 1em; color: @FieldHelpColor; }
+#group-update-wrapper{
+	height: auto; overflow: auto;
+	#group {
+		width:300px; 
+		float:left;
+		margin-right:20px;
+	}
+	#contacts {
+		width:300px;
+		float:left;
+	}
+	#group-separator { display: none; }
+	.contact_list {
+		height: 300px;
+		border: 1px solid @MenuBorder;
+		overflow: auto;
+		.contact-block-div  {
+			width: 50px; height: 50px;
+			float: left;
+		}
+	}
+}
+
 /**
  * Form fields
  */
@@ -913,7 +938,7 @@ ul.tabs {
 	.field_help {
 		display: block;
 		margin-left: 200px;
-		color: #666666;
+		color: @FieldHelpColor;
 		
 	}
 

view/theme/quattro/style.css

@@ -1304,6 +1304,37 @@ ul.tabs li {
 ul.tabs li .active {
   border-bottom: 1px solid #005c94;
 }
+/** group editor **/
+#group-edit-desc {
+  margin-top: 1em;
+  color: #999999;
+}
+#group-update-wrapper {
+  height: auto;
+  overflow: auto;
+}
+#group-update-wrapper #group {
+  width: 300px;
+  float: left;
+  margin-right: 20px;
+}
+#group-update-wrapper #contacts {
+  width: 300px;
+  float: left;
+}
+#group-update-wrapper #group-separator {
+  display: none;
+}
+#group-update-wrapper .contact_list {
+  height: 300px;
+  border: 1px solid #364e59;
+  overflow: auto;
+}
+#group-update-wrapper .contact_list .contact-block-div {
+  width: 50px;
+  height: 50px;
+  float: left;
+}
 /**
  * Form fields
  */
@@ -1326,7 +1357,7 @@ ul.tabs li .active {
 .field .field_help {
   display: block;
   margin-left: 200px;
-  color: #666666;
+  color: #999999;
 }
 .field .onoff {
   float: left;