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.user.username == vm.user.username) && (message.type == 'message')}"
                            ng-repeat="message in vm.messages" repeat-done="vm.onMessageRepeatDone();">
                            <div ng-class="(message.user.username == vm.user.username) && (message.type == 'message') ? 'chat-message-header-me' : 'chat-message-header'">
                                <div class="chat-message-header-text">{{message.user.displayName}}　{{message.created | date:'MM-dd HH:mm'}}
                                </div>
                            </div>
                            <div ng-class="(message.user.username == vm.user.username) && (message.type == 'message') ? 'chat-wrapper-me' : 'chat-wrapper'">
                                <a class="chat-avatar" ng-dblclick="vm.onUserImgDblClicked(message.user.displayName);">
                                    <img title="@{{message.user.displayName}}" ng-src="/{{message.user.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 class="pull-right margin-right-20">
                            <span class="glyphicon glyphicon-refresh" title="{{'CHAT_CLEAN_MESSAGE' | translate}}" aria-hidden="true"
                                  ng-click="vm.onCleanClicked();"></span>
                        </div>
                        <div class="pull-right margin-right-20 font-style-list">
                            <label title="{{'CHAT_BOLD_MESSAGE' | translate}}">
                                <input type="checkbox" ng-model="vm.fontStyleBold"> <b>{{'CHAT_FONT_BOLD' | translate}}</b>
                            </label>
                            <label title="{{'CHAT_ITALIC_MESSAGE' | translate}}">
                                <input type="checkbox" ng-model="vm.fontStyleItalic"> <i>{{'CHAT_FONT_ITALIC' | translate}}</i>
                            </label>
                        </div>
                    </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 | orderBy:['-isAdmin', '-isOper', '-isVip', 'username']">
                            <div class="user-item-wrapper" mt-scale="{scale: 1.1, duration: '.5s'}" ng-dblclick="vm.onUserListItemDblClicked(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 text-long"
                                         ng-class="{'user-is-admin': u.isAdmin, 'user-is-oper': !u.isAdmin && u.isOper, 'user-is-vip': u.isVip}"
                                         ng-bind="u.displayName"></div>
                                    <span class="glyphicon glyphicon-flash ban-kick" title="{{'CHAT_BAN_KICK' | translate}}" aria-hidden="true"
                                            ng-click="vm.banKickUser(u);" ng-show="vm.user.isOper && !u.isOper && u.username != vm.user.username"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>