From: Andreas Neustifter <andreas.neustifter@gmail.com>
Date: Mon, 9 Jul 2018 22:36:50 +0000 (+0200)
Subject: [frio] Improve Group Editing (#5349)
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=32ef5623ab8247162af93ef2f0bc6def6b2b8bf6;p=friendica.git

[frio] Improve Group Editing (#5349)

* Improve group-editing and edit-navigation.

Use icons next to groups and header for navigation to editing groups and adding new groups.
Also use icon from group-sidebar for editing groups.

* Unify look&feel of contact search bars.

* Remove nogroup page and replace with /group/none.

* Make sure proper items are selected in aside.

* Use icon instead of link for 'View Contacs' on profile page.

* Fix none-working /group/none.

* Fix highlighting for everyone in group aside.
---

diff --git a/mod/contacts.php b/mod/contacts.php
index 59b96d87a9..a4caafe8f9 100644
--- a/mod/contacts.php
+++ b/mod/contacts.php
@@ -87,7 +87,7 @@ function contacts_init(App $a)
 		$findpeople_widget = Widget::findPeople();
 	}
 
-	$groups_widget = Group::sidebarWidget('contacts', 'group', 'full', 0, $contact_id);
+	$groups_widget = Group::sidebarWidget('contacts', 'group', 'full', 'everyone', $contact_id);
 
 	$a->page['aside'] .= replace_macros(get_markup_template("contacts-widget-sidebar.tpl"), [
 		'$vcard_widget' => $vcard_widget,
diff --git a/mod/group.php b/mod/group.php
index 331b694874..05a358ba70 100644
--- a/mod/group.php
+++ b/mod/group.php
@@ -16,7 +16,7 @@ use Friendica\Model\Group;
 
 function group_init(App $a) {
 	if (local_user()) {
-		$a->page['aside'] = Group::sidebarWidget('contacts', 'group', 'extended', (($a->argc > 1) ? intval($a->argv[1]) : 0));
+		$a->page['aside'] = Group::sidebarWidget('contacts', 'group', 'extended', (($a->argc > 1) ? $a->argv[1] : 'everyone'));
 	}
 }
 
@@ -98,7 +98,8 @@ function group_content(App $a) {
 	$tpl = get_markup_template('group_edit.tpl');
 
 	$context = [
-			'$submit' => L10n::t('Save Group'),
+		'$submit' => L10n::t('Save Group'),
+		'$submit_filter' => L10n::t('Filter'),
 	];
 
 	if (($a->argc == 2) && ($a->argv[1] === 'new')) {
@@ -112,6 +113,29 @@ function group_content(App $a) {
 
 	}
 
+	if (($a->argc == 2) && ($a->argv[1] === 'none')) {
+		require_once 'mod/contacts.php';
+
+		$id = -1;
+		$nogroup = True;
+		$group = [
+			'id' => $id,
+			'name' => L10n::t('Contacts not in any group'),
+		];
+
+		$members = [];
+		$preselected = [];
+		$entry = [];
+
+		$context = $context + [
+			'$title' => $group['name'],
+			'$gname' => ['groupname', L10n::t('Group Name: '), $group['name'], ''],
+			'$gid' => $id,
+			'$editable' => 0,
+		];
+	}
+
+
 	if (($a->argc == 3) && ($a->argv[1] === 'drop')) {
 		check_form_security_token_redirectOnErr('/group', 'group_drop', 't');
 
@@ -199,12 +223,13 @@ function group_content(App $a) {
 
 
 		$context = $context + [
-			'$title' => L10n::t('Group Editor'),
+			'$title' => $group['name'],
 			'$gname' => ['groupname', L10n::t('Group Name: '), $group['name'], ''],
 			'$gid' => $group['id'],
 			'$drop' => $drop_txt,
 			'$form_security_token' => get_form_security_token('group_edit'),
-			'$edit_name' => L10n::t('Edit Group Name')
+			'$edit_name' => L10n::t('Edit Group Name'),
+			'$editable' => 1,
 		];
 
 	}
@@ -242,9 +267,14 @@ function group_content(App $a) {
 		}
 	}
 
-	$r = q("SELECT * FROM `contact` WHERE `uid` = %d AND NOT `blocked` AND NOT `pending` AND NOT `self` ORDER BY `name` ASC",
-		intval(local_user())
-	);
+	if ($nogroup) {
+		$r = Contact::getUngroupedList(local_user());
+	} else {
+		$r = q("SELECT * FROM `contact` WHERE `uid` = %d AND NOT `blocked` AND NOT `pending` AND NOT `self` ORDER BY `name` ASC",
+			intval(local_user())
+		);
+		$context['$desc'] = L10n::t('Click on a contact to add or remove.');
+	}
 
 	if (DBM::is_result($r)) {
 		// Format the data of the contacts who aren't in the contact group
@@ -252,13 +282,17 @@ function group_content(App $a) {
 			if (! in_array($member['id'], $preselected)) {
 				$entry = _contact_detail_for_template($member);
 				$entry['label'] = 'contacts';
-				$entry['photo_menu'] = '';
-				$entry['change_member'] = [
-					'title'     => L10n::t("Add contact to group"),
-					'gid'       => $group['id'],
-					'cid'       => $member['id'],
-					'sec_token' => $sec_token
-				];
+				if (!$nogroup)
+					$entry['photo_menu'] = [];
+
+				if (!$nogroup) {
+					$entry['change_member'] = [
+						'title'     => L10n::t("Add contact to group"),
+						'gid'       => $group['id'],
+						'cid'       => $member['id'],
+						'sec_token' => $sec_token
+					];
+				}
 
 				$groupeditor['contacts'][] = $entry;
 			}
@@ -266,7 +300,6 @@ function group_content(App $a) {
 	}
 
 	$context['$groupeditor'] = $groupeditor;
-	$context['$desc'] = L10n::t('Click on a contact to add or remove.');
 
 	// If there are to many contacts we could provide an alternative view mode
 	$total = count($groupeditor['members']) + count($groupeditor['contacts']);
diff --git a/mod/nogroup.php b/mod/nogroup.php
index 75781765e0..570164dce7 100644
--- a/mod/nogroup.php
+++ b/mod/nogroup.php
@@ -8,18 +8,13 @@ use Friendica\Core\L10n;
 use Friendica\Database\DBM;
 use Friendica\Model\Contact;
 use Friendica\Model\Group;
+use Friendica\Core\System;
 
 function nogroup_init(App $a)
 {
 	if (! local_user()) {
 		return;
 	}
-
-	if (! x($a->page, 'aside')) {
-		$a->page['aside'] = '';
-	}
-
-	$a->page['aside'] .= Group::sidebarWidget('contacts', 'group', 'extended');
 }
 
 function nogroup_content(App $a)
@@ -29,41 +24,5 @@ function nogroup_content(App $a)
 		return '';
 	}
 
-	$r = Contact::getUngroupedList(local_user());
-	if (DBM::is_result($r)) {
-		$a->set_pager_total($r[0]['total']);
-	}
-	$r = Contact::getUngroupedList(local_user(), $a->pager['start'], $a->pager['itemspage']);
-	if (DBM::is_result($r)) {
-		foreach ($r as $rr) {
-			$contact_details = Contact::getDetailsByURL($rr['url'], local_user(), $rr);
-
-			$contacts[] = [
-				'img_hover' => L10n::t('Visit %s\'s profile [%s]', $contact_details['name'], $rr['url']),
-				'edit_hover' => L10n::t('Edit contact'),
-				'photo_menu' => Contact::photoMenu($rr),
-				'id' => $rr['id'],
-				'thumb' => proxy_url($contact_details['thumb'], false, PROXY_SIZE_THUMB),
-				'name' => $contact_details['name'],
-				'username' => $contact_details['name'],
-				'details'       => $contact_details['location'],
-				'tags'          => $contact_details['keywords'],
-				'about'         => $contact_details['about'],
-				'itemurl' => (($contact_details['addr'] != "") ? $contact_details['addr'] : $rr['url']),
-				'url' => $rr['url'],
-				'network' => ContactSelector::networkToName($rr['network'], $rr['url']),
-			];
-		}
-	}
-
-	$tpl = get_markup_template("nogroup-template.tpl");
-	$o = replace_macros(
-		$tpl,
-		[
-		'$header' => L10n::t('Contacts who are not members of a group'),
-		'$contacts' => $contacts,
-		'$paginate' => paginate($a)]
-	);
-
-	return $o;
+	goaway(System::baseUrl() . '/group/none');
 }
diff --git a/src/Model/Contact.php b/src/Model/Contact.php
index 2fd451d6ae..1c6225a30a 100644
--- a/src/Model/Contact.php
+++ b/src/Model/Contact.php
@@ -696,49 +696,20 @@ class Contact extends BaseObject
 	 *
 	 * @return array
 	 */
-	public static function getUngroupedList($uid, $start = 0, $count = 0)
+	public static function getUngroupedList($uid)
 	{
-		if (!$count) {
-			$r = q(
-				"SELECT COUNT(*) AS `total`
-				 FROM `contact`
-				 WHERE `uid` = %d
-				 AND NOT `self`
-				 AND NOT `blocked`
-				 AND NOT `pending`
-				 AND `id` NOT IN (
-					SELECT DISTINCT(`contact-id`)
-					FROM `group_member`
-					WHERE `uid` = %d
-				)",
-				intval($uid),
-				intval($uid)
-			);
-
-			return $r;
-		}
-
-		$r = q(
-			"SELECT *
-			FROM `contact`
-			WHERE `uid` = %d
-			AND NOT `self`
-			AND NOT `blocked`
-			AND NOT `pending`
-			AND `id` NOT IN (
-				SELECT DISTINCT(`contact-id`)
-				FROM `group_member`
-				INNER JOIN `group` ON `group`.`id` = `group_member`.`gid`
-				WHERE `group`.`uid` = %d
-			)
-			LIMIT %d, %d",
-			intval($uid),
-			intval($uid),
-			intval($start),
-			intval($count)
-		);
-
-		return $r;
+		return q("SELECT *
+			   FROM `contact`
+			   WHERE `uid` = %d
+			   AND NOT `self`
+			   AND NOT `blocked`
+			   AND NOT `pending`
+			   AND `id` NOT IN (
+			   	SELECT DISTINCT(`contact-id`)
+			   	FROM `group_member`
+			   	INNER JOIN `group` ON `group`.`id` = `group_member`.`gid`
+			   	WHERE `group`.`uid` = %d
+			   )", intval($uid), intval($uid));
 	}
 
 	/**
diff --git a/src/Model/Group.php b/src/Model/Group.php
index 50a3affa19..79604e2ca0 100644
--- a/src/Model/Group.php
+++ b/src/Model/Group.php
@@ -361,7 +361,7 @@ class Group extends BaseObject
 	 * @param int $cid
 	 * @return string
 	 */
-	public static function sidebarWidget($every = 'contacts', $each = 'group', $editmode = 'standard', $group_id = 0, $cid = 0)
+	public static function sidebarWidget($every = 'contacts', $each = 'group', $editmode = 'standard', $group_id = '', $cid = 0)
 	{
 		$o = '';
 
@@ -373,7 +373,7 @@ class Group extends BaseObject
 			[
 				'text' => L10n::t('Everybody'),
 				'id' => 0,
-				'selected' => (($group_id == 0) ? 'group-selected' : ''),
+				'selected' => (($group_id === 'everyone') ? 'group-selected' : ''),
 				'href' => $every,
 			]
 		];
@@ -417,6 +417,7 @@ class Group extends BaseObject
 			'grouppage' => 'group/',
 			'$edittext' => L10n::t('Edit group'),
 			'$ungrouped' => $every === 'contacts' ? L10n::t('Contacts not in any group') : '',
+			'$ungrouped_selected' => (($group_id === 'none') ? 'group-selected' : ''),
 			'$createtext' => L10n::t('Create a new group'),
 			'$creategroup' => L10n::t('Group Name: '),
 			'$editgroupstext' => L10n::t('Edit groups'),
diff --git a/view/templates/group_edit.tpl b/view/templates/group_edit.tpl
index 6b72e776e0..cb9f4198b4 100644
--- a/view/templates/group_edit.tpl
+++ b/view/templates/group_edit.tpl
@@ -2,6 +2,7 @@
 <h2>{{$title}}</h2>
 
 
+{{if $editable == 1}}
 <div id="group-edit-wrapper" >
 	<form action="group/{{$gid}}" id="group-edit-form" method="post" >
 		<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
@@ -14,6 +15,7 @@
 		<div id="group-edit-select-end" ></div>
 	</form>
 </div>
+{{/if}}
 
 
 {{if $groupeditor}}
@@ -21,4 +23,4 @@
 		{{include file="groupeditor.tpl"}}
 	</div>
 {{/if}}
-{{if $desc}}<div id="group-edit-desc">{{$desc}}</div>{{/if}}
+{{if $desc}}<div class="clear" id="group-edit-desc">{{$desc}}</div>{{/if}}
diff --git a/view/templates/group_side.tpl b/view/templates/group_side.tpl
index 466882370f..5796bb735c 100644
--- a/view/templates/group_side.tpl
+++ b/view/templates/group_side.tpl
@@ -36,7 +36,7 @@
 	<div id="sidebar-edit-groups"><a href="{{$grouppage}}">{{$editgroupstext}}</a></div>
 	{{/if}}
 
-	{{if $ungrouped}}<div id="sidebar-ungrouped"><a href="nogroup">{{$ungrouped}}</a></div>{{/if}}
+	{{if $ungrouped}}<div id="sidebar-ungrouped"><a class="{{if $ungrouped_selected}}group-selected{{/if}}" href="nogroup">{{$ungrouped}}</a></div>{{/if}}
 </div>
 
 
diff --git a/view/templates/groupeditor.tpl b/view/templates/groupeditor.tpl
index bde686040b..0168a7a2d7 100644
--- a/view/templates/groupeditor.tpl
+++ b/view/templates/groupeditor.tpl
@@ -1,6 +1,7 @@
 
 {{* Template for the contact group list *}}
 
+{{if $editable == 1}}
 {{* The contacts who are already members of the contact group *}}
 <div id="group">
 	<h3>{{$groupeditor.label_members}}</h3>
@@ -34,27 +35,27 @@
 	<div id="group-members-end"></div>
 		<hr id="group-separator" />
 </div>
+{{/if}}
 
 {{* The contacts who are not members of the contact group *}}
 <div id="contacts">
 	<h3>{{$groupeditor.label_contacts}}</h3>
 	<div id="group-all-contacts" class="contact_list">
 		{{foreach $groupeditor.contacts as $m}}
-			{{* If there are too many contacts we use another view mode *}}
-			{{if $shortmode}}
 			<div class="contact-block-textdiv mpall">
+				{{if $editable == 1}}
 				<a class="contact-block-link mpall  fakelink" target="redir" onclick="groupChangeMember({{$m.change_member.gid}},{{$m.change_member.cid}},'{{$m.change_member.sec_token}}'); return true;" title="{{$m.name}} [{{$m.itemurl}}]" alt="{{$m.name}}">
-					{{$m.name}}
+				{{else}}
+				<a class="contact-block-link mpall" href="{{$m.url}}" title="{{$m.name}} [{{$m.itemurl}}]" alt="{{$m.name}}">
+				{{/if}}
+					{{* If there are too many contacts we use another view mode *}}
+					{{if $shortmode}}
+						{{$m.name}}
+					{{else}}
+						<img class="contact-block-img mpall " src="{{$m.thumb}}" title="{{$m.name}} [{{$m.itemurl}}]" alt="{{$m.name}}">
+					{{/if}}
 				</a>
 			</div>
-			{{else}}
-			{{* The normal view mode *}}
-			<div class="contact-block-div mpall">
-				<a class="contact-block-link mpall  fakelink" target="redir" onclick="groupChangeMember({{$m.change_member.gid}},{{$m.change_member.cid}},'{{$m.change_member.sec_token}}'); return true;">
-					<img class="contact-block-img mpall " src="{{$m.thumb}}" title="{{$m.name}} [{{$m.itemurl}}]" alt="{{$m.name}}">
-				</a>
-			</div>
-			{{/if}}
 		{{/foreach}}
 	</div>
 	<div id="group-all-contacts-end"></div>
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 9f5fe71766..3a757aa31e 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1021,7 +1021,7 @@ aside .widget li,
     padding-top: 2px;
     padding-bottom: 2px;
     padding-left: 20px;
-    padding-right: 20px;
+    padding-right: 10px;
 }
 aside .widget li:hover,
 aside .widget li.selected,
@@ -1220,13 +1220,29 @@ aside #follow-sidebar .form-group-search .form-button-search {
     padding: 2px 8px;
 }
 
+div#sidebar-group-header h3 {
+    float: left;
+}
+
+div#sidebar-group-list {
+    clear: both;
+}
+
+.group-new-form {
+    clear: both;
+}
+
+.group-edit-tool {
+    color: #555;
+}
 aside #group-sidebar .group-edit-tool,
 aside #saved-search-list .savedsearchdrop {
     opacity: 0.1;
     transition: all 0.25s ease-in-out;
 }
-aside #group-sidebar .sidebar-group-li:hover .group-edit-tool,
+aside #group-sidebar .group-edit-tool:hover,
 aside #saved-search-list .saved-search-li:hover .savedsearchdrop {
+    color: #555;
     opacity: 0.8;
     transition: all 0.25s ease-in-out;
 }
