From 320751660d7f17cd80aa2c5360d25d167b331854 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Wed, 27 Jul 2016 19:53:22 +0200
Subject: [PATCH] frio: intro notifications + some restructuring in core for
 notifications

---
 mod/notifications.php                       | 152 +++++++++++---------
 view/templates/intros.tpl                   |   2 +-
 view/templates/notifications.tpl            |  15 +-
 view/theme/frio/css/style.css               |  50 ++++++-
 view/theme/frio/js/modal.js                 |  13 ++
 view/theme/frio/templates/intros.tpl        |  54 +++++++
 view/theme/frio/templates/notifications.tpl |  25 ++++
 7 files changed, 240 insertions(+), 71 deletions(-)
 create mode 100644 view/theme/frio/templates/intros.tpl
 create mode 100644 view/theme/frio/templates/notifications.tpl

diff --git a/mod/notifications.php b/mod/notifications.php
index e0f07118f7..ae27de864c 100644
--- a/mod/notifications.php
+++ b/mod/notifications.php
@@ -59,10 +59,6 @@ function notifications_post(&$a) {
 	}
 }
 
-
-
-
-
 function notifications_content(&$a) {
 
 	if(! local_user()) {
@@ -76,46 +72,9 @@ function notifications_content(&$a) {
 
 
 	$o = '';
-	$tabs = array(
-		array(
-			'label' => t('System'),
-			'url'=>'notifications/system',
-			'sel'=> (($a->argv[1] == 'system') ? 'active' : ''),
-			'accesskey' => 'y',
-		),
-		array(
-			'label' => t('Network'),
-			'url'=>'notifications/network',
-			'sel'=> (($a->argv[1] == 'network') ? 'active' : ''),
-			'accesskey' => 'w',
-		),
-		array(
-			'label' => t('Personal'),
-			'url'=>'notifications/personal',
-			'sel'=> (($a->argv[1] == 'personal') ? 'active' : ''),
-			'accesskey' => 'r',
-		),
-		array(
-			'label' => t('Home'),
-			'url' => 'notifications/home',
-			'sel'=> (($a->argv[1] == 'home') ? 'active' : ''),
-			'accesskey' => 'h',
-		),
-		array(
-			'label' => t('Introductions'),
-			'url' => 'notifications/intros',
-			'sel'=> (($a->argv[1] == 'intros') ? 'active' : ''),
-			'accesskey' => 'i',
-		),
-		/*array(
-			'label' => t('Messages'),
-			'url' => 'message',
-			'sel'=> '',
-		),*/ /*while I can have notifications for messages, this tablist is not place for message page link */
-	);
-
-	$o = "";
-
+	// get the nav tabs for the notification pages
+	$tabs = notifications_tabs($a);
+	$notif_content = array();
 
 	if( (($a->argc > 1) && ($a->argv[1] == 'intros')) || (($a->argc == 1))) {
 		nav_set_selected('introductions');
@@ -126,7 +85,7 @@ function notifications_content(&$a) {
 
 		$notif_tpl = get_markup_template('notifications.tpl');
 
-		$notif_content .= '<a href="' . ((strlen($sql_extra)) ? 'notifications/intros/all' : 'notifications/intros' ) . '" id="notifications-show-hide-link" >'
+		$notif_ignored_lnk .= '<a href="' . ((strlen($sql_extra)) ? 'notifications/intros/all' : 'notifications/intros' ) . '" id="notifications-show-hide-link" >'
 			. ((strlen($sql_extra)) ? t('Show Ignored Requests') : t('Hide Ignored Requests')) . '</a></div>' . "\r\n";
 
 		$r = q("SELECT COUNT(*)	AS `total` FROM `intro`
@@ -162,7 +121,7 @@ function notifications_content(&$a) {
 
 					$return_addr = bin2hex($a->user['nickname'] . '@' . $a->get_hostname() . (($a->path) ? '/' . $a->path : ''));
 
-					$notif_content .= replace_macros($sugg, array(
+					$notif_content[] = replace_macros($sugg, array(
 						'$str_notifytype' => t('Notification type: '),
 						'$notify_type' => t('Friend Suggestion'),
 						'$intro_id' => $rr['intro_id'],
@@ -195,7 +154,8 @@ function notifications_content(&$a) {
 
 				if($rr['network'] === NETWORK_DFRN || $rr['network'] === NETWORK_DIASPORA) {
 					if($rr['network'] === NETWORK_DFRN) {
-						$knowyou = t('Claims to be known to you: ') . (($rr['knowyou']) ? t('yes') : t('no'));
+						$lbl_knowyou = t('Claims to be known to you: ');
+						$knowyou = (($rr['knowyou']) ? t('yes') : t('no'));
 						$helptext = t('Shall your connection be bidirectional or not? "Friend" implies that you allow to read and you subscribe to their posts. "Fan/Admirer" means that you allow to read but you do not want to read theirs. Approve as: ');
 					} else {
 						$knowyou = '';
@@ -231,7 +191,7 @@ function notifications_content(&$a) {
 					$rr['ggender'] = "";
 				}
 
-				$notif_content .= replace_macros($tpl, array(
+				$notif_content[] = replace_macros($tpl, array(
 					'$header' => htmlentities($header),
 					'$str_notifytype' => t('Notification type: '),
 					'$notify_type' => (($rr['network'] !== NETWORK_OSTATUS) ? t('Friend/Connect Request') : t('New Follower')),
@@ -255,6 +215,10 @@ function notifications_content(&$a) {
 					'$url' => $rr['url'],
 					'$zrl' => zrl($rr['url']),
 					'$url_label' => t('Profile URL'),
+					'$addr' => $rr['addr'],
+					'$lbl_knowyou' => $lbl_knowyou,
+					'$lbl_network' => t('Network:'),
+					'$network' => network_to_name($rr['gnetwork'], $rr['url']),
 					'$knowyou' => $knowyou,
 					'$approve' => t('Approve'),
 					'$note' => $rr['note'],
@@ -270,6 +234,7 @@ function notifications_content(&$a) {
 		$o .= replace_macros($notif_tpl, array(
 			'$notif_header' => t('Notifications'),
 			'$tabs' => $tabs,
+			'$notif_ignored_lnk' => $notif_ignored_lnk,
 			'$notif_content' => $notif_content,
 		));
 
@@ -295,14 +260,14 @@ function notifications_content(&$a) {
 		$tpl_item_comments = get_markup_template('notifications_comments_item.tpl');
 		$tpl_item_posts = get_markup_template('notifications_posts_item.tpl');
 
-		$notif_content = '';
+		$notif_content = array();
 
 		if ($r) {
 
 			foreach ($r as $it) {
 				switch($it['verb']){
 					case ACTIVITY_LIKE:
-						$notif_content .= replace_macros($tpl_item_likes,array(
+						$notif_content[] = replace_macros($tpl_item_likes,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => proxy_url($it['author-avatar'], false, PROXY_SIZE_MICRO),
@@ -312,7 +277,7 @@ function notifications_content(&$a) {
 						break;
 
 					case ACTIVITY_DISLIKE:
-						$notif_content .= replace_macros($tpl_item_dislikes,array(
+						$notif_content[] = replace_macros($tpl_item_dislikes,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => proxy_url($it['author-avatar'], false, PROXY_SIZE_MICRO),
@@ -327,7 +292,7 @@ function notifications_content(&$a) {
 						$obj = parse_xml_string($xmlhead.$it['object']);
 						$it['fname'] = $obj->title;
 
-						$notif_content .= replace_macros($tpl_item_friends,array(
+						$notif_content[] = replace_macros($tpl_item_friends,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => proxy_url($it['author-avatar'], false, PROXY_SIZE_MICRO),
@@ -342,7 +307,7 @@ function notifications_content(&$a) {
 							: sprintf( t("%s commented on %s's post"), $it['author-name'], $it['pname']));
 						$tpl = (($it['id'] == $it['parent']) ? $tpl_item_posts : $tpl_item_comments);
 
-						$notif_content .= replace_macros($tpl,array(
+						$notif_content[] = replace_macros($tpl,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => proxy_url($it['author-avatar'], false, PROXY_SIZE_MICRO),
@@ -354,13 +319,14 @@ function notifications_content(&$a) {
 
 		} else {
 
-			$notif_content = t('No more network notifications.');
+			$notif_nocontent = t('No more network notifications.');
 		}
 
 		$o .= replace_macros($notif_tpl, array(
 			'$notif_header' => t('Network Notifications'),
 			'$tabs' => $tabs,
 			'$notif_content' => $notif_content,
+			'$notif_nocontent' => $notif_nocontent,
 		));
 
 	} else if (($a->argc > 1) && ($a->argv[1] == 'system')) {
@@ -376,7 +342,7 @@ function notifications_content(&$a) {
 
 		if (count($r) > 0) {
 			foreach ($r as $it) {
-				$notif_content .= replace_macros($not_tpl,array(
+				$notif_content[] = replace_macros($not_tpl,array(
 					'$item_link' => $a->get_baseurl(true).'/notify/view/'. $it['id'],
 					'$item_image' => proxy_url($it['photo'], false, PROXY_SIZE_MICRO),
 					'$item_text' => strip_tags(bbcode($it['msg'])),
@@ -384,13 +350,14 @@ function notifications_content(&$a) {
 				));
 			}
 		} else {
-			$notif_content .= t('No more system notifications.');
+			$notif_nocontent = t('No more system notifications.');
 		}
 
 		$o .= replace_macros($notif_tpl, array(
 			'$notif_header' => t('System Notifications'),
 			'$tabs' => $tabs,
 			'$notif_content' => $notif_content,
+			'$notif_nocontent' => $notif_nocontent,
 		));
 
 	} else if (($a->argc > 1) && ($a->argv[1] == 'personal')) {
@@ -424,14 +391,14 @@ function notifications_content(&$a) {
 		$tpl_item_comments = get_markup_template('notifications_comments_item.tpl');
 		$tpl_item_posts = get_markup_template('notifications_posts_item.tpl');
 
-		$notif_content = '';
+		$notif_content = array();
 
 		if (count($r) > 0) {
 
 			foreach ($r as $it) {
 				switch($it['verb']){
 					case ACTIVITY_LIKE:
-						$notif_content .= replace_macros($tpl_item_likes,array(
+						$notif_content[] = replace_macros($tpl_item_likes,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => $it['author-avatar'],
@@ -441,7 +408,7 @@ function notifications_content(&$a) {
 						break;
 
 					case ACTIVITY_DISLIKE:
-						$notif_content .= replace_macros($tpl_item_dislikes,array(
+						$notif_content[] = replace_macros($tpl_item_dislikes,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => $it['author-avatar'],
@@ -456,7 +423,7 @@ function notifications_content(&$a) {
 						$obj = parse_xml_string($xmlhead.$it['object']);
 						$it['fname'] = $obj->title;
 
-						$notif_content .= replace_macros($tpl_item_friends,array(
+						$notif_content[] = replace_macros($tpl_item_friends,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => $it['author-avatar'],
@@ -471,7 +438,7 @@ function notifications_content(&$a) {
 							: sprintf( t("%s commented on %s's post"), $it['author-name'], $it['pname']));
 						$tpl = (($it['id'] == $it['parent']) ? $tpl_item_posts : $tpl_item_comments);
 
-						$notif_content .= replace_macros($tpl,array(
+						$notif_content[] = replace_macros($tpl,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => $it['author-avatar'],
@@ -483,13 +450,14 @@ function notifications_content(&$a) {
 
 		} else {
 
-			$notif_content = t('No more personal notifications.');
+			$notif_nocontent = t('No more personal notifications.');
 		}
 
 		$o .= replace_macros($notif_tpl, array(
 			'$notif_header' => t('Personal Notifications'),
 			'$tabs' => $tabs,
 			'$notif_content' => $notif_content,
+			'$notif_nocontent' => $notif_nocontent,
 		));
 
 
@@ -515,14 +483,14 @@ function notifications_content(&$a) {
 		$tpl_item_friends = get_markup_template('notifications_friends_item.tpl');
 		$tpl_item_comments = get_markup_template('notifications_comments_item.tpl');
 
-		$notif_content = '';
+		$notif_content = array();
 
 		if (count($r) > 0) {
 
 			foreach ($r as $it) {
 				switch($it['verb']){
 					case ACTIVITY_LIKE:
-						$notif_content .= replace_macros($tpl_item_likes,array(
+						$notif_content[] = replace_macros($tpl_item_likes,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => $it['author-avatar'],
@@ -532,7 +500,7 @@ function notifications_content(&$a) {
 
 						break;
 					case ACTIVITY_DISLIKE:
-						$notif_content .= replace_macros($tpl_item_dislikes,array(
+						$notif_content[] = replace_macros($tpl_item_dislikes,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => $it['author-avatar'],
@@ -547,7 +515,7 @@ function notifications_content(&$a) {
 						$obj = parse_xml_string($xmlhead.$it['object']);
 						$it['fname'] = $obj->title;
 
-						$notif_content .= replace_macros($tpl_item_friends,array(
+						$notif_content[] = replace_macros($tpl_item_friends,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => $it['author-avatar'],
@@ -557,7 +525,7 @@ function notifications_content(&$a) {
 
 						break;
 					default:
-						$notif_content .= replace_macros($tpl_item_comments,array(
+						$notif_content[] = replace_macros($tpl_item_comments,array(
 							//'$item_link' => $a->get_baseurl(true).'/display/'.$a->user['nickname']."/".$it['parent'],
 							'$item_link' => $a->get_baseurl(true).'/display/'.$it['pguid'],
 							'$item_image' => $it['author-avatar'],
@@ -568,16 +536,64 @@ function notifications_content(&$a) {
 			}
 
 		} else {
-			$notif_content = t('No more home notifications.');
+			$notif_nocontent = t('No more home notifications.');
 		}
 
 		$o .= replace_macros($notif_tpl, array(
 			'$notif_header' => t('Home Notifications'),
 			'$tabs' => $tabs,
 			'$notif_content' => $notif_content,
+			'$notif_nocontent' => $notif_nocontent,
 		));
 	}
 
 	$o .= paginate($a);
 	return $o;
 }
+/**
+ * @brief List of pages for the Notifications TabBar
+ * 
+ * @param app $a The 
+ * @return array with with notifications TabBar data
+ */
+function notifications_tabs($a) {
+	$tabs = array(
+		array(
+			'label' => t('System'),
+			'url'=>'notifications/system',
+			'sel'=> (($a->argv[1] == 'system') ? 'active' : ''),
+			'accesskey' => 'y',
+		),
+		array(
+			'label' => t('Network'),
+			'url'=>'notifications/network',
+			'sel'=> (($a->argv[1] == 'network') ? 'active' : ''),
+			'accesskey' => 'w',
+		),
+		array(
+			'label' => t('Personal'),
+			'url'=>'notifications/personal',
+			'sel'=> (($a->argv[1] == 'personal') ? 'active' : ''),
+			'accesskey' => 'r',
+		),
+		array(
+			'label' => t('Home'),
+			'url' => 'notifications/home',
+			'sel'=> (($a->argv[1] == 'home') ? 'active' : ''),
+			'accesskey' => 'h',
+		),
+		array(
+			'label' => t('Introductions'),
+			'url' => 'notifications/intros',
+			'sel'=> (($a->argv[1] == 'intros') ? 'active' : ''),
+			'accesskey' => 'i',
+		),
+		/*array(
+			'label' => t('Messages'),
+			'url' => 'message',
+			'sel'=> '',
+		),*/ /*while I can have notifications for messages, this tablist is not place for message page link */
+	);
+
+	return $tabs;
+}
\ No newline at end of file
diff --git a/view/templates/intros.tpl b/view/templates/intros.tpl
index b9f7f15418..fa823ca71a 100644
--- a/view/templates/intros.tpl
+++ b/view/templates/intros.tpl
@@ -9,7 +9,7 @@
 {{if $gender}}<dl><dt>{{$gender_label}}</dt><dd>{{$gender}}</dd></dl>{{/if}}
 {{if $keywords}}<dl><dt>{{$keywords_label}}</dt><dd>{{$keywords}}</dd></dl>{{/if}}
 {{if $about}}<dl><dt>{{$about_label}}</dt><dd>{{$about}}</dd></dl>{{/if}}
-<div class="intro-knowyou">{{$knowyou}}</div>
+<div class="intro-knowyou">{{$lbl_knowyou}} {{$knowyou}}</div>
 <div class="intro-note" id="intro-note-{{$contact_id}}">{{$note}}</div>
 <div class="intro-wrapper-end" id="intro-wrapper-end-{{$contact_id}}"></div>
 <form class="intro-form" action="notifications/{{$intro_id}}" method="post">
diff --git a/view/templates/notifications.tpl b/view/templates/notifications.tpl
index 54f9de0c7a..9c671c2a5b 100644
--- a/view/templates/notifications.tpl
+++ b/view/templates/notifications.tpl
@@ -5,5 +5,18 @@
 {{if $tabs }}{{include file="common_tabs.tpl"}}{{/if}}
 
 <div class="notif-network-wrapper">
-	{{$notif_content}}
+	{{* The "show ignored" link *}}
+	{{if $notif_ignored_lnk}}{{$notif_ignored_lnk}}{{/if}}
+
+	{{* The notifications *}}
+	{{if $notif_content}}
+	{{foreach $notif_content as $notification}}
+		{{$notification}}
+	{{/foreach}}
+	{{/if}}
+
+	{{* If no notifications messages available *}}
+	{{if $notif_nocontent}}
+		<div class="notif_nocontent">{{$notif_nocontent}}</div>
+	{{/if}}
 </div>
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index ed264ac2d5..67b209f9ec 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1798,7 +1798,7 @@ ul.dropdown-menu li:hover {
  .suggest-content-wrapper, .common-content-wrapper,
 .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
 .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper,
-.message-content-wrapper, .apps-content-wrapper, .notifications-content-wrapper,
+.message-content-wrapper, .apps-content-wrapper,
 .admin-content-wrapper, .group-content-wrapper, .viewcontacts-content-wrapper {
     min-height: calc(100vh - 150px);
     padding: 15px;
@@ -2149,6 +2149,54 @@ td.fc-day {
 .group {
     margin-left: 20px;
 }
+
+/* Notifications */
+ul.notif-network-list {
+    margin-left: -15px;
+    margin-right: -15px;
+}
+ul.notif-network-list > li {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+.intro-wrapper.media {
+    overflow: visible;
+    word-wrap: break-word;
+    margin-top: 0;
+}
+.intro-photo-wrapper img.intro-photo {
+    height:80px;
+    width: 80px;
+    border-radius: 4px;
+}
+.intro-actions {
+    display: flex;
+}
+.intro-enty-name h4 {
+    font-size: 15px !important;
+}
+.intro-wrapper button.intro-action-link {
+    opacity: 0.1;
+    transition: all 0.25s ease-in-out;
+}
+.intro-wrapper button.intro-action-link,
+.intro-wrapper button.intro-action-link:hover {
+    padding-right: 5px;
+    padding-left: 5px;
+    color: #555;
+}
+ul li:hover .intro-wrapper button.intro-action-link {
+    opacity: 0.8;
+    transition: all 0.25s ease-in-out;
+}
+ul li:hover .intro-wrapper button.intro-action-link:hover {
+    opacity: 1;
+}
+.intro-desc-label, .intro-url-label, .intro-network-label,
+.intro-location-label, .intro-gender-label, .intro-keywords-label,
+.intro-about-label, .intro-knowyou-label {
+    font-weight: bold;
+}
 /*
 * Overwriting for transparency and other colors
 */
diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js
index b58288318d..b29b8d4caa 100644
--- a/view/theme/frio/js/modal.js
+++ b/view/theme/frio/js/modal.js
@@ -204,6 +204,19 @@ function addToModal(url) {
 		});
 }
 
+// Add a element (by it's id) to a bootstrap modal
+function addElmToModal(id) {
+	var elm = $(id).html();
+	var modal = $('#modal').modal();
+
+	modal
+		.find('#modal-body')
+		.append(elm)
+		.modal.show;
+
+	loadModalTitle();
+}
+
 // function to load the html from the edit post page into
 // the jot modal
 function editpost(url) {
diff --git a/view/theme/frio/templates/intros.tpl b/view/theme/frio/templates/intros.tpl
new file mode 100644
index 0000000000..0b09c2dccb
--- /dev/null
+++ b/view/theme/frio/templates/intros.tpl
@@ -0,0 +1,54 @@
+
+<div class="intro-wrapper media" id="intro-{{$contact_id}}" >
+
+	{{* Contact Photo *}}
+	<div class="intro-photo-wrapper dropdown pull-left" >
+		<img id="photo-{{$contact_id}}" class="intro-photo media-object" src="{{$photo}}" title="{{$fullname|escape:'html'}}" alt="{{$fullname|escape:'html'}}" />
+	</div>
+
+	<div class="media-body">
+		{{* The intro actions like approve, ignore, discard intro*}}
+		<div class="intro-actions pull-right nav-pills preferences hidden-xs">
+			<button class="btn-link intro-action-link" onclick="addElmToModal('#intro-approve-wrapper-{{$contact_id}}')"><i class="fa fa-check" aria-hidden="true"></i></button>
+			
+			<form class="intro-form" action="notifications/{{$intro_id}}" method="post">
+				<button class="btn-link intro-submit-ignore intro-action-link" type="submit" name="submit" value="{{$ignore|escape:'html'}}"><i class="fa fa-ban" aria-hidden="true"></i></button>
+				<button class="btn-link intro-submit-discard intro-action-link" type="submit" name="submit" value="{{$discard|escape:'html'}}"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
+			</form>
+		</div>
+		<div class='intro-enty-name'><h4 class="media-heading"><a href="{{$zrl}}">{{$fullname}}</a></h4></div>
+		<div class="intro-desc"><span class="intro-desc-label">{{$str_notifytype}}</span>{{$notify_type}}</div>
+
+		{{* Additional information of the contact *}}
+		<div class="intro-url"><span class="intro-url-label">{{$url_label}}:&nbsp;</span><a href="{{$zrl}}">{{$url}}</a></div>
+		{{if $network}}<div class="intro-network"><span class="intro-network-label">{{$lbl_network}}</span>&nbsp;{{$network}}</div>{{/if}}
+		{{if $location}}<div class="intro-location"><span class="intro-location-label">{{$location_label}}</span>&nbsp;{{$location}}</div>{{/if}}
+		{{if $gender}}<div class="intro-gender"><span class="intro-gender-label">{{$gender_label}}</span>&nbsp;{{$gender}}</div>{{/if}}
+		{{if $keywords}}<div class="intro-keywords"><span class="intro-keywords-label">{{$keywords_label}}</span>&nbsp;{{$keywords}}</div>{{/if}}
+		{{if $about}}<div class="intro-about"><span class="intro-about-label">{{$about_label}}</span>&nbsp;{{$about}}</div>{{/if}}
+		<div class="intro-knowyou"><span class="intro-knowyou-label">{{$lbl_knowyou}}</span>{{$knowyou}}</div>
+		<div class="intro-note" id="intro-note-{{$contact_id}}">{{$note}}</div>
+
+		{{* This sections contains special settings for contact approval. We hide it by default and load this section in
+		a bootstrap modal in the case of approval *}}
+		<div id="intro-approve-wrapper-{{$contact_id}}" style="display: none;">
+
+			<h3 class="heading">{{$fullname}}{{if $addr}}&nbsp;({{$addr}}){{/if}}</h3>
+			<form class="intro-approve-form" action="dfrn_confirm" method="post">
+				{{include file="field_checkbox.tpl" field=$hidden}}
+				{{include file="field_checkbox.tpl" field=$activity}}
+				<input type="hidden" name="dfrn_id" value="{{$dfrn_id}}" >
+				<input type="hidden" name="intro_id" value="{{$intro_id}}" >
+				<input type="hidden" name="contact_id" value="{{$contact_id}}" >
+
+				{{$dfrn_text}}
+
+				<div class="pull-right">
+					<button class="btn btn-default intro-submit-approve" type="submit" name="submit" value="{{$approve|escape:'html'}}">{{$approve|escape:'html'}}</button>
+				</div>
+				<div class="clear"></div>
+			</form>
+		</div>
+	</div>
+</div>
+<div class="intro-end"></div>
diff --git a/view/theme/frio/templates/notifications.tpl b/view/theme/frio/templates/notifications.tpl
new file mode 100644
index 0000000000..3729e6f8c2
--- /dev/null
+++ b/view/theme/frio/templates/notifications.tpl
@@ -0,0 +1,25 @@
+
+<div class="generic-page-wrapper">
+	{{include file="section_title.tpl" title=$notif_header}}
+
+	{{if $tabs }}{{include file="common_tabs.tpl"}}{{/if}}
+
+	<div class="notif-network-wrapper">
+		{{* The "show ignored" link *}}
+		{{if $notif_ignored_lnk}}{{$notif_ignored_lnk}}{{/if}}
+
+		{{* The notifications *}}
+		{{if $notif_content}}
+		<ul class="notif-network-list media-list">
+		{{foreach $notif_content as $notification}}
+			<li>{{$notification}}</li>
+		{{/foreach}}
+		</ul>
+		{{/if}}
+
+		{{* If no notifications messages available *}}
+		{{if $notif_nocontent}}
+		<div class="notif_nocontent">{{$notif_nocontent}}</div>
+		{{/if}}
+	</div>
+</div>
-- 
2.39.5