golem
/
Math
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
Thalia 2016-04-13 08:58:23 +01:00
parent 5d7eb044d9
commit a5e6d22495
2 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
modules/ve-math/ve.ui.MWMathDialog.css
View File

@ -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;

19
modules/ve-math/ve.ui.MWMathDialog.js
View File

@ -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 );