untangle the app template into separate templates and fix bbcode view

8 files changed, 60 insertions, 18 deletions

diff --git a/Zotlabs/Lib/Apps.php b/Zotlabs/Lib/Apps.php
index a9af0812d..ba854197f 100644
--- a/Zotlabs/Lib/Apps.php
+++ b/Zotlabs/Lib/Apps.php
@@ -547,12 +547,38 @@ class Apps {
 		}
 
 		if($mode === 'navbar') {
+			return replace_macros(get_markup_template('app_nav_pinned.tpl'),array(
+				'$app' => $papp,
+				'$icon' => $icon,
+			));
+		}
+
+		if($mode === 'nav') {
 			return replace_macros(get_markup_template('app_nav.tpl'),array(
 				'$app' => $papp,
 				'$icon' => $icon,
 			));
 		}
 
+		if($mode === 'inline') {
+			return replace_macros(get_markup_template('app_inline.tpl'),array(
+				'$app' => $papp,
+				'$icon' => $icon,
+				'$installed' => $installed,
+				'$purchase' => ((isset($papp['page']) && (! $installed)) ? t('Purchase') : ''),
+				'$action_label' => $install_action
+			));
+		}
+
+		if(in_array($mode, ['nav-order', 'nav-order-pinned'])) {
+			return replace_macros(get_markup_template('app_order.tpl'),array(
+				'$app' => $papp,
+				'$icon' => $icon,
+				'$hosturl' => $hosturl,
+				'$mode' => $mode
+			));
+		}
+
 		if($mode === 'install') {
 			$papp['embed'] = true;
 		}
