Merge pull request #3578 from owncloud/ocdialog
Replacement for jquery.dialog to fit better with ownCloud design.
This commit is contained in:
Thomas Tanghus
commit
2572c9a6b7
|
|
@ -0,0 +1,48 @@
|
|||
.oc-dialog {
|
||||
background: white;
|
||||
color: #333333;
|
||||
border-radius: 3px; box-shadow: 0 0 7px #888888;
|
||||
padding: 15px;
|
||||
z-index: 1000;
|
||||
font-size: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
}
|
||||
.oc-dialog-title {
|
||||
background: white;
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.oc-dialog-content {
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
}
|
||||
.oc-dialog-separator {
|
||||
}
|
||||
.oc-dialog-buttonrow {
|
||||
background: white;
|
||||
float: right;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.oc-dialog-close {
|
||||
position:absolute;
|
||||
top:7px; right:7px;
|
||||
height:20px; width:20px;
|
||||
background:url('../img/actions/delete.svg') no-repeat center;
|
||||
}
|
||||
|
||||
.oc-dialog-dim {
|
||||
background-color: #000;
|
||||
opacity: .20;filter:Alpha(Opacity=20);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
|
|
@ -391,7 +391,12 @@ 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 {height:270px; overflow-y:auto; background-color:white; width:100%;}
|
||||
#oc-dialog-filepicker-content .filelist {
|
||||
overflow-y:auto;
|
||||
max-height: 300px;
|
||||
background-color:white;
|
||||
width:100%;
|
||||
}
|
||||
#oc-dialog-filepicker-content .filelist img { margin: 2px 1em 0 4px; }
|
||||
#oc-dialog-filepicker-content .filelist .date { float:right;margin-right:1em; }
|
||||
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,217 @@
|
|||
(function($) {
|
||||
$.widget('oc.ocdialog', {
|
||||
options: {
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
closeButton: true,
|
||||
closeOnEscape: true,
|
||||
modal: false
|
||||
},
|
||||
_create: function() {
|
||||
var self = this;
|
||||
|
||||
this.originalCss = {
|
||||
display: this.element[0].style.display,
|
||||
width: this.element[0].style.width,
|
||||
height: this.element[0].style.height,
|
||||
};
|
||||
|
||||
this.originalTitle = this.element.attr('title');
|
||||
this.options.title = this.options.title || this.originalTitle;
|
||||
|
||||
this.$dialog = $('<div class="oc-dialog" />')
|
||||
.attr({
|
||||
// Setting tabIndex makes the div focusable
|
||||
tabIndex: -1,
|
||||
role: 'dialog'
|
||||
})
|
||||
.insertBefore(this.element);
|
||||
this.$dialog.append(this.element.detach());
|
||||
this.element.removeAttr('title').addClass('oc-dialog-content').appendTo(this.$dialog);
|
||||
|
||||
this.$dialog.css({
|
||||
display: 'inline-block',
|
||||
position: 'fixed'
|
||||
});
|
||||
|
||||
$(document).on('keydown keyup', function(event) {
|
||||
if(event.target !== self.$dialog.get(0) && self.$dialog.find($(event.target)).length === 0) {
|
||||
return;
|
||||
}
|
||||
// Escape
|
||||
if(event.keyCode === 27 && self.options.closeOnEscape) {
|
||||
self.close();
|
||||
return false;
|
||||
}
|
||||
// Enter
|
||||
if(event.keyCode === 13) {
|
||||
event.stopImmediatePropagation();
|
||||
if(event.type === 'keyup') {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
// If no button is selected we trigger the primary
|
||||
if(self.$buttonrow && self.$buttonrow.find($(event.target)).length === 0) {
|
||||
var $button = self.$buttonrow.find('button.primary');
|
||||
if($button) {
|
||||
$button.trigger('click');
|
||||
}
|
||||
} else if(self.$buttonrow) {
|
||||
$(event.target).trigger('click');
|
||||
}
|
||||
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 + (self.parent.width() - self.$dialog.outerWidth())/2,
|
||||
top: pos.top + (self.parent.height() - self.$dialog.outerHeight())/2
|
||||
});
|
||||
});
|
||||
|
||||
this._setOptions(this.options);
|
||||
$(window).trigger('resize');
|
||||
this._createOverlay();
|
||||
},
|
||||
_init: function() {
|
||||
this.$dialog.focus();
|
||||
this._trigger('open');
|
||||
},
|
||||
_setOption: function(key, value) {
|
||||
var self = this;
|
||||
switch(key) {
|
||||
case 'title':
|
||||
var $title = $('<h3 class="oc-dialog-title">' + this.options.title
|
||||
+ '</h3>'); //<hr class="oc-dialog-separator" />');
|
||||
if(this.$title) {
|
||||
this.$title.replaceWith($title);
|
||||
} else {
|
||||
this.$title = $title.prependTo(this.$dialog);
|
||||
}
|
||||
this._setSizes();
|
||||
break;
|
||||
case 'buttons':
|
||||
var $buttonrow = $('<div class="oc-dialog-buttonrow" />');
|
||||
if(this.$buttonrow) {
|
||||
this.$buttonrow.replaceWith($buttonrow);
|
||||
} else {
|
||||
this.$buttonrow = $buttonrow.appendTo(this.$dialog);
|
||||
}
|
||||
$.each(value, function(idx, val) {
|
||||
var $button = $('<button>').text(val.text);
|
||||
if(val.defaultButton) {
|
||||
$button.addClass('primary');
|
||||
self.$defaultButton = $button;
|
||||
}
|
||||
self.$buttonrow.append($button);
|
||||
$button.click(function() {
|
||||
val.click.apply(self.element[0], arguments);
|
||||
});
|
||||
});
|
||||
this.$buttonrow.find('button')
|
||||
.on('focus', function(event) {
|
||||
self.$buttonrow.find('button').removeClass('primary');
|
||||
$(this).addClass('primary');
|
||||
});
|
||||
this._setSizes();
|
||||
break;
|
||||
case 'closeButton':
|
||||
if(value) {
|
||||
var $closeButton = $('<a class="oc-dialog-close svg"></a>');
|
||||
this.$dialog.prepend($closeButton);
|
||||
$closeButton.on('click', function() {
|
||||
self.close();
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'width':
|
||||
this.$dialog.css('width', value);
|
||||
break;
|
||||
case 'height':
|
||||
this.$dialog.css('height', value);
|
||||
break;
|
||||
case 'close':
|
||||
this.closeCB = value;
|
||||
break;
|
||||
}
|
||||
//this._super(key, value);
|
||||
$.Widget.prototype._setOption.apply(this, arguments );
|
||||
},
|
||||
_setOptions: function(options) {
|
||||
//this._super(options);
|
||||
$.Widget.prototype._setOptions.apply(this, arguments);
|
||||
},
|
||||
_setSizes: function() {
|
||||
var content_height = this.$dialog.height();
|
||||
if(this.$title) {
|
||||
content_height -= 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)
|
||||
this.element.css({
|
||||
height: content_height + 'px',
|
||||
width: this.$dialog.innerWidth()-20 + 'px'
|
||||
});
|
||||
},
|
||||
_createOverlay: function() {
|
||||
if(!this.options.modal) {
|
||||
return;
|
||||
}
|
||||
|
||||
var self = this;
|
||||
this.overlay = $('<div>')
|
||||
.addClass('oc-dialog-dim')
|
||||
.appendTo($('#content'));
|
||||
this.overlay.on('click keydown keyup', function(event) {
|
||||
if(event.target !== self.$dialog.get(0) && self.$dialog.find($(event.target)).length === 0) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
_destroyOverlay: function() {
|
||||
if (!this.options.modal) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.overlay) {
|
||||
this.overlay.off('click keydown keyup');
|
||||
this.overlay.remove();
|
||||
this.overlay = null;
|
||||
}
|
||||
},
|
||||
widget: function() {
|
||||
return this.$dialog
|
||||
},
|
||||
close: function() {
|
||||
this._destroyOverlay();
|
||||
var self = this;
|
||||
// Ugly hack to catch remaining keyup events.
|
||||
setTimeout(function() {
|
||||
self._trigger('close', self);
|
||||
self.$dialog.hide();
|
||||
}, 200);
|
||||
},
|
||||
destroy: function() {
|
||||
if(this.$title) {
|
||||
this.$title.remove()
|
||||
}
|
||||
if(this.$buttonrow) {
|
||||
this.$buttonrow.remove()
|
||||
}
|
||||
|
||||
if(this.originalTitle) {
|
||||
this.element.attr('title', this.originalTitle);
|
||||
}
|
||||
this.element.removeClass('oc-dialog-content')
|
||||
.css(this.originalCss).detach().insertBefore(this.$dialog);
|
||||
this.$dialog.remove();
|
||||
}
|
||||
});
|
||||
}(jQuery));
|
||||
|
|
@ -72,7 +72,7 @@ var OCdialogs = {
|
|||
var dialog_name = 'oc-dialog-filepicker-content';
|
||||
var dialog_id = '#' + dialog_name;
|
||||
if(self.$filePicker) {
|
||||
self.$filePicker.dialog('close');
|
||||
self.$filePicker.ocdialog('close');
|
||||
}
|
||||
self.$filePicker = $tmpl.octemplate({
|
||||
dialog_name: dialog_name,
|
||||
|
|
@ -110,26 +110,29 @@ var OCdialogs = {
|
|||
datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text();
|
||||
}
|
||||
callback(datapath);
|
||||
self.$filePicker.dialog('close');
|
||||
self.$filePicker.ocdialog('close');
|
||||
}
|
||||
};
|
||||
var buttonlist = [{
|
||||
text: t('core', 'Choose'),
|
||||
click: functionToCall
|
||||
click: functionToCall,
|
||||
defaultButton: true
|
||||
},
|
||||
{
|
||||
text: t('core', 'Cancel'),
|
||||
click: function(){self.$filePicker.dialog('close'); }
|
||||
click: function(){self.$filePicker.ocdialog('close'); }
|
||||
}];
|
||||
|
||||
self.$filePicker.dialog({
|
||||
self.$filePicker.ocdialog({
|
||||
closeOnEscape: true,
|
||||
width: (4/9)*$(document).width(),
|
||||
height: 420,
|
||||
modal: modal,
|
||||
buttons: buttonlist,
|
||||
close: function(event, ui) {
|
||||
self.$filePicker.dialog('destroy').remove();
|
||||
try {
|
||||
$(this).ocdialog('destroy').remove();
|
||||
} catch(e) {}
|
||||
self.$filePicker = null;
|
||||
}
|
||||
});
|
||||
|
|
@ -161,30 +164,32 @@ var OCdialogs = {
|
|||
text: t('core', 'Yes'),
|
||||
click: function(){
|
||||
if (callback !== undefined) { callback(true) };
|
||||
$(dialog_id).dialog('close');
|
||||
}
|
||||
$(dialog_id).ocdialog('close');
|
||||
},
|
||||
defaultButton: true
|
||||
},
|
||||
{
|
||||
text: t('core', 'No'),
|
||||
click: function(){
|
||||
if (callback !== undefined) { callback(false) };
|
||||
$(dialog_id).dialog('close');
|
||||
$(dialog_id).ocdialog('close');
|
||||
}
|
||||
}];
|
||||
break;
|
||||
case OCdialogs.OK_BUTTON:
|
||||
var functionToCall = function() {
|
||||
$(dialog_id).dialog('close');
|
||||
$(dialog_id).ocdialog('close');
|
||||
if(callback !== undefined) { callback() };
|
||||
};
|
||||
buttonlist[0] = {
|
||||
text: t('core', 'Ok'),
|
||||
click: functionToCall
|
||||
click: functionToCall,
|
||||
defaultButton: true
|
||||
};
|
||||
break;
|
||||
};
|
||||
|
||||
$(dialog_id).dialog({
|
||||
$(dialog_id).ocdialog({
|
||||
closeOnEscape: true,
|
||||
modal: modal,
|
||||
buttons: buttonlist
|
||||
|
|
|
|||
|
|
@ -265,6 +265,7 @@ class OC {
|
|||
OC_Util::addScript("jquery.infieldlabel");
|
||||
OC_Util::addScript("jquery-tipsy");
|
||||
OC_Util::addScript("compatibility");
|
||||
OC_Util::addScript("jquery.ocdialog");
|
||||
OC_Util::addScript("oc-dialogs");
|
||||
OC_Util::addScript("octemplate");
|
||||
OC_Util::addScript("js");
|
||||
|
|
@ -278,6 +279,7 @@ class OC {
|
|||
OC_Util::addStyle("multiselect");
|
||||
OC_Util::addStyle("jquery-ui-1.10.0.custom");
|
||||
OC_Util::addStyle("jquery-tipsy");
|
||||
OC_Util::addStyle("jquery.ocdialog");
|
||||
OC_Util::addScript("oc-requesttoken");
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue