lesson-title-config.component.html 3.66 KB
Newer Older
范雪寒's avatar
范雪寒 committed
1 2 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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

<div class="title-config">

  <div class="title-wrap">
    <div class="row" style="margin: 5px;">
      <div class="p-content" style="width:100%">
        <div class="p-tool-box d-flex" style="background: #fff;">
          <nz-select class="ml-1" style="width: 120px;" [(ngModel)]="__fontFamily"
                     (ngModelChange)="onChangeFontFamily($event)"
                     nzPlaceHolder="Font Family"
                     [nzDropdownMatchSelectWidth]="false">
            <nz-option [nzValue]="font" nzCustomContent [nzLabel]="font" *ngFor="let font of fontFamilyList">
              <span  [ngStyle]="{'font-family': font}" >{{font}}</span>
            </nz-option>
          </nz-select>
          <nz-select class="ml-1" style="width: 110px;" [(ngModel)]="__fontSize"
                     (ngModelChange)="onChangeFontSize()"
                     nzPlaceHolder="Font Size">
            <nz-option [nzValue]="i" [nzLabel]="'Size - ' + i" *ngFor="let i of fontSizeRange"></nz-option>
          </nz-select>
          <div class="p-divider"></div>
          <div class="i-tool-font-btn d-flex mr-2">
            <div class="position-relative fa-icon" (click)="onChangeBold()">
<!--              <div class="fa fa-bold"></div>-->
              <fa-icon icon="bold"></fa-icon>
            </div>
          </div>
          <div class="i-tool-font-btn d-flex mr-2">
            <div class="position-relative fa-icon" (click)="onChangeItalic()">
<!--              <div class="fa fa-italic"></div>-->
              <fa-icon icon="italic"></fa-icon>
            </div>
          </div>
          <div class="i-tool-font-btn d-flex mr-2">
            <div class="position-relative fa-icon" (click)="onChangeUnderline()">
<!--              <div class="fa fa-underline"></div>-->
              <fa-icon icon="underline"></fa-icon>
            </div>
          </div>
          <div class="i-tool-font-btn d-flex">
            <div class="position-relative fa-icon" (click)="onChangeStrikethrough()">
<!--              <div class="fa fa-strikethrough"></div>-->
              <fa-icon icon="strikethrough"></fa-icon>
            </div>
          </div>
          <div class="p-divider"></div>
          <div class="i-tool-font-color d-flex">
            <div class="position-relative i-left flex-fill" (click)="onChangeFontColor($event)">
<!--              <div class="fa fa-font"></div>-->
              <fa-icon icon="palette"></fa-icon>
              <div class="i-color" [style.background-color]="__fontColor"></div>
            </div>
            <div class="i-dropdown-menu" nzPlacement="bottom"
                 nz-popover [(nzVisible)]="isShowFontColorPane" nzTrigger="click"
                 [nzContent]="colorPane">
              <i nz-icon type="down" theme="outline"></i>
            </div>
          </div>
          <div class="p-divider"></div>
          <div style="background: #fff;display: block;">
            <div class="position-relative">
              <app-audio-recorder [audioUrl]="titleObj && titleObj.audio_url" (audioUploaded)="titleAudioUploaded($event)"></app-audio-recorder>
            </div>
          </div>
        </div>

        <div class="width-100 d-flex">
          <iframe #titleEl id="titleContentEgret"  frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe>
        </div>
      </div>

      <ng-template #colorPane>
        <div class="p-color-pane" nz-row nzGutter="16" nzType="flex">
          <div nz-col class="p-color-item" *ngFor="let color of colorList"
               [style.background-color]="color"
               (click)="onSelectColor(color)"
          >
          </div>
        </div>
      </ng-template>

    </div>






  </div>



</div>