next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
2020-01-10 12:10:07 +09:00

109 lines
2.9 KiB
HTML

<div
*ngIf="
isShowTranslationPreview &&
!!translationPreviewInfo &&
!!translationPreviewInfo.previewInfo &&
!!translationPreviewInfo.previewInfo.translation
"
class="translation-preview"
>
<div class="translation-section">
<span class="translate-text">
{{ translationPreviewInfo.previewInfo.translation }}
</span>
<button
mat-stroked-button
class="btn-translation-send"
(click)="onClickSendTranslationMessage(translationPreviewInfo)"
>
<!--{{ 'chat.send' | translate }}-->
<svg
_ngcontent-smu-c52=""
fill="none"
height="20"
stroke="currentColor"
stroke-linecap="butt"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path _ngcontent-smu-c52="" d="M12 19V6M5 12l7-7 7 7"></path>
</svg>
</button>
<button
class="btn-close-translatebox bg-accent-color"
aria-label="Close"
(click)="onClickTranslationCancel()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<!--<span class="btn-close">
<button
mat-button
matSuffix
mat-icon-button
aria-label="Close"
(click)="onClickTranslationCancel()"
>
<mat-icon>close</mat-icon>
</button>
</span>-->
</div>
<div>
<form
name="translationForm"
[formGroup]="translationForm"
class="translationForm "
>
<mat-label class="text-language">
{{ 'common.translations.targetLanguage' | translate }}</mat-label
>
<mat-form-field class="select-language">
<mat-select
formControlName="destType"
(selectionChange)="onChangeSelection($event)"
>
<mat-option value="">{{
'common.translations.noTranslation' | translate
}}</mat-option>
<mat-option *ngFor="let dest of translationDestList" [value]="dest.key"
>{{ dest.text }}
</mat-option>
</mat-select>
</mat-form-field>
<div _ngcontent-xkt-c1="" class="app-layout-native-title-bar-spacer"></div>
<mat-slide-toggle
labelPosition="before"
class="simpleview"
[checked]="simpleView"
(change)="onChangToggleSimpleview($event)"
>{{ 'common.translations.simpleView' | translate }}</mat-slide-toggle
>
<mat-slide-toggle
labelPosition="before"
class="preview"
[checked]="preView"
(change)="onChangTogglePreview($event)"
>{{ 'common.translations.preview' | translate }}</mat-slide-toggle
>
</form>
</div>