meanTorrent/modules/chat/client/views/chat.client.view.html

<!-- The chat view -->
<section class="container chat-container" ng-init="vm.initChatView();">
    <div class="row">
        <div class="col-sm-9">
            <div class="chat-messages">
                <div class="chat-title">
                    <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> <span>{{'CHAT_WELCOME' | translate}}</span>
                </div>

                <div class="chat-body" id="chat-body" mt-scroll="vm.onMessageScroll($event);">
                    <ul class="list-unstyled">
                        <li class="chat-message-list {{message.type}}" ng-class="{'me': message.username == vm.user.username}"
                            ng-repeat="message in vm.messages" repeat-done="vm.onMessageRepeatDone();">
                            <div ng-class="{'chat-message-header-me': message.username == vm.user.username, 'chat-message-header': message.username != vm.user.username}">
                                <div class="chat-message-header-text">{{message.displayName}}　{{message.created | date:'MM-dd HH:mm'}}
                                </div>
                            </div>
                            <div ng-class="{'chat-wrapper-me': message.username == vm.user.username, 'chat-wrapper': message.username != vm.user.username}">
                                <a class="chat-avatar" ng-click="vm.onUserImgClicked(message.displayName);">
                                    <img title="@{{message.displayName}}" ng-src="/{{message.profileImageURL}}">
                                </a>

                                <div class="chat-message-item">
                                    <div class="chat-message-body">
                                        <div class="chat-message-body-text" dynamic-html="vm.getMessageText(message);"></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="chat-footer">
                    <div class="footer-function">

                    </div>
                    <div class="footer-input">
                        <textarea class="form-control" id="messageText" name="messageText" ng-model="vm.messageText"
                                  placeholder="{{'CHAT_PLACEHOLDER_INPUT' | translate}}"
                                  ng-keydown="vm.onInputKeyDown($event);"
                                  autofocus>
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="chat-users">
                <div class="user-title">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span>{{'CHAT_USERS_LIST' | translate}}</span>
                    <span class="pull-right">{{vm.users.length}}</span>
                </div>

                <div class="user-body">
                    <ul class="list-unstyled">
                        <li ng-repeat="u in vm.users">
                            <div class="user-item-wrapper" ng-click="vm.onUserListItemClicked(u);">
                                <a class="user-item-avatar">
                                    <img title="{{u.displayName}}" ng-src="/{{u.profileImageURL}}">
                                </a>

                                <div class="user-item-body">
                                    <div class="user-item-text" ng-bind="u.displayName"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>