From 901b1150ffcdb3f541d6843221ba4ee3fb617751 Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Sun, 2 Jun 2013 21:52:59 +0200 Subject: [PATCH] Replacement for jquery.dialog to fit better with ownCloud design. --- core/css/jquery.ocdialog.css | 49 ++++++++ core/css/styles.css | 6 +- core/js/jquery.ocdialog.js | 217 +++++++++++++++++++++++++++++++++++ core/js/oc-dialogs.js | 18 +-- lib/base.php | 2 + 5 files changed, 282 insertions(+), 10 deletions(-) create mode 100644 core/css/jquery.ocdialog.css create mode 100644 core/js/jquery.ocdialog.js diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css new file mode 100644 index 0000000000..6342780aa9 --- /dev/null +++ b/core/css/jquery.ocdialog.css @@ -0,0 +1,49 @@ +.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%; +} diff --git a/core/css/styles.css b/core/css/styles.css index 70a840d689..08a277a4ea 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -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;} diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js new file mode 100644 index 0000000000..7413927e3b --- /dev/null +++ b/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 = $('
') + .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 = $('

' + this.options.title + + '

'); //
'); + if(this.$title) { + this.$title.replaceWith($title); + } else { + this.$title = $title.prependTo(this.$dialog); + } + this._setSizes(); + break; + case 'buttons': + var $buttonrow = $('
'); + if(this.$buttonrow) { + this.$buttonrow.replaceWith($buttonrow); + } else { + this.$buttonrow = $buttonrow.appendTo(this.$dialog); + } + $.each(value, function(idx, val) { + var $button = $('