snippet/1.0.11/index.html

   1 <!DOCTYPE html>
   2 <html ng-app="motion" style="background-color: transparent;">
   3
   4 <head>
   5     <meta charset="utf-8">
   6     <title>xCally Motion Chat</title>
   7
   8     <script type="text/javascript">
   9         document.write("<base href='" + window.location.pathname + "' />");
  10     </script>
  11
  12     <link rel="stylesheet" href="styles/vendor.css?version=1.0.11">
  13
  14     <link rel="stylesheet" href="styles/app.css?version=1.0.11">
  15
  16 </head>
  17
  18 <body ng-controller="IndexController as vm" style="background-color: transparent;" ng-cloak>
  19
  20     <!-- CHAT APP -->
  21     <div layout="row" layout-align="center end">
  22
  23         <div ng-if="settings.alignment == 'right'" style="height: 100px; width: 25px; cursor: pointer; bottom: 10px; outline:none;" layout="column" layout-aling="center center" ng-style="{'background-color': '{{settings.color}}'}" ng-click="vm.toggle(!layout.up)">
  24             <i class="mdi mdi-24px mdi-light" ng-class="layout.up ? 'mdi-chevron-right' : 'mdi-chevron-left'"></i>
  25             <span style="writing-mode: tb-rl; transform: rotate(-180deg); margin: 3px; margin-bottom: 5px;" ng-style="{'color': '{{settings.textColor}}'}" flex>CHAT</span>
  26         </div>
  27
  28         <div id="chat-app" layout="column" ng-if="settings.online || !settings.hideWhenOffline">
  29             <!-- CHAT CONTENT -->
  30             <md-content class="chat-content">
  31                 <ui-view></ui-view>
  32             </md-content>
  33             <!-- CHAT CONTENT -->
  34
  35             <!-- CHAT TOOLBAR -->
  36             <md-toolbar id="chat-toolbar" class="chat-toolbar" layout="row" layout-align="start center" ng-style="{'background-color': '{{settings.color}}', 'border-top-left-radius': '{{vm.getHeaderShape();}}', 'border-top-right-radius': '{{vm.getHeaderShape();}}', 'width': '{{(settings.alignment == 'bottom_right') ? '365px' : '354px'}}'}" ng-click="(settings.alignment == 'bottom_right') && vm.toggle(!layout.up)">
  37                 <div class="md-toolbar-tools">
  38                     <div class="avatar-wrapper">
  39                         <img ng-src="{{settings.remote}}/api/chat/websites/{{settings.id}}/logo?token={{settings.token}}" class="avatar" alt="logo" />
  40                     </div>
  41
  42                     <span class="title" flex style="margin-left: 4px;" ng-style="{'font-size': '{{settings.fontSize}}px', 'color': '{{settings.textColor}}'}" md-truncate>
  43                         {{settings.defaultTitle ? settings.defaultTitle : (status === 'online' ? settings.header_online : settings.header_offline)}}
  44                     </span>
  45
  46                     <md-progress-circular ng-if="loading" md-diameter="16px"></md-progress-circular>
  47
  48                     <md-button ng-print class="md-icon-button header-button" aria-label="Print" ng-if="layout.up && visitor.interaction.id && (status != 'waiting' && status != 'online' && status != 'offline' && status != 'unmanaged')" ng-click="$event.stopPropagation();">
  49                         <i class="mdi mdi-printer mdi-light"></i>
  50                     </md-button>
  51                     <div ng-if="layout.up && visitor.interaction.id && settings.download_transcript && (status != 'waiting' && status != 'online' && status != 'offline' && status != 'unmanaged')" ng-click="$event.stopPropagation();" ng-csv="vm.download();" csv-header="['Sender', 'Message', 'Sent At']" filename="transcript.csv">
  52                         <i class="mdi mdi-download mdi-light"></i>
  53                     </div>
  54                     <md-button class="md-icon-button header-button" aria-label="Close" ng-if="layout.up && visitor.interaction.id && (status != 'waiting' && status != 'online' && status != 'offline' && status != 'unmanaged')" ng-click="vm.close(); $event.stopPropagation();">
  55                         <i class="mdi mdi-close mdi-light" ng-click="vm.close(); $event.stopPropagation();"></i>
  56                     </md-button>
  57                     <div ng-if="settings.alignment == 'bottom_right'" aria-label="Reduce">
  58                         <i class="mdi mdi-light mdi-light" ng-class="layout.up ? 'mdi-chevron-down' : 'mdi-chevron-up'"></i>
  59                     </div>
  60                     <!-- </md-button> -->
  61                 </div>
  62             </md-toolbar>
  63             <!-- / CHAT TOOLBAR -->
  64         </div>
  65
  66         <div ng-if="settings.alignment == 'left'" style="height: 100px; width: 25px; cursor: pointer; bottom: 10px; outline:none;" layout="column" layout-aling="center center" ng-style="{'background-color': '{{settings.color}}'}" ng-click="vm.toggle(!layout.up)">
  67             <i class="mdi mdi-24px mdi-light" ng-class="layout.up ? 'mdi-chevron-left' : 'mdi-chevron-right'"></i>
  68             <span style="writing-mode: tb-rl; transform: rotate(180deg); margin: 3px; margin-top: 27px;" ng-style="{'color': '{{settings.textColor}}'}">CHAT</span>
  69         </div>
  70     </div>
  71
  72     <!-- / CHAT APP -->
  73
  74     <script src="scripts/vendor.js?version=1.0.11"></script>
  75
  76     <script src="scripts/app.js?version=1.0.11"></script>
  77
  78 </body>
  79
  80 </html>