Work for https://github.com/surveyjs/private-tasks/issues/378 - react…

… component and placeholder styles refactoring
surveyjs · Sep 13, 2024 · 4b8620d · 4b8620d
1 parent 2cbc629
commit 4b8620d
Show file tree

Hide file tree

Showing 13 changed files with 146 additions and 116 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,6 +1,6 @@
 <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">
+    <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">
         <span class="svc-text">{{model.emptyTabPlaceholder}}</span>

diff --git a/packages/survey-creator-core/src/components/creator.scss b/packages/survey-creator-core/src/components/creator.scss
@@ -1,6 +1,7 @@
 @import "../variables.scss";
 @import "./notifier.scss";
 @import "./popup.scss";
+@import "./surface-placeholder.scss";
 
 survey-creator,
 .svc-creator {

diff --git a/packages/survey-creator-core/src/components/surface-placeholder.scss b/packages/survey-creator-core/src/components/surface-placeholder.scss
@@ -0,0 +1,83 @@
+@import "../variables.scss";
+
+.svc-surface-placeholder {
+  display: flex;
+  width: 100%;
+  max-width: var(--ctr-surface-placeholder-max-width, 720px);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0px;
+  padding: calcSize(2);
+  box-sizing: border-box;
+}
+
+.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: 133px 168px 133px 168px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+}
+
+.svc-surface-placeholder__image--designer {
+  background: url("../images/placeholder-designer.png") no-repeat;
+}
+
+.svc-surface-placeholder__image--preview {
+  background: url("../images/placeholder-preview.png") no-repeat;
+}
+
+.svc-surface-placeholder__image--theme {
+  background: url("../images/placeholder-themes.png") no-repeat;
+}
+
+.svc-surface-placeholder__image--logic {
+  background: url("../images/placeholder-logic.png") no-repeat;
+}
+
+.svc-surface-placeholder__image--translation {
+  background: url("../images/placeholder-translations.png") no-repeat;
+}
+
+.svc-surface-placeholder__text {
+  padding: var(--ctr-surface-placeholder-text-margin-top, 32px) 0px var(--ctr-surface-placeholder-text-margin-bottom, 24px) 0px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ctr-surface-placeholder-text-gap, 8px);
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.svc-surface-placeholder__title {
+  color: var(--ctr-surface-placeholder-text-title-color, rgba(0, 0, 0, 0.91));
+  text-align: center;
+  font-family: var(--ctr-medium-bold-font-family, "OpenSans-Bold", sans-serif);
+  font-size: var(--ctr-medium-bold-font-size, 24px);
+  line-height: var(--ctr-medium-bold-line-height, 32px);
+  font-weight: var(--ctr-medium-bold-font-weight, 700);
+  align-self: stretch;
+}
+
+.svc-surface-placeholder__description {
+  color: var(--ctr-surface-placeholder-text-description-color,
+      rgba(0, 0, 0, 0.45));
+  text-align: center;
+  font-family: var(--ctr-default-font-family, "OpenSans-Regular", sans-serif);
+  font-size: var(--ctr-default-font-size, 16px);
+  line-height: var(--ctr-default-line-height, 24px);
+  font-weight: var(--ctr-default-font-weight, 400);
+  align-self: stretch;
+}
diff --git a/packages/survey-creator-core/src/components/tabs/designer.scss b/packages/survey-creator-core/src/components/tabs/designer.scss
@@ -111,87 +111,6 @@ svc-tab-designer {
   }
 }
 
-.svc-designer-placeholder__image {
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-  overflow: hidden;
-  padding: 133px 168px 133px 168px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-}
-
-.svc-tab-designer {
-  .svc-designer-placeholder__image {
-    background: url("../../images/placeholder-designer.png") no-repeat;
-  }
-}
-
-.svc-test-tab {
-  .svc-designer-placeholder__image {
-    background: url("../../images/placeholder-preview.png") no-repeat;
-  }
-}
-
-.svc-themes-tab {
-  .svc-designer-placeholder__image {
-    background: url("../../images/placeholder-themes.png") no-repeat;
-  }
-}
-
-.svc-logic-tab {
-  .svc-designer-placeholder__image {
-    background: url("../../images/placeholder-logic.png") no-repeat;
-  }
-}
-
-.svc-translation-tab {
-  .svc-designer-placeholder__image {
-    background: url("../../images/placeholder-translations.png") no-repeat;
-  }
-}
-
-.svc-designer-placeholder__text {
-  padding: var(--ctr-surface-placeholder-text-margin-top, 32px) 0px var(--ctr-surface-placeholder-text-margin-bottom, 24px) 0px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ctr-surface-placeholder-text-gap, 8px);
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  flex-shrink: 0;
-  width: 100%;
-  max-width: var(--ctr-surface-placeholder-max-width, 720px);
-}
-
-.svc-designer-placeholder__title {
-  color: var(--ctr-surface-placeholder-text-title-color, rgba(0, 0, 0, 0.91));
-  text-align: center;
-  font-family: var(--ctr-medium-bold-font-family, "OpenSans-Bold", sans-serif);
-  font-size: var(--ctr-medium-bold-font-size, 24px);
-  line-height: var(--ctr-medium-bold-line-height, 32px);
-  font-weight: var(--ctr-medium-bold-font-weight, 700);
-  align-self: stretch;
-}
-
-.svc-designer-placeholder__description {
-  color: var(--ctr-surface-placeholder-text-description-color,
-      rgba(0, 0, 0, 0.45));
-  text-align: center;
-  font-family: var(--ctr-default-font-family, "OpenSans-Regular", sans-serif);
-  font-size: var(--ctr-default-font-size, 16px);
-  line-height: var(--ctr-default-line-height, 24px);
-  font-weight: var(--ctr-default-font-weight, 400);
-  align-self: stretch;
-}
-
 .svc-designer-placeholder-page {
   margin-top: calcSize(2);
 }

diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts
@@ -4,7 +4,6 @@ import { getLocString } from "../../editorLocalization";
 import { PagesController } from "../../pages-controller";
 import { SurveyHelper } from "../../survey-helper";
 import { DragDropSurveyElements } from "../../survey-elements";
-import { SurveyElementActionContainer } from "../action-container-view-model";
 require("./designer.scss");
 
 export const initialSettingsAllowShowEmptyTitleInDesignMode = settings.allowShowEmptyTitleInDesignMode;

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,11 +219,15 @@
 }
 
 .svc-logic-tab__content {
-  &.svc-logic-tab__empty {
+  &.svc-logic-tab--empty {
     display: flex;
     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);
@@ -299,6 +303,7 @@
 
 .sl-table__cell--detail-panel {
   padding: 0;
+
   .sd-body {
     margin: 0;
     min-width: none;
@@ -377,4 +382,4 @@
 
 .sv-popup--dropdown-overlay .sv-list__filter {
   padding-top: calcSize(1.5);
-}
+}
diff --git a/packages/survey-creator-core/src/components/tabs/translation.scss b/packages/survey-creator-core/src/components/tabs/translation.scss
@@ -11,6 +11,18 @@
   --sjs-transition-duration: 0ms;
 }
 
+.svc-translation-tab--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 100%;
+  gap: 0px;
+}
+
+
 .st-properties {
   background-color: var(--ctr-property-grid-background-color, $background-dim);
   flex-grow: 1;
@@ -268,6 +280,7 @@ td.st-table__cell:first-of-type {
     width: auto;
   }
 }
+
 .st-body {
   @include disableLibraryAnimations;
 }
diff --git a/packages/survey-creator-knockout/src/tabs/logic.html b/packages/survey-creator-knockout/src/tabs/logic.html
@@ -1,6 +1,6 @@
 <!-- ko using: model -->
 <div class="svc-creator-tab__content">
-  <div class="svc-plugin-tab__content svc-logic-tab__content" data-bind="css: { 'svc-logic-tab__empty': !hasItems }">
+  <div class="svc-plugin-tab__content svc-logic-tab__content" data-bind="css: { 'svc-logic-tab--empty': !hasItems }">
     <!-- ko template: { name: 'survey-content', data: itemsSurvey  } -->
     <!-- /ko -->
     <!-- ko if: !hasItems -->

diff --git a/packages/survey-creator-react/src/components/SurfacePlaceholder.tsx b/packages/survey-creator-react/src/components/SurfacePlaceholder.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { ReactElementFactory } from "survey-react-ui";
+
+interface ISurfacePlaceholderProps {
+  name: string;
+  placeholderTitleText: string;
+  placeholderDescriptionText: string;
+}
+
+export class SurfacePlaceholder extends React.Component<ISurfacePlaceholderProps, any> {
+  constructor(props: ISurfacePlaceholderProps) {
+    super(props);
+  }
+  render(): JSX.Element {
+    return (
+      <div className="svc-surface-placeholder" >
+        <div className={"svc-surface-placeholder__image svc-surface-placeholder__image--" + this.props.name}></div >
+        <div className="svc-surface-placeholder__text">
+          <div className="svc-surface-placeholder__title">{this.props.placeholderTitleText}</div>
+          <div className="svc-surface-placeholder__description">{this.props.placeholderDescriptionText}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactElementFactory.Instance.registerElement("svc-surface-placeholder",
+  (props: ISurfacePlaceholderProps) => {
+    return React.createElement(SurfacePlaceholder, props);
+  }
+);
diff --git a/packages/survey-creator-react/src/tabs/Designer.tsx b/packages/survey-creator-react/src/tabs/Designer.tsx
@@ -8,7 +8,7 @@ import {
 } from "survey-react-ui";
 import { SurveyCreatorModel, TabDesignerViewModel } from "survey-creator-core";
 import { SurveyPageNavigator } from "../PageNavigator";
-import { SurveyNavigation } from "../Navigation";
+import { SurfacePlaceholder } from "../components/SurfacePlaceholder";
 
 interface ITabDesignerComponentProps {
   data: TabDesignerViewModel;
@@ -156,14 +156,7 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
     </React.Fragment>);
   }
   renderPlaceHolderContent(): JSX.Element {
-    // return <span className="svc-designer-placeholder-text svc-text svc-text--normal">{this.model.placeholderText}</span>;
-    return (<>
-      <div className="svc-designer-placeholder__image"></div >
-      <div className="svc-designer-placeholder__text">
-        <div className="svc-designer-placeholder__title">{this.model.placeholderTitleText}</div>
-        <div className="svc-designer-placeholder__description">{this.model.placeholderDescriptionText}</div>
-      </div>
-    </>);
+    return <SurfacePlaceholder name={"designer"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />;
   }
   renderTabContent(): JSX.Element {
     const survey: SurveyModel = this.creator.survey;

diff --git a/packages/survey-creator-react/src/tabs/Logic.tsx b/packages/survey-creator-react/src/tabs/Logic.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { Action, Base } from "survey-core";
 import { ReactElementFactory, SurveyElementBase, Survey, attachKey2click } from "survey-react-ui";
 import { SurveyLogicUI } from "survey-creator-core";
+import { SurfacePlaceholder } from "src/components/SurfacePlaceholder";
 
 export class TabLogicAddButtonComponent extends SurveyElementBase<any, any> {
   private get model(): Action {
@@ -48,20 +49,15 @@ export class TabLogicComponent extends SurveyElementBase<any, any> {
     return <div className={rootClass}>{content}</div>;
   }
   private renderViewContent(): JSX.Element {
-    const logicTabClassName = "svc-plugin-tab__content svc-logic-tab svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab__empty");
+    const logicTabClassName = "svc-plugin-tab__content svc-logic-tab svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab--empty");
     const addLogic = !this.model.readOnly ? <TabLogicAddButtonComponent button={this.model.addNewButton} /> : undefined;
     return (
       <Fragment>
         <div className={logicTabClassName}>
           <Survey model={this.model.itemsSurvey}></Survey>
           {this.model.hasItems ? null : (
             <div className="svc-logic-tab__content-empty" >
-              {/* <span className="svc-text">{this.model.emptyTabPlaceholder}</span> */}
-              <div className="svc-designer-placeholder__image"></div >
-              <div className="svc-designer-placeholder__text">
-                <div className="svc-designer-placeholder__title">{this.model.placeholderTitleText}</div>
-                <div className="svc-designer-placeholder__description">{this.model.placeholderDescriptionText}</div>
-              </div>
+              <SurfacePlaceholder name={"logic"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />
             </div>)}
           {addLogic}
         </div>

diff --git a/packages/survey-creator-react/src/tabs/translation/Translation.tsx b/packages/survey-creator-react/src/tabs/translation/Translation.tsx
@@ -6,6 +6,7 @@ import {
   Survey
 } from "survey-react-ui";
 import { Translation } from "survey-creator-core";
+import { SurfacePlaceholder } from "src/components/SurfacePlaceholder";
 
 export class TabTranslationComponent extends SurveyElementBase<any, any> {
   private get model(): Translation {
@@ -17,25 +18,14 @@ export class TabTranslationComponent extends SurveyElementBase<any, any> {
   renderElement(): JSX.Element {
     if (!this.model) return null;
     return (
-      <div className="svc-creator-tab__content svc-translation-tab">
+      <div className={"svc-creator-tab__content svc-translation-tab" + this.model.isEmpty ? "svc-translation-tab--empty" : ""}>
         {this.renderElementContent()}
       </div>
     );
   }
   renderElementContent(): JSX.Element {
     if (this.model.isEmpty) {
-      // return (
-      //   <div className="st-no-strings">
-      //     <span>{this.model.noStringsText}</span>
-      //   </div>
-      // );
-      return (<>
-        <div className="svc-designer-placeholder__image"></div >
-        <div className="svc-designer-placeholder__text">
-          <div className="svc-designer-placeholder__title">{this.model.placeholderTitleText}</div>
-          <div className="svc-designer-placeholder__description">{this.model.placeholderDescriptionText}</div>
-        </div>
-      </>);
+      return <SurfacePlaceholder name={"translation"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />;
     } else {
       return (
         <div className="st-content">

diff --git a/packages/survey-creator-vue/src/tabs/logic/Logic.vue b/packages/survey-creator-vue/src/tabs/logic/Logic.vue
@@ -2,7 +2,7 @@
   <div class="svc-creator-tab__content">
     <div
       class="svc-plugin-tab__content svc-logic-tab__content"
-      :class="{ 'svc-logic-tab__empty': !model.hasItems }"
+      :class="{ 'svc-logic-tab--empty': !model.hasItems }"
     >
       <SurveyComponent :model="model.itemsSurvey"></SurveyComponent>
       <div v-if="!model.hasItems" class="svc-logic-tab__content-empty">