Chat Merge

src/app/core/directives/om-aside/om-aside.less

@@ -0,0 +1,83 @@
+@aside-default-width: 250px;
+@aside-default-height: 100%;
+
+@aside-default-transition: margin-left 0.5s ease;
+@aside-default-transition-left: margin-left 0.5s ease;
+@aside-default-transition-top: margin-top 0.5s ease;
+@aside-default-transition-right: margin-right 0.5s ease;
+@aside-default-transition-bottom: margin-bottom 0.5s ease;
+
+@aside-default-shadow-size: 5px;
+@aside-default-shadow-blur: 8px;
+@aside-default-shadow-color: rgba(0,0,0,0.2);
+@aside-default-shadow: 0px 0px @aside-default-shadow-blur @aside-default-shadow-size @aside-default-shadow-color;
+@aside-default-shadow-right: 0px 0px @aside-default-shadow-blur @aside-default-shadow-size @aside-default-shadow-color;
+@aside-default-shadow-left: -@aside-default-shadow-size 0px @aside-default-shadow-blur 0px @aside-default-shadow-color;
+@aside-default-shadow-top: "";
+@aside-default-shadow-bottom: "";
+
+.off-canvas__container {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.off-canvas__nav {
+  //border: 2px solid rgba(0,0,0,0.2);
+  background-color: white;
+  margin:0;
+  width: @aside-default-width;
+  height: @aside-default-height;
+  position: absolute;
+  z-index: 100;
+  opacity: 1;
+  transition: @aside-default-transition;
+  .box-shadow(@aside-default-shadow);
+  &.nav-left{
+    left:0;
+    transition: @aside-default-transition-left;
+  }
+  &.nav-top{
+    top:0;
+    transition: @aside-default-transition-top;
+  }
+  &.nav-right{
+    right:0;
+    transition: @aside-default-transition-right;
+  }
+  &.nav-bottom{
+    bottom:0;
+    transition: @aside-default-transition-bottom;
+  }
+
+}
+
+.nav-closed {
+  left:0;
+  margin-left: -@aside-default-width;
+  .box-shadow(@aside-default-shadow);
+}
+
+.nav-closed-top {
+  top:0;
+  margin-top: -@aside-default-height;
+  .box-shadow(@aside-default-shadow-bottom);
+}
+
+.nav-closed-right {
+  right:0;
+  margin-right: -@aside-default-width;
+  .box-shadow(@aside-default-shadow-left);
+}
+
+.nav-closed-bottom {
+  bottom:0;
+  margin-bottom: -@aside-default-height;
+  .box-shadow(@aside-default-shadow-top);
+}
+
+.nav-closed-left {
+  bottom:0;
+  margin-left: -@aside-default-width;
+  .box-shadow(@aside-default-shadow-right);
+}

src/app/index.less

@@ -31,7 +31,7 @@ body {
 }
 
 #main-view {
-  padding-bottom: @navbar-height;
+  //padding-bottom: @navbar-height;
 }
 
 #content-view {
@@ -72,6 +72,8 @@ body {
   }
 }
 
