fix: remove ui jumps during control scheme start

nvsukhanov · Mar 20, 2024 · b2a9122 · b2a9122
1 parent 479ff0b
commit b2a9122
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/...ntrol-scheme-view/src/lib/widgets/widgets-grid/control-scheme-widgets-grid.component.scss b/...ntrol-scheme-view/src/lib/widgets/widgets-grid/control-scheme-widgets-grid.component.scss
@@ -7,7 +7,9 @@
 }
 
 .add-widget-button-container {
-    border: 3px dashed var(--app-well-color);
+    border-width: 3px;
+    border-style: dashed;
+    border-color: var(--app-well-color);
     border-radius: 10px;
     display: flex;
     justify-content: center;
@@ -16,12 +18,12 @@
     height: 100%;
     box-sizing: border-box;
 
-    transition: width 0.5s, border 0.5s;
+    transition: width 0.5s, border-color 0.5s;
     overflow: hidden;
 
     &_running {
         width: 0;
-        border: none;
+        border-color: rgba(0,0,0,0);
     }
 }
 

diff --git a/modules/pages/control-scheme-view/src/lib/widgets/widgets-section.component.html b/modules/pages/control-scheme-view/src/lib/widgets/widgets-section.component.html
@@ -12,16 +12,14 @@ <h3 class="section-title">
     </button>
 </section>
 
-@if (widgets().length || canAddWidgets()) {
-    <section class="widgets-content"
-             [class.widgets-content_editable]="!isSchemeRunning()"
-    >
-        <page-control-scheme-view-control-scheme-widgets-grid [widgetConfigs]="widgets()"
-                                                              [editable]="canDeleteOrEditWidgets()"
-                                                              [canAddWidget]="canAddWidgets()"
-                                                              (deleteWidget)="onDeleteWidget($event)"
-                                                              (editWidget)="onEditWidget($event)"
-                                                              (addWidget)="onAddWidget()"
-        ></page-control-scheme-view-control-scheme-widgets-grid>
-    </section>
-}
+<section class="widgets-content"
+         [class.widgets-content_editable]="!isSchemeRunning()"
+>
+    <page-control-scheme-view-control-scheme-widgets-grid [widgetConfigs]="widgets()"
+                                                          [editable]="canDeleteOrEditWidgets()"
+                                                          [canAddWidget]="canAddWidgets()"
+                                                          (deleteWidget)="onDeleteWidget($event)"
+                                                          (editWidget)="onEditWidget($event)"
+                                                          (addWidget)="onAddWidget()"
+    ></page-control-scheme-view-control-scheme-widgets-grid>
+</section>