From e0b98b7c4c0bc75a71041bb8b8b41b92e54a54a1 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Wed, 7 Sep 2022 11:53:29 +0200
Subject: [PATCH] Change framework user avatar to et2-avatar

---
 api/src/Framework.php                    |  6 +-
 pixelegg/css/pixelegg.css                | 27 +++-----
 pixelegg/less/layout_raster_buttons.less | 82 +++++++++++-------------
 3 files changed, 47 insertions(+), 68 deletions(-)

diff --git a/api/src/Framework.php b/api/src/Framework.php
index f29a784c0c..4465550e4d 100644
--- a/api/src/Framework.php
+++ b/api/src/Framework.php
@@ -639,10 +639,10 @@ abstract class Framework extends Framework\Extra
 		$stats = Hooks::process('framework_avatar_stat');
 		$stat = array_pop($stats);
 
-		return '<span title="'.Accounts::format_username().'" class="avatar"><img src="'.Egw::link('/api/avatar.php', array(
+		return '<et2-avatar shape="squared" title="'.Accounts::format_username().'" src="'.Egw::link('/api/avatar.php', array(
 								'account_id' => $GLOBALS['egw_info']['user']['account_id'],
-							)).'"/>'.(!empty($stat) ?
-				'<span class="fw_avatar_stat '.$stat['class'].'" title="'.$stat['title'].'">'.$stat['body'].'</span>' : '').'</span>';
+							)).'"></et2-avatar>'.(empty($stat) ?
+				'<span class="fw_avatar_stat '.$stat['class'].'" title="'.$stat['title'].'">'.$stat['body'].'</span>' : '');
 	}
 
 	/**
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 298e395822..b6bbc892c2 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -5312,21 +5312,10 @@ span.overlayContainer img.overlay {
 #egw_fw_topmenu_info_items .topmenu_info_item:hover {
   background-color: rgba(153, 204, 255, 0.4);
 }
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span {
-  height: 40px;
-  width: 40px;
-  display: inline-block;
-  border: none;
-  margin-top: 2px;
-  margin-left: 1px;
-}
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span img {
-  width: 40px;
-}
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span span.fw_avatar_stat {
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar span.fw_avatar_stat {
   position: absolute;
 }
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span span.stat1 {
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar span.stat1 {
   width: 14px;
   height: 14px;
   position: absolute;
@@ -5343,22 +5332,22 @@ span.overlayContainer img.overlay {
   line-height: 14px;
   border: 2px solid #fbfbfb;
 }
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span span.online {
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar span.online {
   background-color: #2de0a5;
 }
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span span.offline {
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar span.offline {
   background-color: #cbced1;
 }
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span span.away {
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar span.away {
   background-color: #ffd21f;
 }
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span span.busy {
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar span.busy {
   background-color: #f5455c;
 }
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span span.noconnection {
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar span.noconnection {
   background-color: #E1E16D;
 }
-#egw_fw_topmenu_info_items #topmenu_info_user_avatar span span.noconnection:before {
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar span.noconnection:before {
   content: "!";
 }
 #egw_fw_topmenu_info_items #topmenu_info_logout {
diff --git a/pixelegg/less/layout_raster_buttons.less b/pixelegg/less/layout_raster_buttons.less
index 4df9523fd3..982ea16a7a 100644
--- a/pixelegg/less/layout_raster_buttons.less
+++ b/pixelegg/less/layout_raster_buttons.less
@@ -42,52 +42,42 @@
 		}
 	}
 	#topmenu_info_user_avatar {
-		span {
-			height: 40px;
-			width: 40px;
-			display: inline-block;
-			border: none;
-			margin-top: 2px;
-			margin-left: 1px;
-			img {
-				width: 40px;
-			}
-			span.fw_avatar_stat {
-				position: absolute;
-			}
-			span.stat1 {
-				width: 14px;
-				height: 14px;
-				position: absolute;
-				right: 30px;
-				bottom: 0px;
-				border-radius: 50%;
-				z-index: 100000;
-				background-size: 14px;
-				background-repeat: no-repeat;
-				color: #2d2b2b;
-				font-weight: bold;
-				text-align: center;
-				font-size: 10px;
-				line-height: 14px;
-				border: 2px solid #fbfbfb;
-			}
-			span.online {
-				background-color: #2de0a5;
-			}
-			span.offline {
-				background-color: #cbced1;
-			}
-			span.away {
-				background-color: #ffd21f;
-			}
-			span.busy {
-				background-color: #f5455c;
-			}
-			span.noconnection {
-				background-color: #E1E16D;
-				&:before {content:"!"}
-			}
+
+		span.fw_avatar_stat {
+			position: absolute;
+		}
+		span.stat1 {
+			width: 14px;
+			height: 14px;
+			position: absolute;
+			right: 30px;
+			bottom: 0px;
+			border-radius: 50%;
+			z-index: 100000;
+			background-size: 14px;
+			background-repeat: no-repeat;
+			color: #2d2b2b;
+			font-weight: bold;
+			text-align: center;
+			font-size: 10px;
+			line-height: 14px;
+			border: 2px solid #fbfbfb;
+		}
+		span.online {
+			background-color: #2de0a5;
+		}
+		span.offline {
+			background-color: #cbced1;
+		}
+		span.away {
+			background-color: #ffd21f;
+		}
+		span.busy {
+			background-color: #f5455c;
+		}
+		span.noconnection {
+			background-color: #E1E16D;
+			&:before {content:"!"}
 		}
 	}