Work for #3390 - Implement logo image wrapper

surveyjs · Sep 29, 2022 · 0550dfd · 0550dfd
1 parent 0249efe
commit 0550dfd
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 3 deletions.
diff --git a/packages/survey-creator-angular/src/angular-ui.module.ts b/packages/survey-creator-angular/src/angular-ui.module.ts
@@ -52,12 +52,13 @@ import { DesignerSurveyComponent } from "./tabs/designer/designer-survey.compone
 import { CellQuestionComponent } from "./adorners/cell-question.component";
 import { QuestionWidgetDesignerComponent } from "./question-widget.component";
 import { ToolboxComponent } from "./toolbox/toolbox.component";
+import { CreatorLogoImageComponent } from "./header/logo-image.component";
 
 @NgModule({
   declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
-    ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, NotifierComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent],
+    ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, NotifierComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],

diff --git a/packages/survey-creator-angular/src/header/logo-image.component.html b/packages/survey-creator-angular/src/header/logo-image.component.html
@@ -0,0 +1,19 @@
+<ng-template #template>
+  <div class="svc-logo-image" #container>
+    <input type="file" aria-hidden="true" tabindex="-1" accept="image/*" class="svc-choose-file-input" />
+    <ng-container *ngIf="!survey.locLogo.renderedHtml">
+      <ng-container *ngIf="model.allowEdit">
+        <div class="svc-logo-image-placeholder" (click)="model.chooseFile(model)" [key2click]>
+          <svg>
+            <use xlink:href="#icon-logo"></use>
+          </svg>
+        </div>
+      </ng-container>
+    </ng-container>
+    <ng-container *ngIf="survey.locLogo.renderedHtml">
+      <div [class]="model.containerCss" (click)="model.chooseFile(model)" [key2click]>
+        <sv-logo-image [data]="survey"></sv-logo-image>
+      </div>
+    </ng-container>
+  </div>
+</ng-template>
diff --git a/packages/survey-creator-angular/src/header/logo-image.component.ts b/packages/survey-creator-angular/src/header/logo-image.component.ts
@@ -0,0 +1,35 @@
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
+import { CreatorModelComponent } from "../creator-model.component";
+import { SurveyModel } from "survey-core";
+import { CreatorBase, LogoImageViewModel } from "survey-creator-core";
+import { AngularComponentFactory } from "survey-angular-ui";
+
+@Component({
+  selector: "svc-logo-image",
+  templateUrl: "./logo-image.component.html",
+  styles: [":host { display: none; }"]
+})
+export class CreatorLogoImageComponent extends CreatorModelComponent<LogoImageViewModel> implements AfterViewInit {
+  @Input() data!: CreatorBase;
+  @ViewChild("container", { read: ElementRef }) container!: ElementRef<HTMLDivElement>;
+  public model!: LogoImageViewModel;
+  protected createModel(): void {
+    this.model = new LogoImageViewModel(this.creator, null);
+  }
+  protected getModel(): LogoImageViewModel {
+    return this.model;
+  }
+  protected getPropertiesToTrack(): string[] {
+    return ["data"];
+  }
+  public get creator(): CreatorBase {
+    return this.data;
+  }
+  public get survey(): SurveyModel {
+    return this.creator.survey;
+  }
+  ngAfterViewInit(): void {
+    this.model.root = this.container.nativeElement;
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-logo-image", CreatorLogoImageComponent);
diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
@@ -1,8 +1,7 @@
 <ng-template #template>
   <div [class]="model.getDesignerCss()" [style.width]="survey.renderedWidth" [style.maxWidth]="survey.renderedWidth">
     <div *ngIf="creator.allowEditSurveyTitle" class="svc-designer-header">
-      <!-- ko template: { name: 'survey-header', data: survey } -->
-      <!-- /ko -->
+      <div *ngIf="survey.renderedHasHeader" [class]="survey.css.header" [survey]="survey" sv-ng-survey-header></div>
     </div>
 
     <!-- ko if: survey.isShowProgressBarOnTop -->