From 739005ad59276a5edda1204f6e1cc271698c9ee9 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Tue, 23 Aug 2022 14:54:22 +0200
Subject: [PATCH] WIP Mobile template: -Fix avatars in addressbook -Fix
 filemanager nm header

---
 addressbook/templates/mobile/index.xet |   4 +-
 filemanager/templates/mobile/app.css   | 395 +------------------------
 filemanager/templates/mobile/app.less  |   4 +-
 pixelegg/mobile/fw_mobile.css          |   9 +-
 pixelegg/mobile/fw_mobile.less         |   7 +-
 5 files changed, 16 insertions(+), 403 deletions(-)

diff --git a/addressbook/templates/mobile/index.xet b/addressbook/templates/mobile/index.xet
index 96a6a4414e..d1f79c8075 100644
--- a/addressbook/templates/mobile/index.xet
+++ b/addressbook/templates/mobile/index.xet
@@ -29,9 +29,7 @@
 						</vbox>
 					</vbox>
 					<vbox class="addressbookCol3">
-						<hbox class="avatar">
-							<image src="${row}[photo]" height="auto" />
-						</hbox>
+						<lavatar src="$row_cont[photo]" contact_id="$row_cont[id]" lname="$row_cont[n_family]" fname="$row_cont[n_given]"/>
 					</vbox>
 				</row>
 			</rows>
diff --git a/filemanager/templates/mobile/app.css b/filemanager/templates/mobile/app.css
index b21052377e..9677f2d2ec 100644
--- a/filemanager/templates/mobile/app.css
+++ b/filemanager/templates/mobile/app.css
@@ -10,398 +10,7 @@
  * @package Filemanager
  * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
  */
-/**
- * EGroupware: CSS with less preprocessor
- *
- * FILEMANAGER
- *
- * Please do NOT change app.css directly, instead change app.less and compile it!
- *
- * @link http://www.egroupware.org
- * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
- * @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
- * @package filemanager
- */
-/**
- * EGroupware - CSS Styles used by filemanager app
- *
- * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
- * @package etemplate
- * @link http://www.egroupware.org
- * @author Ralf Becker <RalfBecker@outdoor-training.de>
- * @version $Id$
- */
-/**
- * CSS for new eTemplate filemanager UI
- */
-select#filemanager-index_filter {
-  width: 160px;
-}
-input#filemanager-index_path {
-  width: 300px;
-  font-size: 150%;
-  padding: 1px 5px 3px 2px;
-}
-#filemanager-index_filemanager-index-header_left .et2_file input {
-  width: 24px;
-}
-#filemanager-index_filemanager-index-header_left .et2_file span {
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  background-position-x: 3px;
-  background-image: url(../../../api/templates/default/images/add.svg);
-  overflow: hidden;
-  text-indent: 100px;
-}
-/**
- * Tile view
- */
-table.egwGridView_grid .tile .file_tile {
-  height: 100px;
-  width: 135px;
-}
-table.egwGridView_grid .tile .file_tile et2-vfs-mime {
-  width: 4em;
-  margin: 0 auto;
-}
-.egwGridView_grid .tile span.iconOverlayContainer {
-  display: block;
-  max-width: 140px;
-}
-.tile .file_tile img.vfsMimeIcon,
-.tile .file_tile et2-vfs-mime > img {
-  height: 48px;
-  width: auto;
-  display: block;
-  margin: 0 auto;
-}
-.tile .file_tile .et2_label {
-  word-wrap: break-word;
-}
-.tile .file_tile {
-  position: relative;
-}
-.tile .file_tile[data-mime^="image"] .et2_label {
-  display: none;
-}
-.tile .file_tile[data-mime^="image"]:hover .et2_label {
-  display: block;
-  position: absolute;
-  top: 10px;
-  color: white;
-  text-shadow: 2px 2px 8px black;
-  width: 100%;
-}
-.tile .file_tile[data-mime^="image"]:hover .et2_label[id*=comment] {
-  top: 30px;
-}
-#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon,
-#filemanager-index_nm .file_tile[data-mime^="image"] et2-vfs-mime > img {
-  height: auto;
-  max-height: 100px;
-}
-/**
- * Select file dialog
- */
-.selectPath {
-  font-weight: bold;
-  width: 98%;
-}
-.selectName input {
-  width: 100%;
-}
-.selectMime select {
-  width: 100%;
-}
-.displayNone input,
-input.displayNone {
-  display: none;
-}
-.selectFiles div {
-  overflow-y: auto;
-}
-#filemanager-select_dir {
-  height: 400px;
-  overflow-y: scroll;
-  display: inline-block;
-}
-/**
- * VFS mounts and versioning
- */
-.filemanager_smallButton {
-  font-size: 90%;
-  margin: 0;
-}
-.filemanager_password > input {
-  min-width: 0 !important;
-}
-div.filemanager_protocols > *:before {
-  content: "• ";
-}
-.filemanager_header {
-  font-size: 120%;
-  font-weight: bold;
-}
-.filemanager_config > * {
-  margin-top: 20px;
-}
-.error {
-  color: red;
-  font-style: italic;
-}
-.createDir img {
-  padding-right: 30px;
-}
-#filemanager-select_apps {
-  width: 61px;
-  height: 400px;
-  margin-top: 44px;
-  display: inline-block;
-  overflow-y: scroll;
-}
-.mimeIcon {
-  width: 65px;
-}
-.previewImage {
-  width: 100%;
-}
-#filemanager-editor_file_path {
-  font-size: 11pt;
-  display: inline-block;
-  margin-top: 5px;
-  margin-left: 10px;
-}
-#filemanager-editor_odfEditor {
-  position: absolute;
-  height: calc(100% - 50px) !important;
-  width: 100% !important;
-  top: 50px;
-  left: 0px;
-  bottom: 0px;
-  right: 0px;
-  padding: 0px !important;
-}
-#filemanager-editor_odfEditor .webodfeditor-editor.dijitContentPane {
-  box-shadow: none;
-  left: 0px !important;
-  top: 0px !important;
-}
-#filemanager-editor {
-  overflow: hidden;
-}
-/* collab editor styling*/
-div.webodfeditor-members {
-  background-color: white !important;
-}
-div.webodfeditor-memberList .webodfeditor-memberListButton {
-  border: none !important;
-  background-color: transparent !important;
-  box-shadow: none !important;
-}
-div.webodfeditor-memberList .webodfeditor-memberListButton img {
-  border-radius: 50%;
-  box-shadow: none;
-}
-div.webodfeditor-memberList .webodfeditor-memberListLabel {
-  color: #1E1E1E;
-}
-div.webodf-caretOverlay div.handle {
-  width: 68px;
-  border-radius: 50%;
-}
-div.webodf-caretOverlay div.handle > img {
-  border-radius: 50%;
-}
-div.editInfoMarker {
-  width: 5px;
-  border-radius: none;
-}
-#filemanager-index_nm .et2_file div.progress {
-  position: absolute;
-}
-#filemanager-index_new_wrapper {
-  margin-right: 6px;
-}
-#filemanager-index_new_wrapper .ui-icon-triangle-1-s {
-  background-image: url(../../../api/templates/default/images/add.svg);
-  background-size: 12px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-button#filemanager-index_new img {
-  display: none;
-}
-div#filemanager-index_filemanager-index-header_right {
-  display: inline-flex;
-  gap: 1ex;
-}
-/*/*****************************************************************
-// sidebar
-
-*/
-/*//******************************************************************
-// iframe*/
-table.egwGridView_grid img {
-  /*filter grey*/
-  filter: none;
-  -webkit-filter: initial;
-  -moz-filter: initial;
-  -ms-filter: initial;
-  -o-filter: initial;
-  /*filter: url(grayscale.svg);  Firefox 4+ */
-  filter: initial;
-  /* IE 6-9 */
-}
-/*// #####################################################*/
-/*Dialog filemanager*/
-#filemanager-select .dialogHeader .et2_button_icon {
-  margin: 4px 4px 0 4px;
-  border-top: solid 1px #FFFFFF;
-  border-left: solid 1px #FFFFFF;
-  border-right: solid 1px #FFFFFF;
-  border-bottom: solid 1px #FFFFFF;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  background-color: #FFFFFF;
-  height: auto;
-  width: 24px;
-}
-#filemanager-select #filemanager-select_apps {
-  background-color: #d9d9d9;
-}
-#filemanager-select #filemanager-select_apps .et2_button_icon {
-  height: auto;
-  width: 24px;
-  padding: 10px;
-}
-#filemanager-select table#filemanager-select_dir {
-  border: 1px solid rgba(0, 0, 0, 0.15);
-}
-#filemanager-select table#filemanager-select_dir tr:nth-child(even) {
-  background: #FFFFFF;
-}
-#filemanager-select table#filemanager-select_dir tr:nth-child(odd) {
-  background: #f2f2f2;
-}
-/*// #####################################################*/
-/*Dialog filemanager edit POPUP WINDOW*/
-div#filemanager-file_tabs {
-  /*eacl*/
-  /*Abonements*/
-}
-div#filemanager-file_tabs span.ui-icon-search {
-  /*.background_color_10_gray;*/
-  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
-  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  position: relative;
-  top: 3px;
-  margin-left: 3px;
-  background-position: 3px;
-}
-div#filemanager-file_tabs #filemanager-file_filemanager-file-eacl {
-  /*Owner*/
-}
-div#filemanager-file_tabs #filemanager-file_filemanager-file-eacl td.filemanager-file_filemanager-file-eaclowner span {
-  display: flex;
-  margin-right: 1px;
-}
-div#filemanager-file_tabs #filemanager-file_filemanager-file-eacl td.filemanager-file_filemanager-file-eaclowner span.ui-icon-search {
-  position: relative;
-  top: 15px;
-  margin-left: -3px;
-  margin-right: 3px;
-}
-div#filemanager-file_tabs td.eaclAccount {
-  width: 200px;
-}
-/*// #####################################################*/
-/*Dialog filemanager upload POPUP WINDOW*/
-div#stylite-filemanager-upload {
-  margin: 0.5em;
-}
-div#stylite-filemanager-upload .et2_file {
-  height: 24px;
-}
-div#stylite-filemanager-upload .et2_file input {
-  color: #FFFFFF;
-  width: 250px;
-  background-color: #0C5DA5;
-}
-div#stylite-filemanager-upload .et2_file input:hover {
-  background-color: #ace29e !important;
-  color: #ffc200;
-  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -webkit-border-radius: 3px;
-  -webkit-border-top-left-radius: 10px;
-  -moz-border-radius: 3px;
-  -moz-border-radius-topleft: 10px;
-  border-radius: 3px;
-  border-top-left-radius: 10px;
-}
-div#stylite-filemanager-upload .et2_file input:active {
-  background-color: #b3e4a6 !important;
-}
-div#stylite-filemanager-upload .et2_file div.progress {
-  width: 0px;
-}
-div#stylite-filemanager-upload .th {
-  background: none;
-}
-div#stylite-filemanager-upload .dialogFooterToolbar button {
-  /*.border_normal;*/
-  /*.box_shadow_standard_light;*/
-  /*.rounded (3px);*/
-  color: #000000;
-  -webkit-appearance: none;
-  -webkit-transition-property: background-color;
-  -moz-transition-property: background-color;
-  -o-transition-property: background-color;
-  transition-property: background-color;
-  -webkit-transition-duration: 0.5s;
-  -moz-transition-duration: 0.5s;
-  -o-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-timing-function: linear;
-  -moz-transition-timing-function: linear;
-  -o-transition-timing-function: linear;
-  transition-timing-function: linear;
-  background-color: #E6E6E6;
-  padding-left: 30px;
-  background-position: 6px center;
-  background-repeat: no-repeat;
-  background-size: 20px auto;
-  /*.Button_size_h32_auto;*/
-  height: 24px;
-}
-div#stylite-filemanager-upload .dialogFooterToolbar button:hover {
-  background-color: #ffdb7a !important;
-  color: #000000;
-  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-}
-div#stylite-filemanager-upload .dialogFooterToolbar button:active {
-  background-color: #fff0c7 !important;
-  color: #000000;
-  -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-  box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-}
-#filemanager-index_new_wrapper .ui-icon-triangle-1-s {
-  background-image: url(../../../api/templates/default/images/add.svg);
-  background-size: 12px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
+@import "../default/app.css";
 /* tablets and smartphones  */
 @media all {
   #filemanager-index_nm table.egwGridView_outer tbody span[id^='filemanager-index'][id$='size]'] {
@@ -444,6 +53,7 @@ div#stylite-filemanager-upload .dialogFooterToolbar button:active {
   }
   #filemanager-index_nm #filemanager-index_filemanager-index-header_left {
     height: auto;
