friendica
/
friendica
mirror of https://github.com/friendica/friendica
6
0
Fork 1
Code Issues Packages Projects Releases 1 Wiki Activity

Merge pull request #4068 from rabuzarus/20171215_-_frio_fix_contact_list 

frio: fix some contact list issues
This commit is contained in:
Hypolite Petovan 2017-12-15 15:04:48 -05:00 committed by GitHub
parent 39dcec66d8 0787f093d6
commit a3ea106662
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 97 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
view/theme/frio/js/mod_contacts.js Normal file
View File

@ -0,0 +1,60 @@
var batchConfirmed = false;
$(document).ready(function() {
// Add contact_filter autocompletion to the search field.
$("#contacts-search").contact_filter(baseurl + '/acl', 'r', true);
// Hide the viewcontact_wrapper if there is an input in the search field
// We are doing this to let the the contact_filter replace the original
// shown contacts.
$("#contacts-search").keyup(function(){
var elText = $(this).val();
if (elText.length !== 0) {
$("#viewcontact_wrapper").hide();
$("ul.textcomplete-dropdown").addClass("show media-list");
} else {
$("#viewcontact_wrapper").show();
$("ul.textcomplete-dropdown").removeClass("show");
}
});
// Initiale autosize for the textareas.
autosize($("textarea.text-autosize"));
// Replace the drop contact link of the photo menu
// with a confirmation modal.
$("body").on("click", ".contact-photo-menu a", function(e) {
var photoMenuLink = $(this).attr('href');
if (typeof photoMenuLink !== "undefined" && photoMenuLink.indexOf("/drop?confirm=1") !== -1) {
e.preventDefault();
addToModal(photoMenuLink);
return false;
}
});
});
/**
* @brief This function submits the form with the batch action values.
*
* @param {string} name The name of the batch action.
* @param {string} value If it isn't empty the action will be posted.
*
* @return {void}
*/
function batch_submit_handler(name, value) {
if (confirm(value + " ?")) {
// Set the value of the hidden input element with the name batch_submit.
document.batch_actions_submit.batch_submit.value = value;
// Change the name of the input element from batch_submit according to the
// name which is transmitted to this function.
document.batch_actions_submit.batch_submit.name = name;
// Transmit the form.
document.batch_actions_submit.submit();
return true;
} else {
return false;
}
}

19
view/theme/frio/js/theme.js
View File

@ -520,24 +520,31 @@ function filter_replace(item) {
return item.name;
}
(function( $ ) {
(function($) {
$.fn.contact_filter = function(backend_url, typ, autosubmit, onselect) {
if(typeof typ === 'undefined') typ = '';
if(typeof autosubmit === 'undefined') autosubmit = false;
if (typeof typ === 'undefined') {
typ = '';
}
if (typeof autosubmit === 'undefined') {
autosubmit = false;
}
// Autocomplete contacts
contacts = {
match: /(^)([^\n]+)$/,
index: 2,
search: function(term, callback) { contact_search(term, callback, backend_url, typ); },
search: function(term, callback) {contact_search(term, callback, backend_url, typ);},
replace: filter_replace,
template: contact_filter,
template: contact_filter
};
this.attr('autocomplete','off');
var a = this.textcomplete([contacts], {className:'accontacts', appendTo: '#contact-list'});
a.on('textComplete:select', function(e, value, strategy) { $(".dropdown-menu.textcomplete-dropdown.media-list").show(); });
a.on('textComplete:select', function(e, value, strategy) {
$(".dropdown-menu.textcomplete-dropdown.media-list").show();
});
};
})( jQuery );

42
view/theme/frio/templates/contact_template.tpl
View File

@ -1,22 +1,18 @@
<div class="contact-wrapper media" id="contact-entry-wrapper-{{$contact.id}}">
{{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}}
{{* This is a wrapper for the contact picture *}}
<div class="contact-photo-wrapper dropdown media-left">
<div class="contact-entry-photo mframe" id="contact-entry-photo-{{$contact.id}}">
<button type="button" class="btn btn-link dropdown-toggle" id="contact-photo-menu-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="contact-photo-image-wrapper hidden-xs">
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
{{* Overlay background on hover the avatar picture *}}
<div class="contact-photo-overlay">
<span class="contact-photo-overlay-content xl"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
</div>
</div>
<div class="contact-photo-image-wrapper hidden-xs">
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
</div>
{{* For very small displays we use a drobdown menu for contact relating actions *}}
<button type="button" class="btn btn-link dropdown-toggle visible-xs" id="contact-photo-menu-button-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
<div class="contact-photo-image-wrapper hidden-lg hidden-md hidden-sm">
<div class="contact-photo-image-wrapper visible-xs">
<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
{{* Overlay background on hover the avatar picture *}}
@ -26,9 +22,8 @@
</div>
</button>
{{if $contact.photo_menu}}
<ul class="contact-photo-menu menu-popup dropdown-menu " id="contact-photo-menu-{{$contact.id}}" role="menu" aria-labelledby="contact-photo-menu-{{$contact.id}}">
<ul class="contact-photo-menu menu-popup dropdown-menu hidden-lg hidden-md hidden-sm" id="contact-photo-menu-{{$contact.id}}" role="menu" aria-labelledby="contact-photo-menu-{{$contact.id}}">
{{foreach $contact.photo_menu as $c}}
{{if $c.2}}
<li role="presentation"><a role="menuitem" target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
@ -133,22 +128,18 @@ We use this part to filter the contacts with jquery.textcomplete *}}
<div class="javascript-template" rel="contact-template" style="display: none">
<div class="contact-wrapper media" id="contact-entry-wrapper-{$id}">
{{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}}
{{* This is a wrapper for the contact picture *}}
<div class="contact-photo-wrapper dropdown media-left">
<div class="contact-entry-photo mframe" id="contact-entry-photo-{$id}">
<button type="button" class="btn btn-link dropdown-toggle" id="contact-photo-menu-{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="contact-photo-image-wrapper hidden-xs">
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
{{* Overlay background on hover the avatar picture *}}
<div class="contact-photo-overlay">
<span class="contact-photo-overlay-content xl"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
</div>
</div>
<div class="contact-photo-image-wrapper hidden-xs">
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
</div>
{{* For very small displays we use a drobdown menu for contact relating actions *}}
<button type="button" class="btn btn-link dropdown-toggle visible-xs" id="contact-photo-menu-button{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
<div class="contact-photo-image-wrapper hidden-lg hidden-md hidden-sm">
<div class="contact-photo-image-wrapper visible-xs">
<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
{{* Overlay background on hover the avatar picture *}}
@ -158,9 +149,8 @@ We use this part to filter the contacts with jquery.textcomplete *}}
</div>
</button>
{if $photo_menu}
<ul class="contact-photo-menu menu-popup dropdown-menu " id="contact-photo-menu-{$id}" role="menu" aria-labelledby="contact-photo-menu-{$id}">
<ul class="contact-photo-menu menu-popup dropdown-menu hidden-lg hidden-md hidden-sm" id="contact-photo-menu-{$id}" role="menu" aria-labelledby="contact-photo-menu-{$id}">
{foreach $photo_menu as $c}
{if $c.2}
<li role="presentation"><a role="menuitem" target="redir" href="{$c.1}">{$c.0}</a></li>

