Merge 04a7264765 into be3207ab65

ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts

@@ -59,6 +59,7 @@ import { parseError } from '@shared/models/error.models';
 import { CompiledTbFunction, compileTbFunction } from '@shared/models/js-function.models';
 import { HttpClient } from '@angular/common/http';
 import { StateObject } from '@core/api/widget-api.models';
+import { TOAST_PANEL_MIN_HEIGHT, TOAST_PANEL_MIN_WIDTH } from '@shared/components/toast.directive';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -146,7 +147,11 @@ export abstract class BasicActionWidgetComponent implements OnInit, OnDestroy, A
   }
 
   private onError(error: string) {
-    this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true);
+    const widgetElement = this.ctx.$widgetElement[0];
+    const isFit = widgetElement.offsetHeight >= TOAST_PANEL_MIN_HEIGHT || widgetElement.offsetWidth >= TOAST_PANEL_MIN_WIDTH;
+    const verticalPosition = isFit ? 'bottom' : 'top';
+    const horizontalPosition = isFit ? 'center' : 'right';
+    this.ctx.showErrorToast(error, verticalPosition, horizontalPosition, this.ctx.toastTargetId, true);
   }
 
   protected updateValue<V>(valueSetter: ValueSetter<V>,

ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts

@@ -42,6 +42,7 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { catchError, share } from 'rxjs/operators';
 import { MatIconRegistry } from '@angular/material/icon';
 import { RafService } from '@core/services/raf.service';
+import { TOAST_PANEL_MIN_HEIGHT, TOAST_PANEL_MIN_WIDTH } from '@shared/components/toast.directive';
 
 @Component({
     selector: 'tb-scada-symbol-widget',
@@ -127,11 +128,19 @@ export class ScadaSymbolWidgetComponent implements OnInit, AfterViewInit, OnDest
   }
 
   onScadaSymbolObjectError(error: string) {
-    this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true);
+    const scadaSymbolNativeElement = this.scadaSymbolShape.nativeElement;
+    const isFit = scadaSymbolNativeElement.offsetHeight >= TOAST_PANEL_MIN_HEIGHT || scadaSymbolNativeElement.offsetWidth >= TOAST_PANEL_MIN_WIDTH;
+    const verticalPosition = isFit ? 'bottom' : 'top';
+    const horizontalPosition = isFit ? 'center' : 'right';
+    this.ctx.showErrorToast(error, verticalPosition, horizontalPosition, this.ctx.toastTargetId, true);
   }
 
   onScadaSymbolObjectMessage(message: string) {
-    this.ctx.showSuccessToast(message, 3000, 'bottom', 'center', this.ctx.toastTargetId, true);
+    const scadaSymbolNativeElement = this.scadaSymbolShape.nativeElement;
+    const isFit = scadaSymbolNativeElement.offsetHeight >= TOAST_PANEL_MIN_HEIGHT || scadaSymbolNativeElement.offsetWidth >= TOAST_PANEL_MIN_WIDTH;
+    const verticalPosition = isFit ? 'bottom' : 'top';
+    const horizontalPosition = isFit ? 'center' : 'right';
+    this.ctx.showSuccessToast(message, 3000, verticalPosition, horizontalPosition, this.ctx.toastTargetId, true);
   }
 
   private initObject(rootElement: HTMLElement,

ui-ngx/src/app/shared/components/snack-bar-component.html

@@ -30,6 +30,7 @@
   </ng-container>
   <ng-template #modern>
     <div class="tb-modern-toast-panel"
+         [class.top]="notification.verticalPosition === 'top'"
          [class.error-toast]="notification.type === 'error'"
          [class.warn-toast]="notification.type === 'warn'"
          [class.success-toast]="notification.type === 'success'"

ui-ngx/src/app/shared/components/snack-bar-component.scss

@@ -84,6 +84,9 @@
       gap: 4px;
       border-radius: 4px;
       box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.2);
+      &.top {
+        align-items: flex-start;
+      }
       &.info-toast {
         background: #e6e6e6;
         color: rgba(50, 50, 50, 1);

ui-ngx/src/app/shared/components/toast.directive.ts

@@ -37,6 +37,9 @@ import { MediaBreakpoints } from '@shared/models/constants';
 import { MatButton } from '@angular/material/button';
 import Timeout = NodeJS.Timeout;
 
+export const TOAST_PANEL_MIN_WIDTH = 80;
+export const TOAST_PANEL_MIN_HEIGHT = 120;
+
 @Directive({
     selector: '[tb-toast]',
     standalone: false