Improving matches management screen (which is made from scratch)
* Now the items link to it's account view screen * Implemented loading of follow requests (which are match requests) * Improved UI on account items (/matches page)
This commit is contained in:
parent
37c181ddbb
commit
147fb50569
|
|
@ -1,11 +1,11 @@
|
|||
<div id="tpl-follow" class="account">
|
||||
<div id="tpl-follow" class="account" style="display: none">
|
||||
<div class="account__wrapper">
|
||||
<div class="account__avatar-wrapper">
|
||||
<div class="account__avatar">
|
||||
<img alt="Avatar" src="[userAvatar]" />
|
||||
</div>
|
||||
</div>
|
||||
<a target="_blank" href="[originalAccountUrl]" title="[userHandle]" to="/accounts/[userID]" class="permalink account__display-name">
|
||||
<a href="/accounts/[userID]" title="[userHandle]" class="permalink account__display-name">
|
||||
<span class="display-name">
|
||||
<bdi><strong class="display-name__html">[displayName]</strong></bdi><br>
|
||||
<span class="display-name__account">[userHandle]</span>
|
||||
|
|
|
|||
|
|
@ -504,17 +504,30 @@ div.main-content.meet, div.main-content.account {
|
|||
div.main-content.matches {
|
||||
|
||||
div.account {
|
||||
margin: 1em 0;
|
||||
|
||||
div.account__wrapper {
|
||||
display: flex;
|
||||
|
||||
div.account__avatar > img {
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
a.account__display-name {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 10em;
|
||||
padding-left: 1em;
|
||||
span.display-name {
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
div.account__relationship {
|
||||
width: 100%;
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@ var fediloveUI = {
|
|||
if (countMax > 100) {
|
||||
return clearInterval(_this);
|
||||
}
|
||||
const items = window.fediloveFunctions.filterItemsForFedilove(window.__store.get().timelineItemSummaries);
|
||||
const items = fediloveFunctions.filterItemsForFedilove(window.__store.get().timelineItemSummaries);
|
||||
if (items !== null && items.length > 0) {
|
||||
var refIds = [];
|
||||
for (var it of items) {
|
||||
|
|
@ -391,14 +391,29 @@ var fediloveApi = {
|
|||
if (localStorage.store_currentInstance === undefined)
|
||||
return undefined;
|
||||
return JSON.parse(localStorage.store_currentInstance);
|
||||
},
|
||||
getFedilovedName: function(nameTxt, emojis) {
|
||||
emojis = emojis || undefined;
|
||||
nameTxt = nameTxt.replace(/#fedilove/gi, '').trim();
|
||||
nameTxt = nameTxt.replace(/\s+/g, ' ').trim().replace(/\s/g, ' ');
|
||||
if (emojis === undefined || fediloveFunctions.emojifyText === undefined)
|
||||
return nameTxt;
|
||||
return fediloveFunctions.emojifyText(nameTxt, emojis);
|
||||
}
|
||||
};
|
||||
var fediloveFunctions = {
|
||||
filterItemsForFedilove: function(items) {
|
||||
if (typeof items == "string")
|
||||
items = JSON.parse(items);
|
||||
if (items === null || items === undefined)
|
||||
return null;
|
||||
let newItems = [];
|
||||
for (var item of items) {
|
||||
if (item.display_name !== undefined) {
|
||||
if (item.id != window.fediloveData.myAccountId)
|
||||
newItems.push(item);
|
||||
continue;
|
||||
}
|
||||
if (item.account === undefined) {
|
||||
if (item.accountId !== undefined &&
|
||||
item.accountId !== window.fediloveData.myAccountId)
|
||||
|
|
@ -429,7 +444,8 @@ var fediloveData = {
|
|||
toastTime: undefined,
|
||||
toastClass: undefined,
|
||||
toastInitialized: false,
|
||||
pagesLoaded: {}
|
||||
pagesLoaded: {},
|
||||
tpls: {}
|
||||
};
|
||||
var fediloveEvents = {
|
||||
onGotEmojifyTextFunction: function() {
|
||||
|
|
@ -448,9 +464,8 @@ var fediloveEvents = {
|
|||
return;
|
||||
}
|
||||
if (fediloveData.gotEmojifyTextFunction) {
|
||||
dname = dname.replace(/#fedilove/gi, '').trim();
|
||||
dname = dname.replace(/\s+/g, ' ').trim().replace(/\s/g, ' ');
|
||||
fediloveUI.paintChatAvatarAndName(accid, acct, avatar, fediloveFunctions.emojifyText(dname, emojis));
|
||||
fediloveUI.paintChatAvatarAndName(accid, acct, avatar,
|
||||
fediloveApi.getFedilovedName(dname, emojis));
|
||||
clearInterval(_this);
|
||||
}
|
||||
count++;
|
||||
|
|
@ -677,7 +692,39 @@ function fedilove_customization() {
|
|||
}
|
||||
else if (window.location.pathname == '/matches') {
|
||||
$('div.main-content').addClass('matches');
|
||||
console.log('matches');
|
||||
if ($('#tpl-follow').length > 0 &&
|
||||
fediloveData.tpls.accountMatches === undefined) {
|
||||
var elem = $('#tpl-follow').clone();
|
||||
elem[0].removeAttribute('id');
|
||||
elem[0].removeAttribute('style');
|
||||
fediloveData.tpls.accountMatches = elem[0].outerHTML;
|
||||
}
|
||||
var filledOnce = false;
|
||||
const _fillAccountMatches = function(accounts) {
|
||||
if (!filledOnce) {
|
||||
$('#manage-matches').html('');
|
||||
filledOnce = true;
|
||||
}
|
||||
for (var account of accounts) {
|
||||
var acct = account.acct;
|
||||
if (acct.charAt(0) !== '@')
|
||||
acct = `@${acct}`;
|
||||
if (acct.split('@').length-1 === 1)
|
||||
acct += `@${fediloveApi.getCurrentInstance()}`;
|
||||
const dname = fediloveApi.getFedilovedName(account.display_name, account.emojis);
|
||||
var htm = fediloveData.tpls.accountMatches;
|
||||
htm = htm.replace(/\[userID\]/g, account.id);
|
||||
htm = htm.replace(/\[userAvatar\]/g, account.avatar);
|
||||
htm = htm.replace(/\[originalAccountUrl\]/g, account.url);
|
||||
htm = htm.replace(/\[userHandle\]/g, acct);
|
||||
htm = htm.replace(/\[displayName\]/g, dname);
|
||||
$('#manage-matches').append(htm);
|
||||
}
|
||||
};
|
||||
fediloveMastodon.API.getRequestsToFollowMe(function(data) {
|
||||
const items = fediloveFunctions.filterItemsForFedilove(data);
|
||||
_fillAccountMatches(items);
|
||||
});
|
||||
}
|
||||
else if (window.location.pathname == '/direct') {
|
||||
$('div.main-content').addClass('direct');
|
||||
|
|
|
|||
Loading…
Reference in New Issue