• liujiaxin's avatar
    1 · 5411fff8
    liujiaxin authored
    5411fff8
form.component.html 3.49 KB
<div nz-row nzType="flex"  nzGutter = '16' class="editor-reading-wrap">

  <div nz-col nzSpan="12">
    <div class="upload-wrap" [style.display]="!picId ? 'block' : 'none'" #uploadImage>
      <app-upload-image-with-preview
        [picUrl]="picId"
        (imageUploaded)="onImageUploadSuccess($event)"
      ></app-upload-image-with-preview>
    </div>
    <div class="edit-wrap" *ngIf="picId">
      <!--<img [src]="picId | resource" alt="" #img>-->
      <angular-cropper [cropperOptions]="cropperConfig"
                       [imageUrl]="picId"
                       #angularCropper></angular-cropper>
    </div>
  </div>
  <div nz-col nzSpan="12">
    <div nz-row>
      <div nz-col nzSpan="24"  style="text-align:right;">
        <button nz-button
                (click)="changeImage()"
                style="margin-left: 1rem">
          <i class="anticon anticon-upload"></i><span>Change Image</span>
        </button>
        <button nz-button
                (click)="addPart()"
                style="margin-left: 1rem">
          <i class="anticon anticon-plus"></i><span>Add Crop</span>
        </button>
        <hr>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12"
           #partConfigBoxes
           *ngFor="let part of cropperParts;let i = index"
           class="part-item" >
        <div class="part-item-wrap" style="margin-right: 2.5rem;">
          <i class="anticon anticon-edit"
             nz-tooltip nzTitle="edit mode"

             *ngIf="currentEditPartIndex !== i"
             (click)="editPart(i)"></i>
          <i class="anticon anticon-close-square dynamic-delete-button"

             nz-popconfirm
             nzTitle="Are you sure?"
             (nzOnConfirm)="confirmRemovePart(i,$event)"
             nz-tooltip></i>
          <i class="anticon anticon-logout"
             *ngIf="currentEditPartIndex === i"

             nz-tooltip nzTitle="exit edit mode"
             (click)="exitEditPart($event, i)"></i>

          <div class="part-view-wrap">
            <div class="part-view"
                 (click)="previewUserSelectPart(i)"
                 [ngStyle]="part.previewCss">
              <img *ngIf="currentEditPartIndex !== i"
                   [ngStyle]="part.imgCss"
                   (load)="initPart($event, i)"
                   [src]="picId">
            </div>
          </div>
          <div class="part-text-wrap" >
            <div *ngIf="currentEditPartIndex === i" style="height:2.5rem;">
              <input nz-input
                     class="part-word"
                     [style.fontWeight] = "900"
                     nzSize="default"
                     autofocus
                     [(ngModel)]="part.word"
                     [value]="part.word"
                     (ngModelChange)="onChangePartWord($event, i)"
                     (keydown.enter)="savePart($event, i)"
                     (keydown.esc)="exitEditPart($event, i)"
              >
              <!--(blur)="savePart($event, i)"-->
              <!--[(ngModel)]="part.word"-->
              <!--(ngModelChange)="onChangePartWord($event, i)"-->
              <!--(focus)="setCurrentInputField($event)"-->

              <i class="anticon anticon-check-square"
                 nz-tooltip nzTitle="save"
                 (click)="savePart($event,i)"></i>
            </div>
            <div *ngIf="currentEditPartIndex !== i"  class="text-word" style="">
              {{part.word}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>





















</div>