@@ -2308,7 +2324,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
 
 /* group edit page */
 .group-actions {
-    margin-top: 20px;
+    margin-top: 4px;
     margin-bottom: 10px;
     font-size: 30px;
 }
@@ -2321,8 +2337,12 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
 .contact-group-actions .fa-plus-circle { color: #008000;}
 
 #group-edit-wrapper {
+    margin-top: 14px;
     display: none;
 }
+#group-edit-header {
+    display: block;
+}
 #group-update-wrapper .contact-photo-overlay {
     display: none;
 }
@@ -2331,7 +2351,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     margin-top: -10px;
     display: flex;
 }
-#group-update-wrapper .viewcontact_wrapper .contact-action-link {
+#group-update-wrapper .viewcontact_wrapper .contact-group-link {
     opacity: 0.8;
     font-size: 20px;
     line-height: 50px;
diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 26c69ba37c..edbe713c67 100644
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -372,11 +372,13 @@ function openClose(theID) {
 }
 
 function showHide(theID) {
-	if(document.getElementById(theID).style.display == "block") {
-		document.getElementById(theID).style.display = "none"
+	var elem = document.getElementById(theID);
+
+	if( $(elem).is(':visible') ) {
+		elem.style.display = "none";
 	}
 	else {
-		document.getElementById(theID).style.display = "block"
+		elem.style.display = "block";
 	}
 }
 
diff --git a/view/theme/frio/templates/contact_block.tpl b/view/theme/frio/templates/contact_block.tpl
new file mode 100644
index 0000000000..e7b45cff3f
--- /dev/null
+++ b/view/theme/frio/templates/contact_block.tpl
@@ -0,0 +1,15 @@
+
+<div id="contact-block">
+	<h3 class="contact-block-h4 pull-left">{{$contacts}}</h3>
+{{if $micropro}}
+	<a class="pull-right" href="viewcontacts/{{$nickname}}">
+	<i class="faded-icon fa fa-eye" aria-hidden="true"></i><span class="sr-only">{{$viewcontacts}}</span>
+	</a>
+	<div class='contact-block-content'>
+	{{foreach $micropro as $m}}
+		{{$m}}
+	{{/foreach}}
+	</div>
+{{/if}}
+</div>
+<div class="clear"></div>
diff --git a/view/theme/frio/templates/contact_template.tpl b/view/theme/frio/templates/contact_template.tpl
index 8a52962045..e1c0a77009 100644
--- a/view/theme/frio/templates/contact_template.tpl
+++ b/view/theme/frio/templates/contact_template.tpl
@@ -84,7 +84,7 @@
 			{{* The button to add or remove contacts from a contact group - group edit page *}}
 			{{if $contact.change_member}}
 			<div class="contact-group-actions pull-right nav-pills preferences">
-				<button type="button" class="contact-action-link btn-link" onclick="groupChangeMember({{$contact.change_member.gid}},{{$contact.change_member.cid}},'{{$contact.change_member.sec_token}}'); return true;" data-toggle="tooltip" title="{{$contact.change_member.title}}">
+				<button type="button" class="contact-action-link contact-group-link btn-link" onclick="groupChangeMember({{$contact.change_member.gid}},{{$contact.change_member.cid}},'{{$contact.change_member.sec_token}}'); return true;" data-toggle="tooltip" title="{{$contact.change_member.title}}">
 					{{if $contact.label == "members"}}
 					<i class="fa fa-times-circle" aria-hidden="true"></i>
 					{{elseif $contact.label == "contacts"}}
diff --git a/view/theme/frio/templates/contacts-template.tpl b/view/theme/frio/templates/contacts-template.tpl
index ee4cc97477..6f64224015 100644
--- a/view/theme/frio/templates/contacts-template.tpl
+++ b/view/theme/frio/templates/contacts-template.tpl
@@ -16,14 +16,10 @@
 	<div id="contacts-search-wrapper">
 		<form id="contacts-search-form" class="navbar-form" role="search" action="{{$cmd}}" method="get" >
 			<div class="row">
-				<div class="col-md-2"></div>
-				<div class="col-md-8 ">
-					<div class="form-group form-group-search">
-						<input type="text" name="search" id="contacts-search" class="search-input form-control form-search" onfocus="this.select();" value="{{$search|escape:'html'}}" placeholder="{{$desc}}"/>
-						<button class="btn btn-default btn-sm form-button-search" type="submit" id="contacts-search-submit">{{$submit}}</button>
-					</div>
+				<div class="form-group form-group-search">
+					<input type="text" name="search" id="contacts-search" class="search-input form-control form-search" onfocus="this.select();" value="{{$search|escape:'html'}}" placeholder="{{$desc}}"/>
+					<button class="btn btn-default btn-sm form-button-search" type="submit" id="contacts-search-submit">{{$submit}}</button>
 				</div>
-				<div class="col-md-2"></div>
 			</div>
 		</form>
 	</div>
diff --git a/view/theme/frio/templates/field_input.tpl b/view/theme/frio/templates/field_input.tpl
index 62a7d72e83..6ea3923b92 100644
--- a/view/theme/frio/templates/field_input.tpl
+++ b/view/theme/frio/templates/field_input.tpl
@@ -1,6 +1,8 @@
 
 <div id="id_{{$field.0}}_wrapper" class="form-group field input">
+	{{if !isset($label) || $label != false }}
 	<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}{{if $field.4}}<span class="required"> {{$field.4}}</span>{{/if}}</label>
