lesson-title-config.component.html 4.46 KB
Newer Older
liujiangnan's avatar
liujiangnan committed
1 2 3
<div class="title-config">

  <div class="title-wrap">
liujiangnan's avatar
liujiangnan committed
4
    <div class="row" style="margin: 5px;"> 
liujiangnan's avatar
liujiangnan committed
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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
      <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" [nzLabel]="font" *ngFor="let font of fontFamilyList"></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>
            </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>
            </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>
            </div>
          </div>
          <div class="i-tool-font-btn d-flex">
            <div class="position-relative fa-icon" (click)="onChangeStrikethrough()">
              <div class="fa fa-strikethrough"></div>
            </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>
              <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" (click)="onChangeStrikethrough()">
              <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  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>



    <ng-container *ngIf="withIcon">
      <div class="row type-row">
        课程类型:
        <nz-radio-group [(ngModel)]="titleObj && titleObj.type" (ngModelChange)="typeChange($event)">
          <label nz-radio nzValue="a">单数课</label>
          <label nz-radio nzValue="b">双数课</label>
          <label nz-radio nzValue="c">复习课</label>
        </nz-radio-group>
      </div>
    </ng-container>


  </div>


  <ng-container *ngIf="withIcon">

  <div class="title-icons">
    <div class="icons-list">
      <nz-checkbox-wrapper style="width: 100%;clear:both" (nzOnChange)="iconsChanges($event)">
      <div [class]="'icon-item icon-'+i" *ngFor="let i of groupIconsCount[titleObj.type];">
        <div class="img-box">
          <nz-badge class="icon-badge"  [nzCount]="titleObj && titleObj.icons && titleObj.icons.indexOf(i) + 1">
            <img [src]="'assets/title-icons/'+titleObj.type+'/icon-'+i+'.png'" alt="">
          </nz-badge>
        </div>
        <label nz-checkbox [nzValue]="i" [ngModel]="titleObj && titleObj.icons && titleObj.icons.indexOf(i) > -1"></label>
      </div>
      </nz-checkbox-wrapper>
    </div>
  </div>
  </ng-container>

</div>