diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index 887a793..4748dfe 100644
--- a/web/src/app/css/app.css
+++ b/web/src/app/css/app.css
@@ -248,28 +248,50 @@ main {
background: #0000004d;
}
-.toast .fa { vertical-align: middle }
+
+.toast .fa {
+ margin-right: .1em;
+ vertical-align: middle;
+ position: relative;
+ top: -2px;
+ font-size: 1.5em;
+}
+.toast.info .fa { color: #6cfb60 }
+.toast.warn .fa { color: #fffc33 }
+.toast.error .fa { color: #ffc949 }
+
.toast .text {
padding: 1em;
font-size: 1.1em;
+ font-weight: bold;
}
-.toast {
+.toast .around {
border-radius: 2em;
+ padding: .5em;
+}
+.toast.info .around { border: 5px dashed #6cfb60 }
+.toast.warn .around { border: 5px dashed #fffc33 }
+.toast.error .around { border: 5px dashed #ac1c1c }
+.toast {
+ border-radius: 2.6em;
box-shadow: 0px 0px 2em #00000087;
border: 1px solid #00000012;
- margin-top: 1em;
min-width: 15em;
+ max-width: 90%;
+ margin: 1em auto auto auto;
+ padding: .5em;
color: #fff;
user-select: auto;
pointer-events: all;
+ word-break: break-word;
}
.toast.info { background: #5959ff }
.toast.warn { background: #cc8932 }
.toast.error { background: #d74848 }
.toast .confirm {
- background: #00000036;
- border-radius: 0px 0px 2em 2em;
+ background: #00000021;
+ border-radius: 0px 0px 1.5em 1.5em;
padding: .4em 1em;
}
.toast .confirm .nope,
@@ -277,6 +299,7 @@ main {
padding: .5em;
font-weight: bold;
user-select: none;
+ text-transform: uppercase;
}
.toast .confirm .nope {
color: #fba8a8;
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index a388707..9134ff9 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -366,13 +366,16 @@ app.toast = {
const id = options.id || 'toast-'+uuidv4();
const template = options.template
|| '
{.text}
';
- const data = { id, text };
+ const no_text = s('app.no') || 'No';
+ const yes_text = s('app.yes') || 'Yes';
+ const data = { id, text, no_text, yes_text };
const tplfilled = app.template.fill(data, template);
toasts.innerHTML += tplfilled;
setTimeout(function() { app.toast.remove(id) },
- options.millis || 3000);
+ options.millis || app.toast.DEFAULT_MILLIS);
calcHeightMobile();
},
+ DEFAULT_MILLIS: 3000,
}
function scriptPageHandler(modname, cfg) {
@@ -395,6 +398,8 @@ window.onload = function(e) {
scriptPageHandler('pages.chat', { exact: 'chat' });
}
+ app.template.loadMany(['toast.confirm','toast.info','toast.warn','toast.error']);
+
if (http.cache.expired('instance_emojis', 30*60)) {
http.cache.del('instance_emojis');
http.get('/api/v1/instance/emojis', {}, function(data) {
diff --git a/web/src/app/js/base.js b/web/src/app/js/base.js
index f10be47..726f9c4 100644
--- a/web/src/app/js/base.js
+++ b/web/src/app/js/base.js
@@ -82,6 +82,17 @@ function dragElement(elmnt, options, onStopDrag) {
}
}
+function animateTimeout(elem, style, time) {
+ time = time || 1000;
+ if (elem === undefined || elem === null)
+ return;
+ if (typeof elem === 'string')
+ elem = document.querySelector(elem);
+ elem.classList.add(style);
+ setTimeout(function() {
+ elem.classList.remove(style) }, time);
+}
+
function isVisible(element) {
const rect = element.getBoundingClientRect();
return (
@@ -134,6 +145,7 @@ function uuidv4() {
function getNormalizedURI() { return window.location.pathname.replace(/\/+?$/, '') }
function capitalize(s) { return s.charAt(0).toUpperCase() + s.substr(1) }
+function randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min) }
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)) }
async function waitUntil(cback, secs) {
var i = 0;
diff --git a/web/src/app/js/pages/meet.js b/web/src/app/js/pages/meet.js
index 537b9f2..aa5d1e5 100644
--- a/web/src/app/js/pages/meet.js
+++ b/web/src/app/js/pages/meet.js
@@ -157,31 +157,39 @@ app.pages.meet = {
document.activeElement.blur();
const current = app.pages.meet.dataCurrent();
if (current === null)
- return console.error('TODO: add-to-toast: notify user an unknown error');
+ return app.toast.error(s('error.unknown_error'));
http.post(`/api/v1/accounts/follow?url=${current.account.url}`, {}, function(json) {
if (json === undefined) return;
if (json.error !== undefined)
- console.error('TODO: add-to-toast: notify user an unknown error');
- else if (json.result !== undefined && json.result === 1)
- console.log('TODO: add-to-toast: crush was marked succesfully!');
+ app.toast.error(app.strings.app.error[json.error]);
+ else if (json.result !== undefined && json.result === 1) {
+ const n = randomNum(0, 3);
+ app.toast.info(app.strings.app.ok['crush_success_'+n]);
+ }
});
},
discard: function() {
document.activeElement.blur();
const current = app.pages.meet.dataCurrent();
if (current === null)
- return console.error('TODO: add-to-toast: notify user an unknown error');
+ return app.toast.error(s('error.unknown_error'));
http.post(`/api/v1/accounts/block?url=${current.account.url}`, {}, function(json) {
if (json === undefined) return;
if (json.error !== undefined)
- console.error('TODO: add-to-toast: notify user an unknown error');
+ app.toast.error(app.strings.app.error[json.error]);
else if (json.result !== undefined && json.result === 1) {
- console.log('TODO: add-to-toast: person was blocked succesfully!');
- for (var i = app.pages.meet.data.length-1; i >= 0; i--)
- if (app.pages.meet.data[i].account.url === current.account.url)
- app.pages.meet.data.splice(i, 1);
- app.pages.meet.carousel.set(0);
- app.pages.meet.paint();
+ const n = randomNum(0, 3);
+ app.toast.warn(app.strings.app.ok['discarded_success_'+n]);
+ setTimeout(function() {
+ for (var i = app.pages.meet.data.length-1; i >= 0; i--)
+ if (app.pages.meet.data[i].account.url === current.account.url)
+ app.pages.meet.data.splice(i, 1);
+ app.pages.meet.carousel.set(0);
+ app.pages.meet.paint();
+ const elem = app.pages.meet.carousel._elements()[
+ app.pages.meet.carousel._current];
+ animateTimeout(elem, 'slide-from-right', 100);
+ }, app.toast.DEFAULT_MILLIS);
}
});
},
@@ -235,15 +243,12 @@ app.pages.meet = {
};
if (!app.carousel.hasPrev(app.pages.meet.carousel))
options.right = false;
- if (direction === 'left') {
- current.classList.add('slide-from-left');
- setTimeout(function() {
- current.classList.remove('slide-from-left')}, 100);
- } else if (direction === 'right') {
- current.classList.add('slide-from-right');
- setTimeout(function() {
- current.classList.remove('slide-from-right')}, 100);
- }
+
+ if (direction === 'left')
+ animateTimeout(current, 'slide-from-left', 100);
+ else if (direction === 'right')
+ animateTimeout(current, 'slide-from-right', 100);
+
dragElement(current, options, function(a1, a2) {
const ix = a1[0];
const fx = a2[0];
diff --git a/web/src/app/js/templates/toast/confirm.html b/web/src/app/js/templates/toast/confirm.html
index 00702ca..7775cd7 100644
--- a/web/src/app/js/templates/toast/confirm.html
+++ b/web/src/app/js/templates/toast/confirm.html
@@ -1,6 +1,6 @@
NO
+ onclick="app.toast.dismiss('{.id}', event)">{.no_text}
YES
+ onclick="app.toast.accept('{.id}', event)">{.yes_text}
diff --git a/web/src/app/js/templates/toast/error.html b/web/src/app/js/templates/toast/error.html
index 720910a..340ca06 100644
--- a/web/src/app/js/templates/toast/error.html
+++ b/web/src/app/js/templates/toast/error.html
@@ -1,6 +1,8 @@
-
- {.text}
- {confirmTemplate}
+
+
+ {.text}
+ {confirmTemplate}
+
diff --git a/web/src/app/js/templates/toast/info.html b/web/src/app/js/templates/toast/info.html
index 3ec1a55..bc71dc8 100644
--- a/web/src/app/js/templates/toast/info.html
+++ b/web/src/app/js/templates/toast/info.html
@@ -1,6 +1,8 @@
-
- {.text}
- {confirmTemplate}
+
+
+ {.text}
+ {confirmTemplate}
+
diff --git a/web/src/app/js/templates/toast/warn.html b/web/src/app/js/templates/toast/warn.html
index d852ab2..4639afe 100644
--- a/web/src/app/js/templates/toast/warn.html
+++ b/web/src/app/js/templates/toast/warn.html
@@ -1,6 +1,8 @@
-
- {.text}
- {confirmTemplate}
+
+
+ {.text}
+ {confirmTemplate}
+
diff --git a/web/src/config/lang/en.php b/web/src/config/lang/en.php
index 5870fa4..8c2112f 100644
--- a/web/src/config/lang/en.php
+++ b/web/src/config/lang/en.php
@@ -15,5 +15,22 @@ $strings = [
'the_fediverse' => 'The Fediverse',
'view_more' => 'view more',
'view_less' => 'view less',
+ 'yes' => 'Yes',
+ 'no' => 'No',
+ 'ok' => [
+ 'crush_success_0' => 'Your new Crush!',
+ 'crush_success_1' => 'Love is in the air!',
+ 'crush_success_2' => 'Love is so much beautiful',
+ 'crush_success_3' => '¿Will it be your new love?',
+ 'discarded_success_0' => 'I don\'t like you, it\'s okay',
+ 'discarded_success_1' => 'I didn\'t like you, i\'m sorry',
+ 'discarded_success_2' => 'Maybe other person like you, but not me',
+ 'discarded_success_3' => 'Encontrarás a alguien, pero no seré yo',
+ 'discarded_success_3' => 'You\'ll find someone, but it won\'t be me',
+ ],
+ 'error' => [
+ 'unknown_error' => 'We are sorry, an unknown error has ocurred.',
+ 'already_following' => 'This person is your Crush already',
+ ],
],
];
diff --git a/web/src/config/lang/es.php b/web/src/config/lang/es.php
index dac66bb..e7cdd14 100644
--- a/web/src/config/lang/es.php
+++ b/web/src/config/lang/es.php
@@ -15,5 +15,21 @@ $strings = [
'the_fediverse' => 'El Fediverso',
'view_more' => 'ver más',
'view_less' => 'ver menos',
+ 'yes' => 'Sí',
+ 'no' => 'No',
+ 'ok' => [
+ 'crush_success_0' => '¡Tu nuevo Crush!',
+ 'crush_success_1' => '¡El amor está en el aire!',
+ 'crush_success_2' => 'Qué bonito es el amor',
+ 'crush_success_3' => '¿Será este tu nuevo amor?',
+ 'discarded_success_0' => 'No me gustas, no pasa nada',
+ 'discarded_success_1' => 'No me has gustado, lo siento',
+ 'discarded_success_2' => 'Quizás le guste a otra persona, pero a mi no',
+ 'discarded_success_3' => 'Encontrarás a alguien, pero no seré yo',
+ ],
+ 'error' => [
+ 'unknown_error' => 'Lo sentimos, ha ocurrido un error inesperado.',
+ 'already_following' => 'Esta persona ya es tu Crush',
+ ],
],
];