+	{{/if}}
 	<input class="form-control" name="{{$field.0}}" id="id_{{$field.0}}"{{if $field.6 eq "email"}} type="email"{{elseif $field.6 eq "url"}} type="url"{{else}} type="text"{{/if}} value="{{$field.2|escape:'html'}}"{{if $field.4 eq "required"}} required{{/if}}{{if $field.5 eq "autofocus"}} autofocus{{elseif $field.5}} {{$field.5}}{{/if}} aria-describedby="{{$field.0}}_tip">
 	{{if $field.3}}
 	<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
diff --git a/view/theme/frio/templates/group_edit.tpl b/view/theme/frio/templates/group_edit.tpl
index d94dd3311d..174c292e0f 100644
--- a/view/theme/frio/templates/group_edit.tpl
+++ b/view/theme/frio/templates/group_edit.tpl
@@ -7,54 +7,52 @@
 <script type="text/javascript" src="view/theme/frio/js/mod_group.js"></script>
 
 <div class="generic-page-wrapper">
-
+	{{if $editable == 1}}
 	{{* The buttons for editing the contact group (edit name / remove contact group) *}}
 	<div class="group-actions pull-right">
-		<button type="button" id="group-rename" class="btn btn-clear" onclick="openClose('group-edit-wrapper'); return false;" title="{{$edit_name}}" data-toggle="tooltip">
+		<button type="button" id="group-rename" class="btn btn-clear" onclick="showHide('group-edit-wrapper'); showHide('group-edit-header'); return false;" title="{{$edit_name}}" data-toggle="tooltip">
 			<i class="fa fa-pencil" aria-hidden="true"></i>
 		</button>
 		{{if $drop}}{{$drop}}{{/if}}
 	</div>
