[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.
This commit is contained in:
Andreas Neustifter 2018-07-10 00:36:50 +02:00 committed by Hypolite Petovan
parent 09b7e217c7
commit 32ef5623ab
16 changed files with 180 additions and 177 deletions

View file

@ -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,

View file

@ -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'));
}
}
@ -99,6 +99,7 @@ function group_content(App $a) {
$context = [
'$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) {
}
}
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'] = '';
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']);

View file

@ -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');
}

View file

@ -696,30 +696,9 @@ 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 *
return q("SELECT *
FROM `contact`
WHERE `uid` = %d
AND NOT `self`
@ -730,15 +709,7 @@ class Contact extends BaseObject
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;
)", intval($uid), intval($uid));
}
/**

View file

@ -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'),

View file

@ -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}}

View file

@ -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>

View file

@ -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}}
<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}}">
{{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}}
<div class="contact-block-textdiv 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;" title="{{$m.name}} [{{$m.itemurl}}]" alt="{{$m.name}}">
{{$m.name}}
</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}}">
{{/if}}
</a>
</div>
{{/if}}
{{/foreach}}
</div>
<div id="group-all-contacts-end"></div>

View file

@ -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;

View file

@ -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";
}
}

View file

@ -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>

View file

@ -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"}}

View file

@ -16,15 +16,11 @@
<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>
<div class="col-md-2"></div>
</div>
</form>
</div>

View file

@ -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>

View file

@ -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}}
{{include file="section_title.tpl"}}
<div class="section-title-wrapper">
<div id="group-edit-header">
<h2>{{$title}}</h2>
</div>
{{* 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}}'>
<div id="group-edit-wrapper">
{{include file="field_input.tpl" field=$gname}}
<form action="group/{{$gid}}" id="group-edit-form" method="post">
<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>
<div id="group-edit-select-end" class="clear"></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>
<div class="col-md-2"></div>
<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>
</form>
</div>
<hr>
<div id="contacts-search-end"></div>
{{if $groupeditor}}

View file

@ -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>