+*{outline: 0;}
+
 /**
  *  Do not remove the comments below. It's the markers used by gulp-inject to inject
  *  all your less files automatically

src/app/index.module.js

@@ -11,7 +11,8 @@
 
       'app.dashboard',
       'app.calendar',
-      'app.fileManager'
+      'app.fileManager',
+      'app.chat'
     ]);
 
 })();

src/app/layouts/default.html

@@ -1,6 +1,21 @@
-<div id="layout-default">
+<div id="layout-default" class="off-canvas__container off-canvas__content">
     <nav class="navbar navbar-default navbar-header header" ui-view="toolbar"></nav>
-
+    <div om-aside om-slide-direction="right" om-is-off-canvas="true" id="chatAside"
+         class="selected off-canvas__nav nav-right pull-right">
+        <ul class="list-group chat-contacts">
+            <li class="list-group-item contact" ng-repeat="contact in vm.contacts" ng-click="vm.AAA()">
+                <span class="contact-unread badge" ng-hide="contact.unread == 0">{{contact.unread}}</span>
+                <span class="contact-image">
+                    <span class="contact-status"
+                          ng-class="{'status-online':contact.status == 'online',
+                                    'status-offline':contact.status == 'offline',
+                                    'status-busy':contact.status == 'busy'}"></span>
+                    <img ng-src="{{contact.thumb}}">
+                </span>
+                <span class="contact-name">{{contact.name}}</span>
+            </li>
+        </ul>
+    </div>
     <div ui-view="navigation"></div>
     <!--<div id="navigation-view" ui-view="navigation"></div>-->
     <div id="main">

src/app/layouts/default.less

@@ -1,18 +1,63 @@
-#layout-default{
-  height: 100%;
 
-  #content-view{
+#layout-default {
+  height: 100%;
+  #chatAside {
+    &.off-canvas__nav {
+      //override
+      padding: 5px;
+      z-index: 101;
+      background-color: white;
+      .box-shadow(@aside-default-shadow-left);
+      .chat-contacts {
+        .contact {
+          border:0;
+          outline: 0;
+          &:hover{
+            background-color: @gray-lighter;
+          }
+          .contact-image {
+            position: relative;
+            .contact-status{
+              position: absolute;
+              height:10px;
+              width:10px;
+              right:7px;
+              top:-7px;
+              border:1px solid white;
+              border-radius:50%;
+              &.status-online{
+                background-color: #00AA00; //or @brand-success;
+              }
+              &.status-offline{
+                background-color: grey;
+              }
+              &.status-busy{
+                background-color: @brand-danger;
+              }
+            }
+            img {
+              width: 34px;
+              height: 34px;
+              border-radius: 50%;
+              margin: -7px 5px -7px -7px;
+            }
+          }
+        }
+      }
+    }
+  }
+  #content-view {
     //background-color: #f2f2f2;
   }
-  #main{
+  #main {
     padding-bottom: 48px;
-    @media (max-width: @screen-xs-max){
+    @media (max-width: @screen-xs-max) {
       padding-bottom: 80px;
     }
-    .spinner-backdrop{
+    .spinner-backdrop {
       z-index: 4;
     }
-    footer{
+    footer {
       position: absolute;
       bottom: 0;
       left: 0;
@@ -23,7 +68,7 @@
       background-color: lighten(@gray-lighter, 3%);
       border-top: 1px solid #e7e7e7;
 
-      p{
+      p {
         margin-bottom: 0;
       }
     }

src/app/main/apps/chat/chat.controller.js

@@ -0,0 +1,126 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.chat')
+    .controller('ChatController', ChatControllerFn);
+
+  /** @ngInject */
+  function ChatControllerFn($scope, $log, $http, Users, Chats, omAside) {
+    var vm = this;
+    // Data
+    vm.users = Users.data; //for ng-repeat in html
+    vm.usersArray = $.map(vm.users, function (value, index) { //for searching through
+      return [value];
+    });
+
+    vm.chats = Chats.data;
+
+    vm.isChatsAccordionOpened = true;
+    vm.isContactsAccordionOpened = true;
+    vm.searched = "";
+
+    vm.selected = null;
+    vm.chatName = "";
+    vm.chatNameEditing = false;
+    vm.userMessages = {};
+    vm.messageToSend = "";
+    vm.messageInputClicked = false;
+
+    vm.currentView = "chat-view";
+    vm.isOffCanvasMenuOpened = false;
+    vm.seeUserInfo = null;
+
+    // Methods
+    vm.openChat = openChat;
+    vm.sendMessage = sendMessage;
+    vm.deleteChat = deleteChat;
+    vm.toggleAside = toggleAside;
+    vm.hasOffCanvasClass = hasOffCanvasClass;
+    vm.isChatNameEditing = isChatNameEditing;
+
+    init();
+
+    ///////////
+
+    function init() {
+
+    }
+
+    function openChat(chatId, chat) {
+      vm.seeUserInfo = null;
+      vm.messageToSend = "";
+      vm.userMessages = $http.get('app/main/apps/chat/data/messages/' + chatId + '.json')
+        .then(function (response) {
+          vm.selected = chat;
+          vm.chatName = chat.name;
+          return response.data;
+        }, function (error) {
+          return 'There was an error getting data' + error;
+        });
+      console.log("Loaded Messages : ",vm.userMessages);
+    }
+
+    function isChatNameEditing(confirm) {
+      if(confirm) {
+        if (vm.chatName != "") {
+          vm.selected.name = vm.chatName;
+          vm.chatNameEditing = false;
+        } else {
+          vm.chatName = vm.selected.name;
+          vm.chatNameEditing = false;
+        }
+      }else{
+        vm.chatName = vm.selected.name;
+        vm.chatNameEditing = false;
+      }
+    }
+
+    function sendMessage(msg, who, $event, buttonClicked) {
+      if ($event.keyCode == 13) $event.preventDefault();
+
+      if ((buttonClicked || $event.keyCode == 13) && msg != "")
+      {
+        vm.userMessages.$$state.value.data.push({
+          "id": vm.userMessages.$$state.value.data.length + 1,
+          "who": who,
+          "what": msg,
+          "when": moment().format('HH:mm, DD/MM/YYYY')
+        });
+
+        vm.messageToSend = "";
+      }
+    }
+
+    function deleteChat(selected) {
+      var del = Lobibox.confirm({
+        title: "Delete Chat ?",
+        msg: "Do you want to delete chat '"+selected.name+"' ?",
+        callback: function ($this, type, ev) {
+          if(type == "yes"){
+            var i = vm.chats.indexOf(selected);
+            if(i > -1) {
+              vm.chats.splice(i, 1);
+              vm.selected = null;
+              vm.seeUserInfo = null;
+            }
+          }
+        }
+      });
+      del.show();
+    }
+
+    function toggleAside(id) {
+      vm.seeUserInfo = null;
+      omAside.toggle(id);
+      vm.hasOffCanvasClass(id);
+    }
+
+    function hasOffCanvasClass(id) {
+      if (angular.element('#' + id).hasClass('is-off-canvas')) {
+        vm.isOffCanvasMenuOpened = true;
+      }
+      $log.debug(vm.isOffCanvasMenuOpened);
+    }
+  }
+})();