+	{{/if}}
+
+	<div class="section-title-wrapper">
+		<div id="group-edit-header">
+			<h2>{{$title}}</h2>
+		</div>
 
-	{{include file="section_title.tpl"}}
+		{{* Edit the name of the group *}}
+		<div id="group-edit-wrapper">
 
-	{{* Edit the name of the group *}}
-	<div id="group-edit-wrapper" class="panel panel-inline">
-		<form action="group/{{$gid}}" id="group-edit-form" method="post">
-			<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+			<form action="group/{{$gid}}" id="group-edit-form" method="post">
 
-			{{include file="field_input.tpl" field=$gname}}
-			<div id="group-edit-submit-wrapper" class="form-group pull-right">
-				<button class="btn btn-primary btn-small" type="submit" name="submit" value="{{$submit|escape:'html'}}">
-					{{$submit|escape:'html'}}
-				</button>
-			</div>
-			<div id="group-edit-select-end" class="clear"></div>
-		</form>
+				<div class="pull-left">
+				{{include file="field_input.tpl" field=$gname label=false}}
+				</div>
+				<div id="group-edit-submit-wrapper" class="form-group pull-right">
+					<button class="btn btn-primary btn-small" type="submit" name="submit" value="{{$submit|escape:'html'}}">
+						{{$submit|escape:'html'}}
+					</button>
+				</div>
+			</form>
+		</div>
+
+		<div class="clear"></div>
 	</div>
 
 	{{* The search input field to search for contacts *}}
 	<div id="contacts-search-wrapper">
