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