From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 3 Apr 2019 22:28:27 +0000 (+0200)
Subject: Enable fullscreen mode while the editor source is active
X-Git-Tag: 5.2.0_Alpha_1~171
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=f2625b9459ac0ddb7c2663a5ab14536423a4bc9a;p=GitHub%2FWoltLab%2FWCF.git

Enable fullscreen mode while the editor source is active

Closes #2877
---

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFullscreen.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFullscreen.js
index 7fe9aeaaec..150bfcd5ff 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFullscreen.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFullscreen.js
@@ -37,12 +37,10 @@ $.Redactor.prototype.WoltLabFullscreen = function() {
 			
 			if (this.core.box()[0].classList.toggle('redactorBoxFullscreen')) {
 				WCF.System.DisableScrolling.disable();
-				this.core.editor()[0].style.setProperty('height', 'calc(100% - ' + ~~this.core.toolbar()[0].clientHeight + 'px)', '');
 				_active = true;
 			}
 			else {
 				WCF.System.DisableScrolling.enable();
-				this.core.editor()[0].style.removeProperty('height');
 				_active = false;
 			}
 		}
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabObserve.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabObserve.js
index 91d42f462e..50b4390d2f 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabObserve.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabObserve.js
@@ -85,6 +85,10 @@ $.Redactor.prototype.WoltLabObserve = function() {
 					this.button.setActive('html');
 				}
 				
+				if (this.core.box()[0].classList.contains('redactorBoxFullscreen')) {
+					this.button.setActive('woltlabFullscreen');
+				}
+				
 				// WoltLab modification: we know that there will be quite a few
 				// active button states, so we'll simply check all ancestors one
 				// by one instead of searching the DOM over and over again
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/source.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/source.js
index 09496cc879..3b40201707 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/source.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/source.js
@@ -62,7 +62,7 @@
 				code = code.replace(/\n\n/g, '\n');
 				
 				this.core.editor().hide();
-				this.button.disableAll('html');
+				this.button.disableAll(['html', 'woltlabFullscreen']);
 				this.source.$textarea.val(code).height(height).addClass('open').show();
 				this.source.$textarea.on('keyup.redactor-source', $.proxy(function () {
 					if (this.opts.type === 'textarea') {
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/redactor.js b/wcfsetup/install/files/js/3rdParty/redactor2/redactor.js
index 74923a50f1..a9f5d6e201 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/redactor.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/redactor.js
@@ -1890,7 +1890,15 @@
 				disableAll: function (key) {
 					var $btns = this.button.toolbar().find('a.re-button');
 					if (typeof key !== 'undefined') {
-						$btns = $btns.not('.re-' + key);
+						if (!Array.isArray(key)) {
+							key = [key];
+						}
+						
+						key = key.map(function(value) {
+							return '.re-' + value
+						});
+						
+						$btns = $btns.not(key.join(','));
 					}
 					
 					$btns.addClass('redactor-button-disabled').attr('aria-disabled', true);
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index e83c33805f..fe4add69c4 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -587,13 +587,21 @@
 
 .redactorBoxFullscreen {
 	bottom: 0;
+	display: flex;
+	flex-direction: column;
 	left: 0;
 	position: fixed;
 	right: 0;
 	top: 0;
 	z-index: 310;
 	
-	.redactor-layer {
+	.redactor-toolbar-box {
+		flex: 0 auto;
+	}
+	
+	.redactor-layer,
+	.redactor-layer + textarea {
+		flex: 1 auto;
 		max-height: none !important;
 		min-height: 0 !important;
 	}