-		<div id="contacts-search-form" class="navbar-form" role="search">
+		<form id="contacts-search-form" class="navbar-form" role="search" method="get" >
 			<div class="row">
-				<div class="col-md-2"></div>
-				<div class="col-md-8 ">
-					<div class="form-group form-group-search">
-						<input type="text"
-							name="filter"
-							id="contacts-search"
-							class="search-input form-control form-search"
-							onkeyup="filterList(); return false;"
-							onfocus="this.select(); return false;"
-						/>
-					</div>
+				<div class="form-group form-group-search">
+					<input type="text" name="search" id="contacts-search" class="search-input form-control form-search" onfocus="this.select();" onkeyup="filterList(); return false;" />
+					<button class="btn btn-default btn-sm form-button-search" onclick="filterList(); return false;">{{$submit_filter}}</button>
 				</div>
-				<div class="col-md-2"></div>
 			</div>
-		</div>
+		</form>
 	</div>
 
-	<hr>
 	<div id="contacts-search-end"></div>
 
 	{{if $groupeditor}}
diff --git a/view/theme/frio/templates/group_side.tpl b/view/theme/frio/templates/group_side.tpl
index 6a77a0ed93..8d94cd3020 100644
--- a/view/theme/frio/templates/group_side.tpl
+++ b/view/theme/frio/templates/group_side.tpl
@@ -1,6 +1,22 @@
 <div class="widget" id="group-sidebar">
