New properties definitions for "Improve questions layouting" (#5702)

* new prioperties definitions * update panellayoutcolumns editor * add localization for panellayoutcolumn * new property definition panel effectiveColSpan * rename isGridLayoutMode -> gridLayoutEnabled * add definition foe creator V1 --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Jul 19, 2024 · 7c987d4 · 7c987d4
1 parent b5b82b5
commit 7c987d4
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 5 deletions.
diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -2147,7 +2147,10 @@ export class SurveyCreatorModel extends Base
   public createSurvey(json: any, reason: string, model?: any, callback?: (survey: SurveyModel) => void, area?: string): SurveyModel {
     const survey = this.createSurveyCore(json, reason);
 
-    if (reason !== "designer" && reason !== "test" && reason !== "theme") { survey.fitToContainer = false; }
+    if (reason !== "designer" && reason !== "test" && reason !== "theme") {
+      survey.fitToContainer = false;
+      survey.gridLayoutEnabled = false;
+    }
 
     if (reason === "designer" || reason === "modal-question-editor") {
       initializeDesignTimeSurveyModel(survey, this);

diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts
@@ -1232,7 +1232,11 @@ export var enStrings = {
     },
     panelbase: {
       questionTitleWidth: "Ex.: 200px"
-    }
+    },
+    panellayoutcolumn: {
+      effectiveWidth: "Ex.: 30%",
+      questionTitleWidth: "Ex.: 200px",
+    },
   },
   pehelp: {
     panel: {
@@ -1481,7 +1485,11 @@ export var enStrings = {
       inheritWidthFrom: "The \"Same as container\" option auto-adjusts the header content area width to fit into the HTML element the survey is placed in.",
       textAreaWidth: "The width of the header area that contains the survey title and description, measured in pixels.",
       overlapEnabled: "Makes the bottom of the header overlaid with the top of the survey.",
-    }
+    },
+    panellayoutcolumn: {
+      effectiveWidth: "Accepts values %.",
+      questionTitleWidth: "Accepts values px."
+    },
   },
   // Properties
   p: {
@@ -1585,6 +1593,7 @@ export var enStrings = {
     scaleColorMode: "Rating icon color mode",
     rateColorMode: "Smileys color scheme",
     copyDisplayValue: "Copy display value", // Auto-generated string
+    effectiveColSpan: "Column span",
   },
   theme: {
     advancedMode: "Advanced mode",

diff --git a/packages/survey-creator-core/src/property-grid/matrices.ts b/packages/survey-creator-core/src/property-grid/matrices.ts
@@ -636,6 +636,28 @@ export class PropertyGridEditorMatrixColumns extends PropertyGridEditorMatrix {
   protected getAllowRowDragDrop(prop: JsonObjectProperty): boolean { return true; }
 }
 
+export class PropertyGridEditorMatrixLayoutColumns extends PropertyGridEditorMatrix {
+  public fit(prop: JsonObjectProperty): boolean {
+    return prop.type == "panellayoutcolumns";
+  }
+  protected getDefaulColumnNames(): Array<string> {
+    return ["width", "questionTitleWidth"];
+  }
+  public onMatrixCellCreated(obj: Base, options: any) {
+    super.onMatrixCellCreated(obj, options);
+
+    const q = options.cellQuestion;
+    q.textUpdateMode = "onTyping";
+  }
+
+  public onCreated(obj: Base, question: Question, prop: JsonObjectProperty, options?: ISurveyCreatorOptions, propGridDefinition?: ISurveyPropertyGridDefinition) {
+    super.onCreated(obj, question, prop, options, propGridDefinition);
+    const matrixQuestion = <QuestionMatrixDynamicModel>question;
+    matrixQuestion.allowRemoveRows = false;
+    matrixQuestion.allowAddRows = false;
+  }
+}
+
 export class PropertyGridEditorMatrixPages extends PropertyGridEditorMatrix {
   public fit(prop: JsonObjectProperty): boolean {
     return prop.type == "surveypages";
@@ -898,3 +920,4 @@ PropertyGridEditorCollection.register({
     };
   }
 });
+PropertyGridEditorCollection.register(new PropertyGridEditorMatrixLayoutColumns());
diff --git a/packages/survey-creator-core/src/question-editor/definition.ts b/packages/survey-creator-core/src/question-editor/definition.ts
@@ -68,6 +68,7 @@ const defaultProperties: ISurveyPropertiesDefinition = {
         name: "maxWidth",
         tab: "layout",
       },
+      { name: "effectiveColSpan", tab: "layout" },
       { name: "valueName", tab: "data" },
       { name: "defaultValue", tab: "data" },
       { name: "correctAnswer", tab: "data" },
@@ -393,6 +394,9 @@ const defaultProperties: ISurveyPropertiesDefinition = {
       "useGrouping"
     ]
   },
+  "panellayoutcolumn": {
+    properties: ["effectiveWidth", "questionTitleWidth"]
+  },
   matrixdropdowncolumn: {
     properties: ["name", "title"]
   },
@@ -676,7 +680,8 @@ const defaultProperties: ISurveyPropertiesDefinition = {
       { name: "requiredIf", tab: "logic" },
       { name: "questionTitleLocation", tab: "questionSettings" },
       { name: "questionTitleWidth", tab: "questionSettings" },
-      { name: "questionErrorLocation", tab: "questionSettings" }
+      { name: "questionErrorLocation", tab: "questionSettings" },
+      { name: "layoutColumns", tab: "questionSettings" },
     ],
     tabs: [
       { name: "questionSettings", index: 100 },
@@ -698,6 +703,7 @@ const defaultProperties: ISurveyPropertiesDefinition = {
       { name: "width", tab: "layout" },
       { name: "minWidth", tab: "layout" },
       { name: "maxWidth", tab: "layout" },
+      { name: "effectiveColSpan", tab: "layout" },
       { name: "showNumber", tab: "numbering" },
       { name: "showQuestionNumbers", tab: "numbering" },
       { name: "questionStartIndex", tab: "numbering" }

diff --git a/packages/survey-creator/src/questionEditors/questionEditorDefinition.ts b/packages/survey-creator/src/questionEditors/questionEditorDefinition.ts
@@ -43,6 +43,7 @@ export class SurveyQuestionEditorDefinition {
         { name: "width", tab: "layout" },
         { name: "minWidth", tab: "layout" },
         { name: "maxWidth", tab: "layout" },
+        { name: "effectiveColSpan", tab: "layout" },
         { name: "valueName", tab: "data" },
         { name: "defaultValue", tab: "data" },
         { name: "correctAnswer", tab: "data" },
@@ -329,6 +330,9 @@ export class SurveyQuestionEditorDefinition {
         "useGrouping",
       ],
     },
+    "panellayoutcolumn": {
+      properties: ["effectiveWidth", "questionTitleWidth"]
+    },
     matrixdropdowncolumn: {
       properties: ["isRequired", "cellType", "name", "title"],
     },
@@ -518,7 +522,8 @@ export class SurveyQuestionEditorDefinition {
         { name: "requiredIf", tab: "logic" },
         { name: "questionTitleLocation", tab: "layout" },
         { name: "questionTitleWidth", tab: "layout" },
-        { name: "questionErrorLocation", tab: "layout" }
+        { name: "questionErrorLocation", tab: "layout" },
+        { name: "layoutColumns", tab: "layout" },
       ],
       tabs: [
         { name: "logic", index: 100 },
@@ -538,6 +543,7 @@ export class SurveyQuestionEditorDefinition {
         { name: "indent", tab: "layout" },
         { name: "innerIndent", tab: "layout" },
         { name: "width", tab: "layout" },
+        { name: "effectiveColSpan", tab: "layout" },
         { name: "showNumber", tab: "numbering" },
         { name: "showQuestionNumbers", tab: "numbering" },
         { name: "questionStartIndex", tab: "numbering" },