fix placeholder (#6578)

* fix placeholder work for surveyjs/private-tasks#456 * update etalons work for surveyjs/private-tasks#456 * update themes * fix placeholder work for surveyjs/private-tasks#456 * fix placeholder work for surveyjs/private-tasks#456 * fix placeholder work for surveyjs/private-tasks#456 --------- Co-authored-by: OlgaLarina <[email protected]> Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Feb 13, 2025 · 6be182e · 6be182e
1 parent f375947
commit 6be182e
Show file tree

Hide file tree

Showing 42 changed files with 89 additions and 114 deletions.
diff --git a/packages/survey-creator-angular/src/tabs/logic/logic.component.html b/packages/survey-creator-angular/src/tabs/logic/logic.component.html
@@ -1,14 +1,21 @@
 <ng-template #template>
   <div class="svc-creator-tab__content">
     <div class="svc-plugin-tab__content svc-logic-tab__content" [class.svc-logic-tab--empty]="!model.hasItems">
-      <survey-content [model]="model.itemsSurvey"></survey-content>
-      <div *ngIf="!model.hasItems" class="svc-logic-tab__content-empty">
-        <svc-surface-placeholder [name]="'logic'" [placeholderTitleText]="model.placeholderTitleText"
-          [placeholderDescriptionText]="model.placeholderDescriptionText">
-        </svc-surface-placeholder>
-      </div>
-      <ng-container *ngIf="!model.readOnly">
-        <svc-tab-logic-add-btn [model]="model.addNewButton"></svc-tab-logic-add-btn>
+      <ng-container *ngIf="model.hasItems">
+        <survey-content [model]="model.itemsSurvey"></survey-content>
+        <ng-container *ngIf="!model.readOnly">
+          <svc-tab-logic-add-btn [model]="model.addNewButton"></svc-tab-logic-add-btn>
+        </ng-container>
+      </ng-container>
+      <ng-container *ngIf="!model.hasItems">
+        <div class="svc-logic-tab__content-empty">
+          <svc-surface-placeholder [name]="'logic'" [placeholderTitleText]="model.placeholderTitleText"
+            [placeholderDescriptionText]="model.placeholderDescriptionText">
+          </svc-surface-placeholder>
+          <ng-container *ngIf="!model.readOnly">
+            <svc-tab-logic-add-btn [model]="model.addNewButton"></svc-tab-logic-add-btn>
+          </ng-container>
+        </div>
       </ng-container>
     </div>
   </div>

diff --git a/packages/survey-creator-angular/src/tabs/preview/test.component.html b/packages/survey-creator-angular/src/tabs/preview/test.component.html
@@ -1,11 +1,9 @@
 <ng-template #template>
   <div class="svc-creator-tab__content svc-test-tab__content"
     [class.svc-creator-tab__content--with-toolbar]="model.isPageToolbarVisible">
-    <div *ngIf="model.survey.isEmpty" class="svc-test-tab--empty">
-      <svc-surface-placeholder [name]="'preview'" [placeholderTitleText]="model.placeholderTitleText"
-        [placeholderDescriptionText]="model.placeholderDescriptionText">
-      </svc-surface-placeholder>
-    </div>
+    <svc-surface-placeholder *ngIf="model.survey.isEmpty" [name]="'preview'" [placeholderTitleText]="model.placeholderTitleText"
+      [placeholderDescriptionText]="model.placeholderDescriptionText">
+    </svc-surface-placeholder>
     <div *ngIf="!model.survey.isEmpty" class="svc-plugin-tab__content">
       <survey-simulator [model]="model.simulator"></survey-simulator>
       <ng-container *ngIf="model.showResults">

diff --git a/packages/survey-creator-angular/src/tabs/theme/theme.component.html b/packages/survey-creator-angular/src/tabs/theme/theme.component.html
@@ -1,11 +1,9 @@
 <ng-template #template>
   <div class="svc-creator-tab__content svc-test-tab__content"
     [class.svc-creator-tab__content--with-toolbar]="model.isPageToolbarVisible">
-    <div *ngIf="model.survey.isEmpty" class="svc-test-tab--empty">
-      <svc-surface-placeholder [name]="'theme'" [placeholderTitleText]="model.placeholderTitleText"
-        [placeholderDescriptionText]="model.placeholderDescriptionText">
-      </svc-surface-placeholder>
-    </div>
+    <svc-surface-placeholder *ngIf="model.survey.isEmpty" [name]="'theme'" [placeholderTitleText]="model.placeholderTitleText"
+      [placeholderDescriptionText]="model.placeholderDescriptionText">
+    </svc-surface-placeholder>
     <div *ngIf="!model.survey.isEmpty" class="svc-plugin-tab__content">
       <survey-simulator [model]="model.simulator"></survey-simulator>
       <ng-container *ngIf="model.showResults">

diff --git a/packages/survey-creator-core/src/components/creator.scss b/packages/survey-creator-core/src/components/creator.scss
@@ -119,13 +119,15 @@ survey-creator,
   position: relative;
   width: 100%;
   height: 100%;
+  min-height: min-content;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
 
 .svc-plugin-tab__content {
   flex-basis: 0;
+  width: 100%;
   max-height: 100%;
   overflow-y: auto;
   flex-grow: 1;

diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
@@ -253,7 +253,7 @@ svc-page {
 }
 .svc-designer-placeholder-page {
   .svc-page__content--new.svc-page__content--new {
-    padding-top: var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2));
+    padding: 0;
   }
 }
 

