From a5e6d22495965bf4c27fe1c86455bf46122738c9 Mon Sep 17 00:00:00 2001
From: Thalia <thalia.e.chan@googlemail.com>
Date: Wed, 13 Apr 2016 08:58:23 +0100
Subject: [PATCH] Make short mode for the math dialog

When the math dialog's menuLayout height is below 450 px,
make the symbol menu and the preview element shorter, so
the input is still in view. (This works until about
280px, below which the user will need to scroll down to
use the input.

Bug: T121150
Change-Id: I9e41cce80c3f770b1e3d0e7b133470045a1afe67
---
 modules/ve-math/ve.ui.MWMathDialog.css | 13 +++++++++++++
 modules/ve-math/ve.ui.MWMathDialog.js  | 19 ++++++++++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/modules/ve-math/ve.ui.MWMathDialog.css b/modules/ve-math/ve.ui.MWMathDialog.css
index 139d0e2..8cb23b4 100644
--- a/modules/ve-math/ve.ui.MWMathDialog.css
+++ b/modules/ve-math/ve.ui.MWMathDialog.css
@@ -26,6 +26,14 @@
 	overflow: auto;
 }
 
+.ve-ui-mwMathDialog-menuLayout-short .oo-ui-menuLayout-menu {
+	height: 10em;
+}
+
+.ve-ui-mwMathDialog-menuLayout-short .oo-ui-menuLayout-content {
+	bottom: 10em;
+}
+
 .ve-ui-mwMathPage-symbol {
 	background-position: center;
 	background-repeat: no-repeat;
@@ -71,6 +79,11 @@
 	height: 10em;
 }
 
+.ve-ui-mwMathDialog-menuLayout-short .ve-ui-mwMathDialog-preview {
+	line-height: 6em;
+	height: 6em;
+}
+
 /* Ensures the preview image is vertically centred */
 .ve-ui-mwMathDialog-preview .mwe-math-fallback-image-display {
 	display: inline-block;
diff --git a/modules/ve-math/ve.ui.MWMathDialog.js b/modules/ve-math/ve.ui.MWMathDialog.js
index 3f96aa7..a2fc701 100644
--- a/modules/ve-math/ve.ui.MWMathDialog.js
+++ b/modules/ve-math/ve.ui.MWMathDialog.js
@@ -276,14 +276,23 @@ ve.ui.MWMathDialog.prototype.getBodyHeight = function () {
 ve.ui.MWMathDialog.prototype.onWindowManagerResize = function () {
 	var dialog = this;
 	this.input.loadingPromise.done( function () {
-		// Wait for the window resize transition to finish
+		var availableSpace, maxInputHeight, singleLineHeight, minRows,
+			border = 1,
+			padding = 3,
+			borderAndPadding = 2 * ( border + padding );
+
+		// Toggle short mode as necessary
+		// NB a change of mode triggers a transition...
+		dialog.menuLayout.$element.toggleClass(
+			've-ui-mwMathDialog-menuLayout-short', dialog.menuLayout.$element.height() < 450
+		);
+
+		// ...So wait for the possible menuLayout transition to finish
 		setTimeout( function () {
-			var availableSpace, maxInputHeight, singleLineHeight, minRows,
-				border = 1,
-				padding = 3;
+			// Give the input the right number of rows to fit the space
 			availableSpace = dialog.menuLayout.$content.height() - dialog.input.$element.position().top;
 			singleLineHeight = 19;
-			maxInputHeight = availableSpace - 2 * ( border + padding );
+			maxInputHeight = availableSpace - borderAndPadding;
 			minRows = Math.floor( maxInputHeight / singleLineHeight );
 			dialog.input.setMinRows( minRows );
 		}, 250 );