diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html index 216e7f8c6..7d9f6c8ce 100644 --- a/packages/survey-creator-angular/src/panel.component.html +++ b/packages/survey-creator-angular/src/panel.component.html @@ -17,7 +17,12 @@ - +
+
+ + {{model.name}} +
+
diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html index c6f875e5b..b55a8d28b 100644 --- a/packages/survey-creator-angular/src/question.component.html +++ b/packages/survey-creator-angular/src/question.component.html @@ -16,7 +16,7 @@
-
+
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index 8d4315077..940bc5347 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/packages/survey-creator-core/src/components/question.scss @@ -153,11 +153,6 @@ svc-question { user-select: all; pointer-events: all; } - - .sd-question__header--hidden, - .svc-question__header--hidden { - padding-bottom: calcSize(1); - } } .svc-question__content>div, @@ -604,6 +599,26 @@ svc-question, z-index: 1; } +.svc-element__header--hidden { + display: block; + padding-bottom: calcSize(1); + box-sizing: border-box; + .svc-string-editor, + .svc-fake-title, + sv-ng-string>.svc-string-editor{ + display: inline-flex; + &::before { + content: '(' + } + &::after { + content: ')' + } + } + .svc-element__title--hidden { + display: none; + } +} + .svc-question__adorner { .svc-question__content--collapsed { &>* { @@ -627,32 +642,11 @@ svc-question, display: none; } - &.sd-panel__header--hidden, - &.sd-question__header--hidden, - &.svc-question__header--hidden { + &.svc-element__header--hidden { display: block; } - - .sd-element__title, - .sd-title.sd-element__title { - - &.sd-element__title--hidden, - &.svc-element__title--hidden { - display: block; - - &>.svc-string-editor, - &>sv-ng-string>.svc-string-editor { - display: inline-flex; - - &::before { - content: "("; - } - - &::after { - content: ")"; - } - } - } + .svc-element__title--hidden { + display: block; } } } @@ -1043,9 +1037,7 @@ svc-question, .svc-question__content.svc-question__content--collapsed { .sd-element--complex>.sd-element__header--location-top { - &.sd-panel__header--hidden, - &.sd-question__header--hidden, - &.svc-question__header--hidden { + &.svc-element__header--hidden { padding: 0; } } @@ -1060,9 +1052,7 @@ svc-question, padding-bottom: calc(0.5 * var(--sd-base-vertical-padding)); padding-top: 0; - &.sd-panel__header--hidden, - &.sd-question__header--hidden, - &.svc-question__header--hidden { + &.svc-element__header--hidden { padding-bottom: calcSize(1); } diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts index 9a6e20022..c7968c3e0 100644 --- a/packages/survey-creator-core/src/components/question.ts +++ b/packages/survey-creator-core/src/components/question.ts @@ -190,7 +190,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase { return (this.element)?.getPropertyValue("isMessagePanelVisible"); } get cssCollapsedHiddenHeader(): string { - return (this.element as PanelModel | Question).cssHeader + " svc-question__header--hidden"; + return (this.element as PanelModel | Question).cssHeader + " svc-element__header--hidden"; } get cssCollapsedHiddenTitle(): string { return this.element.cssTitle + " svc-element__title--hidden"; @@ -294,6 +294,9 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase { return false; } + public get showHiddenTitle() { + return !this.element.hasTitle && this.element.isInteractiveDesignElement; + } public get placeholderText(): string { if (this.surveyElement instanceof QuestionHtmlModel) { return getLocString("ed.htmlPlaceHolder"); diff --git a/packages/survey-creator-core/src/components/tabs/designer.scss b/packages/survey-creator-core/src/components/tabs/designer.scss index 69a8ac350..2cac50d33 100644 --- a/packages/survey-creator-core/src/components/tabs/designer.scss +++ b/packages/survey-creator-core/src/components/tabs/designer.scss @@ -42,10 +42,6 @@ svc-tab-designer { .sd-title { display: flex; - &.sd-element__title--hidden, - &.svc-element__title--hidden { - display: none; - } } .sd-container-modern { diff --git a/packages/survey-creator-knockout/src/adorners/panel.html b/packages/survey-creator-knockout/src/adorners/panel.html index e08a82620..33decafb1 100644 --- a/packages/survey-creator-knockout/src/adorners/panel.html +++ b/packages/survey-creator-knockout/src/adorners/panel.html @@ -17,9 +17,20 @@
+ +
+
+ + + + + + +
+
+ -
diff --git a/packages/survey-creator-knockout/src/adorners/question.html b/packages/survey-creator-knockout/src/adorners/question.html index 6e87b687b..190cc32e6 100644 --- a/packages/survey-creator-knockout/src/adorners/question.html +++ b/packages/survey-creator-knockout/src/adorners/question.html @@ -16,7 +16,7 @@
- +
diff --git a/packages/survey-creator-react/index.html b/packages/survey-creator-react/index.html index 05aabded4..f744c41db 100644 --- a/packages/survey-creator-react/index.html +++ b/packages/survey-creator-react/index.html @@ -8,8 +8,8 @@ SurveyJS Creator React - - + + diff --git a/packages/survey-creator-react/src/adorners/Question.tsx b/packages/survey-creator-react/src/adorners/Question.tsx index 071f72778..ed8518b6e 100644 --- a/packages/survey-creator-react/src/adorners/Question.tsx +++ b/packages/survey-creator-react/src/adorners/Question.tsx @@ -104,12 +104,12 @@ export class QuestionAdornerComponent extends CreatorModelElement< } protected renderQuestionTitle(): JSX.Element { - if (this.model.element.hasTitle || this.model.element.isPanel) return null; + if (!this.model.showHiddenTitle) return null; const element = this.model.element as Question | PanelModel; return (
- {SurveyElementBase.renderLocString(element.locTitle, null, "q_title")} + {element.title ? SurveyElementBase.renderLocString(element.locTitle, null, "q_title") : {element.name}}
); diff --git a/packages/survey-creator-vue/src/adorners/Panel.vue b/packages/survey-creator-vue/src/adorners/Panel.vue index 6f40731ac..2289cae00 100644 --- a/packages/survey-creator-vue/src/adorners/Panel.vue +++ b/packages/survey-creator-vue/src/adorners/Panel.vue @@ -51,6 +51,12 @@ >
+
+
+ + {{adorner.element.name}} +
+
-
+
diff --git a/testCafe/property-grid/panels.ts b/testCafe/property-grid/panels.ts index 36b30669c..619684d78 100644 --- a/testCafe/property-grid/panels.ts +++ b/testCafe/property-grid/panels.ts @@ -50,27 +50,3 @@ test("Panel stay focused on question change", async (t) => { .click(question1) .expect(Selector("div [data-name=\"minWidth\"] input").focused).ok(); }); -test("Show/hide panel header on entering/deleting the panel title, Bug#5720", async (t) => { - const json = { - elements: [ - { - type: "panel", - name: "panel1" - } - ] - }; - const panel = Selector(".svc-panel__placeholder"); - const hiddenPanelTitle = Selector(".sd-element__title--hidden"); - const titleEditor = Selector("[data-name='title']").find("textarea"); - await setJSON(json); - await t - .click(panel) - .expect(hiddenPanelTitle.exists).ok() - .click(titleEditor) - .typeText(titleEditor, "MyTitle") - .expect(hiddenPanelTitle.exists).notOk() - .expect(Selector(".sv-string-editor").withText("MyTitle").exists).ok() - .selectText(titleEditor) - .pressKey("delete") - .expect(hiddenPanelTitle.exists).ok(); -}); diff --git a/visualRegressionTests/tests/designer/etalons/composite-question-no-scroll.png b/visualRegressionTests/tests/designer/etalons/composite-question-no-scroll.png index 62822a502..0b4ce60e4 100644 Binary files a/visualRegressionTests/tests/designer/etalons/composite-question-no-scroll.png and b/visualRegressionTests/tests/designer/etalons/composite-question-no-scroll.png differ