+	<div id="sidebar-group-header">
 	<h3>{{$title}}</h3>
-
+	{{if ! $newgroup}}
+	<a class="group-edit-tool pull-right" href="{{$grouppage}}">
+	<i class="faded-icon fa fa-pencil" aria-hidden="true"></i><span class="sr-only">{{$editgroupstext}}</span>
+	</a>
+	{{else}}
+	<a class="group-edit-tool pull-right" id="sidebar-new-group" onclick="javascript:$('#group-new-form').fadeIn('fast');">
+	<i class="faded-icon fa fa-plus" aria-hidden="true"></i><span class="sr-only">{{$createtext}}</span>
+	</a>
+	<form id="group-new-form" action="group/new" method="post" style="display:none;">
+		<div class="form-group">
+			<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
+			<input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
+		</div>
+	</form>
+	{{/if}}
+	</div>
 	<div id="sidebar-group-list">
 		{{* The list of available groups *}}
 		<ul role="menu" id="sidebar-group-ul">
@@ -29,23 +45,10 @@
 					<a id="sidebar-group-element-{{$group.id}}" class="sidebar-group-element" href="{{$group.href}}">{{$group.text}}</a>
 				</li>
 			{{/foreach}}
+
+			{{if $ungrouped}}<li class="{{if $ungrouped_selected}}selected{{/if}} sidebar-group-li" id="sidebar-ungrouped"><a href="nogroup">{{$ungrouped}}</a></li>{{/if}}
 		</ul>
 	</div>
 
-	{{if $newgroup}}
-	<div id="sidebar-new-group">
-		{{* show the input field by clicking "new group" *}}
-		<button type="button" class="btn-link" onclick="javascript:$('#group-new-form').fadeIn('fast');">{{$createtext}}</button>
-		<form id="group-new-form" action="group/new" method="post" style="display:none;">
-			<div class="form-group">
-				<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
-				<input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
-			</div>
-		</form>
-	</div>
-	{{else}}
-	<div id="sidebar-edit-groups"><a href="{{$grouppage}}">{{$editgroupstext}}</a></div>
-	{{/if}}
 
-	{{if $ungrouped}}<div id="sidebar-ungrouped"><a href="nogroup">{{$ungrouped}}</a></div>{{/if}}
 </div>