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.
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (kbHeight) => {
this.content.resize();
});
}

View File

@ -92,7 +92,7 @@ export class AddonModChatChatPage {
});
// 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();
});
}

View File

@ -1,10 +1,14 @@
core-rich-text-editor {
height: 40vh;
overflow: hidden;
min-height: 30vh;
min-height: 200px; /* Just in case vh is not supported */
min-height: 40vh;
width: 100%;
position: relative;
> div {
position: absolute;
@include position(0, 0, 0, 0);
height: 100%;
width: 100%;
display: flex;
@ -67,14 +71,20 @@ core-rich-text-editor {
}
}
.core-textarea textarea {
margin: 0 !important;
padding: 0;
height: 100% !important;
width: 100% !important;
resize: none;
overflow-x: hidden;
overflow-y: auto;
.core-textarea {
position: relative;
textarea {
margin: 0 !important;
padding: 0;
height: 100% !important;
width: 100% !important;
resize: none;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
@include position(0, 0, 0, 0);
}
}
div.core-rte-toolbar {
@ -108,4 +118,8 @@ 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 editorElement: HTMLDivElement;
protected resizeFunction;
protected kbHeight = 0; // Last known keyboard height.
protected minHeight = 200; // Minimum height of the editor.
protected valueChangeSubscription: Subscription;
protected keyboardObs: any;
@ -121,7 +123,8 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
});
}, 750);
this.keyboardObs = this.events.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
this.keyboardObs = this.events.on(CoreEventsProvider.KEYBOARD_CHANGE, (kbHeight) => {
this.kbHeight = kbHeight;
this.maximizeEditorSize();
});
}
@ -137,7 +140,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
const deferred = this.utils.promiseDefer();
setTimeout(() => {
const contentVisibleHeight = this.content.contentHeight;
const contentVisibleHeight = this.content.contentHeight - this.kbHeight;
if (contentVisibleHeight <= 0) {
deferred.resolve(0);
@ -147,16 +150,16 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
setTimeout(() => {
// Editor is ready, adjust Height if needed.
const height = this.getSurroundingHeight(this.element);
if (contentVisibleHeight > height) {
this.element.style.height = this.domUtils.formatPixelsSize(contentVisibleHeight - height);
const height = this.content.contentHeight - this.kbHeight - this.getSurroundingHeight(this.element);
if (height > this.minHeight) {
this.element.style.height = this.domUtils.formatPixelsSize(height);
} else {
this.element.style.height = '';
}
deferred.resolve(contentVisibleHeight - height);
deferred.resolve(height);
}, 100);
});
}, 100);
return deferred.promise;
}

View File

@ -192,7 +192,7 @@ export class CoreCourseModuleMainResourceComponent implements OnInit, OnDestroy,
promise = Promise.resolve();
}
return this.fetchContent(refresh).catch((error) => {
return promise.catch((error) => {
// Error getting data, fail.
this.domUtils.showErrorModalDefault(error, this.fetchContentDefaultError, true);
}).finally(() => {

View File

@ -52,11 +52,11 @@ export class CoreCoursesCourseLinkHandler extends CoreContentLinksHandlerBase {
courseId = parseInt(params.id, 10);
const sectionId = params.sectionid ? parseInt(params.sectionid, 10) : null,
sectionNumber = typeof params.section != 'undefined' ? parseInt(params.section, 10) : NaN,
pageParams: any = {
course: { id: courseId },
sectionId: sectionId || null
};
let sectionNumber = typeof params.section != 'undefined' ? parseInt(params.section, 10) : NaN;
if (!sectionId && !sectionNumber) {
// Check if the URL has a hash to navigate to the section.

View File

@ -79,7 +79,9 @@ export class CoreAppProvider {
zone.run(() => {
document.body.classList.add('keyboard-is-open');
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) => {
@ -87,7 +89,7 @@ export class CoreAppProvider {
zone.run(() => {
document.body.classList.remove('keyboard-is-open');
this.isKeyboardShown = false;
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown);
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, 0);
});
});
}