From 3641ddf4be051bf70bef301b8577f6d935b3462e Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Fri, 27 May 2016 10:57:19 +0200 Subject: [PATCH] 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 | 367 ++++++++++++++++++++++++- filemanager/templates/mobile/app.less | 13 +- filemanager/templates/mobile/index.xet | 32 ++- 3 files changed, 394 insertions(+), 18 deletions(-) diff --git a/filemanager/templates/mobile/app.css b/filemanager/templates/mobile/app.css index 56ceb82f17..76d1017a66 100644 --- a/filemanager/templates/mobile/app.css +++ b/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 + * @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 + * @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; diff --git a/filemanager/templates/mobile/app.less b/filemanager/templates/mobile/app.less index 3cd09b376e..cec217f444 100644 --- a/filemanager/templates/mobile/app.less +++ b/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; diff --git a/filemanager/templates/mobile/index.xet b/filemanager/templates/mobile/index.xet index e06b6119f5..3fb0a0c1bb 100644 --- a/filemanager/templates/mobile/index.xet +++ b/filemanager/templates/mobile/index.xet @@ -30,27 +30,29 @@ -