diff --git a/packages/survey-creator-core/src/components/surface-placeholder.scss b/packages/survey-creator-core/src/components/surface-placeholder.scss
@@ -8,35 +8,18 @@
   align-items: center;
   justify-content: center;
   gap: 0px;
-  padding: calcSize(2);
   box-sizing: border-box;
 }
 
-.svc-creator--mobile {
-  .svc-surface-placeholder {
-    padding: var(--ctr-surface-placeholder-padding-top, 0px) var(--ctr-surface-placeholder-padding-right, var(--sjs-spacing-x6)) var(--ctr-surface-placeholder-padding-bottom, var(--sjs-spacing-x16)) var(--ctr-surface-placeholder-padding-left, var(--sjs-spacing-x6));
-  }
-
-  .svc-surface-placeholder__text {
-    padding: var(--ctr-surface-placeholder-text-margin-top, var(--sjs-spacing-x4)) var(--ctr-surface-placeholder-text-margin-right, 32px) var(--ctr-surface-placeholder-text-margin-bottom, var(--sjs-spacing-x6)) var(--ctr-surface-placeholder-text-margin-left, 32px);
-  }
-}
-
 .svc-surface-placeholder__image {
   display: flex;
   flex-direction: row;
-  gap: 0px;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
   overflow: hidden;
   padding: 135px 170px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
 }
 
 .svc-surface-placeholder__image--designer {
@@ -60,7 +43,8 @@
 }
 
 .svc-surface-placeholder__text {
-  padding: var(--ctr-surface-placeholder-text-margin-top, var(--sjs-spacing-x4)) 0px var(--ctr-surface-placeholder-text-margin-bottom, var(--sjs-spacing-x6)) 0px;
+  padding: var(--ctr-surface-placeholder-text-margin-top, var(--sjs-spacing-x4)) 0px
+    var(--ctr-surface-placeholder-text-margin-bottom, var(--sjs-spacing-x6)) 0px;
   display: flex;
   flex-direction: column;
   gap: var(--ctr-surface-placeholder-text-gap, var(--sjs-spacing-x1));
@@ -85,35 +69,13 @@
   align-self: stretch;
 }
 
