From 74bd5da214162a4a98876750410c0b9396a86485 Mon Sep 17 00:00:00 2001 From: tsv2013 Date: Wed, 5 Jun 2024 15:57:19 +0300 Subject: [PATCH 01/29] Started to work on layout improvements --- src/base-interfaces.ts | 1 + src/panel.ts | 4 ++++ src/question.ts | 6 ++++++ src/react/element-header.tsx | 4 +++- 4 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/base-interfaces.ts b/src/base-interfaces.ts index 0d6ac07e1f..a2bfc1d802 100644 --- a/src/base-interfaces.ts +++ b/src/base-interfaces.ts @@ -321,6 +321,7 @@ export interface IParentElement { export interface IPanel extends ISurveyElement, IParentElement { getChildrenLayoutType(): string; getQuestionTitleLocation(): string; + getQuestionTitleWidth(): string; getQuestionStartIndex(): string; getQuestionErrorLocation(): string; parent: IPanel; diff --git a/src/panel.ts b/src/panel.ts index eea15b6a76..c3d0b45f52 100644 --- a/src/panel.ts +++ b/src/panel.ts @@ -1104,6 +1104,10 @@ export class PanelModelBase extends SurveyElement if (this.parent) return this.parent.getQuestionTitleLocation(); return this.survey ? this.survey.questionTitleLocation : "top"; } + @property() questionTitleWidth: string; + protected getQuestionTitleWidth(): string { + return this.questionTitleWidth || this.parent && this.parent.getQuestionTitleWidth(); + } protected getStartIndex(): string { if (!!this.parent) return this.parent.getQuestionStartIndex(); if (!!this.survey) return this.survey.questionStartIndex; diff --git a/src/question.ts b/src/question.ts index c8b077f84b..2b439993b3 100644 --- a/src/question.ts +++ b/src/question.ts @@ -682,6 +682,12 @@ export class Question extends SurveyElement this.clearValueIfInvisible(); } } + public getTitleWidth(): string { + if (this.getTitleLocation() === "left") { + if (!!this.parent) return this.parent.getQuestionTitleWidth(); + } + return undefined; + } /** * Returns title location calculated based on the question's `titleLocation` property and the `questionTitleLocation` property of the question's containers (survey, page, or panel). * @see titleLocation diff --git a/src/react/element-header.tsx b/src/react/element-header.tsx index 7f2815d310..eeb598e611 100644 --- a/src/react/element-header.tsx +++ b/src/react/element-header.tsx @@ -19,8 +19,10 @@ export class SurveyElementHeader extends React.Component { const additionalTitleToolbarElement = element.hasAdditionalTitleToolbar ? : null; + const width = element.getTitleWidth && element.getTitleWidth(); + return ( -
element.clickTitleFunction && element.clickTitleFunction(e.nativeEvent)}> +
element.clickTitleFunction && element.clickTitleFunction(e.nativeEvent)} style={{ width: width }}> {title} {description} {additionalTitleToolbarElement} From f3e3b2e282693b733e93aa7b06fb69c1732294c1 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Thu, 6 Jun 2024 12:02:08 +0300 Subject: [PATCH 02/29] layout improvements - add maskup test --- .../element-header.component.ts | 3 +++ packages/survey-vue3-ui/src/ElementHeader.vue | 9 +++++++- src/knockout/templates/questiontitle.html | 2 +- src/panel.ts | 5 +++- src/question.ts | 2 +- src/question_custom.ts | 3 +++ src/question_multipletext.ts | 3 +++ src/react/element-header.tsx | 7 ++++-- src/vue/elementheader.vue | 2 +- tests/markup/etalon_page_panel.ts | 23 +++++++++++++++++++ .../page-questionTitleWidth.snap.html | 14 +++++++++++ 11 files changed, 66 insertions(+), 7 deletions(-) create mode 100644 tests/markup/snapshots/page-questionTitleWidth.snap.html diff --git a/packages/survey-angular-ui/src/components/element-header/element-header.component.ts b/packages/survey-angular-ui/src/components/element-header/element-header.component.ts index e3a0b496e5..dc84dfd653 100644 --- a/packages/survey-angular-ui/src/components/element-header/element-header.component.ts +++ b/packages/survey-angular-ui/src/components/element-header/element-header.component.ts @@ -11,6 +11,9 @@ export class ElementHeaderComponent { @HostBinding("class") get rootClass(): string { return this.element.cssHeader; } + @HostBinding("style.width") get width(): string { + return this.element.titleWidth; + } @HostListener("click", ["$event"]) click(e: MouseEvent): void { if (this.element.clickTitleFunction !== undefined) { this.element.clickTitleFunction(e); diff --git a/packages/survey-vue3-ui/src/ElementHeader.vue b/packages/survey-vue3-ui/src/ElementHeader.vue index 267d5b3210..01cfb75343 100644 --- a/packages/survey-vue3-ui/src/ElementHeader.vue +++ b/packages/survey-vue3-ui/src/ElementHeader.vue @@ -1,5 +1,5 @@