Merge branch 'master' into preyskurantov/re-design

.github/workflows/deploy.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - master
+      - preyskurantov/re-design
 
 jobs:
   deploy:

package.json

@@ -22,9 +22,9 @@
     "@angular/router": "^16.2.1",
     "@ngtools/webpack": "^16.0.0",
     "core-js": "^2.5.4",
-    "devextreme": "23.1.4",
-    "devextreme-angular": "23.1.4",
-    "devextreme-themebuilder": "23.1.4",
+    "devextreme": "23.1.5",
+    "devextreme-angular": "23.1.5",
+    "devextreme-themebuilder": "23.1.5",
     "file-saver": "^2.0.2",
     "jszip": "^3.2.2",
     "jszip-utils": "^0.1.0",

src/app/left-menu/editor/editor.component.html

@@ -1,4 +1,4 @@
-<div class="property-header" [innerHTML]="header"></div>
+<div class="property-header" [innerHTML]="highlight(this.item.Name)"></div>
 <div class="property-widget">
     <dx-select-box *ngIf="item.Type === 'select'"
         stylingMode="filled"

src/app/left-menu/editor/editor.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 
 import { MetadataRepositoryService } from '../../meta-repository.service';
@@ -11,20 +11,14 @@ import { MetaItem } from '../../types/meta-item';
     templateUrl: './editor.component.html',
     styleUrls: ['./editor.component.css']
 })
-export class EditorComponent implements OnInit {
+export class EditorComponent {
     @Input('item') item: MetaItem;
 
     @Input() searchText = '';
 
-    header: SafeHtml;
-
     constructor(private names: NamesService,
         private metaRepository: MetadataRepositoryService) { }
 
-    ngOnInit(): void {
-        this.header = this.highlight(this.item.Name);
-    }
-
     highlight(text: string): SafeHtml {
         return this.names.getHighlightedForLeftMenuName(text, this.searchText);
     }

src/app/left-menu/main/left-menu.component.html

@@ -1,7 +1,7 @@
 <div class="left-menu">
     <div class="working-area">
         <div class="scroll-container" *ngIf="workArea">
-            <dx-scroll-view>
+            <dx-scroll-view (onScroll)="fireScrollEventForClosingDropdowns()">
             <div *ngFor="let data of filteredData">
                 <div class="name top search-active" *ngIf="searchOpened">
                     <div class="link-handler" [routerLink]="['/advanced', theme, colorScheme, data.route]"></div>
@@ -46,7 +46,7 @@
             <div>
                 <app-back-navigator text="Back"></app-back-navigator>
             </div>
-            
+
         </div>
         <div class="separator"></div>
         <div class="scroll-container">

src/app/left-menu/main/left-menu.component.ts

@@ -187,6 +187,10 @@ export class LeftMenuComponent implements OnDestroy, OnInit {
         });
     }
 
+    fireScrollEventForClosingDropdowns() {
+        document.body.dispatchEvent(new Event('scroll'));
+    }
+
     ngOnDestroy(): void {
         this.subscription.unsubscribe();
     }

src/app/preview/editors/editors.component.html

@@ -40,7 +40,7 @@
                 </dx-text-box>
             </div>
             <div class="field daterangebox">
-                <dx-date-range-box stylingMode="outlined"></dx-date-range-box>
+                <dx-date-range-box stylingMode="outlined" [dropDownOptions]="dropDownOptions"></dx-date-range-box>
             </div>
         </div>
         <div class="block filled">
@@ -70,7 +70,7 @@
                 </dx-text-box>
             </div>
             <div class="field daterangebox">
-                <dx-date-range-box stylingMode="filled"></dx-date-range-box>
+                <dx-date-range-box stylingMode="filled" [dropDownOptions]="dropDownOptions"></dx-date-range-box>
             </div>
         </div>
         <div class="block underlined">
@@ -100,7 +100,7 @@
                 </dx-text-box>
             </div>
             <div class="field daterangebox">
-                <dx-date-range-box stylingMode="underlined"></dx-date-range-box>
+                <dx-date-range-box stylingMode="underlined" [dropDownOptions]="dropDownOptions"></dx-date-range-box>
             </div>
         </div>
     </div>

src/app/preview/editors/editors.component.ts

@@ -11,7 +11,7 @@ export class EditorsComponent implements OnInit, OnDestroy {
     widgetGroup = 'editors';
     isExpanded = new BehaviorSubject<boolean>(false);
     subscription: Subscription;
-
+    dropDownOptions = {hideOnParentScroll: true};
     labelMode = 'floating';
 
     ngOnInit(): void {

src/app/preview/preview/preview.component.html

@@ -1,4 +1,4 @@
-<dx-scroll-view #scrollView class="preview-scrollview">
+<dx-scroll-view #scrollView class="preview-scrollview" (onScroll)="fireScrollEventForClosingDropdowns()">
     <div class="component-container">
         <div class="component-item">
             <h1 class="component-title">Buttons</h1>

src/app/preview/preview/preview.component.ts

@@ -105,4 +105,8 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
     ngAfterViewInit(): void {
         this.createPreviewContent(this.widgetName);
     }
+
+    fireScrollEventForClosingDropdowns() {
+        document.body.dispatchEvent(new Event('scroll'));
+    }
 }