+.svc-logic-tab__content-empty,
+.svc-test-tab__content .svc-surface-placeholder,
+.svc-translation-tab--empty .svc-surface-placeholder,
 .svc-designer__placeholder-container {
-  padding-bottom: calcSize(8);
-}
-
-.svc-logic-tab--empty> :last-child {
-  margin-bottom: calcSize(12);
-}
-
-.svc-test-tab--empty,
-.svc-translation-tab--empty {
-  .svc-surface-placeholder {
-    padding-bottom: calcSize(12);
-  }
-}
-
-.svc-creator--mobile {
-  .svc-designer__placeholder-container {
-    padding-bottom: calcSize(2);
-  }
-
-  .svc-logic-tab--empty> :last-child {
-    margin-bottom: calcSize(2);
-  }
-
-  .svc-test-tab--empty,
-  .svc-translation-tab--empty {
-    .svc-surface-placeholder {
-      padding-bottom: calcSize(2);
-    }
-  }
-
+  max-width: var(--ctr-surface-placeholder-max-width, var(--sjs-size-x90));
+  padding: var(--ctr-surface-placeholder-padding-top, var(--sjs-spacing-x4))
+    var(--ctr-surface-placeholder-padding-right, var(--sjs-spacing-x6))
+    var(--ctr-surface-placeholder-padding-bottom, var(--sjs-spacing-x16))
+    var(--ctr-surface-placeholder-padding-left, var(--sjs-spacing-x6));
 }
