public/sender/views/translationPanel.html
<div ng-controller="TranslationPanelCtrl" ng-init="requestListenersInfo()">
<!-- angemeldet view form -->
<div layout="column" layout-align="left center">
<md-tabs layout-fill md-selected="selectedIndex" md-dynamic-height md-autoselect>
<md-tab ng-repeat="language in languages | filter:{known:true}"
md-on-select="updateCurrentLanguage(language)"
label="{{language.lang}}">
<div layout="row">
<div layout="column" layout-fill="" ng-if="recognizing==false">
<md-input-container class="md-block">
<label>Type your next translation sentence</label>
<textarea required ng-model="message.text" columns="1" rows="10" class="control_field"
autocorrect="off" autocomplete="on" autocapitalize="on" spellcheck="true" style="font-size: 30px;"
lang="{{language.key}}" contenteditable="contenteditable"
ng-keydown="evaluateKeyPress($event)"></textarea>
</md-input-container>
</div>
<div layout="column" layout-fill="" ng-if="recognizing==true">
<small>Ready to send:</small>
<div><b>{{message.text}}</b></div>
<small>Interimming text:</small>
<div style="font-color:'grey';"><b>{{interim_transcript}}</b></div>
</div>
<div layout="column">
<md-button ng-click="sendMessage()">
<md-icon md-font-set="material-icons">send</md-icon>
<md-tooltip md-direction="left">
Send given message. Key: Ctrl+Enter
</md-tooltip>
</md-button>
<md-button ng-click="undo()">
<md-icon md-font-set="material-icons">undo</md-icon>
<md-tooltip md-direction="left">
Send given message. Key: Ctrl+Backspace
</md-tooltip>
</md-button>
<md-button class="" ng-click="openTextSearch()">
<md-icon md-font-set="material-icons">search</md-icon>
<md-tooltip md-direction="left">
Search for prepared text
</md-tooltip>
</md-button>
<md-button class="" ng-click="startVoiceRecognition()"
ng-class="recognizing==true ? 'md-warn':'md-primary'">
<md-icon md-font-set="material-icons">mic</md-icon>
<md-tooltip md-direction="left">
Start voice recognition
</md-tooltip>
</md-button>
</div>
</div>
<div style="height:20px;">
<i class="md-body-2 md-padding check-element animate-show"
ng-show="statusMessage">{{statusMessage}}</i>
</div>
</md-tab>
<md-tab label="Clients ({{listenerCount}})" class="">
<div class=" md-padding">
<div layout="column" ng-repeat="(key, value) in listenerList " ng-if="value > 0">
<p class="md-body-2"> {{localizeLang(key).lang}}: {{value}} </p>
</div>
</div>
</md-tab>
<md-tab label="" class="">
<!-- Workaroud for the bug https://github.com/angular/material/issues/4873 -->
</md-tab>
</md-tabs>
<div class="md-body-2"> Hello <b>{{senderInfo.name}}</b> You are currently translating <b>
{{localizeLang(message.language).lang}}</b> and see <b>{{localizeLang(originLanguage).lang}}</b> output
</div>
<div infinite-scroll="incShowedMsgs()">
<div layout="row" ng-repeat="item in messages | orderBy:'-timestamp' | limitTo:showLastMsgCount "
class="animate-repeat">
<div class="md-list-item-text md-title md-padding" ng-if="item.type=='message'">
<div ng-class="item.contentType === 'verse' ? 'content_verse' : 'content_translation' ">
<span style="white-space: pre-line;" ng-class="localizeLang(originLanguage.lang).rtl ? 'rtl_text' : ''"> {{item.translation}}</span><br/>
<small class="md-caption">{{formatDate(item.timestamp)}} by {{item.sourceName}}</small>
</div>
</div>
<div class="md-list-item-text md-padding" ng-if="item.type=='question'">
<div layout="row">
<div layout="column" layout-align="center center">
<md-button ng-click="answerQuestion(item)">
<md-icon ng-class="item.answered==true ? 'answeredQuestion': 'notAnsweredQuestion'"
md-font-set="material-icons">chat bubble
</md-icon>
</md-button>
<span ng-class="item.answered==true ? 'answeredQuestion': 'notAnsweredQuestion'"> {{item.answeredBy}}</span>
</div>
<div layout="column" class="md-title md-padding">
<span class="md-caption">New question:</span>
<span class="clientQuestion"><b>{{item.questionTranslation}}</b></span>
<span class="md-caption">Original question:</span>
<small ng-class="localizeLang(item.questionLanguage).rtl ? 'rtl_text' : ''">
{{item.questionText}}
</small>
<small class="md-caption">{{formatDate(item.timestamp)}} by
{{item.questionSourceName}}
({{localizeLang(item.questionLanguage).lang}})
</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>