MOBILE-2473 rte: Fix height
parent
bfcbbbd965
commit
aff8c28ca4
|
@ -181,7 +181,7 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Recalculate footer position when keyboard is shown or hidden.
|
// Recalculate footer position when keyboard is shown or hidden.
|
||||||
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
|
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (kbHeight) => {
|
||||||
this.content.resize();
|
this.content.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -92,7 +92,7 @@ export class AddonModChatChatPage {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Recalculate footer position when keyboard is shown or hidden.
|
// Recalculate footer position when keyboard is shown or hidden.
|
||||||
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
|
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (kbHeight) => {
|
||||||
this.content.resize();
|
this.content.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,14 @@
|
||||||
core-rich-text-editor {
|
core-rich-text-editor {
|
||||||
height: 40vh;
|
height: 40vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-height: 30vh;
|
min-height: 200px; /* Just in case vh is not supported */
|
||||||
|
min-height: 40vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
|
position: absolute;
|
||||||
|
@include position(0, 0, 0, 0);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -67,7 +71,10 @@ core-rich-text-editor {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-textarea textarea {
|
.core-textarea {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
textarea {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
|
@ -75,6 +82,9 @@ core-rich-text-editor {
|
||||||
resize: none;
|
resize: none;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
position: absolute;
|
||||||
|
@include position(0, 0, 0, 0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div.core-rte-toolbar {
|
div.core-rte-toolbar {
|
||||||
|
@ -109,3 +119,7 @@ core-rich-text-editor {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.keyboard-is-open core-rich-text-editor {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
|
@ -61,6 +61,8 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
|
||||||
protected element: HTMLDivElement;
|
protected element: HTMLDivElement;
|
||||||
protected editorElement: HTMLDivElement;
|
protected editorElement: HTMLDivElement;
|
||||||
protected resizeFunction;
|
protected resizeFunction;
|
||||||
|
protected kbHeight = 0; // Last known keyboard height.
|
||||||
|
protected minHeight = 200; // Minimum height of the editor.
|
||||||
|
|
||||||
protected valueChangeSubscription: Subscription;
|
protected valueChangeSubscription: Subscription;
|
||||||
protected keyboardObs: any;
|
protected keyboardObs: any;
|
||||||
|
@ -121,7 +123,8 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
|
||||||
});
|
});
|
||||||
}, 750);
|
}, 750);
|
||||||
|
|
||||||
this.keyboardObs = this.events.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
|
this.keyboardObs = this.events.on(CoreEventsProvider.KEYBOARD_CHANGE, (kbHeight) => {
|
||||||
|
this.kbHeight = kbHeight;
|
||||||
this.maximizeEditorSize();
|
this.maximizeEditorSize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -137,7 +140,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
|
||||||
const deferred = this.utils.promiseDefer();
|
const deferred = this.utils.promiseDefer();
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const contentVisibleHeight = this.content.contentHeight;
|
const contentVisibleHeight = this.content.contentHeight - this.kbHeight;
|
||||||
|
|
||||||
if (contentVisibleHeight <= 0) {
|
if (contentVisibleHeight <= 0) {
|
||||||
deferred.resolve(0);
|
deferred.resolve(0);
|
||||||
|
@ -147,16 +150,16 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// Editor is ready, adjust Height if needed.
|
// Editor is ready, adjust Height if needed.
|
||||||
const height = this.getSurroundingHeight(this.element);
|
const height = this.content.contentHeight - this.kbHeight - this.getSurroundingHeight(this.element);
|
||||||
if (contentVisibleHeight > height) {
|
if (height > this.minHeight) {
|
||||||
this.element.style.height = this.domUtils.formatPixelsSize(contentVisibleHeight - height);
|
this.element.style.height = this.domUtils.formatPixelsSize(height);
|
||||||
} else {
|
} else {
|
||||||
this.element.style.height = '';
|
this.element.style.height = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
deferred.resolve(contentVisibleHeight - height);
|
deferred.resolve(height);
|
||||||
|
}, 100);
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
|
||||||
|
|
||||||
return deferred.promise;
|
return deferred.promise;
|
||||||
}
|
}
|
||||||
|
|
|
@ -192,7 +192,7 @@ export class CoreCourseModuleMainResourceComponent implements OnInit, OnDestroy,
|
||||||
promise = Promise.resolve();
|
promise = Promise.resolve();
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.fetchContent(refresh).catch((error) => {
|
return promise.catch((error) => {
|
||||||
// Error getting data, fail.
|
// Error getting data, fail.
|
||||||
this.domUtils.showErrorModalDefault(error, this.fetchContentDefaultError, true);
|
this.domUtils.showErrorModalDefault(error, this.fetchContentDefaultError, true);
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
|
|
|
@ -52,11 +52,11 @@ export class CoreCoursesCourseLinkHandler extends CoreContentLinksHandlerBase {
|
||||||
courseId = parseInt(params.id, 10);
|
courseId = parseInt(params.id, 10);
|
||||||
|
|
||||||
const sectionId = params.sectionid ? parseInt(params.sectionid, 10) : null,
|
const sectionId = params.sectionid ? parseInt(params.sectionid, 10) : null,
|
||||||
sectionNumber = typeof params.section != 'undefined' ? parseInt(params.section, 10) : NaN,
|
|
||||||
pageParams: any = {
|
pageParams: any = {
|
||||||
course: { id: courseId },
|
course: { id: courseId },
|
||||||
sectionId: sectionId || null
|
sectionId: sectionId || null
|
||||||
};
|
};
|
||||||
|
let sectionNumber = typeof params.section != 'undefined' ? parseInt(params.section, 10) : NaN;
|
||||||
|
|
||||||
if (!sectionId && !sectionNumber) {
|
if (!sectionId && !sectionNumber) {
|
||||||
// Check if the URL has a hash to navigate to the section.
|
// Check if the URL has a hash to navigate to the section.
|
||||||
|
|
|
@ -79,7 +79,9 @@ export class CoreAppProvider {
|
||||||
zone.run(() => {
|
zone.run(() => {
|
||||||
document.body.classList.add('keyboard-is-open');
|
document.body.classList.add('keyboard-is-open');
|
||||||
this.isKeyboardShown = true;
|
this.isKeyboardShown = true;
|
||||||
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown);
|
// Error on iOS calculating size.
|
||||||
|
// More info: https://github.com/ionic-team/ionic-plugin-keyboard/issues/276 .
|
||||||
|
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, data.keyboardHeight);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.keyboard.onKeyboardHide().subscribe((data) => {
|
this.keyboard.onKeyboardHide().subscribe((data) => {
|
||||||
|
@ -87,7 +89,7 @@ export class CoreAppProvider {
|
||||||
zone.run(() => {
|
zone.run(() => {
|
||||||
document.body.classList.remove('keyboard-is-open');
|
document.body.classList.remove('keyboard-is-open');
|
||||||
this.isKeyboardShown = false;
|
this.isKeyboardShown = false;
|
||||||
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown);
|
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, 0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue