From 057afb86235f0e58324d09988b831f2d27daa800 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Tue, 28 Feb 2023 13:06:52 +0100
Subject: [PATCH] Some styling fixes for mobile view: - fix broken
 Addressbook's avatar in view and edit mode - fix buttons with icon not
 getting white filter

---
 addressbook/templates/mobile/edit.xet   |  9 ++++-----
 addressbook/templates/mobile/view.xet   |  8 ++++----
 api/js/etemplate/Et2Avatar/Et2Avatar.ts |  5 ++++-
 pixelegg/mobile/fw_mobile.css           | 10 +++++++++-
 pixelegg/mobile/fw_mobile.less          |  5 ++++-
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/addressbook/templates/mobile/edit.xet b/addressbook/templates/mobile/edit.xet
index 29d83d20f5..8b047fa35c 100644
--- a/addressbook/templates/mobile/edit.xet
+++ b/addressbook/templates/mobile/edit.xet
@@ -354,12 +354,11 @@
 					</et2-hbox>
 				</row>
 				<row class="dialogHeader">
-					<et2-hbox>
-						<et2-hbox  disabled="@hidebuttons" class="avatar">
-							<et2-image  src="photo" onclick="jQuery('table.uploadphoto').css('display','inline'); return false;"></et2-image>
-							<template id="addressbook.edit.upload"/>
+					<et2-box  align="center">
+						<et2-hbox  disabled="@hidebuttons">
+							<et2-avatar  id="jpegphoto" contactId="$cont[id]" src="$cont[photo]" crop="false" editable="true" size="4em"></et2-avatar>
 						</et2-hbox>
-					</et2-hbox>
+					</et2-box>
 				</row>
 				<row>
 					<et2-textbox  id="n_fn" tabindex="-1" class="cursorHand" onclick="jQuery('table.editname').css('display','inline'); var focElem = document.getElementById(form::name('n_prefix')); if (!(typeof(focElem) == 'undefined') &amp;&amp; typeof(focElem.focus)=='function') document.getElementById(form::name('n_prefix')).focus();" autocomplete="name" placeholder="Name" noLang="1" ></et2-textbox>
diff --git a/addressbook/templates/mobile/view.xet b/addressbook/templates/mobile/view.xet
index 0644951cb7..378de9e405 100644
--- a/addressbook/templates/mobile/view.xet
+++ b/addressbook/templates/mobile/view.xet
@@ -11,11 +11,11 @@
 				<row class="dialogHeadbar" >
 				</row>
 				<row>
-					<et2-hbox>
-						<et2-hbox  disabled="@hidebuttons" class="avatar">
-							<et2-image  src="photo" onclick="jQuery('table.uploadphoto').css('display','inline'); return false;"></et2-image>
+					<et2-box  align="center">
+						<et2-hbox  disabled="@hidebuttons">
+							<et2-avatar src="$cont[photo]" crop="false" shape="circle" size="4em"></et2-avatar>
 						</et2-hbox>
-					</et2-hbox>
+					</et2-box>
 				</row>
 				<row>
 					<et2-textbox  id="n_fn" tabindex="-1" class="cursorHand" onclick="jQuery('table.editname').css('display','inline'); var focElem = document.getElementById(form::name('n_prefix')); if (!(typeof(focElem) == 'undefined') &amp;&amp; typeof(focElem.focus)=='function') document.getElementById(form::name('n_prefix')).focus();" autocomplete="name" placeholder="Name" noLang="1" ></et2-textbox>
diff --git a/api/js/etemplate/Et2Avatar/Et2Avatar.ts b/api/js/etemplate/Et2Avatar/Et2Avatar.ts
index 12b765f7be..b46687eab9 100644
--- a/api/js/etemplate/Et2Avatar/Et2Avatar.ts
+++ b/api/js/etemplate/Et2Avatar/Et2Avatar.ts
@@ -70,7 +70,10 @@ export class Et2Avatar extends Et2Widget(SlotMixin(SlAvatar)) implements et2_IDe
 			 */
 			src: {type: String},
 
-
+			/**
+			 * The shape of the avatar
+			 * circle | square | rounded
+			 */
 			shape: {
 				type: String,
 				reflect: true
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 63774ead29..00d5e582be 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -9028,7 +9028,15 @@ table.egwGridView_grid img.et2_appicon {
     background-size: 24px 24px !important;
     border: none;
   }
-  body .dialogHeadbar et2-button[disabled] {
+  body .dialogHeadbar et2-button-icon::part(base) {
+    -webkit-filter: brightness(0) invert(1) !important;
+    filter: brightness(0) invert(1) !important;
+    background-color: transparent !important;
+    background-size: 24px 24px !important;
+    border: none;
+  }
+  body .dialogHeadbar et2-button[disabled],
+  body .dialogHeadbar et2-button-icon[disabled] {
     display: none;
   }
   body .dialogHeadbar et2-button::part(base) {
diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less
index dd42fc1445..33f9bf8e2a 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -1283,7 +1283,10 @@
 			  .white-svg;
 			}
 		  }
-		  et2-button[disabled] {
+		  et2-button-icon::part(base) {
+			.white-svg;
+		  }
+		  et2-button[disabled], et2-button-icon[disabled] {
 			display: none;
 		  }
 		  et2-button::part(base) {