Merge pull request #9701 from MrPetovan/bug/9636-frio-mobile-intros-buttons

[frio] Improve display of introduction action buttons on mobile

include/conversation.php

@@ -1177,7 +1177,8 @@ function status_editor(App $a, $x, $notes_cid = 0, $popup = false)
 		'$term'      => DI::l10n()->t('Tag term:'),
 		'$fileas'    => DI::l10n()->t('Save to Folder:'),
 		'$whereareu' => DI::l10n()->t('Where are you right now?'),
-		'$delitems'  => DI::l10n()->t("Delete item\x28s\x29?")
+		'$delitems'  => DI::l10n()->t("Delete item\x28s\x29?"),
+		'$is_mobile' => DI::mode()->isMobile(),
 	]);
 
 	$jotplugins = '';

mod/editpost.php

@@ -66,7 +66,8 @@ function editpost_content(App $a)
 	DI::page()['htmlhead'] .= Renderer::replaceMacros($tpl, [
 		'$ispublic' => '&nbsp;', // DI::l10n()->t('Visible to <strong>everybody</strong>'),
 		'$geotag' => $geotag,
-		'$nickname' => $a->user['nickname']
+		'$nickname' => $a->user['nickname'],
+		'$is_mobile' => DI::mode()->isMobile(),
 	]);
 
 	if (strlen($item['allow_cid']) || strlen($item['allow_gid']) || strlen($item['deny_cid']) || strlen($item['deny_gid'])) {

src/Module/Notifications/Introductions.php

@@ -112,6 +112,7 @@ class Introductions extends BaseNotifications
 						'$note'                  => $notification->getNote(),
 						'$ignore'                => DI::l10n()->t('Ignore'),
 						'$discard'               => DI::l10n()->t('Discard'),
+						'$is_mobile'             => DI::mode()->isMobile(),
 					]);
 					break;
 
@@ -190,6 +191,7 @@ class Introductions extends BaseNotifications
 						'$ignore'                => DI::l10n()->t('Ignore'),
 						'$discard'               => $discard,
 						'$action'                => $action,
+						'$is_mobile'              => DI::mode()->isMobile(),
 					]);
 					break;
 			}

view/templates/jot-header.tpl

@@ -8,7 +8,7 @@ var textlen = 0;
 function initEditor(callback) {
 	if (editor == false) {
 		var  colorbox_options = {
-			{{if $APP->is_mobile}}
+			{{if $is_mobile}}
 			'width' : '100%',
 			'height' : '100%',
 			{{/if}}

view/theme/frio/css/style.css

@@ -198,6 +198,11 @@ blockquote {
     padding: 1px 5px;
     font-size: 12px;
 }
+.btn.btn-danger {
+	color: #FFFFFF;
+	background-color: #AE0F0F;
+}
+
 .btn.btn-primary {
     background: $nav_bg;
     color: $btn_primary_color;

view/theme/frio/templates/notifications/intros.tpl

@@ -36,6 +36,16 @@
 			<div class="intro-note intro-note-{{$intro_id}}">{{$note}}</div>
 		</div>
 
+		{{* On mobile touch devices we use buttons for approve, ingnore && discard to have a better UX *}}
+		{{if $is_mobile}}
+		<form class="intro-form" action="notification/{{$intro_id}}" method="post">
+			<button class="btn btn-small btn-primary" type="button" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');"><i class="fa fa-check" aria-hidden="true"></i> {{$approve}}</button>
+			{{if $discard}}
+				<button class="btn btn-small btn-warning intro-submit-discard" type="submit" name="submit" value="{{$discard}}"><i class="fa fa-trash-o" aria-hidden="true"></i> {{$discard}}</button>
+			{{/if}}
+			<button class="btn btn-small btn-danger intro-submit-ignore" type="submit" name="submit" value="{{$ignore}}"><i class="fa fa-ban" aria-hidden="true"></i> {{$ignore}}</button>
+		</form>
+		{{else}}
 		{{* The intro actions like approve, ignore, discard intro*}}
 		<div class="intro-actions pull-right nav-pills preferences">
 			<button class="btn-link intro-action-link" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');" aria-label="{{$approve}}" title="{{$approve}}" data-toggle="tooltip"><i class="fa fa-check" aria-hidden="true"></i></button>
@@ -45,6 +55,7 @@
 				{{if $discard}}<button class="btn-link intro-submit-discard intro-action-link" type="submit" name="submit" value="{{$discard}}" aria-label="{{$discard}}" title="{{$discard}}" data-toggle="tooltip"><i class="fa fa-trash-o" aria-hidden="true"></i></button>{{/if}}
 			</form>
 		</div>
+		{{/if}}
 
 		{{* 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 *}}
@@ -74,17 +85,5 @@
 			</form>
 		</div>
 	</div>
-
-	{{* On mobile touch devices we use buttons for approve, ingnore && discard to have a better UX *}}
-	{{if $APP->is_mobile}}
-	<div class="intro-action-buttons">
-		<form class="intro-form pull-left" action="notification/{{$intro_id}}" method="post">
-			<button class="btn btn-small btn-default intro-submit-ignore" type="submit" name="submit" value="{{$ignore}}">{{$ignore}}</button>
-			{{if $discard}}<button class="btn btn-small btn-default intro-submit-discard" type="submit" name="submit" value="{{$discard}}">{{$discard}}</button>&nbsp;{{/if}}
-		</form>
-		<button class="btn btn-small btn-primary intro-submit-approve pull-right" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}')">{{$approve}}</button>
-	</div>
-	<div class="clear"></div>
-	{{/if}}
 </div>
 <div class="intro-end"></div>