Work for #3390: implement translation tab

surveyjs · Sep 1, 2022 · d40ee61 · d40ee61
1 parent 4b9b9c0
commit d40ee61
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 6 deletions.
diff --git a/packages/survey-creator-angular/src/angular-ui.module.ts b/packages/survey-creator-angular/src/angular-ui.module.ts
@@ -20,9 +20,11 @@ import { LogicAddButtonComponent } from "./tabs/logic/logic-add-btn.component";
 import { ActionButtonComponent } from "./components/action-button.component";
 import { LinkValueQuestionComponent } from "./questions/question-link-value.component";
 import { EmbeddedSurveyQuestionComponent } from "./questions/question-embedded-survey.component";
+import { TranslationTabComponent } from "./tabs/translation/translation.component";
+import { TranslationSkeletonComponent } from "./tabs/translation/translation-line-skeleton.component";
 
 @NgModule({
-  declarations: [CreatorComponent, DesignerTabComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent],
+  declarations: [CreatorComponent, DesignerTabComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],

diff --git a/packages/survey-creator-angular/src/creator.component.ts b/packages/survey-creator-angular/src/creator.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, Input } from "@angular/core";
-import { BaseAngular } from "survey-angular-ui";
+import { AngularComponentFactory, BaseAngular, SurveyContentComponent } from "survey-angular-ui";
 import { CreatorBase } from "survey-creator-core";
 
 @Component({
@@ -23,4 +23,6 @@ export class CreatorComponent extends BaseAngular<CreatorBase> {
   protected override onModelChanged(): void {
     this.changeDetectorRef.detectChanges();
   }
-}
+}
+
+AngularComponentFactory.Instance.registerComponent("survey-widget", SurveyContentComponent);
diff --git a/...ages/survey-creator-angular/src/tabs/translation/translation-line-skeleton.component.html b/...ages/survey-creator-angular/src/tabs/translation/translation-line-skeleton.component.html
@@ -0,0 +1,3 @@
+<ng-template #template>
+  <div class="sd-translation-line-skeleton"></div>
+</ng-template>
diff --git a/packages/survey-creator-angular/src/tabs/translation/translation-line-skeleton.component.ts b/packages/survey-creator-angular/src/tabs/translation/translation-line-skeleton.component.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { AngularComponentFactory } from "survey-angular-ui";
+
+@Component({
+  selector: "sd-translation-line-skeleton",
+  templateUrl: "./translation-line-skeleton.component.html",
+  styles: [":host { display: none; }"]
+})
+export class TranslationSkeletonComponent { }
+AngularComponentFactory.Instance.registerComponent("sd-translation-line-skeleton", TranslationSkeletonComponent);
+
diff --git a/packages/survey-creator-angular/src/tabs/translation/translation.component.html b/packages/survey-creator-angular/src/tabs/translation/translation.component.html
@@ -0,0 +1,17 @@
+<ng-template #template>
+  <div class="svc-creator-tab__content svc-translation-tab">
+    <div class="st-content">
+      <div *ngIf="model.isEmpty" class="st-no-strings">
+        <span>{{model.noStringsText}}</span>
+      </div>
+      <div *ngIf="!model.isEmpty" class="svc-flex-column st-strings-wrapper">
+        <div class="svc-flex-row st-strings-header">
+          <survey-content [model]="model.stringsHeaderSurvey"></survey-content>
+        </div>
+        <div class="svc-flex-row svc-plugin-tab__content st-strings">
+          <survey-content [model]="model.stringsSurvey"></survey-content>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
diff --git a/packages/survey-creator-angular/src/tabs/translation/translation.component.ts b/packages/survey-creator-angular/src/tabs/translation/translation.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from "@angular/core";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
+import { Translation } from "survey-creator-core";
+
+@Component({
+  selector: "svc-tab-translation",
+  templateUrl: "./translation.component.html",
+  styles: [":host { display: none; }"]
+})
+export class TranslationTabComponent extends BaseAngular<Translation> {
+  @Input() model!: Translation;
+
+  protected getModel(): Translation {
+    return this.model;
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-tab-translation", TranslationTabComponent);
+
diff --git a/packages/survey-creator-core/src/components/tabs/translation.scss b/packages/survey-creator-core/src/components/tabs/translation.scss
@@ -93,7 +93,7 @@
   padding: calcSize(1) 0;
 }
 
-.st-table__cell:first-child {
+.st-table__cell:first-of-type {
   @include defaultBold;
   color: $foreground;
   max-width: 300px;
@@ -104,7 +104,7 @@
   }
 }
 
-.st-panel-indent .st-table__cell:first-child {
+.st-panel-indent .st-table__cell:first-of-type {
   span {
     padding-left: calcSize(6);
   }

diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-table.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-table.scss
@@ -35,7 +35,7 @@
 .spg-table__cell:not(.spg-table__cell--detail-panel):first-of-type .spg-text {
   padding-left: calcSize(2);
 }
-.spg-table__cell--actions:first-child {
+.spg-table__cell--actions:first-of-type {
   width: calcSize(6);
 }
 .spg-table__cell--actions > .spg-matrixdynamic__drag-element {