Work for #3390: fix toolbox responsiveness

surveyjs · Sep 27, 2022 · 395dd79 · 395dd79
1 parent cba429d
commit 395dd79
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 7 deletions.
diff --git a/packages/survey-creator-angular/example/angular-ui/src/app/example.component.ts b/packages/survey-creator-angular/example/angular-ui/src/app/example.component.ts
@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { SurveyModel } from "survey-core";
 import { CreatorBase } from "survey-creator-core";
+import * as Survey from "survey-core";
 
 const json = {
   "logoPosition": "right",
@@ -81,6 +82,7 @@ export class ExampleComponent {
   constructor() {
     this.creator.JSON = json;
     (<any>window).creator = this.creator;
+    (<any>window).Survey = Survey;
   }
 
   public survey = new SurveyModel(json);

diff --git a/packages/survey-creator-angular/example/angular-ui/src/app/test/test.component.ts b/packages/survey-creator-angular/example/angular-ui/src/app/test/test.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 import "survey-core/survey.i18n";
 import "survey-creator-core/survey-creator-core.i18n";
 import { CreatorBase } from "survey-creator-core";
+import * as Survey from "survey-core";
 
 @Component({
   selector: "test",
@@ -12,6 +13,8 @@ export class TestComponent implements OnInit {
   ngOnInit(): void {
     this.createCreator();
     (<any>window).creator = this.creator;
+    (<any>window).Survey = Survey;
+
   }
   protected createCreator(): void {
     this.creator = new CreatorBase({ showLogicTab: true, showTranslationTab: true, haveCommercialLicense: true });

diff --git a/packages/survey-creator-angular/src/side-bar/side-bar.component.html b/packages/survey-creator-angular/src/side-bar/side-bar.component.html
@@ -7,9 +7,7 @@
           <div class="svc-side-bar__container-actions">
             <sv-action-bar [model]="model.toolbar"></sv-action-bar>
           </div>
-          <div *ngIf="!!model.headerText" class="svc-side-bar__container-title">
-            {{model.headerText}}
-          </div>
+          <div *ngIf="!!model.headerText" class="svc-side-bar__container-title">{{model.headerText}}</div>
         </div>
         <div class="svc-side-bar__container-content">
           <ng-container *ngFor="let tab of model.tabs">

diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div [class]="model.getDesignerCss()" [style.width]="survey.width">
+  <div [class]="model.getDesignerCss()" [style.width]="survey.renderedWidth" [style.maxWidth]="survey.renderedWidth">
     <div *ngIf="creator.allowEditSurveyTitle" class="svc-designer-header">
       <!-- ko template: { name: 'survey-header', data: survey } -->
       <!-- /ko -->

diff --git a/packages/survey-creator-angular/src/tabs/designer/designer.component.html b/packages/survey-creator-angular/src/tabs/designer/designer.component.html
@@ -1,5 +1,7 @@
 <ng-template #template>
-  <svc-adaptive-toolbox *ngIf="model.isToolboxVisible" [creator]="creator"></svc-adaptive-toolbox>
+  <div class="svc-flex-column">
+    <svc-adaptive-toolbox *ngIf="model.isToolboxVisible" [creator]="creator"></svc-adaptive-toolbox>
+  </div>
   <div class="svc-tab-designer" [class]="model.getRootCss()" (click)="model.clickDesigner()">
     <div class="svc-tab-designer_content">
       <ng-container *ngIf="model.showPlaceholder">

diff --git a/packages/survey-creator-angular/src/toolbox/adaptive-toolbox.component.ts b/packages/survey-creator-angular/src/toolbox/adaptive-toolbox.component.ts
@@ -18,7 +18,7 @@ export class AdaptiveToolboxComponent extends BaseAngular<QuestionToolbox> imple
   ngAfterViewInit() {
     this.responsivityManager =
       new VerticalResponsivityManager(this.container.nativeElement,
-        this.model, ".svc-toolbox__tool:not(.sv-dots)", 44, 44);
+        this.model, ".svc-toolbox__tool:not(.sv-dots)");
   }
   protected getModel(): QuestionToolbox {
     return this.model;

diff --git a/testCafe/designer/responsiveness.ts b/testCafe/designer/responsiveness.ts
@@ -28,7 +28,7 @@ test("Check base responsiveness for tabbed menu", async (t) => {
 });
 
 test("Check base responsiveness for toolbox", async (t) => {
-  const tabbedMenuItemSelector = Selector(".svc-toolbox .svc-toolbox__tool:nth-child(20)");
+  const tabbedMenuItemSelector = Selector(".svc-toolbox .svc-toolbox__tool:nth-of-type(20)");
   await t
     .resizeWindow(1280, 1100)
     .expect(tabbedMenuItemSelector.hasClass("sv-action--hidden")).notOk()