MOBILE-2473 rte: Fix height

main
Pau Ferrer Ocaña 2018-08-17 17:28:24 +02:00
parent bfcbbbd965
commit aff8c28ca4
7 changed files with 41 additions and 22 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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(() => {

View File

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

View File

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