Merge pull request #8939 from MrPetovan/task/8906-frio-viewas-redesign

Move "View As" form at the bottom of the profile page

src/Module/Profile/Profile.php

@@ -112,6 +112,7 @@ class Profile extends BaseProfile
 
 		$view_as_contacts = [];
 		$view_as_contact_id = 0;
+		$view_as_contact_alert = '';
 		if ($is_owner) {
 			$view_as_contact_id = intval($_GET['viewas'] ?? 0);
 
@@ -122,10 +123,20 @@ class Profile extends BaseProfile
 				'blocked' => false,
 			]);
 
+			$view_as_contact_ids = array_column($view_as_contacts, 'id');
+
 			// User manually provided a contact ID they aren't privy to, silently defaulting to their own view
-			if (!in_array($view_as_contact_id, array_column($view_as_contacts, 'id'))) {
+			if (!in_array($view_as_contact_id, $view_as_contact_ids)) {
 				$view_as_contact_id = 0;
 			}
+
+			if (($key = array_search($view_as_contact_id, $view_as_contact_ids)) !== false) {
+				$view_as_contact_alert = DI::l10n()->t(
+					'You\'re currently viewing your profile as <b>%s</b> <a href="%s" class="btn btn-sm pull-right">Cancel</a>',
+					htmlentities($view_as_contacts[$key]['name'], ENT_COMPAT, 'UTF-8'),
+					'profile/' . $parameters['nickname'] . '/profile'
+				);
+			}
 		}
 
 		$basic_fields = [];
@@ -225,7 +236,9 @@ class Profile extends BaseProfile
 			'$title' => DI::l10n()->t('Profile'),
 			'$view_as_contacts' => $view_as_contacts,
 			'$view_as_contact_id' => $view_as_contact_id,
+			'$view_as_contact_alert' => $view_as_contact_alert,
 			'$view_as' => DI::l10n()->t('View profile as:'),
+			'$submit' => DI::l10n()->t('Submit'),
 			'$basic' => DI::l10n()->t('Basic'),
 			'$advanced' => DI::l10n()->t('Advanced'),
 			'$is_owner' => $a->profile_uid == local_user(),
@@ -238,6 +251,11 @@ class Profile extends BaseProfile
 				'title' => '',
 				'label' => DI::l10n()->t('Edit profile')
 			],
+			'$viewas_link' => [
+				'url' =>  DI::args()->getQueryString() . '#viewas',
+				'title' => '',
+				'label' => DI::l10n()->t('View as')
+			],
 		]);
 
 		Hook::callAll('profile_advanced', $o);

view/templates/profile/index.tpl

@@ -1,3 +1,8 @@
+{{if $view_as_contact_alert}}
+<div class="alert alert-info" role="alert">
+	{{$view_as_contact_alert nofilter}}
+</div>
+{{/if}}
 <div id="profile-page" class="generic-page-wrapper">
     {{include file="section_title.tpl"}}
 
@@ -10,20 +15,11 @@
 					<i class="fa fa-pencil-square-o" aria-hidden="true"></i>&nbsp;{{$edit_link.label}}
 				</a>
 			</li>
-		{{if count($view_as_contacts)}}
 			<li class="pull-right">
-				<form action="{{$query_string}}" method="get">
+				<a class="btn btn-link btn-sm" type="button" id="profile-viewas-link" href="{{$viewas_link.url}}" title="{{$viewas_link.title}}">
-					<button type="submit" class="btn btn-sm">{{$view_as}}</button>
+					<i class="fa fa-eye" aria-hidden="true"></i>&nbsp;{{$viewas_link.label}}
-					<select name="viewas" class="input-sm">
+				</a>
-						<option value="0">Yourself</option>
-				{{foreach $view_as_contacts as $contact}}
-						<option value="{{$contact.id}}"{{if $contact.id == $view_as_contact_id}} selected{{/if}}>{{$contact.name}}</option>
-				{{/foreach}}
-					</select>
-
-				</form>
 			</li>
-		{{/if}}
 		</ul>
 		<div class="clear"></div>
 	</div>
@@ -101,3 +97,17 @@
 	</dl>
 {{/foreach}}
 </div>
+{{if $is_owner}}
+<form action="{{$query_string}}" method="get" id="viewas" class="panel panel-default form-inline">
+	<fieldset class="panel-body">
+		<label for="viewas-select">{{$view_as}}</label>
+		<select name="viewas" id="viewas-select" class="form-control">
+			<option value="0">Yourself</option>
+			{{foreach $view_as_contacts as $contact}}
+				<option value="{{$contact.id}}"{{if $contact.id == $view_as_contact_id}} selected{{/if}}>{{$contact.name}}</option>
+			{{/foreach}}
+		</select>
+		<button type="submit" class="btn btn-primary">{{$submit}}</button>
+	</fieldset>
+</form>
+{{/if}}