form.component.html 3.54 KB
Newer Older
liujiaxin's avatar
1  
liujiaxin committed
1
<div nz-row nzType="flex"  nzGutter = '16' class="editor-reading-wrap">
liujiangnan's avatar
liujiangnan committed
2

liujiaxin's avatar
1  
liujiaxin committed
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
  <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;">
liujiaxin's avatar
liujiaxin committed
39 40 41 42 43
          <div *ngIf="currentEditPartIndex !== i"
               nz-tooltip nzTitle="edit mode"
               (click)="editPart($event, i)">
            <i class="anticon anticon-edit"></i>
          </div>
liujiaxin's avatar
1  
liujiaxin committed
44
          <i class="anticon anticon-close-square dynamic-delete-button"
limingzhe's avatar
limingzhe committed
45

liujiaxin's avatar
1  
liujiaxin committed
46 47 48 49 50 51
             nz-popconfirm
             nzTitle="Are you sure?"
             (nzOnConfirm)="confirmRemovePart(i,$event)"
             nz-tooltip></i>
          <i class="anticon anticon-logout"
             *ngIf="currentEditPartIndex === i"
limingzhe's avatar
limingzhe committed
52

liujiaxin's avatar
1  
liujiaxin committed
53 54
             nz-tooltip nzTitle="exit edit mode"
             (click)="exitEditPart($event, i)"></i>
limingzhe's avatar
limingzhe committed
55

liujiaxin's avatar
1  
liujiaxin committed
56 57 58 59
          <div class="part-view-wrap">
            <div class="part-view"
                 (click)="previewUserSelectPart(i)"
                 [ngStyle]="part.previewCss">
liujiaxin's avatar
liujiaxin committed
60 61
<!--              *ngIf="currentEditPartIndex !== i"-->
              <img
liujiaxin's avatar
1  
liujiaxin committed
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
                   [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)"-->
limingzhe's avatar
limingzhe committed
84

liujiaxin's avatar
1  
liujiaxin committed
85 86 87 88 89 90 91 92 93 94 95
              <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>
limingzhe's avatar
limingzhe committed
96
  </div>
liujiaxin's avatar
1  
liujiaxin committed
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116




















limingzhe's avatar
limingzhe committed
117 118

</div>
liujiaxin's avatar
1  
liujiaxin committed
119