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:
parent
5d7eb044d9
commit
a5e6d22495
@ -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;
|
||||
|
@ -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
|
||||
setTimeout( function () {
|
||||
var availableSpace, maxInputHeight, singleLineHeight, minRows,
|
||||
border = 1,
|
||||
padding = 3;
|
||||
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 () {
|
||||
// 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 );
|
||||
|
Loading…
Reference in New Issue
Block a user