Skip to content
Snippets Groups Projects
Commit 901b1150 authored by Thomas Tanghus's avatar Thomas Tanghus
Browse files

Replacement for jquery.dialog to fit better with ownCloud design.

parent cf71a54f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
core/css/jquery.ocdialog.css 0 → 100644
+ 49
− 0
View file @ 901b1150
.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;
overflow-y: auto;
}
.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%;
}
core/css/styles.css
+ 5
− 1
View file @ 901b1150
......@@ -391,7 +391,11 @@ 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;
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;}
......
core/js/jquery.ocdialog.js 0 → 100644
+ 217
− 0
View file @ 901b1150
(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));
core/js/oc-dialogs.js
+ 9
− 9
View file @ 901b1150
......@@ -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,7 +110,7 @@ var OCdialogs = {
datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text();
}
callback(datapath);
self.$filePicker.dialog('close');
self.$filePicker.ocdialog('close');
}
};
var buttonlist = [{
......@@ -119,17 +119,17 @@ var OCdialogs = {
},
{
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();
self.$filePicker.ocdialog('destroy').remove();
self.$filePicker = null;
}
});
......@@ -161,20 +161,20 @@ var OCdialogs = {
text: t('core', 'Yes'),
click: function(){
if (callback !== undefined) { callback(true) };
$(dialog_id).dialog('close');
$(dialog_id).ocdialog('close');
}
},
{
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] = {
......@@ -184,7 +184,7 @@ var OCdialogs = {
break;
};
$(dialog_id).dialog({
$(dialog_id).ocdialog({
closeOnEscape: true,
modal: modal,
buttons: buttonlist
......
lib/base.php
+ 2
− 0
View file @ 901b1150
......@@ -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");
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment