From 40e5436604db8fb6cfdf3d73938c2a58dd7b4eef Mon Sep 17 00:00:00 2001 From: rabuzarus <> Date: Fri, 21 Apr 2017 16:04:29 +0200 Subject: [PATCH] some restructuring in groups.php + Frio: provide own group template --- mod/group.php | 148 +++++++++++------- view/templates/group_drop.tpl | 4 +- view/templates/groupeditor.tpl | 71 +++++++-- view/theme/frio/css/style.css | 85 +++++++++- view/theme/frio/js/mod_group.js | 86 ++++++++++ .../theme/frio/templates/contact_template.tpl | 41 +++-- view/theme/frio/templates/group_drop.tpl | 5 + view/theme/frio/templates/group_edit.tpl | 77 +++++++++ view/theme/frio/templates/groupeditor.tpl | 19 +++ 9 files changed, 443 insertions(+), 93 deletions(-) create mode 100644 view/theme/frio/js/mod_group.js create mode 100644 view/theme/frio/templates/group_drop.tpl create mode 100644 view/theme/frio/templates/group_edit.tpl create mode 100644 view/theme/frio/templates/groupeditor.tpl diff --git a/mod/group.php b/mod/group.php index e038d130a..ba6b5503b 100644 --- a/mod/group.php +++ b/mod/group.php @@ -1,38 +1,42 @@ page['aside'] = group_side('contacts','group','extended',(($a->argc > 1) ? intval($a->argv[1]) : 0)); + if (local_user()) { + require_once 'include/group.php'; + $a->page['aside'] = group_side('contacts', 'group', 'extended', (($a->argc > 1) ? intval($a->argv[1]) : 0)); } } - - function group_post(App $a) { if (! local_user()) { - notice( t('Permission denied.') . EOL); + notice(t('Permission denied.') . EOL); return; } - if(($a->argc == 2) && ($a->argv[1] === 'new')) { + if (($a->argc == 2) && ($a->argv[1] === 'new')) { check_form_security_token_redirectOnErr('/group/new', 'group_edit'); $name = notags(trim($_POST['groupname'])); - $r = group_add(local_user(),$name); + $r = group_add(local_user(), $name); if ($r) { - info( t('Group created.') . EOL ); - $r = group_byname(local_user(),$name); + info(t('Group created.') . EOL); + $r = group_byname(local_user(), $name); if ($r) { goaway(App::get_baseurl() . '/group/' . $r); } } else { - notice( t('Could not create group.') . EOL ); + notice(t('Could not create group.') . EOL); } goaway(App::get_baseurl() . '/group'); return; // NOTREACHED @@ -46,7 +50,7 @@ function group_post(App $a) { intval(local_user()) ); if (! dbm::is_result($r)) { - notice( t('Group not found.') . EOL ); + notice(t('Group not found.') . EOL); goaway(App::get_baseurl() . '/contacts'); return; // NOTREACHED } @@ -60,7 +64,7 @@ function group_post(App $a) { ); if ($r) { - info( t('Group name changed.') . EOL ); + info(t('Group name changed.') . EOL); } } @@ -73,17 +77,19 @@ function group_content(App $a) { $change = false; if (! local_user()) { - notice( t('Permission denied') . EOL); + notice(t('Permission denied') . EOL); return; } // Switch to text mode interface if we have more than 'n' contacts or group members - $switchtotext = get_pconfig(local_user(),'system','groupedit_image_limit'); - if($switchtotext === false) - $switchtotext = get_config('system','groupedit_image_limit'); - if($switchtotext === false) + $switchtotext = get_pconfig(local_user(), 'system', 'groupedit_image_limit'); + if ($switchtotext === false) { + $switchtotext = get_config('system', 'groupedit_image_limit'); + } + if ($switchtotext === false) { $switchtotext = 400; + } $tpl = get_markup_template('group_edit.tpl'); @@ -92,10 +98,9 @@ function group_content(App $a) { ); if (($a->argc == 2) && ($a->argv[1] === 'new')) { - return replace_macros($tpl, $context + array( '$title' => t('Create a group of contacts/friends.'), - '$gname' => array('groupname',t('Group Name: '), '', ''), + '$gname' => array('groupname', t('Group Name: '), '', ''), '$gid' => 'new', '$form_security_token' => get_form_security_token("group_edit"), )); @@ -115,13 +120,13 @@ function group_content(App $a) { $result = null; if (dbm::is_result($r)) { - $result = group_rmv(local_user(),$r[0]['name']); + $result = group_rmv(local_user(), $r[0]['name']); } if ($result) { - info( t('Group removed.') . EOL); + info(t('Group removed.') . EOL); } else { - notice( t('Unable to remove group.') . EOL); + notice(t('Unable to remove group.') . EOL); } } goaway(App::get_baseurl() . '/group'); @@ -135,66 +140,75 @@ function group_content(App $a) { intval($a->argv[2]), intval(local_user()) ); - if (dbm::is_result($r)) + if (dbm::is_result($r)) { $change = intval($a->argv[2]); + } } if (($a->argc > 1) && (intval($a->argv[1]))) { + require_once 'include/acl_selectors.php'; + require_once 'mod/contacts.php'; - require_once('include/acl_selectors.php'); $r = q("SELECT * FROM `group` WHERE `id` = %d AND `uid` = %d AND `deleted` = 0 LIMIT 1", intval($a->argv[1]), intval(local_user()) ); + if (! dbm::is_result($r)) { - notice( t('Group not found.') . EOL ); + notice(t('Group not found.') . EOL); goaway(App::get_baseurl() . '/contacts'); } + $group = $r[0]; $members = group_get_members($group['id']); $preselected = array(); - if(count($members)) { - foreach($members as $member) + $entry = array(); + $id = 0; + + if (count($members)) { + foreach ($members as $member) { $preselected[] = $member['id']; + } } - if($change) { - if(in_array($change,$preselected)) { - group_rmv_member(local_user(),$group['name'],$change); - } - else { - group_add_member(local_user(),$group['name'],$change); + if ($change) { + if (in_array($change, $preselected)) { + group_rmv_member(local_user(), $group['name'], $change); + } else { + group_add_member(local_user(), $group['name'], $change); } $members = group_get_members($group['id']); $preselected = array(); - if(count($members)) { - foreach($members as $member) + if (count($members)) { + foreach ($members as $member) { $preselected[] = $member['id']; + } } } - $drop_tpl = get_markup_template('group_drop.tpl'); $drop_txt = replace_macros($drop_tpl, array( '$id' => $group['id'], - '$delete' => t('Delete'), + '$delete' => t('Delete Group'), '$form_security_token' => get_form_security_token("group_drop"), )); $context = $context + array( '$title' => t('Group Editor'), - '$gname' => array('groupname',t('Group Name: '),$group['name'], ''), + '$gname' => array('groupname', t('Group Name: '), $group['name'], ''), '$gid' => $group['id'], '$drop' => $drop_txt, '$form_security_token' => get_form_security_token('group_edit'), + '$edit_name' => t('Edit Group Name') ); } - if(! isset($group)) + if (! isset($group)) { return; + } $groupeditor = array( 'label_members' => t('Members'), @@ -205,21 +219,24 @@ function group_content(App $a) { ); $sec_token = addslashes(get_form_security_token('group_member_change')); - $textmode = (($switchtotext && (count($members) > $switchtotext)) ? true : false); - foreach($members as $member) { - if($member['url']) { - $member['click'] = 'groupChangeMember(' . $group['id'] . ',' . $member['id'] . ',\'' . $sec_token . '\'); return true;'; - //$groupeditor['members'][] = micropro($member,true,'mpgroup', $textmode); - $groupeditor['members'][] = array ( - 'url' => $member['url'], - 'photo' => proxy_url($member['thumb'], false, PROXY_SIZE_THUMB), - 'name' => $member['name'], - 'title' => $member['name'] . ' [' . $contact['addr'] . ']', - + + // Format the data of the group members + foreach ($members as $member) { + if ($member['url']) { + $entry = _contact_detail_for_template($member); + $entry['label'] = 'members'; + $entry['photo_menu'] = ''; + $entry['change_member'] = array( + 'title' => t("Remove Contact"), + 'gid' => $group['id'], + 'cid' => $member['id'], + 'sec_token' => $sec_token ); + + $groupeditor['members'][] = $entry; + } else { + group_rmv_member(local_user(), $group['name'], $member['id']); } - else - group_rmv_member(local_user(),$group['name'],$member['id']); } $r = q("SELECT * FROM `contact` WHERE `uid` = %d AND NOT `blocked` AND NOT `pending` AND NOT `self` ORDER BY `name` ASC", @@ -227,11 +244,20 @@ function group_content(App $a) { ); if (dbm::is_result($r)) { - $textmode = (($switchtotext && (count($r) > $switchtotext)) ? true : false); - foreach($r as $member) { - if(! in_array($member['id'],$preselected)) { - $member['click'] = 'groupChangeMember(' . $group['id'] . ',' . $member['id'] . ',\'' . $sec_token . '\'); return true;'; - $groupeditor['contacts'][] = micropro($member,true,'mpall', $textmode); + // Format the data of the contacts who aren't in the contact group + foreach ($r as $member) { + if (! in_array($member['id'], $preselected)) { + $entry = _contact_detail_for_template($member); + $entry['label'] = 'contacts'; + $entry['photo_menu'] = ''; + $entry['change_member'] = array( + 'title' => t("Add Contact"), + 'gid' => $group['id'], + 'cid' => $member['id'], + 'sec_token' => $sec_token + ); + + $groupeditor['contacts'][] = $entry; } } } @@ -239,7 +265,11 @@ function group_content(App $a) { $context['$groupeditor'] = $groupeditor; $context['$desc'] = t('Click on a contact to add or remove.'); - if($change) { + // If there are to many contacts we could provide an alternative view mode + $total = count($groupeditor['members']) + count($groupeditor['contacts']); + $context['$shortmode'] = (($switchtotext && ($total > $switchtotext)) ? true : false); + + if ($change) { $tpl = get_markup_template('groupeditor.tpl'); echo replace_macros($tpl, $context); killme(); diff --git a/view/templates/group_drop.tpl b/view/templates/group_drop.tpl index 9b8ff9870..0e3c320a9 100644 --- a/view/templates/group_drop.tpl +++ b/view/templates/group_drop.tpl @@ -5,6 +5,8 @@ id="group-delete-icon-{{$id}}" class="icon drophide group-delete-icon" onmouseover="imgbright(this);" - onmouseout="imgdull(this);" > + onmouseout="imgdull(this);" + title="{{$delete}}"> +
diff --git a/view/templates/groupeditor.tpl b/view/templates/groupeditor.tpl index 86458ded2..28abc486e 100644 --- a/view/templates/groupeditor.tpl +++ b/view/templates/groupeditor.tpl @@ -1,21 +1,62 @@ +{{* Template for the contact group list *}} + +{{* The contacts who are already members of the contact group *}}
-

{{$groupeditor.label_members}}

-
-{{if $groupeditor.members }} - {{foreach $groupeditor.members as $c}} {{$c}} {{/foreach}} -{{else}} -{{$groupeditor.group_is_empty}} -{{/if}} -
-
-
+

{{$groupeditor.label_members}}

+
+ + {{if $groupeditor.members }} + + {{foreach $groupeditor.members as $c}} + {{* If there are too many contacts we use another view mode *}} + {{if $shortmode}} +
+ + {{$c.name}}" + +
+ {{else}} + {{* The normal view mode *}} +
+ + {{$c.name}} + +
+ {{/if}} + {{/foreach}} + + {{else}} + {{$groupeditor.group_is_empty}} + {{/if}} +
+ +
+
+{{* The contacts who are not members of the contact group *}}
-

{{$groupeditor.label_contacts}}

-
-{{foreach $groupeditor.contacts as $m}} {{$m}} {{/foreach}} -
-
+

{{$groupeditor.label_contacts}}

+
+ {{foreach $groupeditor.contacts as $m}} + {{* If there are too many contacts we use another view mode *}} + {{if $shortmode}} +
+ + {{$m.name}} + +
+ {{else}} + {{* The normal view mode *}} +
+ + {{$m.name}} + +
+ {{/if}} + {{/foreach}} +
+
+ diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 596b6de1e..e415009ca 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -164,6 +164,9 @@ code { padding: 8px 16px; color: inherit; } +a.btn:hover { + color: #333; +} .btn-default { background: #ededed; @@ -211,6 +214,12 @@ code { padding-left: 0; padding-right: 0; } +.btn-clear, +.btn-clear:active { + border: 0; + background: transparent; + box-shadow: none; +} .btn-eventnav, btn-eventnav:hover { font-size: 16px; background: none; @@ -1394,6 +1403,12 @@ section #jotOpen { border-radius: 4px; position: relative; } +.panel.panel-inline { + margin-left: -15px; + margin-right: -15px; + margin-top: 15px; + padding: 15px; +} .panel .panel-body { padding: 15px; font-size: 14px; @@ -1927,7 +1942,8 @@ ul.dropdown-menu li:hover { font-size: 12px; } .media-list > li:hover, -.media-list > li.selected { +.media-list > li.selected, +.media-list > li.active { border-left: 3px solid $link_color; background-color: rgba(247, 247, 247, $contentbg_transp); } @@ -2015,9 +2031,9 @@ ul.dropdown-menu li:hover { .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper, .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper, .message-content-wrapper, .apps-content-wrapper, .photos-content-wrapper, -.admin-content-wrapper, .group-content-wrapper, .viewcontacts-content-wrapper, -.dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper, -.nogroup-content-wrapper, .profperm-content-wrapper { +.admin-content-wrapper, .viewcontacts-content-wrapper, .dfrn_request-content-wrapper, +.friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper, +.profperm-content-wrapper { min-height: calc(100vh - 150px); padding: 15px; padding-bottom: 20px; @@ -2064,6 +2080,9 @@ ul.viewcontact_wrapper > li { position: relative;*/ /*border-left: 3px solid white;*/ } +.contact-wrapper .contact-photo-wrapper button { + padding: 0; +} .contact-wrapper.media { overflow: visible; word-wrap: break-word; @@ -2094,6 +2113,9 @@ ul.viewcontact_wrapper > li { .contact-wrapper .contact-photo-overlay-content.xl { font-size: 48px; } +.contact-wrapper .contact-photo-menu { + top: auto; +} .contact-entry-desc { color: #555; @@ -2167,6 +2189,61 @@ ul li:hover .contact-wrapper .contact-action-link:hover { padding-top: 10px; } +/* group edit page */ +.group-actions { + margin-top: 20px; + margin-bottom: 10px; + font-size: 30px; +} +.group-actions button, +.group-actions a { + font-size: 18px; +} +#group-edit-wrapper { + display: none; +} +#group-update-wrapper .contact-photo-overlay { + display: none; +} +#group-update-wrapper .viewcontact_wrapper .contact-group-actions { + height: 100%; + margin-top: -10px; + display: flex; +} +#group-update-wrapper .viewcontact_wrapper .contact-action-link { + opacity: 0.8; + font-size: 20px; + line-height: 50px; +} +#group-update-wrapper .viewcontact_wrapper .contact-action-link:hover { + opacity: 1; +} +#group-update-wrapper .shortmode { + height: 53px; + overflow: hidden; +} +#group-update-wrapper .shortmode .contact-photo { + height: 32px; + width: 32px; +} +#group-update-wrapper .shortmode .media { + overflow: hidden; +} +#group-update-wrapper .shortmode .contact-entry-desc { + font-size: 12px !important; +} +#group-update-wrapper .shortmode .contact-entry-desc h4.media-heading { + margin: 0; +} +#group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a { + font-size: 13px !important; + white-space: nowrap; +} +#group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel, +#group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network { + display: none; +} + /* private mail */ .message-content-wrapper > li { /* we need this overwriting because we have no template file diff --git a/view/theme/frio/js/mod_group.js b/view/theme/frio/js/mod_group.js new file mode 100644 index 000000000..17ed9ce46 --- /dev/null +++ b/view/theme/frio/js/mod_group.js @@ -0,0 +1,86 @@ + +/** + * @file view/theme/frio/js/mod_group.js + * @brief The javascript for the group module + */ + + +$(document).ready(function(){ + // Add an event listeners on buttons for switching the contact list view + $("body").on("click", ".group-list-switcher", function(){ + switchGroupViewMode(this); + }); +}); + +/** + * @brief Change the group membership of the contacts and fetch the new grup list + * as html + * + * @param {int} gid The group ID + * @param {int} cid The contact ID + * @param {string} sec_token The security token + * + * @returns {undefined} + */ +function groupChangeMember(gid, cid, sec_token) { + $(".tooltip").tooltip("hide"); + $("body").css("cursor", "wait"); + $.get('group/' + gid + '/' + cid + "?t=" + sec_token, function(data) { + // Insert the new group member list + $("#group-update-wrapper").html(data); + + // Apply the actual gropu list view mode to the new + // group list html + var activeMode = $(".group-list-switcher.active"); + switchGroupViewMode(activeMode[0]); + + $("body").css("cursor", "auto"); + }); +} + +/** + * @brief Change the group list view mode + * + * @param {object} elm The button element of the view mode switcher + * @returns {undefined} + */ +function switchGroupViewMode(elm) { + // Remove the active class from group list switcher buttons + $(".group-list-switcher").removeClass("active"); + // And add it to the active button element + $(elm).addClass("active"); + + // Add or remove the css classes for the group list with regard to the active view mode + if (elm.id === "group-list-small") { + $("#contact-group-list > li").addClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12"); + } else { + $("#contact-group-list > li").removeClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12"); + } +} + +/** + * @brief Filter the group member list for contacts + * + * @returns {undefined} + */ +function filterList() { + // Declare variables + var input, filter, ul, li, a, i; + input = document.getElementById("contacts-search"); + filter = input.value.toUpperCase(); + li = document.querySelectorAll("#contact-group-list>li"); + + // Loop through all list items, and hide those who don't match the search query + for (i = 0; i < li.length; i++) { + // Get the heading element + var mh = li[i].getElementsByClassName("media-heading")[0]; + // The first child of the heading element should contain + // the text which we want to filter + a = mh.firstChild; + if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { + li[i].style.display = ""; + } else { + li[i].style.display = "none"; + } + } +} diff --git a/view/theme/frio/templates/contact_template.tpl b/view/theme/frio/templates/contact_template.tpl index 5ae4fd4f7..637fe84cd 100644 --- a/view/theme/frio/templates/contact_template.tpl +++ b/view/theme/frio/templates/contact_template.tpl @@ -1,11 +1,11 @@ -
+
{{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}} -
-
+
+
- +
+ {{/if}} + {{* The contact description (e.g. Name, Network, kind of connection and so on *}}
-
+

{{$contact.name}} {{if $contact.account_type}} ({{$contact.account_type}}){{/if}} {{if $contact.account_type == 'Forum'}}{{/if}} {{* @todo this needs some changing in core because $contact.account_type contains a translated string which may notbe the same in every language *}}

- {{if $contact.alt_text}}
{{$contact.alt_text}}
{{/if}} - {{if $contact.itemurl}}
{{$contact.itemurl}}
{{/if}} + {{if $contact.alt_text}}
{{$contact.alt_text}}
{{/if}} + {{if $contact.itemurl}}
{{$contact.itemurl}}
{{/if}} {{if $contact.tags}}
{{$contact.tags}}
{{/if}} - {{if $contact.details}}
{{$contact.details}}
{{/if}} - {{if $contact.network}}
{{$contact.network}}
{{/if}} + {{if $contact.details}}
{{$contact.details}}
{{/if}} + {{if $contact.network}}
{{$contact.network}}
{{/if}}
{{* The checkbox to perform batch actions to these contacts (for batch actions have a look at contacts-template.tpl) *}} @@ -89,13 +102,13 @@ {{* the following part is a nearly a copy of the part above but it is modified for working with js. We use this part to filter the contacts with jquery.textcomplete *}}