public/app/quick-panel/tabs/chat/chat-tab.html

   1 <div class="main animate-slide-left" ng-hide="vm.chatActive">
   2     <md-list class="recent">
   3         <md-subheader class="md-no-sticky">
   4             <span translate="QUICKPANEL.RECENT">Recent</span>
   5         </md-subheader>
   6
   7         <md-list-item class="contact md-3-line" ng-repeat="contact in vm.contacts.recent" ng-click="vm.toggleChat(contact)">
   8             <img ng-src="{{contact.avatar}}" class="md-avatar" alt="{{contact.name}}" />
   9
  10             <div class="status  {{contact.status}}"></div>
  11
  12             <div ng-if="contact.unread" class="md-accent-bg unread-message-count">{{contact.unread}}</div>
  13
  14             <div class="md-list-item-text">
  15                 <h3>{{contact.name}}</h3>
  16                 <p class="last-message">{{contact.lastMessage}}</p>
  17             </div>
  18         </md-list-item>
  19     </md-list>
  20
  21     <md-divider></md-divider>
  22
  23     <md-list class="all">
  24         <md-subheader class="md-no-sticky">
  25             <span translate="QUICKPANEL.START_NEW_CHAT">Start New Chat</span>
  26         </md-subheader>
  27
  28         <md-list-item class="contact" ng-repeat="contact in vm.contacts.all" ng-click="vm.toggleChat(contact)">
  29             <img ng-src="{{contact.avatar}}" class="md-avatar" alt="{{contact.name}}" />
  30
  31             <div class="status {{contact.status}}"></div>
  32
  33             <div class="md-list-item-text">
  34                 <h3>{{contact.name}}</h3>
  35             </div>
  36         </md-list-item>
  37     </md-list>
  38
  39     <md-divider></md-divider>
  40 </div>
  41
  42 <div class="chat animate-slide-right" ng-show="vm.chatActive" layout="column">
  43     <md-toolbar class="md-accent">
  44         <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
  45
  46             <div layout="row" layout-align="start center">
  47                 <md-button class="md-icon-button" ng-click="vm.toggleChat()" aria-label="Back" translate translate-attr-aria-label="QUICKPANEL.BACK">
  48                     <md-icon md-font-icon="icon-keyboard-backspace"></md-icon>
  49                 </md-button>
  50                 <h4>
  51                     <span>{{vm.chat.contact.name}}</span>
  52                 </h4>
  53             </div>
  54
  55             <div layout="row" layout-align="end center">
  56                 <md-button class="md-icon-button" aria-label="Call" translate translate-attr-aria-label="QUICKPANEL.CALL">
  57                     <md-icon md-font-icon="icon-phone"></md-icon>
  58                 </md-button>
  59
  60                 <md-button class="md-icon-button" aria-label="More" translate translate-attr-aria-label="QUICKPANEL.MORE">
  61                     <md-icon md-font-icon="icon-dots-vertical"></md-icon>
  62                 </md-button>
  63             </div>
  64         </div>
  65
  66     </md-toolbar>
  67     <md-content flex layout-paddings ms-scroll id="chat-dialog">
  68         <div layout="row" ng-repeat="dialog in vm.chat.contact.dialog" class="md-padding message-row" ng-class="dialog.who">
  69             <img ng-if="dialog.who ==='contact'" ng-src="{{vm.chat.contact.avatar}}" class="avatar" alt="{{vm.chat.contact.name}}" />
  70             <img ng-if="dialog.who ==='user'" class="avatar" src="assets/images/avatars/profile.jpg">
  71
  72             <div class="bubble" flex>
  73                 <div class="message">{{dialog.message}}</div>
  74                 <div class="time secondary-text">{{dialog.time}}</div>
  75             </div>
  76         </div>
  77     </md-content>
  78
  79     <form ng-submit="vm.reply()" layout="row" class="reply" layout-align="start center">
  80         <textarea ng-keyup="$event.keyCode == 13 ? vm.reply() : null" flex ng-model="vm.replyMessage" placeholder="Type and hit enter to send message" translate translate-attr-placeholder="QUICKPANEL.REPLY_PLACEHOLDER"></textarea>
  81
  82         <md-button class="md-fab md-mini" type="submit" aria-label="Send message" translate translate-attr-aria-label="QUICKPANEL.SEND_MESSAGE">
  83             <md-icon md-font-icon="icon-send"></md-icon>
  84         </md-button>
  85     </form>
  86 </div>