Merge pull request #3578 from owncloud/ocdialog

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

core/css/jquery.ocdialog.css

@@ -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%;
+}

core/css/styles.css

@@ -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;}

core/js/jquery.ocdialog.js

@@ -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));

core/js/oc-dialogs.js

@@ -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

lib/base.php

@@ -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");
 	}