Merge pull request #1768 from nextcloud/more-filepicker

More filepicker improvements

3 files changed, 49 insertions, 38 deletions

diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css
index a19fa4c52b5..0e46ff20152 100644
--- a/core/css/jquery.ocdialog.css
+++ b/core/css/jquery.ocdialog.css
@@ -1,7 +1,7 @@
 .oc-dialog {
-	background: white;
-	color: #333333;
-	border-radius: 3px; box-shadow: 0 0 7px #888888;
+	background: #fff;
+	color: #333;
+	border-radius: 3px; box-shadow: 0 0 7px #888;
 	padding: 15px;
 	z-index: 1000;
 	font-size: 100%;
@@ -11,26 +11,26 @@
 	min-width: 200px;
 }
 .oc-dialog-title {
-	background: white;
-	font-weight: bold;
-	font-size: 110%;
-	margin-bottom: 5px;
-	margin-top: -9px;
+	background: #fff;
+	margin-left: 12px;
 }
 .oc-dialog-content {
 	z-index: 1000;
-	background: white;
 }
 .oc-dialog-separator {
 }
 .oc-dialog-buttonrow {
-	background: white;
-	float: right;
-	position: relative;
-	bottom: 5px;
 	display: block;
-	margin-top: 10px;
+	background: transparent;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	padding: 10px;
+	box-sizing: border-box;
 	width: 100%;
+	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
 }
 /* align primary button to right, other buttons to left */
 .oc-dialog-buttonrow.twobuttons button:nth-child(1) {
@@ -45,10 +45,11 @@
 }
 
 .oc-dialog-close {
-	position:absolute;
-	top:7px; right:7px;
-	height:20px; width:20px;
-	background:url('../img/actions/close.svg') no-repeat center;
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 25px;
+	background: url('../img/actions/close.svg') no-repeat center;
 }
 
 .oc-dialog-dim {
diff --git a/core/css/mobile.css b/core/css/mobile.css
index 0ef6a08c24f..b0f8421345c 100644
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@@ -141,6 +141,7 @@ table.multiselect thead {
 
 
 /* do not show dates in filepicker */
+#oc-dialog-filepicker-content .filelist .filesize,
 #oc-dialog-filepicker-content .filelist .date {
 	display: none;
 }
diff --git a/core/css/styles.css b/core/css/styles.css
index 8fa7691ca7a..94e60562ad8 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -774,39 +774,48 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 #oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
 #oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
 #oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
+#oc-dialog-filepicker-content .filelist-container {
+	box-sizing: border-box;
+	display: inline-block;
+	overflow-y: auto;
+	height: 321px;
+	width: 100%;
+	padding-bottom: 55px;
+}
 #oc-dialog-filepicker-content .filelist {
-	overflow-y:auto;
-	height: 290px;
 	background-color:white;
 	width:100%;
 }
-
-#oc-dialog-filepicker-content .filelist li:first-child {
-	border-top: 1px solid #eee;
+#oc-dialog-filepicker-content #filestable.filelist {
+	/* prevent the filepicker to overflow */
+	min-width: initial;
 }
-#oc-dialog-filepicker-content .filelist li {
-	position: relative;
-	height: 40px;
-	padding: 5px;
+
+#oc-dialog-filepicker-content .filelist td {
+	padding: 14px;
 	border-bottom: 1px solid #eee;
 }
+#oc-dialog-filepicker-content .filelist tr:last-child td {
+	border-bottom: none;
+}
 #oc-dialog-filepicker-content .filelist .filename {
-	position: absolute;
-	padding-top: 9px;
-	max-width: 60%;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	background-size: 32px;
+	background-repeat: no-repeat;
+	padding-left: 51px;
+	background-position: 7px 7px;
+	cursor: pointer;
 }
-#oc-dialog-filepicker-content .filelist img {
-	margin: 2px 1em 0 4px;
-	width: 32px;
-}
+
+#oc-dialog-filepicker-content .filelist .filesize,
 #oc-dialog-filepicker-content .filelist .date {
-	float: right;
-	margin-right: 10px;
-	margin-top: 0;
-	padding-top: 9px;
+	width: 80px;
+}
+
+#oc-dialog-filepicker-content .filelist .filesize {
+	text-align: right;
 }
 #oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
 .ui-dialog {position:fixed !important;}