From 7cecc5a24c13e2f2afd9ecb145198f27ca0ff138 Mon Sep 17 00:00:00 2001
From: rabuzarus <rabuzarus@t-online.de>
Date: Sat, 11 Aug 2018 13:41:55 +0200
Subject: [PATCH] frio - improve some hover effects to action link/buttons

---
 view/theme/frio/css/style.css                 | 21 +++++++--
 view/theme/frio/templates/contact_block.tpl   | 17 +++++---
 view/theme/frio/templates/events_js.tpl       |  4 +-
 view/theme/frio/templates/group_side.tpl      | 36 ++++++++--------
 view/theme/frio/templates/mail_head.tpl       | 10 ++---
 view/theme/frio/templates/photo_album.tpl     | 43 ++++++++++---------
 view/theme/frio/templates/photo_albums.tpl    | 30 +++++++------
 .../frio/templates/profile_listing_header.tpl |  4 +-
 .../frio/templates/saved_searches_aside.tpl   |  4 +-
 9 files changed, 98 insertions(+), 71 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index d425614a5..8b684e00e 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1106,7 +1106,7 @@ aside .vcard .tool .action{
     transition: all 0.25s ease-in-out;
 }
 aside .vcard .tool a {
-color: rgba(255,255,255,.85);
+    color: rgba(255,255,255,.85);
 }
 aside .vcard #profile-photo-wrapper:hover .tool .action {
     opacity: 1;
@@ -1244,14 +1244,22 @@ div#sidebar-group-list {
     transition: all 0.1s ease-in-out;
 }
 .faded-icon:hover {
+    color: #555;
     opacity: 1;
 }
 .icon-padding {
     margin-left: 20px;
 }
 
-aside #group-sidebar .sidebar-group-li .group-edit-tool:hover,
-aside #saved-search-list .saved-search-li .savedsearchdrop:hover {
+aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
+aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
+aside .widget:hover .widget-action.faded-icon {
+    opacity: 0.8;
+    transition: all 0.25s ease-in-out;
+}
+aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
+aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
+aside .widget .widget-action.faded-icon:hover {
     opacity: 1;
 }
 aside #group-sidebar li .group-checkbox {
@@ -2184,6 +2192,13 @@ ul.dropdown-menu li:hover {
     -webkit-box-shadow: 0 0 3px #dadada;
     -moz-box-shadow: 0 0 3px #dadada;
 }
