-
Notifications
You must be signed in to change notification settings - Fork 359
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Work for #3390: started designer tab
- Loading branch information
T_S_V
committed
Sep 5, 2022
1 parent
89bc2b1
commit 7c55cdd
Showing
5 changed files
with
192 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <div *ngIf="model && adorner" class="svc-page__content" [class]="adorner.css" [key2click] | ||
| (click)="adorner.select(adorner, $event)" | ||
| data-bind="click: select, key2click, clickBubble: false, css: css, attr: { id: page.id }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }"> | ||
| <div class="svc-page__content-actions"> | ||
| <!-- ko component: { name: 'sv-action-bar', params: { model: actionContainer } } --> | ||
| <!-- /ko --> | ||
| </div> | ||
| <page [model]="model" [survey]="survey"></page> | ||
| <div *ngIf="adorner.showAddQuestionButton" class="svc-page__add-new-question svc-btn" [key2click] | ||
| (click)="adorner.addNewQuestion(adorner, $event)" | ||
| data-bind="click: addNewQuestion, key2click, clickBubble: false, event: { mouseover: function(m, e) { hoverStopper(e, $element); }}"> | ||
| <span class="svc-text svc-text--normal svc-text--bold"> | ||
| {{ adorner.addNewQuestionText }} | ||
| </span> | ||
| <!-- ko with: questionTypeSelectorModel --> | ||
| <button type="button" [key2click] (click)="adorner.questionTypeSelectorModel.action()" | ||
| data-bind="click: action, key2click, clickBubble: false, attr: { title: title, 'aria-label': title }" | ||
| class="svc-page__question-type-selector"> | ||
| <svg class="svc-page__question-type-selector-icon" [iconName]="adorner.questionTypeSelectorModel.iconName" | ||
| [size]="24" sv-ng-svg-icon></svg> | ||
| <!-- <sv-svg-icon class="svc-page__question-type-selector-icon" params="iconName: iconName, size: 24, title: title"> | ||
| </sv-svg-icon> --> | ||
| <!-- <sv-popup params="model: popupModel"></sv-popup> --> | ||
| </button> | ||
| <!-- /ko --> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { ChangeDetectorRef, Component, Input, ViewContainerRef } from "@angular/core"; | ||
| import { AngularComponentFactory, BaseAngular, EmbeddedViewContentComponent } from "survey-angular-ui"; | ||
| import { PageModel, SurveyModel } from "survey-core"; | ||
| import { CreatorBase, PageAdorner } from "survey-creator-core"; | ||
|
|
||
| @Component({ | ||
| selector: "svc-page", | ||
| templateUrl: "./page.component.html", | ||
| styles: [] | ||
| }) | ||
| export class PageDesignerComponent extends BaseAngular<PageModel> { | ||
| @Input() model!: PageModel; | ||
| @Input() survey!: SurveyModel; | ||
| @Input() creator!: CreatorBase; | ||
| public adorner?: PageAdorner; | ||
| constructor(changeDetectorRef: ChangeDetectorRef, viewContainerRef?: ViewContainerRef) { | ||
| super(changeDetectorRef, viewContainerRef); | ||
| if(this.model) { | ||
| this.adorner = new PageAdorner(this.creator, this.model); | ||
| } | ||
| } | ||
| protected override onModelChanged(): void { | ||
| super.onModelChanged(); | ||
| this.adorner = new PageAdorner(this.creator, this.model); | ||
| } | ||
| protected getModel(): PageModel { | ||
| return this.model; | ||
| } | ||
| } | ||
|
|
||
| AngularComponentFactory.Instance.registerComponent("svc-page", PageDesignerComponent); | ||
|
|
56 changes: 55 additions & 1 deletion
56
packages/survey-creator-angular/src/tabs/designer.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,59 @@ | ||
| <ng-template #template> | ||
| <!-- <svc-adaptive-toolbox *ngIf="model.isToolboxVisible" params="model: creator"></svc-adaptive-toolbox> --> | ||
| <div class="svc-tab-designer" [class]="model.getRootCss()" (click)="model.clickDesigner()"> | ||
| TODO implement designer tab | ||
| <div class="svc-tab-designer_content"> | ||
| <ng-container *ngIf="model.showPlaceholder"> | ||
| <div *ngIf="creator.showHeaderInEmptySurvey && creator.allowEditSurveyTitle" class="svc-designer-header"> | ||
| <!-- ko template: { name: 'survey-header', data: survey } --> | ||
| <!-- /ko --> | ||
| </div> | ||
| <div class="svc-designer__placeholder-container" | ||
| data-bind="attr: { 'data-sv-drop-target-survey-element': 'newGhostPage' }"> | ||
| <span class="svc-designer-placeholder-text svc-text svc-text--normal" data-bind="text: placeholderText"> | ||
| </span> | ||
| <svc-page class="svc-designer-placeholder-page" params="survey: survey, creator: creator, page: newPage"> | ||
| </svc-page> | ||
| </div> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="!model.showPlaceholder"> | ||
| <div [class]="model.getDesignerCss()" [style.width]="survey.width"> | ||
| <div *ngIf="creator.allowEditSurveyTitle" class="svc-designer-header"> | ||
| <!-- ko template: { name: 'survey-header', data: survey } --> | ||
| <!-- /ko --> | ||
| </div> | ||
|
|
||
| <!-- ko if: survey.isShowProgressBarOnTop --> | ||
| <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } --> | ||
| <!-- /ko --> | ||
| <!-- /ko --> | ||
|
|
||
| <ng-container *ngIf="creator.pageEditMode !== 'bypage'"> | ||
| <svc-page *ngFor="let page of survey.pages" class="svc-page" | ||
| data-bind="attr: { 'data-sv-drop-target-survey-element': page.name, 'data-sv-drop-target-page': page.name }" | ||
| [model]="page" [survey]="survey" [creator]="creator"></svc-page> | ||
| <svc-page *ngIf="model.showNewPage && model.newPage" class="svc-page" | ||
| data-bind="attr: { 'data-sv-drop-target-survey-element': 'newGhostPage' }" [model]="model.newPage" | ||
| [survey]="survey" [creator]="creator"></svc-page> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="model.pagesController.page2Display && creator.pageEditMode === 'bypage'"> | ||
| <svc-page class="svc-page" | ||
| data-bind="attr: { 'data-sv-drop-target-survey-element': 'newGhostPage', 'data-sv-drop-target-page': pagesController.page2Display.name }" | ||
| [model]="model.pagesController.page2Display" [survey]="survey" [creator]="creator"></svc-page> | ||
| </ng-container> | ||
|
|
||
| <!-- ko if: survey.isShowProgressBarOnBottom --> | ||
| <!-- ko component: { name: 'sv-progress-' + survey.progressBarType, params: { model: survey } } --> | ||
| <!-- /ko --> | ||
| <!-- /ko --> | ||
| </div> | ||
|
|
||
| <div *ngIf="creator.showPageNavigator" class="svc-tab-designer__page-navigator"> | ||
| <!-- <svc-page-navigator params="controller: pagesController, pageEditMode: creator.pageEditMode"> | ||
| </svc-page-navigator> --> | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
| </div> | ||
| </ng-template> |