25
view/theme/frio/templates/contacts-head.tpl
View File

@ -1,25 +1,2 @@
<script type="text/javascript">
$(document).ready(function() {
// Add contact_filter autocompletion to the search field
$("#contacts-search").contact_filter(baseurl + '/acl', 'r', true);
// Hide the viewcontact_wrapper if there is an input in the search field
// We are doing this to let the the contact_filter replace the original
// shown contacts
$("#contacts-search").keyup(function(){
var elText = $(this).val();
if(elText.length !== 0) {
$("#viewcontact_wrapper").hide();
$("ul.textcomplete-dropdown").addClass("show media-list");
} else {
$("#viewcontact_wrapper").show();
$("ul.textcomplete-dropdown").removeClass("show");
}
});
// initiale autosize for the textareas
autosize($("textarea.text-autosize"));
});
</script>
<script type="text/javascript" src="view/theme/frio/js/mod_contacts.js"></script>

53
view/theme/frio/templates/contacts-template.tpl
View File

@ -1,4 +1,8 @@
<script type="text/javascript">
var dropContact = "{{$contact_drop_confirm}}";
</script>
{{$tabs}}
<div id="contacts" class="generic-page-wrapper">
@ -42,7 +46,7 @@
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools">
{{foreach $batch_actions as $n=>$l}}
<li role="menuitem">
{{* call the js batch_submit_handler. Have a look at the buttom of this file *}}
{{* call the js batch_submit_handler. Have a look at the file mod_contacts.js *}}
<button type="button" class="btn-link" onclick="batch_submit_handler('{{$n}}', '{{$l}}')">{{$l}}</button>
</li>
{{/foreach}}
@ -58,53 +62,8 @@
{{/foreach}}
</ul>
</div>
<div id="contact-edit-end"></div>
<div id="contact-edit-end" class="clear"></div>
</form>
{{$paginate}}
</div>
<script type="text/javascript">
$(document).ready(function() {
// javascript dialog to batch actions
$(".batch-action").click(function(e){
if (confirm($(this).attr('value')+" ?")) {
return true;
} else {
e.preventDefault();
return false;
}
});
// add javascript confirm dialog to "drop" links. Plain html url have "?confirm=1" to show confirmation form, we need to remove it
$(".drop").each(function() {
$(this).attr('href', $(this).attr('href').replace("confirm=1","") );
$(this).click(function(e){
if (confirm("{{$contact_drop_confirm}}")) {
return true;
} else {
e.preventDefault();
return false;
}
});
});
});
/**
* @brief This function submits the form with the batch action values
*
* @param string name The name of the batch action
* @param string value If it isn't empty the action will be posted
*/
function batch_submit_handler(name, value) {
// set the value of the hidden input element with the name batch_submit
document.batch_actions_submit.batch_submit.value=value;
// change the name of the input element from batch_submit according to the
// name which is transmitted to this function
document.batch_actions_submit.batch_submit.name=name;
// transmit the form
document.batch_actions_submit.submit() ;
}
</script>

6
view/theme/frio/templates/directory_header.tpl
View File

@ -8,10 +8,6 @@
{{include file="section_title.tpl"}}
{{if $findterm}}
<h4 class="search-heading">{{$finding}} {{$findterm}}</h4>
{{/if}}
{{* The search input field to search for contacts *}}
<div id="directory-search-wrapper">
<form id="directory-search-form" class="navbar-form" role="search" action="directory" method="get" >
@ -30,7 +26,7 @@
<hr>
<div id="directory-search-end"></div>
<div id="directory-search-end" class="clear"></div>
{{* format each contact with the contact_template.tpl *}}
<ul id="viewcontact_wrapper" class="viewcontact_wrapper media-list">