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', + ], ], ];