[Cooldown] Remove sendAction from side-hover-panel & ts format

addon/components/layout/side-hover-panel.hbs

@@ -0,0 +1,5 @@
+<div class={{this.computedClassNames}} {{did-insert this.initialize}} {{will-destroy this.teardown}} ...attributes>
+  <div role="button" class="panel-backdrop hidden" {{on "click" this.backdrop}}></div>
+  <div class="hover-panel">{{yield}}</div>
+</div>
+

addon/components/layout/side-hover-panel.ts

@@ -0,0 +1,89 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+interface SideHoverPanelArgs {
+  side: string;
+  stickTo: string;
+  width: string;
+  height: string;
+  disableScrolling: boolean;
+  isOverContent: boolean;
+  shouldAnimate: boolean;
+  backdropAction?(): void;
+}
+
+export default class SideHoverPanel extends Component<SideHoverPanelArgs> {
+  hoverPanel: HTMLElement | null = null;
+  panelBackdrop: HTMLElement | null = null;
+
+  get computedClassNames(): string {
+    let classes = ['__side-hover-panel'];
+    if (this.args.isOverContent) {
+      classes.push('__side-hover-panel--over-content');
+    }
+    return classes.join(' ');
+  }
+
+  get side(): string {
+    return this.args.side ?? 'right';
+  }
+
+  get shouldAnimate(): boolean {
+    return this.args.shouldAnimate ?? true;
+  }
+
+  get width(): string {
+    return this.args.width ?? '100%';
+  }
+
+  get height(): string {
+    return this.args.height ?? '100%';
+  }
+
+  get disableScrolling(): boolean {
+    return this.args.disableScrolling ?? false;
+  }
+
+  get stickTo(): string {
+    return this.args.stickTo ?? 'right';
+  }
+
+  @action
+  initialize(element: HTMLElement): void {
+    this.hoverPanel = element.querySelector('.hover-panel')! as HTMLElement;
+    this.hoverPanel.classList.add(this.side + '_side');
+    this.hoverPanel.classList.add(this.stickTo + '_align');
+
+    if (this.shouldAnimate) {
+      this.hoverPanel.classList.add('animate');
+    }
+
+    this.hoverPanel.classList.add(this.side + '_transform');
+
+    if (this.args.backdropAction) {
+      this.panelBackdrop = element.querySelector('.panel-backdrop');
+      this.panelBackdrop!.classList.remove('hidden');
+    }
+
+    this.hoverPanel.style.width = this.width;
+    this.hoverPanel.style.height = this.height;
+
+    if (this.disableScrolling) {
+      document.querySelector('body')?.classList.add('disable-scrolling');
+    }
+  }
+
+  @action
+  teardown(): void {
+    this.hoverPanel?.remove();
+    this.panelBackdrop?.classList.add('hidden');
+    if (this.disableScrolling) {
+      document.querySelector('body')?.classList.remove('disable-scrolling');
+    }
+  }
+
+  @action
+  backdrop(): void {
+    this.args.backdropAction?.();
+  }
+}

addon/components/u-edit/shared-triggers/modals/file-uploader.hbs

@@ -7,61 +7,27 @@
       </div>
     {{/if}}
     <div class="form-group">
-      <label>{{t (concat "uedit_editor.toolbar." this.titleKey ".by_url.label")}}</label>
+      <label>{{t (concat "uedit_editor.toolbar.by_url")}}</label>
       <Input
-       @value={{this.directURL}} @placeholder={{t  (concat "uedit_editor.toolbar." this.titleKey ".by_url.placeholder")}}
+       @value={{this.directURL}} @placeholder={{t (concat "uedit_editor.toolbar." this.titleKey ".placeholder")}}
        class="form-control upf-input" />
     </div>
 
-    {{#drag-and-drop
-      class="drop-zone upf-align--center" onDragClass="drop-zone-active" onDropFiles=this.onDropFiles}}
-      <img src="/@upfluence/ember-upf-utils/images/upload.svg" alt={{t (concat "uedit_editor.toolbar." this.titleKey ".title")}} />
-
-      <br/>
-
-      {{#if this.processing}}
-        <h4>{{t (concat "uedit_editor.toolbar." this.titleKey ".processing") filename=this.file.name}}</h4>
-      {{/if}}
-
-      <div class={{if this.processing 'hidden'}}>
-        <h3>{{t (concat "uedit_editor.toolbar." this.titleKey ".drop_file")}}</h3>
-
-        <p>
-          {{t (concat "uedit_editor.toolbar." this.titleKey ".or")}} <br />
-
-          {{file-uploader
-            file=this.droppedFile allowedExtensions=this.allowedExtensions headers=this.uploaderHeaders
-            extra=this.uploaderExtra maxSize="10 MB" text=(t (concat "uedit_editor.toolbar." this.titleKey ".browse"))
-            beforeUpload=this.beforeUpload didError=this.onError didUpload=this.didUpload}}
-        </p>
-      </div>
-    {{/drag-and-drop}}
-
-    {{#if (and this.file.name (not this.processing))}}
-      <div class="uploaded-files margin-top-x-sm">
-        <label>{{t (concat "uedit_editor.toolbar." this.titleKey ".processed_file.title")}}</label>
-
-        <div class="file">
-          <div class="fx-row fx-gap-px-9 fx-xalign-center">
-            <OSS::Icon @icon="fa-file-alt" class="text-size-7" />
-
-            <div>
-              <span class="text-ellipsis-140">{{this.file.name}}</span>
-            </div>
-          </div>
-
-          <div class="status">
-            <OSS::Icon @icon="fa-check-circle" class="font-color-success-500 font-size-lg" />
-          </div>
-        </div>
-      </div>
-    {{/if}}
+    <OSS::UploadArea
+      @size="lg"
+      @uploader={{this.uploader}}
+      @subtitle={{t (concat "uedit_editor.toolbar." this.titleKey ".subtitle")}}
+      @rules={{this.fileUploadRules}}
+      @onUploadSuccess={{this.onSuccessfulFileUpload}}
+      @onFileDeletion={{this.onFileDeletion}}
+      @privacy={{this.privacy}}
+      @scope={{this.scope}}
+    />
   </:content>
 
-
   <:footer>
     <div class="fx-row fx-1 fx-malign-end fx-gap-px-10">
-      <OSS::Button @label={{t (concat "uedit_editor.toolbar." this.titleKey ".cancel")}} {{on "click" @closeAction}} />
+      <OSS::Button @label={{t (concat "uedit_editor.toolbar.cancel")}} {{on "click" @closeAction}} />
       <OSS::Button
         @skin="primary" @label={{t (concat "uedit_editor.toolbar." this.titleKey ".title")}}
         disabled={{and (not this.fileURL) (not this.directURL)}}