@@ -573,8 +599,6 @@ class Apps {
 			'$pin' => ((isset($papp['embed']) || $mode == 'edit') ? false : true),
 			'$featured' => ((strpos($papp['categories'], 'nav_featured_app') === false) ? false : true),
 			'$pinned' => ((strpos($papp['categories'], 'nav_pinned_app') === false) ? false : true),
-			'$navapps' => (($mode == 'nav') ? true : false),
-			'$order' => (($mode === 'nav-order' || $mode === 'nav-order-pinned') ? true : false),
 			'$mode' => $mode,
 			'$add' => t('Add to app-tray'),
 			'$remove' => t('Remove from app-tray'),
diff --git a/include/bbcode.php b/include/bbcode.php
index 87a7e6af6..25615e385 100644
--- a/include/bbcode.php
+++ b/include/bbcode.php
@@ -308,7 +308,7 @@ function bb_parse_app($match) {
 
 	$app = Zotlabs\Lib\Apps::app_decode($match[1]);
 	if ($app)
-		return Zotlabs\Lib\Apps::app_render($app);
+		return preg_replace('/[[:cntrl:]]/', '', Zotlabs\Lib\Apps::app_render($app, 'inline'));
 }
 
 function bb_svg($match) {
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 811df02e4..228e7b63a 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1743,7 +1743,7 @@ dl.bb-dl > dd > li {
 	border-left: 0.2rem solid #eee;
 }
 
-.app-icon {
+.app-icon i {
 	color: #777;
 	font-size: 80px;
 	text-shadow: 3px 3px 3px lightgrey;
diff --git a/view/tpl/app.tpl b/view/tpl/app.tpl
index 69af0436b..f3f6ae58b 100644
--- a/view/tpl/app.tpl
+++ b/view/tpl/app.tpl
@@ -1,5 +1,3 @@
-{{if ! ($navapps || $order)}}
-
 <div class="section-subtitle-wrapper clearfix">
 	<div class="float-end">
 		{{if $app.type !== 'system'}}
@@ -24,10 +22,9 @@
 		{{/if}}
 	</div>
 	<h3>{{$app.name}}{{if $app.price}} ({{$app.price}}){{/if}}</h3>
-
 </div>
 <div class="section-content-tools-wrapper container">
-	<div class="{{if $deleted}} app-deleted{{/if}}">
+	<div class="{{if $deleted}} app-deleted{{/if}} mb-3">
 		<a class="app-icon app-link" href="{{$app.url}}"{{if $app.target}} target="{{$app.target}}"{{/if}}{{if $installed}} data-papp="{{$app.papp}}" data-icon="{{$icon}}" data-url="{{$app.url}}" data-name="{{$app.name}}"{{/if}}>
 			{{if $icon}}
 			<i class="app-icon fa fa-fw fa-{{$icon}}"></i>
@@ -40,14 +37,5 @@
 		</div>
 	</div>
 </div>
-{{/if}}
 
-{{if $navapps}}
-<a class="dropdown-item{{if $app.active}} active{{/if}}" href="{{$app.url}}">{{if $icon}}<i class="generic-icons-nav fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="16" height="16" style="margin-right:9px;"/>{{/if}}{{$app.name}}</a>
-{{/if}}
-{{if $order}}
-<a href="{{$hosturl}}appman/{{$app.guid}}/moveup{{if $mode == 'nav-order-pinned'}}/nav_pinned_app{{else}}/nav_featured_app{{/if}}" class="btn btn-outline-secondary btn-sm" style="margin-bottom: 5px;"><i class="generic-icons-nav fa fa-fw fa-arrow-up"></i></a>
-<a href="{{$hosturl}}appman/{{$app.guid}}/movedown{{if $mode == 'nav-order-pinned'}}/nav_pinned_app{{else}}/nav_featured_app{{/if}}" class="btn btn-outline-secondary btn-sm" style="margin-bottom: 5px;"><i class="generic-icons-nav fa fa-fw fa-arrow-down"></i></a>
-{{if $icon}}<i class="generic-icons-nav fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="16" height="16" style="margin-right:9px;"/>{{/if}}{{$app.name}}<br>
-{{/if}}
 
diff --git a/view/tpl/app_inline.tpl b/view/tpl/app_inline.tpl
new file mode 100644
index 000000000..fc3675380
--- /dev/null
+++ b/view/tpl/app_inline.tpl
@@ -0,0 +1,26 @@
+<h3 class="mb-3">{{$app.name}}{{if $app.price}} ({{$app.price}}){{/if}}</h3>
+<a class="app-icon" href="{{$app.url}}" >
+	{{if $icon}}
+	<i class="app-icon fa fa-fw fa-{{$icon}} mb-3"></i>
+	{{else}}
+	<img src="{{$app.photo}}" width="80" height="80" class="mb-3" />
+	{{/if}}
+</a>
+<div class="mb-3">
+	{{if $app.desc}}{{$app.desc}}{{/if}}
+</div>
+{{if $action_label}}
+<div class="app-tools">
+	<form action="{{$hosturl}}appman" method="post">
+		<input type="hidden" name="papp" value="{{$app.papp}}" />
+		{{if $action_label}}
+		<button type="submit" name="install" value="{{$action_label}}" class="btn btn-{{if $installed}}outline-secondary{{else}}success{{/if}} btn-sm" title="{{$action_label}}" ><i class="fa fa-fw {{if $installed}}fa-refresh{{else}}fa-arrow-circle-o-down{{/if}}" ></i> {{$action_label}}</button>
+		{{/if}}
+		{{if $purchase && $app.type !== 'system'}}
+		<a href="{{$app.page}}" class="btn btn-sm btn-link" title="{{$purchase}}" ><i class="fa fa-external-link"></i></a>
+		{{/if}}
+	</form>
+</div>
+{{/if}}
+
+
diff --git a/view/tpl/app_nav.tpl b/view/tpl/app_nav.tpl
index 817c74763..0d6e66892 100644
--- a/view/tpl/app_nav.tpl
+++ b/view/tpl/app_nav.tpl
@@ -1 +1 @@
-<a class="navbar-app nav-link{{if $app.active}} active{{/if}}" href="{{$app.url}}" title="{{$app.name}}" >{{if $icon}}<i class="fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="16" height="16" />{{/if}}<span class="d-lg-none">{{$app.name}}</span></a>
+<a class="dropdown-item{{if $app.active}} active{{/if}}" href="{{$app.url}}">{{if $icon}}<i class="generic-icons-nav fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="16" height="16" style="margin-right:9px;"/>{{/if}}{{$app.name}}</a>
diff --git a/view/tpl/app_nav_pinned.tpl b/view/tpl/app_nav_pinned.tpl
new file mode 100644
index 000000000..817c74763
--- /dev/null
+++ b/view/tpl/app_nav_pinned.tpl
@@ -0,0 +1 @@
+<a class="navbar-app nav-link{{if $app.active}} active{{/if}}" href="{{$app.url}}" title="{{$app.name}}" >{{if $icon}}<i class="fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="16" height="16" />{{/if}}<span class="d-lg-none">{{$app.name}}</span></a>
diff --git a/view/tpl/app_order.tpl b/view/tpl/app_order.tpl
new file mode 100644
index 000000000..53c770cb7
--- /dev/null
+++ b/view/tpl/app_order.tpl
@@ -0,0 +1,3 @@
+<a href="{{$hosturl}}appman/{{$app.guid}}/moveup{{if $mode == 'nav-order-pinned'}}/nav_pinned_app{{else}}/nav_featured_app{{/if}}" class="btn btn-outline-secondary btn-sm" style="margin-bottom: 5px;"><i class="generic-icons-nav fa fa-fw fa-arrow-up"></i></a>
+<a href="{{$hosturl}}appman/{{$app.guid}}/movedown{{if $mode == 'nav-order-pinned'}}/nav_pinned_app{{else}}/nav_featured_app{{/if}}" class="btn btn-outline-secondary btn-sm" style="margin-bottom: 5px;"><i class="generic-icons-nav fa fa-fw fa-arrow-down"></i></a>
+{{if $icon}}<i class="generic-icons-nav fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="16" height="16" style="margin-right:9px;"/>{{/if}}{{$app.name}}<br>