+    order: 100;
   }
   #filemanager-index_nm .nextmatch_header.nm_header_hide {
     display: inline-block !important;
@@ -547,4 +157,3 @@ div#stylite-filemanager-upload .dialogFooterToolbar button:active {
     display: block;
   }
 }
-/*# sourceMappingURL=app.css.map */
\ No newline at end of file
diff --git a/filemanager/templates/mobile/app.less b/filemanager/templates/mobile/app.less
index 183d81bcd6..56d17f6a8e 100644
--- a/filemanager/templates/mobile/app.less
+++ b/filemanager/templates/mobile/app.less
@@ -13,7 +13,7 @@
 
 @import (reference) "../../../pixelegg/less/def_buttons.less";
 @import (reference) "../../../pixelegg/less/def_mobile.less";
-@import "../pixelegg/app.less";
+@import "../default/app.css";
 /* tablets and smartphones  */
 @media all {
 	#filemanager-index_nm {
@@ -56,7 +56,7 @@
 		}
 		#filemanager-index_filemanager-index-header_right {width:100%;}
 		#filemanager-index_tarp {display: none !important;}
-		#filemanager-index_filemanager-index-header_left {height:auto;}
+		#filemanager-index_filemanager-index-header_left {height:auto;order:100;}
 		.nextmatch_header.nm_header_hide {
 			display:inline-block !important;
 			.header_row_right, .filtersContainer {display:none;}
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index fdee8e4e0b..f53203c95e 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -7744,7 +7744,7 @@ div[id^="mail-"] .search.nm-mob-header,
 form[id^="mail-"] .search.nm-mob-header,
 div[id^="mail-"] .dialogHeadbar,
 form[id^="mail-"] .dialogHeadbar {
-  background-color: #006699 !important;
+  background-color: #006699;
 }
 #mail_sidebox_header {
   border-left: 6px solid #006699 !important;
@@ -8490,6 +8490,7 @@ table.egwGridView_grid img.et2_appicon {
   }
   body .et2_nextmatch .nextmatch_header_row,
   body .et2_nextmatch .nextmatch_header {
+    flex-direction: column;
     background-color: background-color-egw-dark;
   }
   body .et2_nextmatch .nextmatch_header_row div.header_row_right,
@@ -8497,11 +8498,13 @@ table.egwGridView_grid img.et2_appicon {
     position: absolute;
     display: block;
     top: 0;
+    flex-direction: column;
   }
   body .et2_nextmatch .nextmatch_header_row div.filtersContainer,
   body .et2_nextmatch .nextmatch_header div.filtersContainer {
     width: 100%;
-    margin-top: 37px;
+    margin-top: 50px;
+    flex-direction: column;
   }
   body .et2_nextmatch .nextmatch_header_row select,
   body .et2_nextmatch .nextmatch_header select {
@@ -8833,8 +8836,8 @@ table.egwGridView_grid img.et2_appicon {
     height: 50px;
   }
   body .et2_nextmatch .header_row_right * {
-    display: inline-block;
     float: left;
+    max-width: 100% !important;
   }
   body .et2_nextmatch .header_row_right .et2_dropdown button {
     height: 50px;
diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less
index 98a0623601..870a854d1f 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -658,14 +658,17 @@
 			}
 			.nextmatch_header_row, .nextmatch_header
 			{
+				flex-direction: column;
 				div.header_row_right {
 					position: absolute;
 					display: block;
 					top:0;
+					flex-direction: column;
 				}
 				div.filtersContainer {
 					width:100%;
-					margin-top:37px;
+					margin-top:50px;
+					flex-direction: column;
 				}
 				background-color: background-color-egw-dark;
 
@@ -999,8 +1002,8 @@
 				width: 100%;
 				padding:0;
 				* {
-					display:inline-block;
 					float:left;
+					max-width: 100% !important;
 				}
 				.et2_dropdown {
 					button {