From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 2 Oct 2016 11:09:20 +0000 (+0200)
Subject: Blind in quick options rather than hiding on runtime
X-Git-Tag: 3.0.0_Beta_2~24
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=9b42b443425e6d5507bf84e95936732be2e1f69b;p=GitHub%2FWoltLab%2FWCF.git

Blind in quick options rather than hiding on runtime

Looks far better than having these dots disappear for no reason.
---

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
index 708ef7ce1c..6c5f7c3cb3 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
@@ -186,20 +186,16 @@ define(
 					});
 					
 					var quickOptions = elBySel('.messageQuickOptions', message);
-					if (quickOptions) {
-						if (navigation.childElementCount) {
-							quickOptions.addEventListener(WCF_CLICK_EVENT, function (event) {
-								if (_enabled) {
-									event.preventDefault();
-									event.stopPropagation();
-									
-									navigation.classList.toggle('open');
-								}
-							});
-						}
-						else {
-							elHide(quickOptions);
-						}
+					if (quickOptions && navigation.childElementCount) {
+						quickOptions.classList.add('active');
+						quickOptions.addEventListener(WCF_CLICK_EVENT, function (event) {
+							if (_enabled) {
+								event.preventDefault();
+								event.stopPropagation();
+								
+								navigation.classList.toggle('open');
+							}
+						});
 					}
 				}
 				
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 6b6377cf2a..441bdad11c 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -382,7 +382,10 @@
 	@include screen-sm-down {
 		flex: 0 0 24px !important;
 		height: 1.5em;
+		opacity: 0;
 		position: relative;
+		transition: opacity .12s linear, visibility 0s linear .12s;
+		visibility: hidden;
 		
 		&::before {
 			content: $fa-var-ellipsis-v;
@@ -396,6 +399,12 @@
 			width: 24px;
 		}
 		
+		&.active {
+			opacity: 1;
+			transition-delay: 0s;
+			visibility: visible;
+		}
+		
 		> li {
 			display: none;
 		}