Tupambae_Org/friendica_2021-01
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[frio] Improve Group Editing (#5349)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
mod/contacts.php
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,

43
mod/group.php
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']);

45
mod/nogroup.php
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');
}

35
src/Model/Contact.php
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));
}
/**

5
src/Model/Group.php
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'),

4
view/templates/group_edit.tpl
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}}

2
view/templates/group_side.tpl
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>

17
view/templates/groupeditor.tpl
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>

28
view/theme/frio/css/style.css
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;

8
view/theme/frio/js/theme.js
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";
}
}

15
view/theme/frio/templates/contact_block.tpl Normal file
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>

2
view/theme/frio/templates/contact_template.tpl
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"}}

4
view/theme/frio/templates/contacts-template.tpl
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>

2
view/theme/frio/templates/field_input.tpl
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>

42
view/theme/frio/templates/group_edit.tpl
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}}

35
view/theme/frio/templates/group_side.tpl
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>