metasocket-cordova/src/app/chat/chat.component.html

33 lines
1.6 KiB
HTML

<div #chat id="chat" (touchmove)="onChatTouch($event)" (touchend)="onTouchEnd()">
<div #errorMessage id="error-message">Konnte keine Verbindung herstellen!</div>
<div #chatPostArea id="chat-post-area" (scroll)="onScroll()">
<div *ngFor="let message of messages" class="chat-post" [class.chat-own-post]="userId === message.userId">
<img (click)="citeUsername(message.username)" class="chat-avatar" src="{{url}}/user/{{message.userId}}/avatar?token={{userToken}}">
<div class="chat-message-area" (click)="citeMessage(message.username, message.message)">
<div class="chat-username">{{message.username}}</div>
<div [innerHTML]="message.htmlMessage" class="chat-post-message"></div>
<div class="chat-datetime">{{message.datetime}}</div>
</div>
</div>
</div>
<div #chatTypeArea id="chat-type-area">
<div id="textarea-container">
<textarea #chatTextArea [(ngModel)]="chatText" (input)="onInput()" id="chat-textarea" autofocus maxlength="2000"></textarea>
</div>
<button #buttonSend class="button-send-offline" (click)="postMessage()" id="button-send"></button>
</div>
</div>
<div #sidebarBackground id="sidebar-background" (click)="pushAwaySidebar()"></div>
<div #sidebar id="sidebar" (touchmove)="onSidebarTouch($event)" (touchend)="onTouchEnd()">
<div id="userlist">
<div *ngFor="let user of userList" class="user">
<div class="userlist-element"><img src="{{url}}/user/{{user.userId}}/avatar?token={{userToken}}" class="chat-avatar userlist-avatar"></div>
<div class="userlist-element"><div class="">{{user.username}}</div></div>
</div>
</div>
</div>