diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html index cef649550d..2f729f4138 100644 --- a/packages/survey-creator-angular/src/question.component.html +++ b/packages/survey-creator-angular/src/question.component.html @@ -12,7 +12,11 @@ - +
+
+ +
+
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index 7ff064bad5..62a909f024 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/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 { diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts index 1d121ac7f9..a03e752463 100644 --- a/packages/survey-creator-core/src/components/question.ts +++ b/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(); } diff --git a/packages/survey-creator-core/src/components/tabs/designer.scss b/packages/survey-creator-core/src/components/tabs/designer.scss index 4a58cf7c1f..27dff79c45 100644 --- a/packages/survey-creator-core/src/components/tabs/designer.scss +++ b/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; } } diff --git a/packages/survey-creator-knockout/src/adorners/question.html b/packages/survey-creator-knockout/src/adorners/question.html index 9dd92e3ca4..88f4cca0dc 100644 --- a/packages/survey-creator-knockout/src/adorners/question.html +++ b/packages/survey-creator-knockout/src/adorners/question.html @@ -12,6 +12,13 @@
+ +
+
+ +
+
+ diff --git a/packages/survey-creator-react/src/adorners/Question.tsx b/packages/survey-creator-react/src/adorners/Question.tsx index 66e3479604..78db9eba09 100644 --- a/packages/survey-creator-react/src/adorners/Question.tsx +++ b/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 ( +
+
+ {SurveyElementBase.renderLocString(element.locTitle, null, "q_title")} +
+
+ ); + } + protected renderElementContent(): JSX.Element { return ( <> + {this.renderQuestionTitle()} {this.props.element} {this.renderElementPlaceholder()} {this.renderCarryForwardBanner()} diff --git a/packages/survey-creator-react/src/adorners/QuestionImage.tsx b/packages/survey-creator-react/src/adorners/QuestionImage.tsx index 9a738c3ba7..60cc3f7378 100644 --- a/packages/survey-creator-react/src/adorners/QuestionImage.tsx +++ b/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()} diff --git a/packages/survey-creator-vue/src/adorners/QuestionBase.vue b/packages/survey-creator-vue/src/adorners/QuestionBase.vue index 4042a437e3..6d7d46a1b5 100644 --- a/packages/survey-creator-vue/src/adorners/QuestionBase.vue +++ b/packages/survey-creator-vue/src/adorners/QuestionBase.vue @@ -39,6 +39,11 @@ > +
+
+ +
+
{ }); }); +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);