strk/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

frio: adding contact actions on hover for contacts in contact view

Browse source
This commit is contained in:
rabuzarus 2016-06-01 17:21:57 +02:00
parent f69409c398
commit 300591560e
2 changed files with 46 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
view/theme/frio/css/style.css
View file

@ -1702,10 +1702,29 @@ ul.viewcontact_wrapper > li {
.contact-entry-checkbox { .contact-entry-checkbox {
margin-top: -20px; margin-top: -20px;
} }
.contact-wrapper .media-body .contact-entry-name h4.media-heading { .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
font-weight: bold; font-weight: bold !important;
color: #777; color: $link_color;
font-size: 15px; font-size: 15px !important;
}
.contact-wrapper .contact-actions {
display: flex;
}
.contact-wrapper a.contact-action-link {
opacity: 0.1;
}
.contact-wrapper a.contact-action-link,
.contact-wrapper a.contact-action-link:hover,
.textcomplete-item .contact-wrapper a.contact-action-link {
padding-right: 5px;
padding-left: 5px;
color: #555;
}
ul li:hover .contact-wrapper a.contact-action-link {
opacity: 0.8;
}
ul li:hover .contact-wrapper a.contact-action-link:hover {
opacity: 1;
} }
#contacts-search-wrapper, #contacts-search-wrapper,
#directory-search-wrapper{ #directory-search-wrapper{

26
view/theme/frio/templates/contact_template.tpl
View file

@ -46,10 +46,20 @@
</div> </div>
<div class="media-body"> <div class="media-body">
{{* The contact actions like private mail, delete contact, edit contact and so on *}}
<div class="contact-actions pull-right nav-pills preferences hidden-xs">
{{if $contact.photo_menu.pm}}<a class="contact-action-link" onclick="addToModal('{{$contact.photo_menu.pm.1}}')" data-toggle="tooltip" title="{{$contact.photo_menu.pm.0}}"><i class="fa fa-envelope" aria-hidden="true"></i></a>{{/if}}
{{if $contact.photo_menu.poke}}<a class="contact-action-link" onclick="addToModal('{{$contact.photo_menu.poke.1}}')" data-toggle="tooltip" title="{{$contact.photo_menu.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true"></i></a>{{/if}}
{{if $contact.photo_menu.network}}<a class="contact-action-link" href="{{$contact.photo_menu.network.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.network.0}}"><i class="fa fa-cloud" aria-hidden="true"></i></a>{{/if}}
{{if $contact.photo_menu.edit}}<a class="contact-action-link" href="{{$contact.photo_menu.edit.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.edit.0}}"><i class="fa fa-pencil" aria-hidden="true"></i></a>{{/if}}
{{if $contact.photo_menu.drop}}<a class="contact-action-link" href="{{$contact.photo_menu.drop.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.drop.0}}"><i class="fa fa-user-times" aria-hidden="true"></i></a>{{/if}}
{{if $contact.photo_menu.follow}}<a class="contact-action-link" href="{{$contact.photo_menu.follow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.follow.0}}"><i class="fa fa-user-plus" aria-hidden="true"></i></a>{{/if}}
</div>
{{* The contact description (e.g. Name, Network, kind of connection and so on *}} {{* The contact description (e.g. Name, Network, kind of connection and so on *}}
<div class="contact-entry-desc"> <div class="contact-entry-desc">
<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" > <div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >
<h4 class="media-heading">{{$contact.name}} <h4 class="media-heading"><a href="{{$contact.url}}">{{$contact.name}}</a>
{{if $contact.account_type}} <small class="contact-entry-details" id="contact-entry-accounttype-{{$contact.id}}">({{$contact.account_type}})</small>{{/if}} {{if $contact.account_type}} <small class="contact-entry-details" id="contact-entry-accounttype-{{$contact.id}}">({{$contact.account_type}})</small>{{/if}}
{{if $contact.account_type == 'Forum'}}<i class="fa fa-comments-o" aria-hidden="true"></i>{{/if}} {{if $contact.account_type == 'Forum'}}<i class="fa fa-comments-o" aria-hidden="true"></i>{{/if}}
{{* @todo this needs some changing in core because $contact.account_type contains a translated string which may notbe the same in every language *}} {{* @todo this needs some changing in core because $contact.account_type contains a translated string which may notbe the same in every language *}}
@ -124,11 +134,21 @@ We use this part to filter the contacts with jquery.textcomplete *}}
</div> </div>
<div class="media-body"> {{* @todo There is a bug with this class - the browser freezes if the screensize is to small - but only fith textcomplete*}} <div class="media-body">
{{* The contact actions like private mail, delete contact, edit contact and so on *}}
<div class="contact-actions pull-right nav-pills preferences hidden-xs">
{if $photo_menu.pm}<a class="contact-action-link" onclick="addToModal('{$photo_menu.pm.1}')" data-toggle="tooltip" title="{$photo_menu.pm.0}"><i class="fa fa-envelope" aria-hidden="true"></i></a>{/if}
{if $photo_menu.poke}<a class="contact-action-link" onclick="addToModal('{$photo_menu.poke.1}')" data-toggle="tooltip" title="{$photo_menu.poke.0}"><i class="fa fa-heartbeat" aria-hidden="true"></i></a>{/if}
{if $photo_menu.network}<a class="contact-action-link" href="{$photo_menu.network.1}" data-toggle="tooltip" title="{$photo_menu.network.0}"><i class="fa fa-cloud" aria-hidden="true"></i></a>{/if}
{if $photo_menu.edit}<a class="contact-action-link" href="{$photo_menu.edit.1}" data-toggle="tooltip" title="{$photo_menu.edit.0}"><i class="fa fa-pencil" aria-hidden="true"></i></a>{/if}
{if $photo_menu.drop}<a class="contact-action-link" href="{$photo_menu.drop.1}" data-toggle="tooltip" title="{$photo_menu.drop.0}"><i class="fa fa-user-times" aria-hidden="true"></i></a>{/if}
{if $photo_menu.follow}<a class="contact-action-link" href="{$photo_menu.follow.1}" data-toggle="tooltip" title="{$photo_menu.follow.0}"><i class="fa fa-user-plus" aria-hidden="true"></i></a>{/if}
</div>
{{* The contact description (e.g. Name, Network, kind of connection and so on *}} {{* The contact description (e.g. Name, Network, kind of connection and so on *}}
<div class="contact-entry-desc"> <div class="contact-entry-desc">
<div class="contact-entry-name" id="contact-entry-name-{$id}" > <div class="contact-entry-name" id="contact-entry-name-{$id}" >
<h4 class="media-heading">{$name} <h4 class="media-heading"><a href="{url}">{$name}</a>
{if $account_type} <small class="contact-entry-details" id="contact-entry-accounttype-{$id}">({$account_type})</small>{/if} {if $account_type} <small class="contact-entry-details" id="contact-entry-accounttype-{$id}">({$account_type})</small>{/if}
{if $account_type == 'Forum'}<i class="fa fa-comments-o" aria-hidden="true"></i>{/if} {if $account_type == 'Forum'}<i class="fa fa-comments-o" aria-hidden="true"></i>{/if}
{{* @todo this needs some changing in core because $contact.account_type contains a translated string which may notbe the same in every language *}} {{* @todo this needs some changing in core because $contact.account_type contains a translated string which may notbe the same in every language *}}