Fix some filemanager styling issues in mobile template:

- Fix thumbnails get wrong height
- Fix alignment of buttons in nm header

filemanager/templates/mobile/app.css

@@ -10,6 +10,350 @@
  * @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
+ * @version $Id$
+ */
+/**
+ * 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_right .et2_hbox > *,
+#filemanager-index_filemanager-index-header_row > *,
+#filemanager-index_filemanager-index-header_left .et2_hbox > * {
+  float: left;
+}
+#filemanager-index_filemanager-index-header_left .et2_file,
+#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(../../../pixelegg/images/add.png);
+  overflow: hidden;
+  text-indent: 100px;
+}
+/**
+ * Tile view
+table.egwGridView_grid .tile .file_tile {
+	height: 150px;
+}
+ */
+.egwGridView_grid .tile span.iconOverlayContainer {
+  display: block;
+  max-width: 140px;
+}
+.tile .file_tile img.vfsMimeIcon {
+  height: auto;
+  width: auto;
+  max-height: 48px;
+  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 {
+  height: auto;
+  max-height: 100px;
+}
+/**
+ * Select file dialog
+ */
+.selectPath {
+  font-weight: bold;
+  width: 98%;
+}
+.selectPathContainer {
+  width: 470px;
+  overflow: auto;
+}
+.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_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%;
+}
+/*/*****************************************************************
+// 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 .dialogHeader .selectPathContainer {
+  overflow: auto;
+  width: 470px;
+  margin-top: 0px;
+  height: 32px;
+}
+#filemanager-select .dialogHeader .selectPathContainer input {
+  height: 20px;
+}
+#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;
+}
+div#filemanager-file_tabs span.ui-icon-search:hover {
+  /*.background_color_20_gray;*/
+  -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);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+div#filemanager-file_tabs span.ui-icon-search:active {
+  /*.background_color_30_gray;*/
+  border: 1px solid rgba(0, 0, 0, 0.9);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -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);
+  background-color: #1aa200;
+}
+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: #189800 !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: #1aa200 !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: #f5b301 !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: #fecc44 !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);
+}
 /* tablets and smartphones  */
 @media all {
   #filemanager-index_nm table.egwGridView_outer tbody span[id^='filemanager-index'][id$='size]'] {
@@ -31,13 +375,14 @@
   #filemanager-index_nm table.egwGridView_outer tbody label[id^='filemanager-index'][id$='mtime]'] time {
     font-size: 10pt;
   }
-  #filemanager-index_nm #filemanager-index_buttons {
+  #filemanager-index_nm .buttons {
     position: relative;
     display: inline-block;
     overflow: auto;
     width: 100%;
+    padding-top: 5px;
   }
-  #filemanager-index_nm #filemanager-index_buttons img {
+  #filemanager-index_nm .buttons img {
     width: 32px;
     height: 32px;
     padding-left: 15px;
@@ -48,6 +393,24 @@
   #filemanager-index_nm #filemanager-index_filemanager-index-header_left {
     height: auto;
   }
+  #filemanager-index_nm .nextmatch_header .filemanager_navigation {
+    height: auto;
+  }
+  #filemanager-index_nm .nextmatch_header .filemanager_navigation #filemanager-index_path {
+    height: 50px;
+    width: 99%;
+  }
+  #filemanager-index_nm .nextmatch_header div.filtersContainer {
+    margin-top: 0px;
+    border-bottom: 1px solid silver;
+  }
+  #filemanager-index_nm select#filemanager-index_filter {
+    width: 100%;
+  }
+  #filemanager-index_nm .nextmatch_header_row div.header_row_right {
+    height: auto;
+    position: relative !important;
+  }
   .et2_file.plus_button {
     position: absolute !important;
     right: 15px;

filemanager/templates/mobile/app.less

@@ -13,6 +13,7 @@
 
 @import (reference) "../../../pixelegg/less/def_buttons.less";
 @import (reference) "../../../pixelegg/less/def_mobile.less";
+@import "../pixelegg/app.less";
 /* tablets and smartphones  */
 @media all {
 	#filemanager-index_nm {
@@ -40,11 +41,12 @@
 				}
 			}
 		}
-		#filemanager-index_buttons {
+		.buttons {
 			position: relative;
 			display: inline-block;
 			overflow:auto;
 			width:100%;
+			padding-top:5px;
 			img{
 				width: 32px;
 				height: 32px;
@@ -53,6 +55,15 @@
 		}
 		#filemanager-index_tarp {display: none !important;}
 		#filemanager-index_filemanager-index-header_left {height:auto;}
+		.nextmatch_header {
+			.filemanager_navigation {
+				height: auto;
+				#filemanager-index_path {height:50px;width:99%;}
+			}
+			div.filtersContainer {margin-top:0px;border-bottom: 1px solid silver;}
+		}
+		select#filemanager-index_filter {width:100%;}
+		.nextmatch_header_row div.header_row_right {height:auto;position: relative !important;}
 	}
 	.et2_file.plus_button {
 		position: absolute !important;

filemanager/templates/mobile/index.xet

@@ -30,27 +30,29 @@
 			</rows>
 		</grid>
 	</template>
-	<template id="filemanager.index.header_left" template="" lang="" group="0" version="1.9.002">
+	<template id="filemanager.index.header_right" template="" lang="" group="0" version="1.9.002">
-		<hbox span="all" class="filemanager_navigation">
+		<hbox class="buttons">
-			<image label="Up" src="goup" onclick="app.filemanager.change_dir('..',widget);" id="up"/>
+			<buttononly statustext="Rename, change permissions or ownership" label="Edit settings" id="button[edit]" onclick="app.filemanager.editprefs();" options="edit"/>
-			<image label="Go to your home directory" src="gohome" onclick="app.filemanager.change_dir('~',widget);" id="home"/>
+			<buttononly label="Create directory" id="button[createdir]" onclick="app.filemanager.createdir();" options="button_createdir,createdir_disabled"/>
-			<vfs-name label="Path" id="path" onchange="if(widget.getValue() == '') { app.filemanager.change_dir('~',widget);} return true;" size="80" class="address"/>
+			<buttononly label="Create a link" id="button[symlink]" onclick="app.filemanager.symlink();" options="link,link_disabled"/>
+			<buttononly label="Paste" id="button[paste]" onclick="app.filemanager.paste('paste');" options="editpaste,editpaste_disabled"/>
+			<buttononly label="Paste link" id="button[linkpaste]" onclick="app.filemanager.paste('linkpaste');" options="linkpaste,linkpaste_disabled"/>
+			<buttononly label="Mail paste" id="button[mailpaste]" onclick="app.filemanager.paste('mailpaste');" options="mailpaste,mailpaste_disabled"/>
 		</hbox>
-		<hbox id="buttons">
+	</template>
-				<button label="Go to" id="button[go]" image="key_enter"/>
+	<template id="filemanager.index.header_left" template="" lang="" group="0" version="1.9.002">
+		<vbox span="all" class="filemanager_navigation">
+			<vfs-name id="path" onchange="if(widget.getValue() == '') { app.filemanager.change_dir('~',widget);} return true;" size="80" class="address"/>
+			<hbox class="buttons">
+				<image label="Up" src="goup" onclick="app.filemanager.change_dir('..',widget);" id="up"/>
+				<image label="Go to your home directory" src="gohome" onclick="app.filemanager.change_dir('~',widget);" id="home"/>
 				<buttononly label="Tile view" id="button[change_view]" onclick="app.filemanager.change_view" options="list_tile"/>
-				<buttononly statustext="Rename, change permissions or ownership" label="Edit settings" id="button[edit]" onclick="app.filemanager.editprefs();" options="edit"/>
-				<buttononly label="Create directory" id="button[createdir]" onclick="app.filemanager.createdir();" options="button_createdir,createdir_disabled"/>
-				<buttononly label="Create a link" id="button[symlink]" onclick="app.filemanager.symlink();" options="link,link_disabled"/>
-				<buttononly label="Paste" id="button[paste]" onclick="app.filemanager.paste('paste');" options="editpaste,editpaste_disabled"/>
-				<buttononly label="Paste link" id="button[linkpaste]" onclick="app.filemanager.paste('linkpaste');" options="linkpaste,linkpaste_disabled"/>
-				<buttononly label="Mail paste" id="button[mailpaste]" onclick="app.filemanager.paste('mailpaste');" options="mailpaste,mailpaste_disabled"/>
 				<button label="File a file" onclick="window.open(egw::link('/index.php','menuaction=stylite.stylite_filemanager.upload'),'_blank','dependent=yes,width=550,height=350,scrollbars=yes,status=yes'); return false;" image="upload"/>
-
 			</hbox>
+		</vbox>
 	</template>
 	<template id="filemanager.index" template="" lang="" group="0" version="1.9.003">
-		<nextmatch id="nm" template="filemanager.index.rows" header_left="filemanager.index.header_left" />
+		<nextmatch id="nm" template="filemanager.index.rows" header_left="filemanager.index.header_left" header_right="filemanager.index.header_right" />
 		<hbox>
 			<file label="" statustext="Select file to upload in current directory" value=" " class="plus_button" id="upload" progress_dropdownlist = "true" drop_target ="divAppbox" multiple="true" onFinishOne="app.filemanager.uploadOnOne"/>
 		</hbox>