Merge pull request #2342 from nextcloud/filepicker-shadow

Fix filepicker styling

4 files changed, 30 insertions, 44 deletions

diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css
index d1a42694589..487bc1c4f69 100644
--- a/core/css/jquery.ocdialog.css
+++ b/core/css/jquery.ocdialog.css
@@ -3,28 +3,31 @@
 	color: #333;
 	border-radius: 3px; box-shadow: 0 0 7px #888;
 	padding: 15px;
-	z-index: 1000;
+	z-index: 10000;
 	font-size: 100%;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	min-width: 200px;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	max-height: calc(100% - 20px);
+	max-width: calc(100% - 20px);
+	overflow: auto;
 }
 .oc-dialog-title {
 	background: #fff;
 	margin-left: 12px;
 }
-.oc-dialog-content {
-	z-index: 1000;
-}
-.oc-dialog-separator {
-}
 .oc-dialog-buttonrow {
+	position: relative;
 	display: block;
 	background: transparent;
 	right: 0;
 	bottom: 0;
 	padding: 10px;
+	padding-bottom: 0;
 	box-sizing: border-box;
 	width: 100%;
 	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
@@ -42,6 +45,14 @@
 .oc-dialog-buttonrow.onebutton button {
 	float: right;
 }
+.oc-dialog-buttonrow:after {
+	visibility: hidden;
+	display: block;
+	font-size: 0;
+	content: " ";
+	clear: both;
+	height: 0;
+}
 
 .oc-dialog-close {
 	position: absolute;
@@ -59,3 +70,7 @@
 	top: 0; left: 0;
 	width: 100%; height: 100%;
 }
+
+.oc-dialog-content {
+	width: 100%;
+}
diff --git a/core/css/styles.css b/core/css/styles.css
index 3ba617cb7a0..20c94fcc4ae 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -774,7 +774,7 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 	box-sizing: border-box;
 	display: inline-block;
 	overflow-y: auto;
-	height: 321px;
+	height: 100%; /** overflow under the button row */
 	width: 100%;
 	padding-bottom: 55px;
 }
diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js
index 66c7d9bd7f1..b54cce2c0ca 100644
--- a/core/js/jquery.ocdialog.js
+++ b/core/js/jquery.ocdialog.js
@@ -73,21 +73,8 @@
 					return false;
 				}
 			});
-			$(window).resize(function() {
-				self.parent = self.$dialog.parent().length > 0 ? self.$dialog.parent() : $('body');
-				var pos = self.parent.position();
-				self.$dialog.css({
-					left: pos.left + ($(window).innerWidth() - self.$dialog.outerWidth())/2,
-					top: pos.top + ($(window).innerHeight() - self.$dialog.outerHeight())/2,
-					width: Math.min(self.options.width, $(window).innerWidth() - 20 ),
-					height: Math.min(self.options.height, $(window).innerHeight() - 20)
-				});
-				// set sizes of content
-				self._setSizes();
-			});
 
 			this._setOptions(this.options);
-			$(window).trigger('resize');
 			this._createOverlay();
 		},
 		_init: function() {
@@ -172,25 +159,16 @@
 			$.Widget.prototype._setOptions.apply(this, arguments);
 		},
 		_setSizes: function() {
-			var content_height = this.$dialog.height();
+			var lessHeight = 0;
 			if(this.$title) {
-				content_height -= this.$title.outerHeight(true);
+				lessHeight += this.$title.outerHeight(true);
 			}
 			if(this.$buttonrow) {
-				content_height -= this.$buttonrow.outerHeight(true);
-			}
-			this.parent = this.$dialog.parent().length > 0 ? this.$dialog.parent() : $('body');
-			content_height = Math.min(content_height, this.parent.height()-20);
-			if (content_height> 0) {
-				this.element.css({
-					height: content_height + 'px',
-					width: this.$dialog.innerWidth() - 30 + 'px'
-				});
-			} else {
-				this.element.css({
-					width : this.$dialog.innerWidth() - 30 + 'px'
-				});
+				lessHeight += this.$buttonrow.outerHeight(true);
 			}
+			this.element.css({
+				'height': 'calc(100% - ' + lessHeight + 'px)'
+			});
 		},
 		_createOverlay: function() {
 			if(!this.options.modal) {
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index f811322b099..7476c93ba45 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -232,8 +232,8 @@ var OCdialogs = {
 			self.$filePicker.ocdialog({
 				closeOnEscape: true,
 				// max-width of 600
-				width: Math.min((4/5)*$(document).width(), 600),
-				height: 420,
+				width: 600,
+				height: 500,
 				modal: modal,
 				buttons: buttonlist,
 				close: function() {
@@ -253,10 +253,6 @@ var OCdialogs = {
 			} else {
 				buttonEnableDisable.prop("disabled", true);
 			}
-
-			if (!OC.Util.hasSVGSupport()) {
-				OC.Util.replaceSVG(self.$filePicker.parent());
-			}
 		})
 		.fail(function(status, error) {
 			// If the method is called while navigating away
@@ -835,9 +831,6 @@ var OCdialogs = {
 			});
 
 			self.$filelist.removeClass('icon-loading');
-			if (!OC.Util.hasSVGSupport()) {
-				OC.Util.replaceSVG(self.$filePicker.find('.dirtree'));
-			}
 		});
 	},
 	/**