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

李维's avatar
李维 committed
60 61
        <div class="width-100 d-flex"> 
          <iframe #titleEl  frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe>
liujiangnan's avatar
liujiangnan committed
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
        </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>



李维's avatar
李维 committed
79 80 81 82 83 84 85 86 87 88
    <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>
liujiangnan's avatar
liujiangnan committed
89 90


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


李维's avatar
李维 committed
94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
  <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>
liujiangnan's avatar
liujiangnan committed
111 112

</div>