#5801 Add hidden title for questions in design mode (#5802)

* #5801 Add hidden title for questions in design mode
Fixes #5801

* #5801 update screenshots and fix react panels
Fixes #5801

* #5801 fixed image adorner
Fixes #5801

* #5801 - hidden title styles

* #5801 - update screenshot for collapsed panel

* #5801 fixed styles for Angular

---------

Co-authored-by: Aleksey Novikov

packages/survey-creator-angular/src/question.component.html

@@ -12,7 +12,11 @@
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
         </div>
       </div>
-
+      <div *ngIf="!model.hasTitle" [class]="adorner.cssCollapsedHiddenHeader">
+        <div [class]="adorner.cssCollapsedHiddenTitle">
+          <sv-ng-string [model]="model.locTitle"></sv-ng-string>
+        </div>
+      </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">

packages/survey-creator-core/src/components/question.scss

@@ -144,6 +144,11 @@ svc-question {
     user-select: all;
     pointer-events: all;
   }
+
+  .sd-question__header--hidden,
+  .svc-question__header--hidden {
+    padding-bottom: calcSize(1);
+  }
 }
 
 .svc-question__content > div,
@@ -547,16 +552,31 @@ svc-question,
       & > *:not(.sd-element__header) {
         display: none;
       }
-      .sd-element__header {
-        & > *:not(.sd-element__title) {
-          display: none;
-        }
-        &.sd-panel__header--hidden {
-          display:block
-        }
-
-        .sd-element__title,
-        .sd-title.sd-element__title.sd-element__title--hidden {
+    }
+    .sd-element__header {
+      & > *:not(.sd-element__title) {
+        display: none;
+      }
+      &.sd-panel__header--hidden,
+      &.sd-question__header--hidden,
+      &.svc-question__header--hidden {
+        display:block
+      }
+
+      .sd-element__title,
+      .sd-title.sd-element__title{
+        &.sd-element__title--hidden,
+        &.svc-element__title--hidden {
+          &>.svc-string-editor,
+          &>sv-ng-string>.svc-string-editor{
+            display: inline-flex;
+            &::before {
+              content: '('
+            }
+            &::after {
+              content: ')'
+            }
+          }
           display: block;
         }
       }
@@ -614,21 +634,6 @@ svc-question,
   }
 }
 
