Enhancement: relocate and smaller upload widget, dont limit upload list (#9244)

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -1,23 +1,32 @@
-<div class="card shadow-sm bg-light fade" [class.show]="show" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
-  <div class="card-header">
-    <div class="d-flex justify-content-between align-items-center">
-      <div class="d-flex">
-        @if (draggable) {
-          <div class="ms-n2 me-1" cdkDragHandle>
-            <i-bs name="grip-vertical"></i-bs>
-          </div>
+@if (!cardless) {
+  <div class="card shadow-sm bg-light fade" [class.show]="show" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
+    <div class="card-header">
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex">
+          @if (draggable) {
+            <div class="ms-n2 me-1" cdkDragHandle>
+              <i-bs name="grip-vertical"></i-bs>
+            </div>
+          }
+          <h6 class="card-title mb-0">{{title}}</h6>
+        </div>
+        @if (loading) {
+          <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+          <div class="visually-hidden" i18n>Loading...</div>
         }
-        <h6 class="card-title mb-0">{{title}}</h6>
+        <ng-content select="[header-buttons]"></ng-content>
       </div>
-      @if (loading) {
-        <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-        <div class="visually-hidden" i18n>Loading...</div>
-      }
-      <ng-content select="[header-buttons]"></ng-content>
     </div>
+    <div class="card-body text-dark">
+      <ng-container [ngTemplateOutlet]="content"></ng-container>
+    </div>
+  </div>
+} @else {
+  <div class="fade" [class.show]="show">
+    <ng-container [ngTemplateOutlet]="content"></ng-container>
+  </div>
+}
 
-  </div>
-  <div class="card-body text-dark">
-    <ng-content select="[content]"></ng-content>
-  </div>
-</div>
+<ng-template #content>
+  <ng-content select="[content]"></ng-content>
+</ng-template>

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -1,4 +1,5 @@
 import { DragDropModule } from '@angular/cdk/drag-drop'
+import { NgTemplateOutlet } from '@angular/common'
 import { AfterViewInit, Component, Input } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
@@ -7,7 +8,7 @@ import { LoadingComponentWithPermissions } from 'src/app/components/loading-comp
   selector: 'pngx-widget-frame',
   templateUrl: './widget-frame.component.html',
   styleUrls: ['./widget-frame.component.scss'],
-  imports: [DragDropModule, NgxBootstrapIconsModule],
+  imports: [DragDropModule, NgxBootstrapIconsModule, NgTemplateOutlet],
 })
 export class WidgetFrameComponent
   extends LoadingComponentWithPermissions
@@ -26,6 +27,9 @@ export class WidgetFrameComponent
   @Input()
   draggable: any
 
+  @Input()
+  cardless: boolean = false
+
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.show = true