From 82ab8d9092d49de143d1a20c8517dbf4898ea5ad Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 3 May 2021 17:13:04 +0200
Subject: [PATCH] WIP login Ui: add motion into apps list

---
 api/src/Framework/Login.php         |  4 +++-
 pixelegg/css/mobile.css             | 11 +++++++++++
 pixelegg/css/monochrome.css         | 11 +++++++++++
 pixelegg/css/pixelegg.css           | 11 +++++++++++
 pixelegg/less/layout_loginPage.less |  6 ++++++
 pixelegg/mobile/fw_mobile.css       | 11 +++++++++++
 6 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/api/src/Framework/Login.php b/api/src/Framework/Login.php
index 075c557fd8..79913e046e 100644
--- a/api/src/Framework/Login.php
+++ b/api/src/Framework/Login.php
@@ -315,13 +315,14 @@ class Login
 		}
 		$data = json_decode($json, true);
 		$nodes = '';
+		$counter = 1;
 		if (is_array($data))
 		{
 			foreach ($data['apps'] as $app)
 			{
 				$icon = strpos($app['icon'], "/") === 0 ? $GLOBALS['egw_info']['server']['webserver_url'].$app['icon'] : $app['icon'];
 				$title = lang($app['title']);
-				$nodes .= '<div class="app">'
+				$nodes .= '<div class="app" style="animation:login-apps '.$counter*0.1.'s ease-out">'
 					.'<img class="icon" src="'.htmlspecialchars($icon).'"/>'
 					.'<div class="tooltip">'
 					.'<div class="content">'
@@ -330,6 +331,7 @@ class Login
 					.'<img class="icon-bg" src="'.htmlspecialchars($icon).'"/>'
 					.'<p>'.htmlspecialchars($app['desc']).'</p><div class="arrow"></div>'
 					.'</div></div></div>';
+				$counter++;
 			}
 		}
 		return $nodes;
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index fccda60f7b..5560abf521 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -1896,6 +1896,17 @@ body {
  * @package pixelegg
  * @version $Id$
  */
+@keyframes login-apps {
+  0% {
+    transform: translateY(30px);
+  }
+  60% {
+    transform: translateY(45px);
+  }
+  100% {
+    transform: none;
+  }
+}
 /**
  * 19.1 Login page with stock background image
  */
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index a0669f2302..b89ee6e551 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -1876,6 +1876,17 @@ body {
  * @package pixelegg
  * @version $Id$
  */
+@keyframes login-apps {
+  0% {
+    transform: translateY(30px);
+  }
+  60% {
+    transform: translateY(45px);
+  }
+  100% {
+    transform: none;
+  }
+}
 /**
  * 19.1 Login page with stock background image
  */
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 634491ce2f..a2266d71a2 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -1886,6 +1886,17 @@ body {
  * @package pixelegg
  * @version $Id$
  */
+@keyframes login-apps {
+  0% {
+    transform: translateY(30px);
+  }
+  60% {
+    transform: translateY(45px);
+  }
+  100% {
+    transform: none;
+  }
+}
 /**
  * 19.1 Login page with stock background image
  */
diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less
index 880fe95ec0..3d9c2f80e4 100644
--- a/pixelegg/less/layout_loginPage.less
+++ b/pixelegg/less/layout_loginPage.less
@@ -16,6 +16,12 @@
 
 @import "def_colors.less";
 
+
+@keyframes login-apps {
+	0% {transform: translateY(30px)}
+	60%{transform:translateY(45px)}
+	100% {transform: none}
+}
 /**
  * 19.1 Login page with stock background image
  */
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index a23fe4c6dc..5e331ae678 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -1907,6 +1907,17 @@ body {
  * @package pixelegg
  * @version $Id$
  */
+@keyframes login-apps {
+  0% {
+    transform: translateY(30px);
+  }
+  60% {
+    transform: translateY(45px);
+  }
+  100% {
+    transform: none;
+  }
+}
 /**
  * 19.1 Login page with stock background image
  */