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,9 @@
 
       'app.dashboard',
       'app.calendar',
-      'app.fileManager'
+      'app.fileManager',
+      'app.chat',
+      'app.contacts'
     ]);
 
 })();

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/calendar/calendar.controller.js

@@ -6,7 +6,7 @@
     .controller('CalendarController', CalendarControllerFn);
 
   /** @ngInject */
-  function CalendarControllerFn($uibModal, Events) {
+  function CalendarControllerFn($uibModal, $translate, Events) {
     var vm = this;
 
     // Data
@@ -114,27 +114,33 @@
     }
 
     function catchDragStart(event, delta) {
-      vm.dragMessage += "Change " + event.title + "'s position from " + event.start.format();
+      $translate(['CALENDAR.EVENT_MOVE_MSG_1', 'CALENDAR.EVENT_MOVE_MSG_2']).then(function (translations) {
+        vm.dragMessage += translations['CALENDAR.EVENT_MOVE_MSG_1'] + event.title + translations['CALENDAR.EVENT_MOVE_MSG_2'] + event.start.format();
+      });
     }
 
     function showDragDialog(event, delta, revertFunc) {
-      console.log(revertFunc);
-      vm.dragMessage += " to " + event.start.format() + " ?";
-      $uibModal.open({
-        templateUrl: 'app/main/apps/calendar/dialogs/drag-dialog/drag-dialog.html',
-        controller: 'DragDialogController',
-        controllerAs: 'vm',
-        size: 'md',
-        resolve: {
-          entry: {text: vm.dragMessage}
-        }
-      }).result.then(function () {
-        vm.dragMessage = "";
-      }, function () {
-        vm.dragMessage = "";
-        revertFunc();
+      $translate(['CALENDAR.EVENT_MOVE_MSG_3']).then(function (translations) {
+
+        console.log(revertFunc);
+
+        vm.dragMessage += translations['CALENDAR.EVENT_MOVE_MSG_3'] + event.start.format() + " ?";
+
+        $uibModal.open({
+          templateUrl: 'app/main/apps/calendar/dialogs/drag-dialog/drag-dialog.html',
+          controller: 'DragDialogController',
+          controllerAs: 'vm',
+          size: 'md',
+          resolve: {
+            entry: {text: vm.dragMessage}
+          }
+        }).result.then(function () {
+          vm.dragMessage = "";
+        }, function () {
+          vm.dragMessage = "";
+          revertFunc();
+        });
       });
     }
-
   }
 })();

src/app/main/apps/calendar/calendar.html

@@ -2,18 +2,18 @@
     <div class="page-content-header">
         <div class="header-top clearfix">
             <div class="menu-left">
-                <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;Calendar
+                <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;{{'CALENDAR.CALENDAR_TITLE' | translate}}
             </div>
             <div class="menu-right">
-                <div ng-click="vm.calendar.changeView('agendaDay')">
-                    <i class="fa fa-square" aria-hidden="true" uib-tooltip="Day View"></i>
-                </div>
-                <div ng-click="vm.calendar.changeView('agendaWeek')">
-                    <i class="fa fa-th-large" aria-hidden="true" uib-tooltip="Week View"></i>
-                </div>
-                <div ng-click="vm.calendar.changeView('month')">
-                    <i class="fa fa-th" aria-hidden="true" uib-tooltip="Month View"></i>
-                </div>
+                <button class="btn btn-default btn-icon btn-lg" ng-click="vm.calendar.changeView('agendaDay')">
+                    <i class="fa fa-square" aria-hidden="true" uib-tooltip="{{'CALENDAR.DAY_VIEW' | translate}}"></i>
+                </button>
+                <button class="btn btn-default btn-icon btn-lg" ng-click="vm.calendar.changeView('agendaWeek')">
+                    <i class="fa fa-th-large" aria-hidden="true" uib-tooltip="{{'CALENDAR.WEEK_VIEW' | translate}}"></i>
+                </button>
+                <button class="btn btn-default btn-icon btn-lg" ng-click="vm.calendar.changeView('month')">
+                    <i class="fa fa-th" aria-hidden="true" uib-tooltip="{{'CALENDAR.MONTH_VIEW' | translate}}"></i>
+                </button>
             </div>
         </div>
 

src/app/main/apps/calendar/calendar.less

@@ -1,6 +1,5 @@
 @header-height: 140px;
 
-
 #calendar {
   height: 100%;
   position: relative;
@@ -23,16 +22,19 @@
       &-right {
         float: right;
         user-select: none;
+        margin-top: -15px;
         input {
           color: black;
         }
         > div {
           display: inline-block;
         }
-        i {
-          font-size: 20px;
+        .btn-icon {
           margin: 5px;
-          color: white;
+          i {
+            font-size: 20px;
+            color: white;
+          }
         }
       }
     }

src/app/main/apps/calendar/calendar.module.js

@@ -8,7 +8,14 @@
     .config(Config);
 
   /** @ngInject */
-  function Config($stateProvider, lobiNavigationServiceProvider, apiServiceProvider) {
+  function Config($stateProvider, $translateProvider, $translatePartialLoaderProvider, lobiNavigationServiceProvider, apiServiceProvider) {
+    $translateProvider.useLoader('$translatePartialLoader',{
+      urlTemplate: '{part}/i18n/{lang}.json'
+    });
+    $translateProvider.preferredLanguage('en');
+    // $translateProvider.useSanitizeValueStrategy('sanitize');
+    // Translation
+    $translatePartialLoaderProvider.addPart('app/main/apps/calendar');
 
     $stateProvider
       .state('app.calendar', {

src/app/main/apps/calendar/dialogs/drag-dialog/drag-dialog.html

@@ -1,14 +1,14 @@
 <div id="drag-dialog">
     <div class="modal-header">
         <h3 class="modal-title" id="modal-title">
-            <span>Move Event</span>
+            <span>{{'CALENDAR.EVENT_MOVE' | translate}}</span>
         </h3>
     </div>
     <div class="modal-body" id="modal-body">
         <span ng-bind="vm.text"></span>
     </div>
     <div class="modal-footer">
-        <button class="btn btn-primary" type="button" ng-click="vm.ok()">Yes</button>
-        <button class="btn btn-default" type="button" ng-click="vm.cancel()">No</button>
+        <button class="btn btn-primary" type="button" ng-click="vm.ok()">{{'CALENDAR.EVENT_OK' | translate}}</button>
+        <button class="btn btn-default" type="button" ng-click="vm.cancel()">{{'CALENDAR.EVENT_CANCEL' | translate}}</button>
     </div>
 </div>