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

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 7d45bddbec010a180be99d183d022d9c06a87c98..4d7e4e2cb81a8932e1f10c22076f4e3fde7e0123 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1702,10 +1702,29 @@ ul.viewcontact_wrapper > li {
 .contact-entry-checkbox {
     margin-top: -20px;
 }
-.contact-wrapper .media-body .contact-entry-name h4.media-heading {
-    font-weight: bold;
-    color: #777;
-    font-size: 15px;
+.contact-wrapper .media-body .contact-entry-name h4.media-heading a {
+    font-weight: bold !important; 
+    color: $link_color;
+    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,
 #directory-search-wrapper{

diff --git a/view/theme/frio/templates/contact_template.tpl b/view/theme/frio/templates/contact_template.tpl
index bfffec0ce5a7c676cbf5f0e3d1bd55be0cb578d0..4c2395fd03047fdd40c8681de08a2faaca883fc9 100644 (file)
--- a/view/theme/frio/templates/contact_template.tpl
+++ b/view/theme/frio/templates/contact_template.tpl
@@ -46,10 +46,20 @@
                </div>
 
                <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 *}}
                        <div class="contact-entry-desc">
                                <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 == '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 *}}
@@ -124,11 +134,21 @@ We use this part to filter the contacts with jquery.textcomplete *}}
 
                        </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 *}}
                                <div class="contact-entry-desc">
                                        <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 == '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 *}}