Turn all the action <a> tags into buttons

- Add CSS changes to support both <a> and <button class="btn btn-link">
- Removed unnecessary "return false" in onclick attributes
- Simplified tabs in profile page to native Bootstrap behavior
This commit is contained in:
Hypolite Petovan 2017-03-14 23:47:02 -04:00
commit 7cb44ae25a
22 changed files with 452 additions and 466 deletions

View file

@ -1,11 +1,11 @@
/*
/*
* The javascript for friendicas hovercard. Bootstraps popover is needed.
*
* Much parts of the code are from Hannes Mannerheims <h@nnesmannerhe.im>
*
* Much parts of the code are from Hannes Mannerheims <h@nnesmannerhe.im>
* qvitter code (https://github.com/hannesmannerheim/qvitter)
*
*
* It is licensed under the GNU Affero General Public License <http://www.gnu.org/licenses/>
*
*
*/
$(document).ready(function(){
// Elements with the class "userinfo" will get a hover-card.
@ -164,7 +164,7 @@ function getContactData(purl, url, actionOnSuccess) {
// The nurl will be the identifier in the object
if(data.nurl.length > 0) {
// Test if the contact is allready connected with the user (if url containing
// the expression ("redir/") We will store different cache keys
// the expression ("redir/") We will store different cache keys
if((data.url.search("redir/")) >= 0 ) {
var key = data.url;
} else {
@ -212,7 +212,7 @@ function getHoverCardContent(purl, url, callback) {
});
// This is interisting. this pice of code ajax request are done asynchron.
// To make it work getHOverCardTemplate() and getHOverCardData have to return it's
// To make it work getHOverCardTemplate() and getHOverCardData have to return it's
// data (no succes handler for each of this). I leave it here, because it could be useful.
// https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/
// $.when(
@ -283,49 +283,3 @@ function getHoverCardVariables(object) {
return variables;
}
// This is the html template for the hover-card
// Since we grab the original hovercard.tpl we don't
// need it anymore
function hovercard_template() {
var tempate = '\
<div class="basic-content" >\
<div class="hover-card-details">\
<div class="hover-card-header left-align">\
<div class="hover-card-pic left-align">\
<span class="image-wrapper medium">\
<a href="{{$profile.url}}" title="{{$profile.name}}"><img href="" class="left-align thumbnail" src="{{$profile.thumb}}"></a>\
</span>\
</div>\
<div class="hover-card-content">\
<div class="profile-entry-name">\
<h4 class="left-align1"><a href="{{$profile.url}}">{{$profile.name}}</a></h4>{{if $profile.account_type}}<span>{{$profile.account_type}}</span>{{/if}}\
</div>\
<div class="profile-details">\
<span class="profile-addr">{{$profile.addr}}</span>\
{{if $profile.network}}<span class="profile-network"> ({{$profile.network}})</span>{{/if}}\
</div>\
{{*{{if $profile.about}}<div class="profile-details profile-about">{{$profile.about}}</div>{{/if}}*}}\
\
</div>\
<div class="hover-card-actions right-aligned">\
{{* here are the differnt actions like privat message, poke, delete and so on *}}\
{{* @todo we have two different photo menus one for contacts and one for items at the network stream. We currently use the contact photo menu, so the items options are missing We need to move them *}}\
<div class="hover-card-actions-social">\
{{if $profile.actions.pm}}<a class="btn btn-labeled btn-primary btn-sm" onclick="addToModal("{{$profile.actions.pm.1}}")" title="{{$profile.actions.pm.0}}"><i class="fa fa-envelope" aria-hidden="true"></i></a>{{/if}}\
{{if $profile.actions.poke}}<a class="btn btn-labeled btn-primary btn-sm" onclick="addToModal("{{$profile.actions.poke.1}}")" title="{{$profile.actions.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true"></i></a>{{/if}}\
</div>\
<div class="hover-card-actions-connection">\
{{if $profile.actions.edit}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.edit.1}}" title="{{$profile.actions.edit.0}}"><i class="fa fa-pencil" aria-hidden="true"></i></a>{{/if}}\
{{if $profile.actions.drop}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.drop.1}}" title="{{$profile.actions.drop.0}}"><i class="fa fa-user-times" aria-hidden="true"></i></a>{{/if}}\
{{if $profile.actions.follow}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.follow.1}}" title="{{$profile.actions.follow.0}}"><i class="fa fa-user-plus" aria-hidden="true"></i></a>{{/if}}\
</div>\
</div>\
</div>\
\
<div class="clearfix"></div>\
\
</div>\
</div>\
{{if $profile.tags}}<div class="hover-card-footer">{{$profile.tags}}</div>{{/if}}';
}