Merge pull request #2342 from nextcloud/filepicker-shadow
Fix filepicker styling
This commit is contained in:
Lukas Reschke
GitHub
commit
183bee9b67
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue