diff --git a/config.xml b/config.xml index fe4e37ebe..cb9f500f4 100644 --- a/config.xml +++ b/config.xml @@ -198,6 +198,7 @@ + diff --git a/src/core/components/sheet-modal/sheet-modal.scss b/src/core/components/sheet-modal/sheet-modal.scss index b5f43ef96..d80185bab 100644 --- a/src/core/components/sheet-modal/sheet-modal.scss +++ b/src/core/components/sheet-modal/sheet-modal.scss @@ -7,6 +7,7 @@ height: 100%; display: flex; flex-direction: column; + align-items: center; justify-content: flex-end; isolation: isolate; @@ -23,6 +24,8 @@ z-index: 3; // ion-backdrop has z-index 2 transform: translateY(100%); transition: transform 300ms ease-in; + width: 100%; + max-width: 500px; } &.active { diff --git a/src/core/components/sheet-modal/sheet-modal.ts b/src/core/components/sheet-modal/sheet-modal.ts index 4216224b4..b3c409775 100644 --- a/src/core/components/sheet-modal/sheet-modal.ts +++ b/src/core/components/sheet-modal/sheet-modal.ts @@ -34,6 +34,7 @@ export class CoreSheetModalComponent implements Af private element: HTMLElement; private wrapperElement = new CorePromisedValue(); + private content?: HTMLElement; constructor({ nativeElement: element }: ElementRef) { this.element = element; @@ -61,7 +62,7 @@ export class CoreSheetModalComponent implements Af */ async show(): Promise { const wrapper = await this.wrapperElement; - const element = await AngularFrameworkDelegate.attachViewToDom(wrapper, this.component, this.componentProps ?? {}); + this.content = await AngularFrameworkDelegate.attachViewToDom(wrapper, this.component, this.componentProps ?? {}); await CoreUtils.nextTick(); @@ -71,7 +72,7 @@ export class CoreSheetModalComponent implements Af await CoreUtils.nextTick(); await CoreUtils.wait(300); - const instance = CoreDirectivesRegistry.resolve(element, this.component); + const instance = CoreDirectivesRegistry.resolve(this.content, this.component); if (!instance) { throw new Error('Modal not mounted properly'); @@ -84,10 +85,13 @@ export class CoreSheetModalComponent implements Af * Hide modal. */ async hide(): Promise { + const wrapper = await this.wrapperElement; + this.element.classList.remove('active'); await CoreUtils.nextTick(); await CoreUtils.wait(300); + await AngularFrameworkDelegate.removeViewFromDom(wrapper, this.content); } } diff --git a/src/core/features/fileuploader/components/audio-histogram/audio-histogram.scss b/src/core/features/fileuploader/components/audio-histogram/audio-histogram.scss index bbef26a98..d484435f9 100644 --- a/src/core/features/fileuploader/components/audio-histogram/audio-histogram.scss +++ b/src/core/features/fileuploader/components/audio-histogram/audio-histogram.scss @@ -2,7 +2,12 @@ --background-color: var(--ion-background-color, #fff); --bars-color: var(--ion-text-color, #000); + position: relative; + canvas { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; } diff --git a/src/core/features/fileuploader/components/audio-histogram/audio-histogram.ts b/src/core/features/fileuploader/components/audio-histogram/audio-histogram.ts index 0af7d4e76..671680473 100644 --- a/src/core/features/fileuploader/components/audio-histogram/audio-histogram.ts +++ b/src/core/features/fileuploader/components/audio-histogram/audio-histogram.ts @@ -48,17 +48,7 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O this.context = this.canvas?.getContext('2d'); this.buffer = new Uint8Array(this.analyser.fftSize); - if (this.context && this.canvas) { - const styles = getComputedStyle(this.element); - - this.canvas.width = this.canvas.clientWidth; - this.canvas.height = this.canvas.clientHeight; - this.context.fillStyle = styles.getPropertyValue('--background-color'); - this.context.lineCap = 'round'; - this.context.lineWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH; - this.context.strokeStyle = styles.getPropertyValue('--bars-color'); - } - + this.updateCanvas(this.element.clientWidth, this.element.clientHeight); this.draw(); } @@ -77,6 +67,10 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O return; } + if (this.canvas.width !== this.element.clientWidth || this.canvas.height !== this.element.clientHeight) { + this.updateCanvas(this.element.clientWidth, this.element.clientHeight); + } + const width = this.canvas.width; const height = this.canvas.height; const barsWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH; @@ -157,4 +151,25 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O } } + /** + * Set canvas element dimensions and configure styles. + * + * @param width Canvas width. + * @param height Canvas height. + */ + private updateCanvas(width: number, height: number): void { + if (!this.canvas || !this.context) { + return; + } + + const styles = getComputedStyle(this.element); + + this.canvas.width = width; + this.canvas.height = height; + this.context.fillStyle = styles.getPropertyValue('--background-color'); + this.context.lineCap = 'round'; + this.context.lineWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH; + this.context.strokeStyle = styles.getPropertyValue('--bars-color'); + } + } diff --git a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.component.ts b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.component.ts index d24111752..85d01340c 100644 --- a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.component.ts +++ b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.component.ts @@ -86,7 +86,11 @@ export class CoreFileUploaderAudioRecorderComponent extends CoreModalComponent { await sheetModal.hide(); + await AngularFrameworkDelegate.removeViewFromDom(container, element); - element.remove(); viewContainer?.removeAttribute('aria-hidden'); });