<div class="title-config"> <div class="title-wrap"> <div class="row"> <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>