diff --git a/packages/survey-creator-core/src/components/tabs/designer.scss b/packages/survey-creator-core/src/components/tabs/designer.scss
@@ -4,7 +4,7 @@
 svc-tab-designer {
   width: 100%;
   height: 100%;
-  background: $background-dim;
+  background: var(--ctr-surface-background-color, var(--sjs-special-background, #edf9f7ff));
 }
 
 .svc-tab-designer {
@@ -18,7 +18,8 @@ svc-tab-designer {
 }
 
 .svc-tab-designer--with-placeholder .svc-designer-header {
-  min-width: calcSize(84);
+  width: 100%;
+  min-width: var(--sjs-size-x90);
 }
 
 .svc-content-wrapper {
@@ -106,6 +107,7 @@ svc-tab-designer {
 .svc-tab-designer--with-placeholder {
   .svc-tab-designer_content {
     display: flex;
+    align-items: center;
     justify-content: center;
     flex-direction: column;
     min-height: 100%;
@@ -127,7 +129,6 @@ svc-tab-designer {
 
 .svc-designer__placeholder-container {
   display: flex;
-  flex-grow: 1;
   flex-shrink: 0;
   width: 100%;
   flex-direction: column;

diff --git a/packages/survey-creator-core/src/components/tabs/logic-ui.scss b/packages/survey-creator-core/src/components/tabs/logic-ui.scss
@@ -219,14 +219,10 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex-grow: 1;
-    flex-shrink: 0;
-    width: 100%;
-    gap: 0px;
 
     .svc-logic-tab__content-action {
       // width: calcSize(33);
-      margin-top: calcSize(1);
+      margin: 0;
     }
   }
 
@@ -260,16 +256,19 @@
 }
 
 .svc-logic-tab__content-empty {
-  .svc-btn__text {
-    color: var(--ctr-surface-placeholder-text-description-color, var(--sjs-layer-3-foreground-50, #00000080));
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
 }
 
 .svc-logic-paneldynamic {
   .sd-row--multiple {
     padding: 0;
     background: none;
     box-shadow: none;
+
     border-radius: 0;
     overflow: visible;
   }

diff --git a/packages/survey-creator-core/src/components/tabs/test.scss b/packages/survey-creator-core/src/components/tabs/test.scss
@@ -6,16 +6,9 @@ svc-tab-preview {
   background: $background-dim;
 }
 
-.svc-test-tab--empty {
-  display: flex;
-  flex-direction: column;
+.svc-test-tab__content {
   align-items: center;
   justify-content: center;
-  flex-grow: 1;
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-  gap: 0px;
 }
 
 .svc-test-tab__content .svc-plugin-tab__content {
@@ -46,6 +39,7 @@ svc-tab-preview {
 
 .svc-test-tab__content-actions {
   position: relative;
+  width: 100%;
 
   .sv-action-bar {
     padding: var(--ctr-preview-pager-padding-top, var(--sjs-spacing-x1)) var(--ctr-preview-pager-padding-right, 0px) var(--ctr-preview-pager-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-preview-pager-padding-left, 0px);

diff --git a/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css b/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css
@@ -39,7 +39,6 @@
   --ctr-shadow-x-large-blur: 0px;
   --ctr-shadow-x-large-spread: 0px;
   --ctr-property-grid-placeholder-text-max-width: 320px;
-  --ctr-surface-placeholder-padding-top: 0px;
   --ctr-property-grid-placeholder-padding-bottom: 0px;
   --ctr-popup-menu-footer-padding-right: 0px;
   --ctr-editor-content-text-opacity-disabled: 25px;
@@ -485,6 +484,7 @@
   --ctr-surface-placeholder-text-margin-bottom: var(--sjs-spacing-x6);
   --ctr-surface-placeholder-text-gap: var(--sjs-spacing-x1);
   --ctr-surface-placeholder-max-width: var(--sjs-size-x90);
+  --ctr-surface-placeholder-padding-top: var(--sjs-spacing-x4);
   --ctr-surface-placeholder-padding-right: var(--sjs-spacing-x6);
   --ctr-toolbox-group-header-margin-right: var(--sjs-spacing-x2);
   --ctr-property-grid-tabs-padding-right: var(--sjs-spacing-x150);
@@ -3268,7 +3268,6 @@
   --lbr-slider-margin-top: var(--lbr-spacing-x1);
   --lbr-button-padding-right-mobile: var(--lbr-spacing-x3);
   --lbr-button-padding-left-mobile: var(--lbr-spacing-x3);
-  --ctr-image-gallery-item-height: var(--sjs-size-x18);
   --ctr-image-gallery-item-min-width: var(--sjs-size-x28);
   --ctr-image-gallery-item-title-margin-top: var(--sjs-spacing-x05);
   --ctr-image-gallery-item-title-color: var(--sjs-layer-3-foreground-100);
@@ -3441,5 +3440,12 @@
   --lbr-separator-width: var(--lbr-stroke-x1);
   --lbr-cover-row-gap: var(--lbr-spacing-x150);
   --lbr-cover-column-gap: var(--lbr-spacing-x6);
+  --ctr-info-panel-background-color-primary: var(--sjs-primary-background-10);
+  --ctr-info-panel-padding-left: var(--sjs-spacing-x4);
+  --ctr-info-panel-padding-right: var(--sjs-spacing-x4);
+  --ctr-info-panel-padding-top: var(--sjs-spacing-x3);
+  --ctr-info-panel-padding-bottom: var(--sjs-spacing-x3);
+  --ctr-info-panel-corner-radius: var(--sjs-corner-radius-x1);
+  --ctr-info-panel-text-color-primary: var(--sjs-layer-3-foreground-100);
 }
 
diff --git a/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css b/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css
@@ -29,7 +29,6 @@
   --ctr-shadow-x-large-blur: 64px;
   --ctr-shadow-x-large-spread: 0px;
   --ctr-property-grid-placeholder-text-max-width: 320px;
-  --ctr-surface-placeholder-padding-top: 0px;
   --ctr-toolbox-group-header-margin-right: 0px;
   --ctr-property-grid-placeholder-padding-bottom: 0px;
   --ctr-editor-content-text-opacity-disabled: 25px;
@@ -476,6 +475,7 @@
   --ctr-surface-placeholder-text-margin-bottom: var(--sjs-spacing-x6);
   --ctr-surface-placeholder-text-gap: var(--sjs-spacing-x1);
   --ctr-surface-placeholder-max-width: var(--sjs-size-x90);
+  --ctr-surface-placeholder-padding-top: var(--sjs-spacing-x4);
   --ctr-surface-placeholder-padding-right: var(--sjs-spacing-x6);
   --ctr-property-grid-tabs-padding-right: var(--sjs-spacing-x150);
   --ctr-property-grid-tabs-padding-top: var(--sjs-spacing-x150);
@@ -3266,7 +3266,6 @@
   --lbr-slider-margin-top: var(--lbr-spacing-x1);
   --lbr-button-padding-right-mobile: var(--lbr-spacing-x3);
   --lbr-button-padding-left-mobile: var(--lbr-spacing-x3);
-  --ctr-image-gallery-item-height: var(--sjs-size-x18);
   --ctr-image-gallery-item-min-width: var(--sjs-size-x28);
   --ctr-image-gallery-item-title-margin-top: var(--sjs-spacing-x05);
   --ctr-image-gallery-item-title-color: var(--sjs-layer-1-foreground-100);
@@ -3441,5 +3440,12 @@
   --lbr-separator-width: var(--lbr-stroke-x1);
   --lbr-cover-row-gap: var(--lbr-spacing-x150);
   --lbr-cover-column-gap: var(--lbr-spacing-x6);
+  --ctr-info-panel-background-color-primary: var(--sjs-primary-background-10);
+  --ctr-info-panel-padding-left: var(--sjs-spacing-x4);
+  --ctr-info-panel-padding-right: var(--sjs-spacing-x4);
+  --ctr-info-panel-padding-top: var(--sjs-spacing-x3);
+  --ctr-info-panel-padding-bottom: var(--sjs-spacing-x3);
+  --ctr-info-panel-corner-radius: var(--sjs-corner-radius-x1);
+  --ctr-info-panel-text-color-primary: var(--sjs-layer-3-foreground-100);
 }
 
diff --git a/packages/survey-creator-react/src/tabs/Logic.tsx b/packages/survey-creator-react/src/tabs/Logic.tsx
@@ -54,14 +54,18 @@ export class TabLogicComponent extends SurveyElementBase<any, any> {
     return (
       <Fragment>
         <div className={logicTabClassName}>
-          <Survey model={this.model.itemsSurvey}></Survey>
-          {this.model.hasItems ? null : (
-            <div className="svc-logic-tab__content-empty" >
+          {this.model.hasItems ?
+            (<>
+              <Survey model={this.model.itemsSurvey}></Survey>
+              {addLogic}
+            </>)
+            : (<div className="svc-logic-tab__content-empty" >
               <SurfacePlaceholder name={"logic"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />
-            </div>)}
-          {addLogic}
+              {addLogic}
+            </div>)
+          }
         </div>
-      </Fragment>
+      </Fragment >
     );
   }
 }

diff --git a/packages/survey-creator-react/src/tabs/Preview.tsx b/packages/survey-creator-react/src/tabs/Preview.tsx
@@ -51,9 +51,7 @@ export class TabPreviewSurveyComponent extends SurveyElementBase<any, any> {
     return this.model;
   }
   renderPlaceholder(): React.JSX.Element {
-    return (<div className="svc-test-tab--empty">
-      <SurfacePlaceholder name={"preview"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />
-    </div>);
+    return <SurfacePlaceholder name={"preview"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />;
   }
   renderSimulator(): React.JSX.Element {
     return (<div className="svc-plugin-tab__content">

diff --git a/packages/survey-creator-react/src/tabs/Theme.tsx b/packages/survey-creator-react/src/tabs/Theme.tsx
@@ -19,9 +19,7 @@ export class TabThemeSurveyComponent extends SurveyElementBase<any, any> {
     return this.model;
   }
   renderPlaceholder(): React.JSX.Element {
-    return (<div className="svc-test-tab--empty">
-      <SurfacePlaceholder name={"theme"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />
-    </div>);
+    return <SurfacePlaceholder name={"theme"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />;
   }
   renderSimulator(): React.JSX.Element {
     return (<div className="svc-plugin-tab__content">