From ae01e30d5580b45860d7a7865e987071221f28f6 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Fri, 24 Feb 2023 10:38:35 -0700
Subject: [PATCH] Mobile dialog style changes - Add dialog close button back,
 hide the footer cancel buttons to avoid duplication - Footer buttons with
 icon show only icon, label preserved for accessibility - Footer buttons
 without icon show as button with label - Footer buttons can wrap to another
 line

---
 pixelegg/mobile/fw_mobile.css  | 42 ++++++++++++++++++++++++++++---
 pixelegg/mobile/fw_mobile.less | 46 +++++++++++++++++++++++++++++-----
 2 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index d07ea2617a..74fd86abf4 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -8326,11 +8326,13 @@ table.egwGridView_grid img.et2_appicon {
     --width: 100%;
   }
   body et2-dialog::part(panel) {
+    /* make dialog full screen */
     max-width: 100%;
     max-height: 100%;
     height: 100%;
   }
   body et2-dialog::part(header) {
+    /* Set header size, color & background */
     color: white;
     background: #0c5da5;
     height: 5ex;
@@ -8339,25 +8341,36 @@ table.egwGridView_grid img.et2_appicon {
     border-radius: 0;
   }
   body et2-dialog::part(close-button) {
-    display: none;
+    /* Move dialog close button up, change color */
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    -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 et2-dialog::part(footer) {
+    /* Move footer to top, set background color */
     order: -1;
     box-shadow: 0px 4px 5px 2px silver;
     width: 100%;
     margin-top: 0px;
     background: #0c5da5;
+    /* Allow buttons to wrap */
+    flex-wrap: wrap;
   }
-  body et2-dialog et2-button[slot="footer"] {
-    padding-left: 150%;
+  body et2-dialog et2-button[slot="footer"]:has(et2-image) {
+    /* Fixed size on footer buttons */
     width: 50px;
     height: 50px;
   }
   body et2-dialog et2-button[slot="footer"] et2-image {
+    /* Make icons white, set size */
     height: 24px;
     width: 24px;
     max-width: initial;
-    position: absolute;
     left: 0;
     -webkit-filter: brightness(0) invert(1) !important;
     filter: brightness(0) invert(1) !important;
@@ -8368,6 +8381,27 @@ table.egwGridView_grid img.et2_appicon {
   body et2-dialog et2-button[slot="footer"] et2-image span {
     padding-left: 20px;
   }
+  body et2-dialog et2-button[slot="footer"][id*="cancel"] {
+    /* Hide cancel button, it will look like a duplicated bug so close to dialog close button */
+    display: none;
+  }
+  body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base),
+  body et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover),
+  body et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover) {
+    /* Have an icon - Hide button style, just show image */
+    border: none;
+    background: transparent;
+    justify-content: center;
+  }
+  body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label) {
+    /* Visually hide labels but leave them there for accessibility */
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    flex: 0 1 auto;
+  }
   body et2-button.plus_button {
     position: fixed !important;
     right: 15px;
diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less
index a43dc5d4f2..a41e108852 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -590,12 +590,14 @@
 	  }
 
 	  et2-dialog::part(panel) {
+	  /* make dialog full screen */
 		max-width: 100%;
 		max-height: 100%;
 		height: 100%;
 	  }
 
 	  et2-dialog::part(header) {
+		/* Set header size, color & background */
 		color: white;
 		background: #0c5da5;
 		height: 5ex;
@@ -605,28 +607,38 @@
 	  }
 
 	  et2-dialog::part(close-button) {
-		display: none;
+		/* Move dialog close button up, change color */
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		.white-svg
 	  }
 
 	  et2-dialog::part(footer) {
+		/* Move footer to top, set background color */
 		order: -1;
 		box-shadow: 0px 4px 5px 2px silver;
 		width: 100%;
 		margin-top: 0px;
 
 		background: #0c5da5;
+
+		/* Allow buttons to wrap */
+		flex-wrap: wrap;
+	  }
+
+	  et2-dialog et2-button[slot="footer"]:has(et2-image) {
+		/* Fixed size on footer buttons */
+		width: 50px;
+		height: 50px;
 	  }
 
 	  et2-dialog et2-button[slot="footer"] {
-		padding-left: 150%;
-		width: 50px;
-		height: 50px;
-
 		et2-image {
+		  /* Make icons white, set size */
 		  height: 24px;
 		  width: 24px;
 		  max-width: initial;
-		  position: absolute;
 		  left: 0;
 		  .white-svg;
 
@@ -636,6 +648,28 @@
 		}
 	  }
 
+	  et2-dialog et2-button[slot="footer"][id*="cancel"] {
+		/* Hide cancel button, it will look like a duplicated bug so close to dialog close button */
+		display: none;
+	  }
+
+	  et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base), et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover), et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover) {
+		/* Have an icon - Hide button style, just show image */
+		border: none;
+		background: transparent;
+		justify-content: center;
+	  }
+
+	  et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label) {
+		/* Visually hide labels but leave them there for accessibility */
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		flex: 0 1 auto;
+	  }
+
 	  et2-button.plus_button {
 		position: fixed !important;
 		right: 15px;