+#content:hover .page-action.faded-icon {
+    opacity: 0.8;
+    transition: all 0.25s ease-in-out;
+}
+#content .page-action.faded-icon:hover {
+    opacity: 1;
+}
 
 .section-title-wrapper {
     overflow: hidden;
diff --git a/view/theme/frio/templates/contact_block.tpl b/view/theme/frio/templates/contact_block.tpl
index e7b45cff3..45b582a6f 100644
--- a/view/theme/frio/templates/contact_block.tpl
+++ b/view/theme/frio/templates/contact_block.tpl
@@ -1,15 +1,18 @@
 
 <div id="contact-block">
 	<h3 class="contact-block-h4 pull-left">{{$contacts}}</h3>
-{{if $micropro}}
-	<a class="pull-right" href="viewcontacts/{{$nickname}}">
-	<i class="faded-icon fa fa-eye" aria-hidden="true"></i><span class="sr-only">{{$viewcontacts}}</span>
+
+	{{if $micropro}}
+	<a class="pull-right widget-action faded-icon" id="contact-block-view-contacts" href="viewcontacts/{{$nickname}}">
+		<i class="fa fa-eye" aria-hidden="true"></i>
+		<span class="sr-only">{{$viewcontacts}}</span>
 	</a>
+
 	<div class='contact-block-content'>
-	{{foreach $micropro as $m}}
-		{{$m}}
-	{{/foreach}}
+		{{foreach $micropro as $m}}
+			{{$m}}
+		{{/foreach}}
 	</div>
-{{/if}}
+	{{/if}}
 </div>
 <div class="clear"></div>
diff --git a/view/theme/frio/templates/events_js.tpl b/view/theme/frio/templates/events_js.tpl
index cdf1636fe..31debbe31 100644
--- a/view/theme/frio/templates/events_js.tpl
+++ b/view/theme/frio/templates/events_js.tpl
@@ -4,8 +4,8 @@
 
 	{{* The link to create a new event *}}
 	<div class="pull-right" id="new-event-link">
-		<button type="button" class="btn-link" onclick="addToModal('{{$new_event.0}}')" title="{{$new_event.1}}" data-toggle="tooltip">
-			<i class="faded-icon fa fa-plus"></i>
+		<button type="button" class="btn-link page-action faded-icon" onclick="addToModal('{{$new_event.0}}')" title="{{$new_event.1}}" data-toggle="tooltip">
+			<i class="fa fa-plus"></i>
 		</button>
 	</div>
 
diff --git a/view/theme/frio/templates/group_side.tpl b/view/theme/frio/templates/group_side.tpl
index 51980a318..947ae974e 100644
--- a/view/theme/frio/templates/group_side.tpl
+++ b/view/theme/frio/templates/group_side.tpl
@@ -1,21 +1,21 @@
 <div class="widget" id="group-sidebar">
 	<div id="sidebar-group-header">
-	<h3>{{$title}}</h3>
-	{{if ! $newgroup}}
-	<a class="group-edit-tool pull-right" href="{{$grouppage}}" data-toggle="tooltip" title="{{$editgroupstext}}">
-	<i class="faded-icon fa fa-pencil" aria-hidden="true"></i>
-	</a>
-	{{else}}
-	<a class="group-edit-tool pull-right" id="sidebar-new-group" onclick="javascript:$('#group-new-form').fadeIn('fast');" data-toggle="tooltip" title="{{$createtext}}">
-	<i class="faded-icon fa fa-plus" aria-hidden="true"></i>
-	</a>
-	<form id="group-new-form" action="group/new" method="post" style="display:none;">
-		<div class="form-group">
-			<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
-			<input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
-		</div>
-	</form>
-	{{/if}}
+		<h3>{{$title}}</h3>
+		{{if ! $newgroup}}
+		<a class="group-edit-tool pull-right widget-action faded-icon" id="sidebar-edit-group" href="{{$grouppage}}" data-toggle="tooltip" title="{{$editgroupstext}}">
+			<i class="fa fa-pencil" aria-hidden="true"></i>
+		</a>
+		{{else}}
+		<a class="group-edit-tool pull-right widget-action faded-icon" id="sidebar-new-group" onclick="javascript:$('#group-new-form').fadeIn('fast');" data-toggle="tooltip" title="{{$createtext}}">
+			<i class="fa fa-plus" aria-hidden="true"></i>
+		</a>
+		<form id="group-new-form" action="group/new" method="post" style="display:none;">
+			<div class="form-group">
+				<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
+				<input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
+			</div>
+		</form>
+		{{/if}}
 	</div>
 	<div id="sidebar-group-list">
 		{{* The list of available groups *}}
@@ -38,8 +38,8 @@
 					{{/if}}
 					{{if $group.edit}}
 						{{* if the group is editable show a little pencil for editing *}}
-						<a id="edit-sidebar-group-element-{{$group.id}}" class="group-edit-tool pull-right" href="{{$group.edit.href}}" data-toggle="tooltip" title="{{$edittext}}">
-							<i class="faded-icon fa fa-pencil" aria-hidden="true"></i>
+						<a id="edit-sidebar-group-element-{{$group.id}}" class="group-edit-tool pull-right faded-icon" href="{{$group.edit.href}}" data-toggle="tooltip" title="{{$edittext}}">
+							<i class="fa fa-pencil" aria-hidden="true"></i>
 						</a>
 					{{/if}}
 					<a id="sidebar-group-element-{{$group.id}}" class="sidebar-group-element" href="{{$group.href}}">{{$group.text}}</a>
diff --git a/view/theme/frio/templates/mail_head.tpl b/view/theme/frio/templates/mail_head.tpl
index 6701910bc..fa4f46cf8 100644
--- a/view/theme/frio/templates/mail_head.tpl
+++ b/view/theme/frio/templates/mail_head.tpl
@@ -1,16 +1,16 @@
 
 <div class="pull-left">
-<h3 class="heading">{{$messages}}</h3>
+	<h3 class="heading">{{$messages}}</h3>
 </div>
 
 <div id="message-new" class="pull-right">
 	{{if $button.sel == "new"}}
-	<a href="{{$button.url}}" accesskey="m" class="newmessage-selected" title="{{$button.label}}" data-toggle="tooltip">
-	<i class="faded-icon fa fa-plus"></i>
+	<a href="{{$button.url}}" accesskey="m" class="newmessage-selected faded-icon page-action" title="{{$button.label}}" data-toggle="tooltip">
+		<i class="fa fa-plus"></i>
 	</a>
 	{{else}}
-	<a href="{{$button.url}}" title="{{$button.label}}" data-toggle="tooltip">
-	<i class="faded-icon fa fa-close"></i>
+	<a href="{{$button.url}}" title="{{$button.label}}" class="faded-icon page-action" data-toggle="tooltip">
+		<i class="fa fa-close"></i>
 	</a>
 	{{/if}}
 </div>
diff --git a/view/theme/frio/templates/photo_album.tpl b/view/theme/frio/templates/photo_album.tpl
index f043ce3fa..c991b03cf 100644
--- a/view/theme/frio/templates/photo_album.tpl
+++ b/view/theme/frio/templates/photo_album.tpl
@@ -1,40 +1,43 @@
 <div class="generic-page-wrapper">
 	<div class="pull-left">
-	<h3 id="photo-album-title">{{$album}}</h3>
+		<h3 id="photo-album-title">{{$album}}</h3>
 	</div>
-	
+
 	<div class="photo-album-actions pull-right">
 		{{if $can_post}}
-		<a class="photos-upload-link" href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip">
-		<i class="faded-icon fa fa-plus"></i></a>
+		<a class="photos-upload-link page-action faded-icon" href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip">
+			<i class="fa fa-plus"></i>
+		</a>
 		{{/if}}
+
 		{{if $edit}}
 		<span class="icon-padding"> </span>
-		<a id="album-edit-link" href="{{$edit.1}}" title="{{$edit.0}}" data-toggle="tooltip">
-		<i class="faded-icon fa fa-pencil"></i></a>
+		<a id="album-edit-link" class="page-action faded-icon" href="{{$edit.1}}" title="{{$edit.0}}" data-toggle="tooltip">
+			<i class="fa fa-pencil"></i>
+		</a>
 		{{/if}}
+
 		{{if ! $noorder}}
 		<span class="icon-padding"> </span>
-		<a class="photos-order-link" href="{{$order.1}}" title="{{$order.0}}" data-toggle="tooltip">
-		{{if $order.2 == "newest"}}
-		<i class="faded-icon fa fa-sort-numeric-desc"></i>
-		{{else}}
-		<i class="faded-icon fa fa-sort-numeric-asc"></i>
-		{{/if}}
+		<a class="photos-order-link page-action faded-icon" href="{{$order.1}}" title="{{$order.0}}" data-toggle="tooltip">
+			{{if $order.2 == "newest"}}
+			<i class="fa fa-sort-numeric-desc"></i>
+			{{else}}
+			<i class="fa fa-sort-numeric-asc"></i>
+			{{/if}}
 		</a>
 		{{/if}}
 	</div>
 	<div class="clear"></div>
-	
+
 	<div class="photo-album-wrapper" id="photo-album-contents">
-	{{foreach $photos as $photo}}
-		{{include file="photo_top.tpl"}}
-	{{/foreach}}
+		{{foreach $photos as $photo}}
+			{{include file="photo_top.tpl"}}
+		{{/foreach}}
 	</div>
-	
 	<div class="photo-album-end"></div>
-	
+
 	{{$paginate}}
-	
-	<script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>
 </div>
+
+<script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>
diff --git a/view/theme/frio/templates/photo_albums.tpl b/view/theme/frio/templates/photo_albums.tpl
index 407a092cb..f510bd976 100644
--- a/view/theme/frio/templates/photo_albums.tpl
+++ b/view/theme/frio/templates/photo_albums.tpl
@@ -1,14 +1,18 @@
 <div id="sidebar-photos-albums" class="widget">
 	<div class="pull-left">
-	<h3>{{$title}}</h3>
+		<h3>{{$title}}</h3>
 	</div>
+	
 	<div class="pull-right">
 	{{if $can_post}}
-	<div class="photos-upload-link" ><a href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip">
-	<i class="faded-icon fa fa-plus"></i>
-	</a></div>
-	{{/if}}
-	</div>	
+		<div class="photos-upload-link">
+			<a href="{{$upload.1}}" title="{{$upload.0}}" class="widget-action faded-icon" data-toggle="tooltip">
+				<i class="fa fa-plus"></i>
+			</a>
+		</div>
+		{{/if}}
+	</div>
+
 	<ul role="menubar" class="sidebar-photos-albums-ul clear">
 		<li role="menuitem" class="sidebar-photos-albums-li">
 			<a href="{{$baseurl}}/photos/{{$nick}}" class="sidebar-photos-albums-element" title="{{$title}}" >{{$recent}}</a>
@@ -16,13 +20,13 @@
 
 		{{if $albums}}
 		{{foreach $albums as $al}}
-		{{if $al.text}}
-		<li role="menuitem" class="sidebar-photos-albums-li">
-			<a href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}" class="sidebar-photos-albums-element">
-				<span class="badge pull-right">{{$al.total}}</span>{{$al.text}}
-			</a>
-		</li>
-		{{/if}}
+			{{if $al.text}}
+			<li role="menuitem" class="sidebar-photos-albums-li">
+				<a href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}" class="sidebar-photos-albums-element">
+					<span class="badge pull-right">{{$al.total}}</span>{{$al.text}}
+				</a>
+			</li>
+			{{/if}}
 		{{/foreach}}
 		{{/if}}
 	</ul>
