From cee7bfef1620287da8e7302d0f4839c33b60cafc Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 18 Oct 2016 11:42:13 +0200
Subject: [PATCH] filepicker: improve layout and style
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
core/css/jquery.ocdialog.css | 36 ++++++++++++++++++------------------
core/css/styles.css | 8 ++++++--
core/js/jquery.ocdialog.js | 4 ++--
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();
--
GitLab