-.svc-question__content--html,
-.svc-question__content--image {
-  &.svc-question__content--empty {
-    padding-top: calcSize(5);
-  }
-}
-.svc-creator--mobile {
-  .svc-question__content--html,
-  .svc-question__content--image {
-    &.svc-question__content--empty {
-      padding-top: calcSize(3);
-    }
-  }
-}
-
 .sd-panel {
   .svc-question__content--image:not(.svc-question__content--empty) {
     padding-left: 1px;
@@ -882,7 +887,9 @@ svc-question,
 
 .svc-question__content.svc-question__content--collapsed {
   .sd-element--complex > .sd-element__header--location-top {
-    &.sd-panel__header--hidden {
+    &.sd-panel__header--hidden,
+    &.sd-question__header--hidden,
+    &.svc-question__header--hidden {
       padding: 0;
     }
   }
@@ -895,7 +902,9 @@ svc-question,
   .sd-element--complex > .sd-element__header--location-top {
     padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
     padding-top: 0;
-    &.sd-panel__header--hidden {
+    &.sd-panel__header--hidden,
+    &.sd-question__header--hidden,
+    &.svc-question__header--hidden {
       padding-bottom: calcSize(1);
     }
     &:after {

packages/survey-creator-core/src/components/question.ts

@@ -19,7 +19,8 @@ import {
   QuestionPanelDynamicModel,
   ListModel,
   QuestionTextModel,
-  ActionContainer
+  ActionContainer,
+  PanelModel
 } from "survey-core";
 import { SurveyCreatorModel } from "../creator-base";
 import { editorLocalization, getLocString } from "../editorLocalization";
@@ -186,6 +187,12 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
   private get isMessagePanelVisible(): boolean {
     return (this.element)?.getPropertyValue("isMessagePanelVisible");
   }
+  get cssCollapsedHiddenHeader(): string {
+    return (this.element as PanelModel | Question).cssHeader + " svc-question__header--hidden";
+  }
+  get cssCollapsedHiddenTitle(): string {
+    return this.element.cssTitle + " svc-element__title--hidden";
+  }
   public createBannerParams(): QuestionBannerParams {
     return this.createCarryForwardParams() || this.createUsingRestfulParams() || this.createCustomMessagePanel();
   }

packages/survey-creator-core/src/components/tabs/designer.scss

@@ -42,7 +42,8 @@ svc-tab-designer {
 
   .sd-title {
     display: flex;
-    &.sd-element__title--hidden {
+    &.sd-element__title--hidden,
+    &.svc-element__title--hidden {
       display: none;
     }
   }

packages/survey-creator-knockout/src/adorners/question.html

@@ -12,6 +12,13 @@
       </div>
     </div>
     <!-- /ko -->
+    <!-- ko ifnot: $data.element.hasTitle -->
+    <div data-bind="css: $data.cssCollapsedHiddenHeader">
+      <div data-bind="css: $data.cssCollapsedHiddenTitle">
+        <!-- ko template: { name: 'survey-string', data: $data.element.locTitle } --><!-- /ko -->
+      </div>
+    </div>
+    <!-- /ko -->
     <!-- ko component: { name: 'sv-template-renderer', params: { componentData: null, templateData: templateData } } -->
     <!-- /ko -->
     <!-- ko if: koIsEmptyElement() && !$data.placeholderComponentData -->

packages/survey-creator-react/src/adorners/Question.tsx

@@ -1,14 +1,15 @@
 import { QuestionAdornerViewModel, toggleHovered } from "survey-creator-core";
 import * as React from "react";
 import { ReactDragEvent, ReactMouseEvent } from "../events";
-import { Base, Question } from "survey-core";
+import { Base, PanelModel, Question, SurveyElementCore } from "survey-core";
 import {
   SurveyActionBar,
   ReactElementFactory,
   SurveyQuestion,
   attachKey2click,
   SvgIcon,
-  Popup
+  Popup,
+  SurveyElementBase
 } from "survey-react-ui";
 import { CreatorModelElement } from "../ModelElement";
 
@@ -97,9 +98,23 @@ export class QuestionAdornerComponent extends CreatorModelElement<
     if (!this.model.isBannerShowing) return null;
     return ReactElementFactory.Instance.createElement("svc-question-banner", this.model.createBannerParams());
   }
+
+  protected renderQuestionTitle(): JSX.Element {
+    if (this.model.element.hasTitle || this.model.element.isPanel) return null;
+    const element = this.model.element as Question | PanelModel;
+    return (
+      <div className={this.model.cssCollapsedHiddenHeader} >
+        <div className={this.model.cssCollapsedHiddenTitle} >
+          {SurveyElementBase.renderLocString(element.locTitle, null, "q_title")}
+        </div>
+      </div>
+    );
+  }
+
   protected renderElementContent(): JSX.Element {
     return (
       <>
+        {this.renderQuestionTitle()}
         {this.props.element}
         {this.renderElementPlaceholder()}
         {this.renderCarryForwardBanner()}

packages/survey-creator-react/src/adorners/QuestionImage.tsx

@@ -81,10 +81,14 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
         isDisplayMode: false,
         question: this.imageModel.filePresentationModel
       });
-      return fileQuestion;
+      return (<>
+        {this.renderQuestionTitle()}
+        {fileQuestion}
+      </>);
     } else {
       return (
         <>
+          {this.renderQuestionTitle()}
           {this.props.element}
           {this.renderElementPlaceholder()}
         </>

packages/survey-creator-vue/src/adorners/QuestionBase.vue

@@ -39,6 +39,11 @@
           ></sv-action-bar>
         </div>
       </div>
+      <div v-if="!element.hasTitle" :class="model.cssCollapsedHiddenHeader">
+        <div :class="model.cssCollapsedHiddenTitle">
+          <survey-string :locString="element.locTitle"/>
+        </div>
+      </div>
 
       <sv-template-renderer
         :componentName="componentName"

visualRegressionTests/tests/designer/surface.ts

@@ -2159,6 +2159,61 @@ test("Question adorner - collapsed", async (t) => {
   });
 });
 
+test("Question adorner - no title collapsed", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1920, 1080);
+    const json = {
+      "logoPosition": "right",
+      "pages": [
+        {
+          "name": "page1",
+          "elements": [
+            {
+              "type": "text",
+              "name": "question1",
+              "titleLocation": "hidden"
+            },
+            {
+              "type": "paneldynamic",
+              "name": "question4",
+              "titleLocation": "hidden"
+            },
+            {
+              "type": "html",
+              "name": "question2"
+            },
+            {
+              "type": "image",
+              "name": "question3",
+              "imageFit": "cover",
+              "imageHeight": "auto",
+              "imageWidth": "100%"
+            }
+          ]
+        }
+      ]
+    };
+    await ClientFunction(() => {
+      window["creator"].expandCollapseButtonVisibility = "onhover";
+    })();
+    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-no-title-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-dynamic-adorner-no-title-collapsed.png", qContent.nth(1), t, comparer);
+    await t.click(qContent.nth(2), { offsetX: 10, offsetY: 10 });
+    await t.click(qCollapseButton.filterVisible());
+    await takeElementScreenshot("question-html-adorner-no-title-collapsed.png", qContent.nth(2), t, comparer);
+    await t.click(qContent.nth(3), { offsetX: 10, offsetY: 10 });
+    await t.click(qCollapseButton.filterVisible());
+    await takeElementScreenshot("question-image-adorner-no-title-collapsed.png", qContent.nth(3), t, comparer);
+  });
+});
+
 test("Page adorner - collapsed", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await t.resizeWindow(1600, 500);