From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 23 Apr 2012 21:22:03 +0000 (+0200)
Subject: Enhanced popovers and fixed a few issues
X-Git-Tag: 2.0.0_Beta_1~1132^2~2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=1e5b5b237a2013e0f80fe1d0ff680aa9e1765435;p=GitHub%2FWoltLab%2FWCF.git

Enhanced popovers and fixed a few issues
---

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 5e14fe3817..85d19a90c8 100644
--- 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 1257894c8c..cc82a97c04 100644
--- 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