fix for designer surface scaling (#9112)

* fix for designer surface scaling * fix for designer surface scaling * fix for designer surface scaling * fix for designer surface scaling --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Nov 28, 2024 · 79339bb · 79339bb
1 parent f72936c
commit 79339bb
Show file tree

Hide file tree

Showing 12 changed files with 19 additions and 14 deletions.
diff --git a/packages/survey-angular-ui/src/components/element-title/element-title.component.html b/packages/survey-angular-ui/src/components/element-title/element-title.component.html
@@ -1,7 +1,7 @@
 <ng-template #template>
   <sv-ng-dynamic-head [tagName]="element.titleTagName" [element]="element" *ngIf="element.hasTitle">
-    <svg *ngIf="!element.isExpanded && element.getCssTitleExpandableSvg()" [iconName]="'icon-expand-16x16'" [partCss]="element.getCssTitleExpandableSvg()" [size]="'16'" sv-ng-svg-icon></svg>
-    <svg *ngIf="element.isExpanded && element.getCssTitleExpandableSvg()" [iconName]="'icon-collapse-16x16'" [partCss]="element.getCssTitleExpandableSvg()" [size]="'16'" sv-ng-svg-icon></svg>
+    <svg *ngIf="!element.isExpanded && element.getCssTitleExpandableSvg()" [iconName]="'icon-expand-16x16'" [partCss]="element.getCssTitleExpandableSvg()" [size]="'auto'" sv-ng-svg-icon></svg>
+    <svg *ngIf="element.isExpanded && element.getCssTitleExpandableSvg()" [iconName]="'icon-collapse-16x16'" [partCss]="element.getCssTitleExpandableSvg()" [size]="'auto'" sv-ng-svg-icon></svg>
     <sv-ng-element-title-actions [element]="element"></sv-ng-element-title-actions>
   </sv-ng-dynamic-head>
 </ng-template>
diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-element.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-element.scss
@@ -115,8 +115,9 @@
 
 .sd-element__title-expandable-svg {
   display: inline-block;
-  height: calcSize(2);
-  width: calcSize(2);
+  width: var(--lbr-question-panel-expand-button-icon-width, calcSize(2));
+  height: var(--lbr-question-panel-expand-button-icon-height, calcSize(2));
+
   position: absolute;
   inset-inline-start: calcSize(-3);
   top: calcSize(0.5);

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-file.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-file.scss
@@ -123,8 +123,8 @@
 
   .sv-svg-icon {
     margin-left: calcSize(-1);
-    width: 24px;
-    height: 24px;
+    width: calcSize(3);
+    height: calcSize(3);
     fill: $primary;
   }
 }

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-item.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-item.scss
@@ -1,4 +1,5 @@
 .sd-item {
+  display: flex;
   padding: calcSize(1.5) 0;
 }
 

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-table.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-table.scss
@@ -222,6 +222,7 @@
 .sd-table__cell--item {
   .sd-selectbase__item {
     text-align: center;
+    justify-content: center;
   }
 
   .sd-selectbase__label {

diff --git a/packages/survey-core/src/defaultV2-theme/defaultV2.m600.scss b/packages/survey-core/src/defaultV2-theme/defaultV2.m600.scss
@@ -1,10 +1,12 @@
-.sd-root-modern {
+.sd-root-modern,
+.sd-container-modern {
   --sd-base-padding: calc(5 * #{$base-unit});
   --sd-base-vertical-padding: calc(4 * #{$base-unit});
   --sd-page-vertical-padding: calc(3 * #{$base-unit});
 }
 
-.sd-root-modern.sd-root-modern--mobile {
+.sd-root-modern.sd-root-modern--mobile,
+.sd-root-modern--mobile .sd-container-modern {
   --sd-base-padding: calc(3 * #{$base-unit});
   --sd-base-vertical-padding: calc(2 * #{$base-unit});
   --sd-page-vertical-padding: calc(2 * #{$base-unit});

diff --git a/packages/survey-react-ui/src/components/title/title-element.tsx b/packages/survey-react-ui/src/components/title/title-element.tsx
@@ -17,7 +17,7 @@ export class TitleElement extends React.Component<any, any> {
     return <SvgIcon
       className={this.element.getCssTitleExpandableSvg() }
       iconName={iconName}
-      size={16}
+      size={"auto"}
     ></SvgIcon>;
   }
   render(): JSX.Element | any {

diff --git a/packages/survey-vue3-ui/src/components/title/TitleElement.vue b/packages/survey-vue3-ui/src/components/title/TitleElement.vue
@@ -19,14 +19,14 @@
       v-if="!element.isExpanded && element.getCssTitleExpandableSvg()"
       :class="element.getCssTitleExpandableSvg()"
       :iconName="'icon-expand-16x16'"
-      size="16"
+      size="'auto'"
     ></SvComponent>
     <SvComponent
       :is="'sv-svg-icon'"
       v-if="element.isExpanded && element.getCssTitleExpandableSvg()"
       :class="element.getCssTitleExpandableSvg()"
       :iconName="'icon-collapse-16x16'"
-      size="16"
+      size="'auto'"
     ></SvComponent>
     <SvComponent
       :is="'survey-element-title-content'"

diff --git a/src/knockout/components/title/title-element.ts b/src/knockout/components/title/title-element.ts
@@ -21,7 +21,7 @@ ko.components.register("survey-element-title", {
 
       let iconExpandSvg, iconCollapseSvg;
       if (element.getCssTitleExpandableSvg()) {
-        const getSvgComponentString = (iconName: string)=>`<!-- ko component: { name: 'sv-svg-icon', params: { css: element.getCssTitleExpandableSvg(), iconName: '${iconName}', size: 16 } } --><!-- /ko -->`;
+        const getSvgComponentString = (iconName: string)=>`<!-- ko component: { name: 'sv-svg-icon', params: { css: element.getCssTitleExpandableSvg(), iconName: '${iconName}', size: 'auto' } } --><!-- /ko -->`;
         iconExpandSvg = `<!-- ko ifnot: element.isExpanded -->${getSvgComponentString("icon-expand-16x16")}<!-- /ko -->`;
         iconCollapseSvg = `<!-- ko if: element.isExpanded -->${getSvgComponentString("icon-collapse-16x16")}<!-- /ko -->`;
         innerHTML = iconExpandSvg + iconCollapseSvg + innerHTML;

diff --git a/src/vue/components/title/title-element.vue b/src/vue/components/title/title-element.vue
@@ -18,13 +18,13 @@
       v-if="!element.isExpanded && element.getCssTitleExpandableSvg()"
       :class="element.getCssTitleExpandableSvg()"
       :iconName="'icon-expand-16x16'"
-      size="16"
+      size="'auto'"
     ></sv-svg-icon>
     <sv-svg-icon
       v-if="element.isExpanded && element.getCssTitleExpandableSvg()"
       :class="element.getCssTitleExpandableSvg()"
       :iconName="'icon-collapse-16x16'"
-      size="16"
+      size="'auto'"
     ></sv-svg-icon>
     <survey-element-title-content
       v-if="!element.hasTitleActions"

diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-theme-desktop-input-size.png b/visualRegressionTests/tests/defaultV2/etalons/survey-theme-desktop-input-size.png
diff --git a/...egressionTests/tests/defaultV2/etalons/survey-theme-desktop-input-size_mask.png b/...egressionTests/tests/defaultV2/etalons/survey-theme-desktop-input-size_mask.png