A lot of improvements in pages.meet

* Better UX on dialogs (app.toast)
* Added messages on meet.actions most actions
* Locale changes

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;

web/src/app/js/app.js

@@ -366,13 +366,16 @@ app.toast = {
 		const id = options.id || 'toast-'+uuidv4();
 		const template = options.template
 			|| '<div id="{.id}">{.text}</div>';
-		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) {

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;

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];

web/src/app/js/templates/toast/confirm.html

@@ -1,6 +1,6 @@
 <div class="confirm flex">
 	<a class="width-max text-center button rounder nope"
-		onclick="app.toast.dismiss('{.id}', event)">NO</a>
+		onclick="app.toast.dismiss('{.id}', event)">{.no_text}</a>
 	<a class="width-max text-center button rounder yes"
-		onclick="app.toast.accept('{.id}', event)">YES</a>
+		onclick="app.toast.accept('{.id}', event)">{.yes_text}</a>
 </div>

web/src/app/js/templates/toast/error.html

@@ -1,6 +1,8 @@
 <div id="{.id}" class="toast error"
 	onclick="app.toast.dismiss('{.id}')">
-	<div class="text"><i class="fa fa-times fa-fw">
-		</i>{.text}</div>
-	{confirmTemplate}
+	<div class="around">
+		<div class="text"><i class="fa fa-times fa-fw">
+			</i>{.text}</div>
+		{confirmTemplate}
+	</div>
 </div>

web/src/app/js/templates/toast/info.html

@@ -1,6 +1,8 @@
 <div id="{.id}" class="toast info"
 	onclick="app.toast.dismiss('{.id}')">
-	<div class="text"><i class="fa fa-info fa-fw">
-		</i>{.text}</div>
-	{confirmTemplate}
+	<div class="around">
+		<div class="text"><i class="fa fa-info fa-fw">
+			</i>{.text}</div>
+		{confirmTemplate}
+	</div>
 </div>

web/src/app/js/templates/toast/warn.html

@@ -1,6 +1,8 @@
 <div id="{.id}" class="toast warn"
 	onclick="app.toast.dismiss('{.id}')">
-	<div class="text"><i class="fa fa-warning fa-fw">
-		</i>{.text}</div>
-	{confirmTemplate}
+	<div class="around">
+		<div class="text"><i class="fa fa-warning fa-fw">
+			</i>{.text}</div>
+		{confirmTemplate}
+	</div>
 </div>

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

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