diff --git a/view/theme/frio/templates/profile_listing_header.tpl b/view/theme/frio/templates/profile_listing_header.tpl
index f6364706b..1e6ae0dbf 100644
--- a/view/theme/frio/templates/profile_listing_header.tpl
+++ b/view/theme/frio/templates/profile_listing_header.tpl
@@ -4,8 +4,8 @@
 		<h2>{{$header}}</h2>
 	</div>
 	<div id="profile-listing-new-link-wrapper" class="pull-right" >
-		<a href="{{$cr_new_link}}" id="profile-listing-new-link" title="{{$cr_new}}" data-toggle="tooltip">
-		<i class="faded-icon fa fa-plus"></i></a>
+		<a href="{{$cr_new_link}}" id="profile-listing-new-link" class="page-action faded-icon" title="{{$cr_new}}" data-toggle="tooltip">
+		<i class="fa fa-plus"></i></a>
 	</div>
 
 	<div class="section-content-wrapper">
diff --git a/view/theme/frio/templates/saved_searches_aside.tpl b/view/theme/frio/templates/saved_searches_aside.tpl
index 764ab5212..77444f489 100644
--- a/view/theme/frio/templates/saved_searches_aside.tpl
+++ b/view/theme/frio/templates/saved_searches_aside.tpl
@@ -6,7 +6,9 @@
 	<ul role="menu" id="saved-search-ul">
 		{{foreach $saved as $search}}
 		<li role="menuitem" class="saved-search-li clear">
-			<a title="{{$search.delete}}" onclick="return confirmDelete();" id="drop-saved-search-term-{{$search.id}}" class="savedsearchdrop pull-right" href="network/?f=&amp;remove=1&amp;search={{$search.encodedterm}}"><i class="faded-icon fa fa-trash" aria-hidden="true"></i></a>
+			<a title="{{$search.delete}}" onclick="return confirmDelete();" id="drop-saved-search-term-{{$search.id}}" class="savedsearchdrop pull-right widget-action faded-icon" href="network/?f=&amp;remove=1&amp;search={{$search.encodedterm}}">
+				<i class="fa fa-trash" aria-hidden="true"></i>
+			</a>
 			<a id="saved-search-term-{{$search.id}}" class="savedsearchterm" href="search?search={{$search.encodedterm}}">{{$search.term}}</a>
 		</li>
 		{{/foreach}}