#4895 - add option

surveyjs · Jul 7, 2024 · 4678097 · 4678097
1 parent 359036c
commit 4678097
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -452,11 +452,11 @@ svc-question,
 
 // EO reset styles for drag-drop-ghost-survey-element to avoid layout jumping while dragging
 
-.svc-hovered>.svc-question__content>.svc-question__drag-area {
+.svc-hovered>.svc-question__content>.svc-question__drag-area>.svc-question__drag-element {
   visibility: visible;
 }
 
-.svc-question__content.svc-question__content--selected>.svc-question__drag-area {
+.svc-question__content.svc-question__content--selected>.svc-question__drag-area>.svc-question__drag-element {
   visibility: visible;
   z-index: 1;
 }
@@ -519,7 +519,6 @@ svc-question,
   cursor: move;
   top: 0;
   left: 0;
-  visibility: hidden;
   height: calcSize(3.5);
   width: 100%;
   display: flex;
@@ -531,6 +530,7 @@ svc-question,
   width: 100%;
   height: calcSize(4);
   opacity: 0.5;
+  visibility: hidden;
 
   use {
     fill: $foreground-light;
@@ -924,6 +924,7 @@ svc-question,
   position: absolute;
   top: 0;
   right: 0;
+  visibility: hidden;
   .sv-action-bar-item {
     use {
       fill: $foreground-dim-light;
@@ -936,4 +937,11 @@ svc-question,
       opacity: initial;
     }
   }
+}
+
+.svc-question__adorner--collapse-onhover.svc-hovered,
+.svc-question__adorner--collapse-always {
+  .svc-question__top-actions {
+    visibility: visible;
+  }
 }
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
@@ -102,6 +102,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     const isStartWithNewLine = this.surveyElement.isQuestion && !(<Question>this.surveyElement).startWithNewLine;
     return new CssClassBuilder()
       .append("svc-question__adorner--start-with-new-line", isStartWithNewLine)
+      .append("svc-question__adorner--collapse-" + this.creator.expandCollapseButtonMode)
       .append("svc-question__adorner--collapsed", !!this.renderedCollapsed).toString();
   }
 

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -3622,6 +3622,9 @@ export class SurveyCreatorModel extends Base
    * @see toolboxLocation
    */
   @property({ defaultValue: "right" }) sidebarLocation: "left" | "right";
+
+  @property({ defaultValue: "never" }) expandCollapseButtonMode?: "never" | "onhover" | "always";
+
   selectFromStringEditor: boolean;
 
   @property({

diff --git a/testCafe/designer/question-wrapper.ts b/testCafe/designer/question-wrapper.ts
@@ -378,4 +378,36 @@ test("No tab stop in dynamic panel", async (t) => {
     .pressKey("tab")
     .pressKey("tab")
     .expect(Selector(".svc-question__content--panel .sv-action-bar-item").withText("Panel").focused).ok();
+});
+
+test("Question adorner - collapse button in differen modes", async (t) => {
+  await t.resizeWindow(1920, 1080);
+  const json = {
+    elements: [
+      {
+        type: "text",
+        name: "question1"
+      }
+    ]
+  };
+  await setJSON(json);
+  const qContent = Selector(".svc-question__content");
+  const qCollapseButton = Selector(".svc-question__content #collapse");
+  await t.hover("body", { offsetX: 10, offsetY: 10 });
+  await t.hover(qContent);
+  await t.expect(Selector(".svc-question__adorner").hasClass(".svc-hovered")).ok();
+  await t.expect(qCollapseButton.visible).notOk();
+  await t.click(qContent, { offsetX: 10, offsetY: 10 });
+  await t.expect(qContent.hasClass("svc-question__content--selected")).ok();
+  await t.expect(qCollapseButton.visible).notOk();
+
+  await ClientFunction(() => { window["creator"].expandCollapseButtonMode = "onhover"; })();
+  await setJSON(json);
+  await t.expect(qCollapseButton.visible).notOk();
+  await t.hover(qContent);
+  await t.expect(qCollapseButton.visible).ok();
+
+  await ClientFunction(() => { window["creator"].expandCollapseButtonMode = "always"; })();
+  await setJSON(json);
+  await t.expect(qCollapseButton.visible).ok();
 });