Make frio more consistent by replacing textual links with icons everywhere. (#5415)

* Make frio more consistent by replacing textual links with icons everywhere I could find them.

* [frio] Move profile add link to icon.

mod/message.php

@@ -109,8 +109,23 @@ function message_content(App $a)
 	$myprofile = System::baseUrl() . '/profile/' . $a->user['nickname'];
 
 	$tpl = get_markup_template('mail_head.tpl');
+	if ($a->argc > 1 && $a->argv[1] == 'new') {
+		$button = [
+			'label' => L10n::t('Discard'),
+			'url' => '/message',
+			'sel' => 'close',
+		];
+	} else {
+		$button = [
+			'label' => L10n::t('New Message'),
+			'url' => '/message/new',
+			'sel' => 'new',
+			'accesskey' => 'm',
+		];
+	}
 	$header = replace_macros($tpl, [
 		'$messages' => L10n::t('Messages'),
+		'$button' => $button,
 	]);
 
 	if (($a->argc == 3) && ($a->argv[1] === 'drop' || $a->argv[1] === 'dropconv')) {

mod/photos.php

@@ -1154,9 +1154,9 @@ function photos_content(App $a)
 		}
 
 		if ($order_field === 'posted') {
-			$order =  [L10n::t('Show Newest First'), 'photos/' . $a->data['user']['nickname'] . '/album/' . bin2hex($album)];
+			$order =  [L10n::t('Show Newest First'), 'photos/' . $a->data['user']['nickname'] . '/album/' . bin2hex($album), 'oldest'];
 		} else {
-			$order = [L10n::t('Show Oldest First'), 'photos/' . $a->data['user']['nickname'] . '/album/' . bin2hex($album) . '?f=&order=posted'];
+			$order = [L10n::t('Show Oldest First'), 'photos/' . $a->data['user']['nickname'] . '/album/' . bin2hex($album) . '?f=&order=posted', 'newest'];
 		}
 
 		$photos = [];

view/templates/section_title.tpl

@@ -1,4 +1,8 @@
-<div class="section-title-wrapper">
+{{if $title}}
-	{{if $title}}<h2>{{$title}}</h2>{{/if}}
+<div class="section-title-wrapper{{if isset($pullright)}} pull-left{{/if}}">
+	<h2>{{$title}}</h2>
+	{{if ! isset($pullright)}}
 	<div class="clear"></div>
+	{{/if}}
 </div>
+{{/if}}

view/theme/frio/css/style.css

@@ -1235,17 +1235,19 @@ div#sidebar-group-list {
 .group-edit-tool {
     color: #555;
 }
-aside #group-sidebar .group-edit-tool,
+
-aside #saved-search-list .savedsearchdrop {
+.faded-icon {
-    opacity: 0.1;
-    transition: all 0.25s ease-in-out;
-}
-aside #group-sidebar .group-edit-tool:hover,
-aside #saved-search-list .saved-search-li:hover .savedsearchdrop {
     color: #555;
-    opacity: 0.8;
+    opacity: 0.3;
-    transition: all 0.25s ease-in-out;
+    transition: all 0.1s ease-in-out;
 }
