filepicker: improve layout and style

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

3 files changed, 26 insertions, 22 deletions

diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css
index a19fa4c52b5..98d765e24ae 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,25 @@
 	min-width: 200px;
 }
 .oc-dialog-title {
-	background: white;
-	font-weight: bold;
-	font-size: 110%;
-	margin-bottom: 5px;
-	margin-top: -9px;
+	background: #fff;
 }
 .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 +44,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/styles.css b/core/css/styles.css
index 1141f0d7623..aeb2a5a7363 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -775,11 +775,12 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 #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: 290px;
+	height: 321px;
 	width: 100%;
-	border-top: 1px solid #eee;
+	padding-bottom: 55px;
 }
 #oc-dialog-filepicker-content .filelist {
 	background-color:white;
@@ -790,6 +791,9 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 	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 {
 	overflow: hidden;
 	white-space: nowrap;
diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js
index 15b58f9e086..e26555bd63c 100644
--- a/core/js/jquery.ocdialog.js
+++ b/core/js/jquery.ocdialog.js
@@ -101,9 +101,9 @@
 					if(this.$title) {
 						this.$title.text(value);
 					} else {
-						var $title = $('<h3 class="oc-dialog-title">'
+						var $title = $('<h2 class="oc-dialog-title">'
 							+ value
-							+ '</h3>');
+							+ '</h2>');
 						this.$title = $title.prependTo(this.$dialog);
 					}
 					this._setSizes();