From 41ab849ecc886ee5d0927ff90da27aff4d052444 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Fri, 30 Apr 2021 14:58:30 +0200
Subject: [PATCH] WIP login Ui - Implements apps tooltip

---
 api/src/Framework/Login.php         | 12 ++++-
 pixelegg/css/mobile.css             | 66 +++++++++++++++++++++++++++-
 pixelegg/css/monochrome.css         | 66 +++++++++++++++++++++++++++-
 pixelegg/css/pixelegg.css           | 66 +++++++++++++++++++++++++++-
 pixelegg/less/layout_loginPage.less | 68 ++++++++++++++++++++++++++++-
 pixelegg/mobile/fw_mobile.css       | 66 +++++++++++++++++++++++++++-
 6 files changed, 337 insertions(+), 7 deletions(-)

diff --git a/api/src/Framework/Login.php b/api/src/Framework/Login.php
index d9723cf511..bfdf9ae810 100644
--- a/api/src/Framework/Login.php
+++ b/api/src/Framework/Login.php
@@ -320,8 +320,16 @@ class Login
 			foreach ($data['apps'] as $app)
 			{
 				$icon = strpos($app['icon'], "/") === 0 ? $GLOBALS['egw_info']['server']['webserver_url'].$app['icon'] : $app['icon'];
-				$nodes .= '<a class="app" href="'.htmlspecialchars($app['url']).'" title="'.htmlspecialchars(lang($app['title'])).'">'
-					.'<img src="'.htmlspecialchars($icon).'"/><span>'.htmlspecialchars($app['desc']).'</span></a>';
+				$title = lang($app['title']);
+				$nodes .= '<div class="app">'
+					.'<img class="icon" src="'.htmlspecialchars($icon).'"/>'
+					.'<div class="tooltip">'
+					.'<div class="content">'
+					.'<h3><a href="'.htmlspecialchars($app['url']).'" title="'.htmlspecialchars($title).'">'
+					.htmlspecialchars($title).'</a></h3>'
+					.'<img class="icon-bg" src="'.htmlspecialchars($icon).'"/>'
+					.'<p>'.htmlspecialchars($app['desc']).'</p><div class="arrow"></div>'
+					.'</div></div></div>';
 			}
 		}
 		return $nodes;
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index d5e27f74c3..6fee49e31e 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -2046,7 +2046,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   margin: 5px 20px auto 20px;
   display: flex;
 }
-#loginMainDiv div#login_footer .apps .app img {
+#loginMainDiv div#login_footer .apps .app img.icon {
   width: 30px;
   filter: brightness(0) invert(1);
   height: 30px;
@@ -2054,6 +2054,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 #loginMainDiv div#login_footer .apps .app span {
   display: none;
 }
+#loginMainDiv div#login_footer .apps .tooltip {
+  display: inline-flex;
+  position: absolute;
+  text-align: left;
+  height: 34px;
+  width: 30px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content {
+  min-width: 300px;
+  top: -10px;
+  left: 50%;
+  height: 190px;
+  max-height: 190px;
+  transform: translate(-50%, -100%);
+  padding: 10px 20px;
+  color: #444444;
+  background-color: #fafafa;
+  font-weight: normal;
+  font-size: 13px;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 99999999;
+  box-sizing: border-box;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.8s;
+  border: 1px solid #1865aa;
+  border-bottom: 6px solid #1865aa;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
+  width: 35px;
+  position: absolute;
+  margin: 0 auto;
+  right: 15px;
+  top: 15px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content h3 {
+  height: 30px;
+  border-bottom: 1px solid #d9e4ed;
+}
+#loginMainDiv div#login_footer .apps .tooltip:hover .content {
+  visibility: visible;
+  opacity: 1;
+}
+#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
+  visibility: visible;
+  opacity: 1;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -21px;
+  height: 15px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
+  content: '';
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background-color: #1865aa;
+}
 #loginMainDiv div#centerBox {
   margin: 0 auto -20px;
   background: transparent;
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index 77ef1be6ac..e9126ac6d3 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -2026,7 +2026,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   margin: 5px 20px auto 20px;
   display: flex;
 }
-#loginMainDiv div#login_footer .apps .app img {
+#loginMainDiv div#login_footer .apps .app img.icon {
   width: 30px;
   filter: brightness(0) invert(1);
   height: 30px;
@@ -2034,6 +2034,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 #loginMainDiv div#login_footer .apps .app span {
   display: none;
 }
+#loginMainDiv div#login_footer .apps .tooltip {
+  display: inline-flex;
+  position: absolute;
+  text-align: left;
+  height: 34px;
+  width: 30px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content {
+  min-width: 300px;
+  top: -10px;
+  left: 50%;
+  height: 190px;
+  max-height: 190px;
+  transform: translate(-50%, -100%);
+  padding: 10px 20px;
+  color: #444444;
+  background-color: #fafafa;
+  font-weight: normal;
+  font-size: 13px;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 99999999;
+  box-sizing: border-box;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.8s;
+  border: 1px solid #1865aa;
+  border-bottom: 6px solid #1865aa;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
+  width: 35px;
+  position: absolute;
+  margin: 0 auto;
+  right: 15px;
+  top: 15px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content h3 {
+  height: 30px;
+  border-bottom: 1px solid #d9e4ed;
+}
+#loginMainDiv div#login_footer .apps .tooltip:hover .content {
+  visibility: visible;
+  opacity: 1;
+}
+#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
+  visibility: visible;
+  opacity: 1;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -21px;
+  height: 15px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
+  content: '';
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background-color: #1865aa;
+}
 #loginMainDiv div#centerBox {
   margin: 0 auto -20px;
   background: transparent;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index f96f957212..68d948659d 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -2036,7 +2036,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   margin: 5px 20px auto 20px;
   display: flex;
 }
