provide a spinner for edit connection action in threads

8 files changed, 40 insertions, 9 deletions

diff --git a/Zotlabs/Lib/ThreadItem.php b/Zotlabs/Lib/ThreadItem.php
index d974325a9..8d20935a1 100644
--- a/Zotlabs/Lib/ThreadItem.php
+++ b/Zotlabs/Lib/ThreadItem.php
@@ -2,6 +2,7 @@
 
 namespace Zotlabs\Lib;
 
+use App;
 use Zotlabs\Lib\Apps;
 use Zotlabs\Access\AccessList;
 
@@ -412,6 +413,12 @@ class ThreadItem {
 		$pinned_items = ($allowed_type ? get_pconfig($item['uid'], 'pinned', $item['item_type'], []) : []);
 		$pinned = ((!empty($pinned_items) && in_array($midb64, $pinned_items)) ? true : false);
 
+		$contact = [];
+
+		if(App::$contacts && array_key_exists($item['author_xchan'], App::$contacts)) {
+			$contact = App::$contacts[$item['author_xchan']];
+		}
+
 		$tmp_item = array(
 			'template' => $this->get_template(),
 			'mode' => $mode,
@@ -532,7 +539,9 @@ class ThreadItem {
 			'wait' => t('Please wait'),
 			'thread_level' => $thread_level,
 			'settings' => $settings,
-			'thr_parent' => (($item['parent_mid'] != $item['thr_parent']) ? gen_link_id($item['thr_parent']) : '')
+			'thr_parent' => (($item['parent_mid'] != $item['thr_parent']) ? gen_link_id($item['thr_parent']) : ''),
+			'contact_id' => (($contact) ? $contact['abook_id'] : '')
+
 		);
 
 		$arr = array('item' => $item, 'output' => $tmp_item);
diff --git a/include/conversation.php b/include/conversation.php
index bdd27c55f..17367856c 100644
--- a/include/conversation.php
+++ b/include/conversation.php
@@ -775,6 +775,12 @@ function conversation($items, $mode, $update, $page_mode = 'traditional', $prepa
 
 				$conv_link = ((in_array($item['item_type'],[ ITEM_TYPE_CARD, ITEM_TYPE_ARTICLE] )) ? $item['plink'] : z_root() . '/' . $conv_link_module . '/' . gen_link_id($conv_link_mid));
 
+				$contact = [];
+
+				if(App::$contacts && array_key_exists($item['author_xchan'],App::$contacts)) {
+					$contact = App::$contacts[$item['author_xchan']];
+				}
+
 				$tmp_item = array(
 					'template' => $tpl,
 					'toplevel' => 'toplevel_item',
@@ -838,7 +844,8 @@ function conversation($items, $mode, $update, $page_mode = 'traditional', $prepa
 					'wait' => t('Please wait'),
 					'thread_level' => 1,
 					'has_tags' => $has_tags,
-					'is_new' => $is_new
+					'is_new' => $is_new,
+					'contact_id' => (($contact) ? $contact['abook_id'] : '')
 				);
 
 				$arr = array('item' => $item, 'output' => $tmp_item);
diff --git a/view/css/conversation.css b/view/css/conversation.css
index f299ad719..fa5bfbe0a 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -358,3 +358,9 @@ img.smiley.emoji:hover {
 #filer_save {
 	margin-left: 15px;
 }
+
+.spinner-wrapper.contact-edit-rotator {
+	position: absolute;
+	left: .65rem;
+	top: .65rem;
+}
diff --git a/view/tpl/connection_template.tpl b/view/tpl/connection_template.tpl
index a7f0f8759..1c8b4be11 100644
--- a/view/tpl/connection_template.tpl
+++ b/view/tpl/connection_template.tpl
@@ -8,8 +8,8 @@
 			{{/if}}
 			<span id="contact-role-{{$contact.id}}" class="badge rounded-pill bg-warning text-dark me-1" title="{{$role_label}}">{{$contact.role}}</span>
 			<button type="button" class="btn btn-outline-secondary btn-sm contact-edit" title="{{$contact.edit_hover}}" data-id="{{$contact.id}}">
-				<i id="edit-icon-{{$contact.id}}" class="fa fa-fw fa-pencil"></i>
-				<div id="edit-rotator-{{$contact.id}}" class="spinner-wrapper" style="vertical-align: text-bottom; margin-right: 2px"><div class="spinner s"></div></div>
+				<i id="contact-edit-icon-{{$contact.id}}" class="fa fa-fw fa-pencil"></i>
+				<div id="contact-edit-rotator-{{$contact.id}}" class="spinner-wrapper" style="vertical-align: text-bottom; margin-right: 2px"><div class="spinner s"></div></div>
 				{{$contact.edit}}
 			</button>
 
diff --git a/view/tpl/contact_edit_modal.tpl b/view/tpl/contact_edit_modal.tpl
index a046456d9..9e958c3a9 100644
--- a/view/tpl/contact_edit_modal.tpl
+++ b/view/tpl/contact_edit_modal.tpl
@@ -104,8 +104,8 @@
 	function init_contact_edit(poi) {
 		if (!poi)
 			return
-		$('#edit-rotator-' + poi).addClass('d-inline-block');
-		$('#edit-icon-' + poi).hide();
+		$('#contact-edit-rotator-' + poi).addClass('d-inline-block');
+		$('#contact-edit-icon-' + poi).hide();
 		$.get('contactedit/' + poi, function(data) {
 			if (!data.success) {
 				$.jGrowl(data.message, {sticky: false, theme: 'notice', life: 10000});
@@ -119,8 +119,8 @@
 	function activate(data) {
 		$('#contact-save').removeClass('disabled');
 		$('#contact-tools').removeClass('disabled');
-		$('#edit-rotator-' + poi).removeClass('d-inline-block');
-		$('#edit-icon-' + poi).show();
+		$('#contact-edit-rotator-' + poi).removeClass('d-inline-block');
+		$('#contact-edit-icon-' + poi).show();
 
 		if (data.title) {
 			$('#edit-modal-title').html(data.title);
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index e9d5e3c63..2d39d0be7 100644
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -35,6 +35,9 @@
 					{{/if}}
 					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
 						<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
+							{{if $item.contact_id}}
+							<div id="contact-edit-rotator-{{$item.contact_id}}" class="spinner-wrapper contact-edit-rotator"><div class="spinner s"></div></div>
+							{{/if}}
 							<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" loading="lazy" data-bs-toggle="dropdown" />
 							{{if $item.author_is_group_actor}}
 							<i class="fa fa-comments-o wall-item-photo-group-actor" title="{{$item.author_is_group_actor}}"></i>
diff --git a/view/tpl/conv_list.tpl b/view/tpl/conv_list.tpl
index 0463afdcb..30c9e980d 100644
--- a/view/tpl/conv_list.tpl
+++ b/view/tpl/conv_list.tpl
@@ -29,6 +29,9 @@
 				<div class="p-2 clearfix wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}">
 					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
 						<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
+							{{if $item.contact_id}}
+							<div id="contact-edit-rotator-{{$item.contact_id}}" class="spinner-wrapper contact-edit-rotator"><div class="spinner s"></div></div>
+							{{/if}}
 							<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" data-bs-toggle="dropdown" loading="lazy" /></a>
 							{{if $item.author_is_group_actor}}
 							<i class="fa fa-comments-o wall-item-photo-group-actor" title="{{$item.author_is_group_actor}}"></i>
diff --git a/view/tpl/search_item.tpl b/view/tpl/search_item.tpl
index cb9ad57cc..bcd6af9b2 100644
--- a/view/tpl/search_item.tpl
+++ b/view/tpl/search_item.tpl
@@ -23,6 +23,9 @@
 			<div class="p-2 clearfix wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}" >
 				<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
 					<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}}" id="wall-item-photo-wrapper-{{$item.id}}">
+						{{if $item.contact_id}}
+						<div id="contact-edit-rotator-{{$item.contact_id}}" class="spinner-wrapper contact-edit-rotator"><div class="spinner s"></div></div>
+						{{/if}}
 						<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" data-bs-toggle="dropdown" loading="lazy" />
 						{{if $item.author_is_group_actor}}
 						<i class="fa fa-comments-o wall-item-photo-group-actor" title="{{$item.author_is_group_actor}}"></i>
@@ -31,7 +34,7 @@
 						<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-bs-toggle="dropdown"></i>
 						<div class="dropdown-menu">
 							{{foreach $item.thread_author_menu as $mitem}}
-							<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a>
+							<a class="dropdown-item{{if $mitem.class}} {{$mitem.class}}{{/if}}" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}}{{if $mitem.data}} {{$mitem.data}}{{/if}}>{{$mitem.title}}</a>
 							{{/foreach}}
 						</div>
 						{{/if}}