lesson-title-config.component.html 3.66 KB
Newer Older
liujiaxin's avatar
liujiaxin committed
1

liujiangnan's avatar
liujiangnan committed
2 3 4
<div class="title-config">

  <div class="title-wrap">
liujiaxin's avatar
liujiaxin committed
5
    <div class="row" style="margin: 5px;">
liujiangnan's avatar
liujiangnan committed
6
      <div class="p-content" style="width:100%">
liujiaxin's avatar
liujiaxin committed
7
        <div class="p-tool-box d-flex" style="background: #fff;">
liujiangnan's avatar
liujiangnan committed
8 9 10
          <nz-select class="ml-1" style="width: 120px;" [(ngModel)]="__fontFamily"
                     (ngModelChange)="onChangeFontFamily($event)"
                     nzPlaceHolder="Font Family"
liujiaxin's avatar
liujiaxin committed
11 12 13 14 15
                     [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>
liujiangnan's avatar
liujiangnan committed
16 17 18 19
          <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>
liujiaxin's avatar
liujiaxin committed
20 21
          </nz-select>
          <div class="p-divider"></div>
liujiangnan's avatar
liujiangnan committed
22 23
          <div class="i-tool-font-btn d-flex mr-2">
            <div class="position-relative fa-icon" (click)="onChangeBold()">
liujiaxin's avatar
liujiaxin committed
24 25
<!--              <div class="fa fa-bold"></div>-->
              <fa-icon icon="bold"></fa-icon>
liujiangnan's avatar
liujiangnan committed
26 27 28 29
            </div>
          </div>
          <div class="i-tool-font-btn d-flex mr-2">
            <div class="position-relative fa-icon" (click)="onChangeItalic()">
liujiaxin's avatar
liujiaxin committed
30 31
<!--              <div class="fa fa-italic"></div>-->
              <fa-icon icon="italic"></fa-icon>
liujiangnan's avatar
liujiangnan committed
32 33 34 35
            </div>
          </div>
          <div class="i-tool-font-btn d-flex mr-2">
            <div class="position-relative fa-icon" (click)="onChangeUnderline()">
liujiaxin's avatar
liujiaxin committed
36 37
<!--              <div class="fa fa-underline"></div>-->
              <fa-icon icon="underline"></fa-icon>
liujiangnan's avatar
liujiangnan committed
38 39 40 41
            </div>
          </div>
          <div class="i-tool-font-btn d-flex">
            <div class="position-relative fa-icon" (click)="onChangeStrikethrough()">
liujiaxin's avatar
liujiaxin committed
42 43
<!--              <div class="fa fa-strikethrough"></div>-->
              <fa-icon icon="strikethrough"></fa-icon>
liujiangnan's avatar
liujiangnan committed
44
            </div>
liujiaxin's avatar
liujiaxin committed
45
          </div>
liujiangnan's avatar
liujiangnan committed
46 47 48
          <div class="p-divider"></div>
          <div class="i-tool-font-color d-flex">
            <div class="position-relative i-left flex-fill" (click)="onChangeFontColor($event)">
liujiaxin's avatar
liujiaxin committed
49 50
<!--              <div class="fa fa-font"></div>-->
              <fa-icon icon="palette"></fa-icon>
liujiangnan's avatar
liujiangnan committed
51 52 53 54
              <div class="i-color" [style.background-color]="__fontColor"></div>
            </div>
            <div class="i-dropdown-menu" nzPlacement="bottom"
                 nz-popover [(nzVisible)]="isShowFontColorPane" nzTrigger="click"
liujiaxin's avatar
liujiaxin committed
55
                 [nzContent]="colorPane">
liujiangnan's avatar
liujiangnan committed
56 57 58 59 60
              <i nz-icon type="down" theme="outline"></i>
            </div>
          </div>
          <div class="p-divider"></div>
          <div style="background: #fff;display: block;">
liujiaxin's avatar
liujiaxin committed
61
            <div class="position-relative">
liujiangnan's avatar
liujiangnan committed
62 63
              <app-audio-recorder [audioUrl]="titleObj && titleObj.audio_url" (audioUploaded)="titleAudioUploaded($event)"></app-audio-recorder>
            </div>
liujiaxin's avatar
liujiaxin committed
64
          </div>
liujiangnan's avatar
liujiangnan committed
65 66
        </div>

liujiaxin's avatar
liujiaxin committed
67 68
        <div class="width-100 d-flex">
          <iframe #titleEl id="titleContentEgret"  frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe>
liujiangnan's avatar
liujiangnan committed
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
        </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>






liujiaxin's avatar
liujiaxin committed
89
  </div>
liujiangnan's avatar
liujiangnan committed
90 91 92 93



</div>