Enhanced popovers and fixed a few issues

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 5e14fe3817e3f6d5c58bd446421879175fd64372..85d19a90c824047237d6ae4d848d003882759f3c 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -5100,7 +5100,7 @@ WCF.Popover = Class.extend({
                        this._popover.html(this._data[this._activeElementID].content);
                }
                else {
-                       this._popover.html('<div class="popoverLoading icon48"><img src="' + WCF.Icon.get('wcf.icon.loading') + '" alt="" class="icon48" /></div>');
+                       this._popover.addClass('popoverLoading');
                        this._data[this._activeElementID].loading = true;
                }
                
@@ -5128,9 +5128,11 @@ WCF.Popover = Class.extend({
         * Displays the popover.
         */
        _show: function() {
-               this._popover.show();
+               this._popover.stop().wcfFadeIn();
                
-               this._loadContent();
+               if (this._data[this._activeElementID].loading) {
+                       this._loadContent();
+               }
        },
        
        /**
@@ -5152,24 +5154,40 @@ WCF.Popover = Class.extend({
                
                // only update content if element id is active
                if (this._activeElementID === elementID) {
-                       // get current dimensions
-                       var $dimensions = this._popover.getDimensions();
-                       
-                       // insert new content
-                       this._popover.html(this._data[elementID].content);
-                       var $newDimensions = this._popover.getDimensions();
-                       
-                       // enforce current dimensions
-                       this._popover.css({
-                               height: $dimensions.height + 'px',
-                               width: $dimensions.width + 'px'
-                       });
-                       
-                       // animate to new dimensons
-                       this._popover.animate({
-                               height: $newDimensions.height + 'px',
-                               width: $newDimensions.width + 'px'
-                       }, 200);
+                       if (animate) {
+                               // get current dimensions
+                               var $dimensions = this._popover.getDimensions();
+                               
+                               // insert new content
+                               this._popover.html(this._data[elementID].content);
+                               var $newDimensions = this._popover.getDimensions();
+                               
+                               // enforce current dimensions and remove HTML
+                               this._popover.html('').css({
+                                       height: $dimensions.height + 'px',
+                                       width: $dimensions.width + 'px'
+                               });
+                               
+                               // animate to new dimensons
+                               this._popover.animate({
+                                       height: $newDimensions.height + 'px',
+                                       width: $newDimensions.width + 'px'
+                               }, 300, function() {
+                                       var $content = $('<div style="opacity: 0;">' + content + '</div>');
+                                       var $this = $(this);
+                                       
+                                       $this.html($content);
+                                       
+                                       $content.animate({ opacity: 1 }, 200, function() {
+                                               $content.children().unwrap();
+                                               $this.removeClass('popoverLoading');
+                                       });
+                               });
+                       }
+                       else {
+                               // insert new content
+                               this._popover.html(this._data[elementID].content);
+                       }
                }
        },
        
@@ -5177,7 +5195,9 @@ WCF.Popover = Class.extend({
         * Hides the popover.
         */
        _hide: function() {
-               this._popover.empty().stop().hide().css({ height: 'auto', width: 'auto' });
+               this._popover.stop().removeClass('popoverLoading').wcfFadeOut(function() {
+                       $(this).empty().css({ height: 'auto', width: 'auto' });
+               });
        },
        
        /**
@@ -5192,6 +5212,8 @@ WCF.Popover = Class.extend({
         * Triggered once element *or* popover is now longer hovered.
         */
        _out: function(event) {
+               console.debug("_out(): init");
+               this._hoverElementID = '';
                this._hoverElement = false;
                this._hoverPopover = false;
                
@@ -5200,7 +5222,6 @@ WCF.Popover = Class.extend({
                        
                        // hide popover is neither element nor popover was hovered given time
                        if (!this._hoverElement && !this._hoverPopover) {
-                               this._activeElementID = '';
                                this._hide();
                        }
                }, this), this._delay.hide);

diff --git a/wcfsetup/install/files/style/popover.less b/wcfsetup/install/files/style/popover.less
index 1257894c8c0ced42bc7d83ec417b1c225c159fe3..cc82a97c049e3ffe439896db5820ee8a76f054a2 100644 (file)
--- a/wcfsetup/install/files/style/popover.less
+++ b/wcfsetup/install/files/style/popover.less
@@ -1,8 +1,11 @@
 .popover {
        background-color: @wcfTooltipBackgroundColor;
        color: @wcfTooltipColor;
+       max-width: 450px;
+       min-width: 150px;
        padding: @wcfGapTiny;
        position: absolute;
+       vertical-align: middle;
        z-index: 320;
        
        .borderRadius();
@@ -35,4 +38,12 @@
        &.left:after {
                right: 7px;
        }
+       
+       &.popoverLoading {
+               background-image: url(../icon/spinner1.svg);
+               background-position: center center;
+               background-size: 32px;
+               background-repeat: no-repeat;
+               min-height: 32px;
+       }
 }
\ No newline at end of file