-#loginMainDiv div#login_footer .apps .app img {
+#loginMainDiv div#login_footer .apps .app img.icon {
   width: 30px;
   filter: brightness(0) invert(1);
   height: 30px;
@@ -2044,6 +2044,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 #loginMainDiv div#login_footer .apps .app span {
   display: none;
 }
+#loginMainDiv div#login_footer .apps .tooltip {
+  display: inline-flex;
+  position: absolute;
+  text-align: left;
+  height: 34px;
+  width: 30px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content {
+  min-width: 300px;
+  top: -10px;
+  left: 50%;
+  height: 190px;
+  max-height: 190px;
+  transform: translate(-50%, -100%);
+  padding: 10px 20px;
+  color: #444444;
+  background-color: #fafafa;
+  font-weight: normal;
+  font-size: 13px;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 99999999;
+  box-sizing: border-box;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.8s;
+  border: 1px solid #1865aa;
+  border-bottom: 6px solid #1865aa;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
+  width: 35px;
+  position: absolute;
+  margin: 0 auto;
+  right: 15px;
+  top: 15px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content h3 {
+  height: 30px;
+  border-bottom: 1px solid #d9e4ed;
+}
+#loginMainDiv div#login_footer .apps .tooltip:hover .content {
+  visibility: visible;
+  opacity: 1;
+}
+#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
+  visibility: visible;
+  opacity: 1;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -21px;
+  height: 15px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
+  content: '';
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background-color: #1865aa;
+}
 #loginMainDiv div#centerBox {
   margin: 0 auto -20px;
   background: transparent;
diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less
index 168394f808..f9eec60607 100644
--- a/pixelegg/less/layout_loginPage.less
+++ b/pixelegg/less/layout_loginPage.less
@@ -179,13 +179,79 @@ div#loginMainDiv.stockLoginBackground {
 				height: 30px;
 				margin: 5px 20px auto 20px;
 				display: flex;
-				img {
+				img.icon {
 					width: 30px;
 					filter: brightness(0) invert(1);
 					height: 30px;
 				}
 				span {display:none;}
 			}
+			.tooltip {
+				display: inline-flex;
+				position: absolute;
+				text-align: left;
+				height: 34px;
+				width: 30px;
+			}
+			.tooltip .content {
+				min-width: 300px;
+				top: -10px;
+				left: 50%;
+				height: 190px;
+				max-height: 190px;
+				transform: translate(-50%, -100%);
+				padding: 10px 20px;
+				color: #444444;
+				background-color: #fafafa;
+				font-weight: normal;
+				font-size: 13px;
+				border-radius: 3px;
+				position: absolute;
+				z-index: 99999999;
+				box-sizing: border-box;
+				visibility: hidden;
+				opacity: 0;
+				transition: opacity 0.8s;
+				border: 1px solid #1865aa;
+				border-bottom: 6px solid #1865aa;
+				img.icon-bg {
+					width: 35px;
+					position: absolute;
+					margin: 0 auto;
+					right: 15px;
+					top: 15px;
+				}
+
+				h3 {
+					height: 30px;
+					border-bottom: 1px solid #d9e4ed;
+				}
+			}
+
+			.tooltip:hover .content {
+				visibility:visible;
+				opacity:1;
+				&:hover {
+					visibility:visible;
+					opacity:1;
+				}
+			}
+			.tooltip .content .arrow{
+				width: 100%;
+				position: absolute;
+				left: 0;
+				bottom: -21px;
+				height: 15px;
+				&::after {
+					content: '';
+					position: absolute;
+					width: 9px;
+					height: 9px;
+					left: 50%;
+					transform: translate(-50%, -50%) rotate(45deg);
+					background-color: #1865aa;
+				}
+			}
 		}
 	}
 
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 4fe009669d..3d5647767c 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -2057,7 +2057,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   margin: 5px 20px auto 20px;
   display: flex;
 }
-#loginMainDiv div#login_footer .apps .app img {
+#loginMainDiv div#login_footer .apps .app img.icon {
   width: 30px;
   filter: brightness(0) invert(1);
   height: 30px;
@@ -2065,6 +2065,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 #loginMainDiv div#login_footer .apps .app span {
   display: none;
 }
+#loginMainDiv div#login_footer .apps .tooltip {
+  display: inline-flex;
+  position: absolute;
+  text-align: left;
+  height: 34px;
+  width: 30px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content {
+  min-width: 300px;
+  top: -10px;
+  left: 50%;
+  height: 190px;
+  max-height: 190px;
+  transform: translate(-50%, -100%);
+  padding: 10px 20px;
+  color: #444444;
+  background-color: #fafafa;
+  font-weight: normal;
+  font-size: 13px;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 99999999;
+  box-sizing: border-box;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.8s;
+  border: 1px solid #1865aa;
+  border-bottom: 6px solid #1865aa;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
+  width: 35px;
+  position: absolute;
+  margin: 0 auto;
+  right: 15px;
+  top: 15px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content h3 {
+  height: 30px;
+  border-bottom: 1px solid #d9e4ed;
+}
+#loginMainDiv div#login_footer .apps .tooltip:hover .content {
+  visibility: visible;
+  opacity: 1;
+}
+#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
+  visibility: visible;
+  opacity: 1;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -21px;
+  height: 15px;
+}
+#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
+  content: '';
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background-color: #1865aa;
+}
 #loginMainDiv div#centerBox {
   margin: 0 auto -20px;
   background: transparent;