From 7c2266b27b6eed99633086182359971801d149e2 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Wed, 22 Feb 2023 11:27:55 -0700
Subject: [PATCH] Mobile dialog style changes - dialog takes full width x
 height - footer on top with large, white icon-only buttons - header has no
 close button

---
 pixelegg/mobile/fw_mobile.css  |  66 ++++------
 pixelegg/mobile/fw_mobile.less | 217 +++++++++++++++++----------------
 2 files changed, 138 insertions(+), 145 deletions(-)

diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 6cdd607388..f99b34f139 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -8324,64 +8324,48 @@ table.egwGridView_grid img.et2_appicon {
   }
   body et2-dialog::part(panel) {
     max-width: 100%;
+    max-height: 100%;
+    height: 100%;
   }
-  body div.ui-dialog {
-    width: 100% !important;
-    height: 100% !important;
-    left: 0 !important;
-    top: 0 !important;
+  body et2-dialog::part(header) {
+    color: white;
+    background: #0c5da5;
+    height: 35px;
+    padding: 0;
+    padding-left: 5px;
+    padding-top: 15px;
+    border-radius: 0;
   }
-  body div.ui-dialog-content {
-    height: 87% !important;
-    margin-top: 60px !important;
-    padding: 0 !important;
-    font-size: 12pt;
+  body et2-dialog::part(close-button) {
+    display: none;
   }
-  body .ui-dialog .ui-dialog-buttonpane {
-    position: fixed !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    display: block !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    height: 50px;
+  body et2-dialog::part(footer) {
+    order: -1;
     box-shadow: 0px 4px 5px 2px silver;
     width: 100%;
-    z-index: 1;
+    margin-top: 0px;
     background: #0c5da5;
   }
-  body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
-    float: right;
+  body et2-dialog et2-button[slot="footer"] {
+    padding-left: 500px;
+    width: 50px;
     height: 50px;
   }
-  body .ui-dialog .ui-dialog-buttonpane button {
-    height: 35px;
+  body et2-dialog et2-button[slot="footer"] et2-image {
+    height: 24px;
+    width: 24px;
+    max-width: initial;
+    position: absolute;
+    left: 0;
     -webkit-filter: brightness(0) invert(1) !important;
     filter: brightness(0) invert(1) !important;
     background-color: transparent !important;
     background-size: 24px 24px !important;
     border: none;
-    float: right !important;
   }
-  body .ui-dialog .ui-dialog-buttonpane button span {
+  body et2-dialog et2-button[slot="footer"] et2-image span {
     padding-left: 20px;
   }
-  body .ui-dialog .ui-dialog-titlebar {
-    position: fixed;
-    color: white;
-    z-index: 100;
-    background: #0c5da5;
-    width: 100%;
-    height: 35px;
-    padding: 0;
-    padding-left: 5px;
-    margin: -3px;
-    padding-top: 15px;
-    border-radius: 0;
-  }
-  body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
-    display: none;
-  }
   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 328860548c..ff66ae7d4d 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -591,115 +591,124 @@
 
 	  et2-dialog::part(panel) {
 		max-width: 100%;
-	  }
-	  div.ui-dialog {
-		width: 100% !important;
-		height: 100% !important;
-		left: 0 !important;
-		top: 0 !important;
+		max-height: 100%;
+		height: 100%;
 	  }
 
-	  div.ui-dialog-content {
-		height: 87% !important;
-		margin-top: 60px !important;
-		padding: 0 !important;
+	  et2-dialog::part(header) {
+		color: white;
+		background: #0c5da5;
+		height: 35px;
+		padding: 0;
+		padding-left: 5px;
+		padding-top: 15px;
+		border-radius: 0;
+
+	  }
+
+	  et2-dialog::part(close-button) {
+		display: none;
+	  }
+
+	  et2-dialog::part(footer) {
+		order: -1;
+		box-shadow: 0px 4px 5px 2px silver;
+		width: 100%;
+		margin-top: 0px;
+
+		background: #0c5da5;
+	  }
+
+	  et2-dialog et2-button[slot="footer"] {
+		padding-left: 500px;
+		width: 50px;
+		height: 50px;
+
+		et2-image {
+		  height: 24px;
+		  width: 24px;
+		  max-width: initial;
+		  position: absolute;
+		  left: 0;
+		  .white-svg;
+
+		  span {
+			padding-left: 20px;
+		  }
+		}
+	  }
+
+	  et2-button.plus_button {
+		position: fixed !important;
+		right: 15px;
+		bottom: 15px;
+		border-radius: 50%;
+		width: 60px;
+		height: 60px;
+		background-position: center;
+		z-index: 100;
+		background-color: #0c5da5;
+		border: none;
+		background-image: url(../../api/templates/default/images/topmenu_items/mobile/plus_white.svg) !important;
+		background-repeat: no-repeat;
+		background-size: 24px 24px;
+		margin: 0;
+		padding: 0;
+
+		&:hover, &:active {
+		  background-color: #0c5da5;
+		}
+	  }
+
+	  et2-button.plus_button::part(base) {
+		display: none;
+	  }
+
+	  .et2_nextmatch {
+		.nextmatch_sortheader {
+		  padding-right: 0px;
+		  margin-right: 0px;
+		}
+
+		.nextmatch_header_row, .nextmatch_header {
+		  flex-direction: column;
+
+		  div.header_row_right {
+			position: absolute;
+			display: block;
+			top: 0;
+			flex-direction: column;
+		  }
+
+		  .filtersContainer {
+			width: 100%;
+			margin-top: 50px;
+			flex-direction: column;
+
+			et2-select, et2-select-cat {
+			  max-width: 100%
+			}
+		  }
+
+		  background-color: background-color-egw-dark;
+
+		  et2-select, et2-select-cat {
+			display: block;
+			width: 100%;
+			height: @mobile-elem-height;
 			.mob-fontsize-l;
-		}
-		.ui-dialog .ui-dialog-buttonpane {
-			position: fixed !important;
-			bottom:0 !important;
-			left:0 !important;
-			display:block !important;
-			padding:0 !important;
-			margin: 0 !important;
-			height: 50px;
-			box-shadow: 0px 4px 5px 2px silver;
-			width: 100%;
-			z-index:1;
-			.ui-dialog-buttonset {float:right;height:50px;}
-			button {
-				height:35px;
-				.white-svg;
-				float: right !important;
-				span {padding-left: 20px;}
-			}
-			background: #0c5da5;
-		}
-		.ui-dialog .ui-dialog-titlebar {
-			position: fixed;
-			color: white;
-			z-index: 100;
-			background: #0c5da5;
-			width: 100%;
-			height: 35px;
-			padding: 0;
-			padding-left: 5px;
-			margin: -3px;
-			padding-top: 15px;
+			background-size: 32px;
+			border-left: none;
+			border-right: none;
 			border-radius: 0;
-			.ui-dialog-titlebar-close {
-				display: none;
-			}
-		}
-		et2-button.plus_button {
-			position: fixed !important;
-			right: 15px;
-			bottom: 15px;
-			border-radius: 50%;
-			width: 60px;
-			height: 60px;
-			background-position: center;
-			z-index: 100;
-			background-color: #0c5da5;
-			border: none;
-			background-image: url(../../api/templates/default/images/topmenu_items/mobile/plus_white.svg) !important;
-			background-repeat: no-repeat;
-			background-size: 24px 24px;
-			margin: 0;
-			padding: 0;
-			&:hover, &:active {
-				background-color: #0c5da5;
-			}
-		}
-		et2-button.plus_button::part(base) {display: none;}
-		.et2_nextmatch {
-			.nextmatch_sortheader {
-				padding-right: 0px;
-				margin-right: 0px;
-			}
-			.nextmatch_header_row, .nextmatch_header
-			{
-				flex-direction: column;
-				div.header_row_right {
-					position: absolute;
-					display: block;
-					top:0;
-					flex-direction: column;
-				}
-				.filtersContainer {
-					width:100%;
-					margin-top:50px;
-					flex-direction: column;
-					et2-select, et2-select-cat {max-width: 100%}
-				}
-				background-color: background-color-egw-dark;
+			border-bottom: none;
+			padding-left: 10px;
+			max-width: none;
+			background-color: transparent;
+		  }
 
-				et2-select, et2-select-cat {
-					display: block;
-					width: 100%;
-					height: @mobile-elem-height;
-					.mob-fontsize-l;
-					background-size: 32px;
-					border-left: none;
-					border-right: none;
-					border-radius: 0;
-					border-bottom: none;
-					padding-left:10px;
-					max-width:none;
-					background-color: transparent;
-				}
-				label {
-					display:block;
+		  label {
+			display: block;
 					width: 100%;
 					float: left;
 					.mob-fontsize-l;