+.faded-icon:hover {
+    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 {
     opacity: 1;

view/theme/frio/templates/events_js.tpl

@@ -1,12 +1,16 @@
 <div class="generic-page-wrapper">
 	{{$tabs}}
-	{{include file="section_title.tpl" title=$title}}
+	{{include file="section_title.tpl" title=$title pullright=1}}
 
 	{{* The link to create a new event *}}
-	<div id="new-event-link"><button type="button" class="btn-link" onclick="addToModal('{{$new_event.0}}')" >{{$new_event.1}}</button></div>
+	<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>
+	</div>
 
 	{{* We create our own fullcallendar header (with title & calendar view *}}
-	<div id="fc-header">
+	<div id="fc-header" class="clear">
 		<div id="fc-header-right" class="pull-right">
 			{{* The dropdown to change the callendar view *}}
 			<ul class="nav nav-pills">

view/theme/frio/templates/group_side.tpl

@@ -2,12 +2,12 @@
 	<div id="sidebar-group-header">
 	<h3>{{$title}}</h3>
 	{{if ! $newgroup}}
-	<a class="group-edit-tool pull-right" href="{{$grouppage}}">
+	<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><span class="sr-only">{{$editgroupstext}}</span>
+	<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');">
+	<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><span class="sr-only">{{$createtext}}</span>
+	<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">
@@ -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}}" title="{{$edittext}}">
+						<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><span class="sr-only">{{$edittext}}</span>
+							<i class="faded-icon 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>

view/theme/frio/templates/mail_head.tpl

@@ -1,4 +1,19 @@
 
+<div class="pull-left">
 <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>
+	{{else}}
+	<a href="{{$button.url}}" title="{{$button.label}}" data-toggle="tooltip">
+	<i class="faded-icon fa fa-close"></i>
+	</a>
+	{{/if}}
+</div>
+
+<div class="clear"></div>
 {{$tab_content}}

view/theme/frio/templates/mail_list.tpl

@@ -13,7 +13,9 @@
 
 				<h4 class="media-heading">{{$from_name}}</h4>
 				<div class="mail-list-subject"><a href="message/{{$id}}">{{$subject}}</a></div>
-				<a href="message/dropconv/{{$id}}" onclick="return confirmDelete();"  title="{{$delete}}" class="close pull-right" onmouseover="imgbright(this);" onmouseout="imgdull(this);" >&times;</a>
+				<a href="message/dropconv/{{$id}}" onclick="return confirmDelete();"  title="{{$delete}}" class="pull-right" onmouseover="imgbright(this);" onmouseout="imgdull(this);">
+				<i class="faded-icon fa fa-trash"></i>
+				</a>
 				<p class="text-muted">{{$count}}</p>
 			</div>
 

view/theme/frio/templates/message_side.tpl

@@ -1,6 +1,4 @@
 <div id="message-sidebar" class="widget">
-	<div id="message-new"><a href="{{$new.url}}" accesskey="m" class="{{if $new.sel}}newmessage-selected{{/if}}">{{$new.label}}</a> </div>
-
 	{{if $tabs}}
 	<div id="message-preview" class="panel panel-default">
 		<ul class="media-list">

view/theme/frio/templates/photo_album.tpl

@@ -1,17 +1,29 @@
-
 <div class="generic-page-wrapper">
 
+	<div class="pull-left">
 	<h3 id="photo-album-title">{{$album}}</h3>
+	</div>
 
-	<div class="photo-album-actions">
+	<div class="photo-album-actions pull-right">
-	{{if $can_post}}
+		{{if $can_post}}
-		<a class="photos-upload-link" href="{{$upload.1}}">{{$upload.0}}</a>
+		<a class="photos-upload-link" href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip">
+		<i class="faded-icon fa fa-plus"></i></a>
 		{{/if}}
-		{{if $can_post && $edit}}<span role="presentation" class="separator">&nbsp;•&nbsp;</span>{{/if}}
 		{{if $edit}}
-		<a id="album-edit-link" href="{{$edit.1}}" title="{{$edit.0}}">{{$edit.0}}</a>
+		<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>
+		{{/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>
 		{{/if}}
-		<a class="photos-order-link" href="{{$order.1}}" title="{{$order.0}}">{{$order.0}}</a>
 	</div>
 	<div class="clear"></div>
 
@@ -26,4 +38,4 @@
 	{{$paginate}}
 </div>
 
-<script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos('photo-album-contents-{{$album_id}}'); });</script>
+<script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>

view/theme/frio/templates/photo_albums.tpl

@@ -0,0 +1,29 @@
+<div id="sidebar-photos-albums" class="widget">
+	<div class="pull-left">
+	<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>	
+	<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>
+		</li>
+
+		{{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}}
+		{{/foreach}}
+		{{/if}}
+	</ul>
+</div>

view/theme/frio/templates/photos_recent.tpl

@@ -1,20 +1 @@
-
+{{include file="photo_album.tpl" album=$title noorder=true}}
-<div class="generic-page-wrapper">
-
-	<h3>{{$title}}</h3>
-
-	{{if $can_post}}
-	<a id="photo-top-upload-link" href="{{$upload.1}}">{{$upload.0}}</a>
-	{{/if}}
-
-	<div id="photo-album-contents" class="photos">
-	{{foreach $photos as $photo}}
-		{{include file="photo_top.tpl"}}
-	{{/foreach}}
-	</div>
-	<div class="photos-end"></div>
-
-	{{$paginate}}
-</div>
-
-<script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>

view/theme/frio/templates/profile_listing_header.tpl

@@ -1,13 +1,14 @@
 
 <div class="generic-page-wrapper">
-	<div class="section-title-wrapper">
+	<div class="section-title-wrapper pull-left">
 		<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>
+	</div>
 
 	<div class="section-content-wrapper">
-		<div id="profile-listing-new-link-wrapper" class="button" >
-			<a href="{{$cr_new_link}}" id="profile-listing-new-link" title="{{$cr_new}}" >{{$cr_new}}</a>
-		</div>
 		<div id="profile-listing-profiles" class="profile-listing-table">
 			{{$profiles}}
 		</div>

view/theme/frio/templates/saved_searches_aside.tpl

@@ -6,7 +6,7 @@
 	<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="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" href="network/?f=&amp;remove=1&amp;search={{$search.encodedterm}}"><i class="faded-icon 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}}