#4895 - all platforms and v-test

surveyjs · Jul 3, 2024 · 13ce8b5 · 13ce8b5
1 parent 204b5c8
commit 13ce8b5
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 46 deletions.
diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html
@@ -9,6 +9,7 @@
         (pointerdown)="adorner.onPointerDown($event)">
         <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
           sv-ng-svg-icon></svg>
+        <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
       </div>
 
       <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>

diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html
@@ -7,22 +7,25 @@
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
         <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
           sv-ng-svg-icon></svg>
+        <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
       </div>
 
       <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
-      <div *ngIf="adorner.isEmptyElement && !showPlaceholderComponent" class="svc-panel__placeholder_frame-wrapper">
-        <div class="svc-panel__placeholder_frame">
-          <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
+      <div class="svc-question__placeholders">
+        <div *ngIf="adorner.isEmptyElement && !showPlaceholderComponent" class="svc-panel__placeholder_frame-wrapper">
+          <div class="svc-panel__placeholder_frame">
+            <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
+          </div>
         </div>
+        <ng-template *ngIf="adorner.isEmptyElement && !!showPlaceholderComponent"
+          [component]="{ name: placeholderComponent, data: placeholderComponentData }">
+        </ng-template>
+        <ng-template *ngIf="adornerComponent"
+          [component]="{ name: adornerComponent, data: { adorner: adorner, question: model } }">
+        </ng-template>
+        <svc-question-banner *ngIf="adorner.isBannerShowing" [model]="adorner.createBannerParams()">
+        </svc-question-banner>
       </div>
-      <ng-template *ngIf="adorner.isEmptyElement && !!showPlaceholderComponent"
-        [component]="{ name: placeholderComponent, data: placeholderComponentData }">
-      </ng-template>
-      <ng-template *ngIf="adornerComponent"
-        [component]="{ name: adornerComponent, data: { adorner: adorner, question: model } }">
-      </ng-template>
-      <svc-question-banner *ngIf="adorner.isBannerShowing" [model]="adorner.createBannerParams()">
-      </svc-question-banner>
       <div class="svc-question__content-actions" (focusin)="adorner.select(adorner, $event)">
         <sv-action-bar [model]="adorner.actionContainer" [handleClick]="false"></sv-action-bar>
       </div>

diff --git a/packages/survey-creator-react/src/adorners/Question.tsx b/packages/survey-creator-react/src/adorners/Question.tsx
@@ -100,8 +100,10 @@ export class QuestionAdornerComponent extends CreatorModelElement<
     return (
       <>
         {this.props.element}
-        {this.renderElementPlaceholder()}
-        {this.renderCarryForwardBanner()}
+        <div className="svc-question__placeholders">
+          {this.renderElementPlaceholder()}
+          {this.renderCarryForwardBanner()}
+        </div>
       </>
     );
   }

diff --git a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
@@ -27,6 +27,7 @@ export class QuestionWrapperHeader extends React.Component<QuestionWrapperHeader
         }
       >
         <SvgIcon className="svc-question__drag-element" size={24} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
+        <SurveyActionBar model={this.props.model.topActionContainer} handleClick={false}></SurveyActionBar>
       </div>
     );
   }

diff --git a/packages/survey-creator-vue/src/adorners/Panel.vue b/packages/survey-creator-vue/src/adorners/Panel.vue
@@ -29,6 +29,10 @@
           :iconName="'icon-drag-area-indicator_24x16'"
           :size="24"
         ></sv-svg-icon>
+        <sv-action-bar
+          :model="adorner.topActionContainer"
+          :handleClick="false"
+        ></sv-action-bar>
       </div>
       <component :is="componentName" v-bind="componentData"></component>
       <div v-if="adorner.isEmptyElement" class="svc-panel__placeholder_frame-wrapper">

diff --git a/packages/survey-creator-vue/src/adorners/QuestionBase.vue b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
@@ -31,48 +31,54 @@
             size: 24,
           }"
         ></sv-svg-icon>
+        <sv-action-bar
+          :model="model.topActionContainer"
+          :handleClick="false"
+        ></sv-action-bar>
       </div>
 
       <sv-template-renderer
         :componentName="componentName"
         :componentData="componentData"
       ></sv-template-renderer>
