nogafam
/
fedilove-ui
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Improved user experience when "Matching" accounts + internal improvements 

* toasts now support custom time and optional renderHtml
 for cases we need to draw HTML from the intl.text.
 (Make sure no user input is on any intl.text used with renderHtml, as it is not XSS safe)
* Toast needs to be initialized so we made an ugly hack to do so. We push the script to create an empty non-visible Toast on WebApp load
* Now _layout.html loads intl messages needed for fedilove-no-react
* UI improvement: Matching now shows a beautiful "Match <3" circle on top of the other person for 6 seconds
* Stability improved
This commit is contained in:
Bofh 2021-01-12 01:47:08 +01:00
parent 51f318e1a4
commit 92cb0668d0
6 changed files with 78 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/intl/en-US.js
View File

@ -62,6 +62,8 @@ export default {
meet: 'Meet!',
notifications: 'Notifications',
matches: 'Matches',
matchAction: 'MATCH &hearts;',
maybeAction: 'Maybe tomorrow!',
mutedUsers: 'Muted users',
pinnedStatuses: 'Pinned toots',
followRequests: 'Follow requests',

15
src/routes/_components/toast/Toast.html
View File

@ -1,6 +1,7 @@
<div class="toast-modal {shown ? 'shown' : ''}" role="alert" aria-hidden={!shown}>
<div class="toast-container">
{text}
<span id="plain-text">{text}</span>
<div id="html-text"></div>
</div>
</div>
<style>
@ -78,7 +79,17 @@
shown: true
})
return new Promise(resolve => {
setTimeout(resolve, TIME_TO_SHOW_TOAST)
var timeToWait = TIME_TO_SHOW_TOAST;
$('#theToast')[0].classList = '';
if (window.fediloveData.toastTime !== undefined) {
timeToWait = window.fediloveData.toastTime;
window.fediloveData.toastTime = undefined;
}
if (window.fediloveData.toastClass !== undefined) {
$('#theToast').addClass(window.fediloveData.toastClass);
window.fediloveData.toastClass = undefined;
}
setTimeout(resolve, timeToWait);
})
}).then(() => {
this.set({

3
src/routes/_components/toast/toast.js
View File

@ -10,9 +10,6 @@ const lazyToast = {
toast = new Toast({
target: document.querySelector('#theToast')
})
if (process.env.NODE_ENV !== 'production') {
window.toast = toast // for debugging
}
}
}
toast.say(text)

2
src/routes/_layout.html
View File

@ -105,6 +105,8 @@
window.__intl = {
'nothingToShow': formatIntl('intl.nothingToShow'),
'matchAction': formatIntl('intl.matchAction'),
'maybeAction': formatIntl('intl.maybeAction'),
};
loadScript('/jquery-3.5.1.min.js');

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

18
src/scss/themes/ozark.scss
View File

@ -327,6 +327,24 @@ body.meet, body.account {
}
div#theToast.notshown {
display: none !important;
}
div#theToast.match {
div.toast-modal > div.toast-container {
position: fixed;
top: 40%;
font-weight: bold;
background-image: linear-gradient(#b448ff, #ea790080);
color: #fff;
padding: 3em 1.5em;
border-radius: 100%;
font-size: 2.2em;
text-shadow: 2px 2px 20px #00000070;
}
}
div#chat-party-global {
display: flex;
height: 3.6em;

51
static/fedilove-no-react.js
View File

@ -269,9 +269,20 @@ var fediloveUI = {
countMax++;
}, 100);
},
toast: function(whatToSay) {
if (window.__toast !== undefined)
window.__toast.say(whatToSay);
toast: function(whatToSay, time, className, renderHtml) {
if (!fediloveData.toastInitialized) return;
if (time !== undefined)
window.fediloveData.toastTime = time;
if (className !== undefined)
window.fediloveData.toastClass = className;
if (renderHtml) {
$('#theToast #plain-text')[0].style = 'display: none';
$('#theToast #html-text').html(whatToSay);
} else {
$('#theToast #plain-text')[0].style = '';
$('#theToast #html-text').html('');
}
window.__toast.say(whatToSay);
},
animateMainContentSwipe: function(animName, cback) {
$('div.virtual-list')[0].style.animation = `${animName} .25s linear 1`;
@ -291,9 +302,9 @@ var fediloveUI = {
if (accObj === undefined) return;
if (fediloveData.meetRelationships[accObj.id] !== undefined)
fediloveData.meetRelationships[accObj.id] = { 'id': accObj.id, 'requested': true }
fediloveMastodon.API.matchAccount(accObj.id, function() {
fediloveUI.animateMainContentSwipe('yepMeet', function() { window.history.back() });
});
fediloveUI.toast(window.__intl.matchAction, 6000, 'match', true);
fediloveMastodon.API.matchAccount(accObj.id, function() { });
},
onAccountMaybe: function() {
const accObj = fediloveApi.getMeetAccount();
@ -306,6 +317,7 @@ var fediloveUI = {
accounts[accObj.id] = Date.now() + expire;
window.localStorage.store_maybeAccounts = JSON.stringify(accounts);
fediloveUI.toast(window.__intl.maybeAction, 2000);
fediloveUI.animateMainContentSwipe('acceptMeet', function() { window.history.back() });
}
};
@ -398,6 +410,9 @@ var fediloveData = {
meetRelationshipsFilled: false,
gotEmojifyTextFunction: false,
composeTxtKeypressEvent: false,
toastTime: undefined,
toastClass: undefined,
toastInitialized: false,
pagesLoaded: {}
};
var fediloveEvents = {
@ -481,9 +496,29 @@ function fedilove_customization() {
if (fediloveData.myAccountId === undefined && window.__store.get().verifyCredentials !== undefined) {
var aCountMax = 0;
const _a = setInterval(function() {
if (aCountMax > 20)
return clearInterval(_a);
const theData = window.__store.get().verifyCredentials[fediloveApi.getCurrentInstance()];
if (aCountMax > 20 || theData !== null)
fediloveData.myAccountId = theData !== null ? theData.id : undefined;
if (theData) {
fediloveData.myAccountId = theData ? theData.id : undefined;
return clearInterval(_a);
}
aCountMax++;
}, 500);
}
if (!fediloveData.toastInitialized) {
var aCountMax = 0;
const _a = setInterval(function() {
if (aCountMax > 20)
return clearInterval(_a);
if (window.__toast) {
window.fediloveData.toastClass = 'notshown';
window.fediloveData.toastTime = 10;
window.__toast.say('...');
fediloveData.toastInitialized = true;
return clearInterval(_a);
}
aCountMax++;
}, 500);
}