Fixed after designer review (#198)

DevExpress · Nov 7, 2023 · 3714cc4 · 3714cc4
1 parent 81e267d
commit 3714cc4
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/src/app/preview/buttons/buttons.component.html b/src/app/preview/buttons/buttons.component.html
@@ -94,14 +94,14 @@
     <div class="btn-cell">
         <div class="btn-list">
         <dx-button
-            text="BUTTON"
+            text="Button"
             type="default"
             [stylingMode]="mode"
             [disabled]="disabled"
             (onContentReady)="initState ? initState($event) : null"
         ></dx-button>
         <dx-button
-            text="BUTTON"
+            text="Button"
             icon="favorites"
             type="default"
             [stylingMode]="mode"

diff --git a/src/app/preview/editors/editors.component.html b/src/app/preview/editors/editors.component.html
@@ -2,7 +2,7 @@
 
 <ng-template #collapsedBlock>
     <dx-text-box width="140" value="Text Box"></dx-text-box>
-    <dx-tag-box width="140" [items]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']" [value]="['Monday']"></dx-tag-box>
+    <dx-tag-box width="140" [multiline]="false" [items]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']" [value]="['Monday']"></dx-tag-box>
     <dx-select-box width="140" [items]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"></dx-select-box>
     <dx-lookup width="140" [items]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"></dx-lookup>
     <dx-check-box [value]="true"></dx-check-box>
@@ -40,7 +40,7 @@
                 </dx-text-box>
             </div>
             <div class="field daterangebox">
-                <dx-date-range-box stylingMode="outlined" [dropDownOptions]="dropDownOptions"></dx-date-range-box>
+                <dx-date-range-box stylingMode="outlined" [dropDownOptions]="dropDownOptions" [labelMode]="labelMode"></dx-date-range-box>
             </div>
         </div>
         <div class="block filled">

diff --git a/src/app/preview/preview/preview.component.css b/src/app/preview/preview/preview.component.css
@@ -37,7 +37,7 @@
 }
 
 .component-display:hover,
-.component-item.component-item--active .component-display {
+.component-item.selected-component-item .component-display {
     border-color: #2190F7;
 }
 

diff --git a/src/app/preview/preview/preview.component.ts b/src/app/preview/preview/preview.component.ts
@@ -30,6 +30,7 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
 
     createPreviewContent(widget: any): void {
         const EXPAND_CLASS_NAME = 'component-item--active';
+        const SELECTED_ITEM_CLASS_NAME = 'selected-component-item';
         const flexContainers = document.getElementsByClassName('component-item');
         const scrollableContainer = this.scrollView.instance.element().querySelector('.dx-scrollable-container');
         const currentWidget: string = widget.currentValue || widget;
@@ -38,6 +39,7 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
         /* eslint @typescript-eslint/prefer-for-of: 'off' */
         for(let i = 0; i < flexContainers.length; i++) {
             flexContainers[i].classList.remove(EXPAND_CLASS_NAME);
+            flexContainers[i].classList.remove(SELECTED_ITEM_CLASS_NAME);
         }
 
         this.widgetElements.forEach((widgetEl) => {
@@ -63,6 +65,8 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
                 const flexParentContainer = widgetContainer[0].parentElement.parentElement;
                 const scrollTop = 30;
 
+                flexParentContainer.classList.add(SELECTED_ITEM_CLASS_NAME);
+
                 if(this.notExpandableWidgets.indexOf(currentWidget) >= 0) {
                     scrollableContainer.scrollTo({
                         top: flexParentContainer.offsetTop - scrollTop,

diff --git a/src/app/preview/treeview/treeview.component.ts b/src/app/preview/treeview/treeview.component.ts
@@ -19,7 +19,6 @@ export class TreeviewComponent {
                 {
                     id: 11,
                     text: 'Individual Platforms',
-                    selected: true,
                     items: [
                         { id: 111, text: 'WinForms' },
                         { id: 112, text: 'ASP.NET' },