-      <div
-        v-if="model.isEmptyElement && !showPlaceholderComponent"
-        class="svc-panel__placeholder_frame-wrapper"
-      >
-        <div class="svc-panel__placeholder_frame">
-          <div class="svc-panel__placeholder" data-bind="text: placeholderText">
-            {{ model.placeholderText }}
+      <div>
+        <div
+          v-if="model.isEmptyElement && !showPlaceholderComponent"
+          class="svc-panel__placeholder_frame-wrapper"
+        >
+          <div class="svc-panel__placeholder_frame">
+            <div class="svc-panel__placeholder" data-bind="text: placeholderText">
+              {{ model.placeholderText }}
+            </div>
           </div>
         </div>
-      </div>
-      <component
-        v-if="model.isEmptyElement && showPlaceholderComponent"
-        :is="placeholderComponent"
-        v-bind="placeholderComponentData"
-      ></component>
-      <!-- ko if: koIsEmptyElement() && !!$data.placeholderComponentData -->
-      <!-- ko let: { question: placeholderComponentData.data }  -->
-      <!-- ko component: { name: 'sv-template-renderer', params: { componentData: null, templateData: placeholderComponentData } } -->
-      <!-- /ko -->
-      <!-- /ko -->
-      <!-- /ko -->
+        <component
+          v-if="model.isEmptyElement && showPlaceholderComponent"
+          :is="placeholderComponent"
+          v-bind="placeholderComponentData"
+        ></component>
+        <!-- ko if: koIsEmptyElement() && !!$data.placeholderComponentData -->
+        <!-- ko let: { question: placeholderComponentData.data }  -->
+        <!-- ko component: { name: 'sv-template-renderer', params: { componentData: null, templateData: placeholderComponentData } } -->
+        <!-- /ko -->
+        <!-- /ko -->
+        <!-- /ko -->
 
-      <!-- ko if: adornerComponent -->
-      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->
-      <!-- /ko -->
-      <!-- /ko -->
-      <component
-        v-if="adornerComponent"
-        :is="adornerComponent"
-        :model="model"
-        :element="element"
-      />
-      <svc-question-banner
-        v-if="model.isBannerShowing"
-        :model="questionBannerParams"
-      ></svc-question-banner>
+        <!-- ko if: adornerComponent -->
+        <!-- ko component: { name: adornerComponent, params: { model: $data } } -->
+        <!-- /ko -->
+        <!-- /ko -->
+        <component
+          v-if="adornerComponent"
+          :is="adornerComponent"
+          :model="model"
+          :element="element"
+        />
+        <svc-question-banner
+          v-if="model.isBannerShowing"
+          :model="questionBannerParams"
+        ></svc-question-banner>
+      </div>
       <div
         class="svc-question__content-actions"
         v-on:focusin="

diff --git a/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed.png b/visualRegressionTests/tests/designer/etalons/panel-adorner-collapsed.png
diff --git a/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed.png b/visualRegressionTests/tests/designer/etalons/question-adorner-collapsed.png
diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
@@ -2106,4 +2106,30 @@ test("Check adorner actions responsivity after convert", async (t) => {
     await t.wait(100);
     await takeElementScreenshot("actions-on-converted-question.png", root.nth(0), t, comparer);
   });
+});
+test("Question adorner - collapsed", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1920, 1080);
+    const json = {
+      elements: [
+        {
+          type: "text",
+          name: "question1"
+        },
+        {
+          type: "panel",
+          name: "panel1"
+        }
+      ]
+    };
+    await setJSON(json);
+    const qContent = Selector(".svc-question__content");
+    const qCollapseButton = Selector(".svc-question__content #collapse");
+    await t.click(qContent.nth(0), { offsetX: 10, offsetY: 10 });
+    await t.click(qCollapseButton.filterVisible());
+    await takeElementScreenshot("question-adorner-collapsed.png", qContent.nth(0), t, comparer);
+    await t.click(qContent.nth(1), { offsetX: 10, offsetY: 10 });
+    await t.click(qCollapseButton.filterVisible());
+    await takeElementScreenshot("panel-adorner-collapsed.png", qContent.nth(1), t, comparer);
+  });
 });
-Original file line number
+Diff line change
@@ Expand Up @@
             }
           >
             <SvgIcon className="svc-question__drag-element" size={24} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
+            <SurveyActionBar model={this.props.model.topActionContainer} handleClick={false}></SurveyActionBar>
           </div>
         );
       }
@@ Expand Down @@