finilising team UI

src/app/pages/components/mail/mailMessages.js

@@ -22,7 +22,7 @@
         "attachment": "poem.txt",
         "position": "Great Employee",
         "tag": "friend",
-        "labels": ['inbox']
+        "labels": ['hr']
       },
       {
         "id": "4563fdfvd",

src/app/pages/teams/members/MembersTabCtrl.js

@@ -9,19 +9,21 @@
       .controller('MembersTabCtrl', MembersTabCtrl);
 
   /** @ngInject */
-  function MembersTabCtrl(composeModal, mailMessages) {
+  function MembersTabCtrl(composeModal, membersList) {
 
     var vm = this;
     vm.navigationCollapsed = true;
-    vm.showCompose = function(subject, to , text){
+    vm.showCompose = function(id){
+      if (id != '')
+        vm.message = membersList.getMemberById(id);
+      else 
+        vm.message = {};
       composeModal.open({
-        subject : subject,
+        message : vm.message
-        to: to,
-        text: text
       })
     };
 
-    vm.tabs = mailMessages.getTabs();
+    vm.tabs = membersList.getTabs();
   }
 
 })();

src/app/pages/teams/members/composeBox/compose.html

@@ -1,26 +1,80 @@
 <div class="compose-header">
   <span>
-    New message
+    New member
   </span>
   <span class="header-controls">
-    <i class="ion-minus-round"></i>
-    <i class="ion-arrow-resize"></i>
     <i ng-click="$dismiss()" class="ion-close-round"></i>
   </span>
 </div>
 <div>
-  <input type="text" class="form-control compose-input default-color"  placeholder="To" ng-model="boxCtrl.to">
+  
-  <input type="text" class="form-control compose-input default-color"  placeholder="Subject" ng-model="boxCtrl.subject">
+
-  <div class="compose-container">
+
-    <text-angular-toolbar ta-toolbar-class="toolbarMain" name="toolbarMain" ta-toolbar="[['h1','h2','h3','bold','italics', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull']]"></text-angular-toolbar>
+      <div class="col-md-12">
-    <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>
+        <div class="form-group row clearfix"></div>
-  </div>
+        <div class="form-group row clearfix">
+
+          <div class="col-sm-5">
+            <div class="userpic">
+              <div class="userpic-wrapper">
+                <img ng-src="{{ boxCtrl.picture }}" ng-click="boxCtrl.uploadPicture()">
+              </div>
+              <i class="ion-ios-close-outline" ng-click="boxCtrl.removePicture()" ng-if="!boxCtrl.noPicture"></i>
+              <a href class="change-userpic" ng-click="boxCtrl.uploadPicture()">Change Profile Picture</a>
+              <input type="file" ng-show="false" id="uploadFile" ng-file-select="boxCtrl.onFileSelect($files)">
+            </div>
+          </div>
+
+          <div class="col-md-7">
+        <div class="form-group row clearfix">
+          <label for="inputFirstName" class="col-sm-3 control-label">Name</label>
+
+          <div class="col-sm-9">
+            <input type="text" class="form-control" id="inputFirstName" placeholder="" ng-model="boxCtrl.message.name">
+          </div>
+        </div>
+        <div class="form-group row clearfix">
+          <label for="inputLastName" class="col-sm-3 control-label">Email</label>
+
+          <div class="col-sm-9">
+            <input type="text" class="form-control" id="inputLastName" placeholder="" ng-model="boxCtrl.message.email">
+          </div>
+        </div>
+        <div class="form-group row clearfix">
+          <label class="col-sm-3 control-label">Department</label>
+
+          <div class="col-sm-9">
+            <select class="form-control" selectpicker>
+              <option>Web Development</option>
+              <option>System Development</option>
+              <option>Sales</option>
+              <option>Human Resources</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-group row clearfix">
+          <label for="inputOccupation" class="col-sm-3 control-label">Occupation</label>
+
+          <div class="col-sm-9">
+            <input type="text" class="form-control" id="inputOccupation" placeholder="" ng-model="boxCtrl.message.position">
+          </div>
+        </div>
+      </div>
+
+  
+      </div>
+      <div class="col-md-12"></div>
+
+
+
+
+
 </div>
 <div class="compose-footer clearfix">
-  <button type="button" ng-click="$dismiss()" class="btn btn-send">Send</button>
+  <button type="button" ng-click="$dismiss()" class="btn btn-send">Save</button>
-  <text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar>
+
   <div class="footer-controls">
-    <i class="footer-control-first compose-footer-icon ion-arrow-down-b"></i>
+    <button type="button" ng-click="$dismiss()" class="btn btn-danger">Cancel</button>
-    <i ng-click="$dismiss()" class="compose-footer-icon ion-android-delete"></i>
   </div>
 </div>

src/app/pages/teams/members/composeBox/composeBoxCtrl.js

@@ -5,14 +5,31 @@
 (function () {
   'use strict';
 
-  angular.module('BlurAdmin.pages.components.mail')
+  angular.module('BlurAdmin.pages.teams.members')
     .controller('composeBoxCtrl', composeBoxCtrl);
 
   /** @ngInject */
-  function composeBoxCtrl(subject, to, text) {
+  function composeBoxCtrl(message,fileReader, $filter) {
     var vm = this;
-    vm.subject = subject;
+    vm.message = message;
-    vm.to = to;
+    vm.picture = (message.pic && message.pic != "") ? $filter('profilePicture')(message.name.split(' ')[0]) : $filter('appImage')('theme/no-photo.png');
-    vm.text = text;
+
+    vm.removePicture = function () {
+      vm.picture = $filter('appImage')('theme/no-photo.png');
+      vm.noPicture = true;
+    };
+
+    vm.uploadPicture = function () {
+      var fileInput = document.getElementById('uploadFile');
+      fileInput.click();
+
+    };
+
+    vm.getFile = function () {
+      fileReader.readAsDataUrl(vm.file, vm)
+          .then(function (result) {
+            vm.picture = result;
+          });
+    };
   }
 })();

src/app/pages/teams/members/composeBox/composeModal.js

@@ -5,7 +5,7 @@
 (function () {
   'use strict';
 
-  angular.module('BlurAdmin.pages.components.mail')
+  angular.module('BlurAdmin.pages.teams.members')
     .service('composeModal', composeModal);
 
   /** @ngInject */
@@ -13,19 +13,13 @@
       this.open = function(options){
         return $uibModal.open({
           animation: false,
-          templateUrl: 'app/pages/components/mail/composeBox/compose.html',
+          templateUrl: 'app/pages/teams/members/composeBox/compose.html',
           controller: 'composeBoxCtrl',
           controllerAs: 'boxCtrl',
           size: 'compose',
           resolve: {
-            subject: function () {
+            message: function () {
-              return options.subject;
+              return options.message;
-            },
-            to: function () {
-              return options.to;
-            },
-            text: function () {
-              return options.text;
             }
           }
         });

src/app/pages/teams/members/detail/MemberDetailCtrl.js

@@ -9,9 +9,9 @@
     .controller('MemberDetailCtrl', MemberDetailCtrl);
 
   /** @ngInject */
-  function MemberDetailCtrl($stateParams, mailMessages) {
+  function MemberDetailCtrl($stateParams, membersList) {
     var vm = this;
-    vm.mail = mailMessages.getMessageById($stateParams.id);
+    vm.member = membersList.getMemberById($stateParams.id);
     vm.label = $stateParams.label;
   }
 

src/app/pages/teams/members/detail/memberDetail.html

@@ -11,69 +11,44 @@
     </div>
     <div class="person-info row">
       <div class="col-lg-4 col-md-12  no-padding">
-        <img ng-src="{{detailCtrl.mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
+        <img ng-src="{{detailCtrl.member.name.split(' ')[0] | profilePicture}}" class="human-picture">
 
         <div class="name">
-          <h2 class="name-h">{{detailCtrl.mail.name.split(' ')[0]}}</h2>
+          <h2 class="name-h">{{detailCtrl.member.name.split(' ')[0]}}</h2>
 
-          <h2 class="name-h second-name">{{detailCtrl.mail.name.split(' ')[1]}}</h2>
+          <h2 class="name-h second-name">{{detailCtrl.member.name.split(' ')[1]}}</h2>
 
           <div>
-            <span class="mail-tag tag label {{detailCtrl.mail.tag}}">{{detailCtrl.mail.tag}}</span>
+            <span class="mail-tag tag label {{detailCtrl.member.tag}}">{{detailCtrl.member.tag}}</span>
           </div>
         </div>
       </div>
       <div class="col-lg-4 col-md-6 col-xs-12 no-padding">
         <div class="contact-info phone-email">
           <div>
-            <i class="ion-iphone"></i>
+            <span class="position">{{detailCtrl.member.position}}</span>
-            <span class="phone">777-777-7777</span>
           </div>
           <div>
             <i class="ion-email"></i>
-            <span class="email">{{detailCtrl.mail.email}}</span>
+            <span class="email">{{detailCtrl.member.email}}</span>
           </div>
         </div>
       </div>
 
       <div class="col-lg-4 col-md-6 col-xs-12 no-padding">
         <div class="contact-info position-address">
-          <div>
+          <span ng-repeat="l in detailCtrl.member.labels" class="tag label label-primary {{l}}">{{l}}</span>
-            <span class="position">{{detailCtrl.mail.position}}</span>
-          </div>
-          <div>
-            <span class="address">12 Nezavisimosti st. Vilnius, Lithuania</span>
-          </div>
         </div>
       </div>
     </div>
     <div class="row">
     </div>
+   
+    
     <div class="line"></div>
-    <div class="message-details">
+    
-      <span class="subject">{{detailCtrl.mail.subject}} </span>
-      <span class="date">• {{detailCtrl.mail.date | date : 'h:mm a MMMM d '}}</span>
-    </div>
-    <div class="line"></div>
-    <div ng-bind-html="detailCtrl.mail.body" class="message-body">
 
-    </div>
+    
-    <div class="line"></div>
-    <div class="attachment" ng-show="detailCtrl.mail.attachment">
-      <span class="file-links">1 Attachment - <a href>View</a> | <a href>Download</a></span>
-      <div>
-        <i class="file-icon ion-document"></i>
-        <span class="file-name">{{detailCtrl.mail.attachment}}</span>
-      </div>
-    </div>
-    <div class="line" ng-show="detailCtrl.mail.attachment"></div>
-    <div class="answer-container">
-      <button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button>
-      <button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><i class="ion-forward"></i>Forward</button>
-      <button type="button" class="btn btn-with-icon"><i class="ion-printer"></i>Print</button>
-      <button type="button" class="btn btn-with-icon"><i class="ion-android-remove-circle"></i>Spam</button>
-      <button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button>
-    </div>
 
   </div>
   <div ng-show="!detailCtrl.mail">

src/app/pages/teams/members/list/MembersListCtrl.js

@@ -9,11 +9,12 @@
     .controller('MembersListCtrl', MembersListCtrl);
 
   /** @ngInject */
-  function MembersListCtrl($stateParams,  mailMessages) {
+  function MembersListCtrl($scope, $stateParams,  membersList) {
     var vm = this;
-    console.log($stateParams.label);
+    vm.messages = ($stateParams.label == "list") ? membersList.getAllMessages() : membersList.getMembersByLabel($stateParams.label);
-    vm.messages = mailMessages.getMessagesByLabel($stateParams.label);
     vm.label = $stateParams.label;
+
+
   }
 
 })();

src/app/pages/teams/members/list/membersList.html

@@ -38,7 +38,7 @@
         <td  ui-sref="teams.members.detail({id: m.id, label: listCtrl.label})">
           <div class="name-container">
             <div><span class="name">{{m.name}}</span></div>
-            <div><span class="tag label label-primary {{m.tag}}">{{m.tag}}</span></div>
+            <div><span ng-repeat="l in m.labels" class="tag label label-primary {{l}}">{{l}}</span></div>
           </div>
         </td>
         <td  ui-sref="teams.members.detail({id: m.id, label: listCtrl.label})">
@@ -50,8 +50,8 @@
           <span>{{m.position}}</span>
         </td>
         <td>
-          <button class="btn btn-primary editable-table-button btn-xs" ng-click="rowform.$show()">Edit</button>
+          <button class="btn btn-primary editable-table-button btn-xs" ng-click="tabCtrl.showCompose(m.id)">Edit</button>
-        <button class="btn btn-danger editable-table-button btn-xs" ng-click="removeUser($index)">Delete</button>
+        <button class="btn btn-danger editable-table-button btn-xs" ng-click="removeMember(m.id)">Delete</button>
         </td>
       </tr>
     </table>

src/app/pages/teams/members/members.html

@@ -4,30 +4,20 @@
       <div class="letter-layout">
         <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
           <div class="text-center">
-            <button type="button" class="btn btn-default compose-button" ng-click="tabCtrl.showCompose('','','')">
+            <button type="button" class="btn btn-default compose-button" ng-click="tabCtrl.showCompose('')">
               New member
             </button>
           </div>
-          <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
-               ui-sref="teams.members.label({label: t.label})" ng-click="selectTab(t.label)">
-            {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
-          </div>
           <div class="labels">
             <div class="labels-title">
 
             </div>
+
             <div class="labels-container">
-              <div class="label-item">
+              <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="label-item"
-                <span class="tag label work">Work</span>
+               ui-sref="teams.members.label({label: t.label})" ng-click="selectTab(t.label)">
-              </div>
+                <span class="tag label {{t.label}}">{{t.name}}</span>
-              <div class="label-item">
+            
-                <span class="tag label family">Family</span>
-              </div>
-              <div class="label-item">
-                <span class="tag label friend">Friend</span>
-              </div>
-              <div class="label-item">
-                <span class="tag label study">Study</span>
               </div>
             </div>
           </div>

src/app/pages/teams/members/members.module.js

@@ -24,8 +24,8 @@
         }).state('teams.members.label', {
           url: '/:label',
           templateUrl: 'app/pages/teams/members/list/membersList.html',
-          title: 'Mail',
+          title: 'Members',
-          controller: "MailListCtrl",
+          controller: "MembersListCtrl",
           controllerAs: "listCtrl"
         }).state('teams.members.detail', {
           url: '/:label/:id',
@@ -34,7 +34,7 @@
           controller: "MemberDetailCtrl",
           controllerAs: "detailCtrl"
         });
-    $urlRouterProvider.when('/teams/members','/teams/members/inbox');
+    $urlRouterProvider.when('/teams/members','/teams/members/list');
   }
 
 })();

src/app/pages/teams/members/membersMessages.js

@@ -6,10 +6,10 @@
   'use strict';
 
   angular.module('BlurAdmin.pages.teams.members')
-    .service('membersMessages', membersMessages);
+    .service('membersList', membersList);
 
   /** @ngInject */
-  function membersMessages($sce) {
+  function membersList($sce, $stateParams) {
     var messages = [
       {
         "id": "4563faass",
@@ -22,7 +22,7 @@
         "attachment": "poem.txt",
         "position": "Great Employee",
         "tag": "friend",
-        "labels": ['inbox']
+        "labels": ['content']
       },
       {
         "id": "4563fdfvd",
@@ -36,7 +36,7 @@
         "email": "petraramsey@mail.com",
         "position": "Great Employee",
         "tag": "study",
-        "labels": ['inbox']
+        "labels": ['content']
       },
       {
         "id": "4563zxcss",
@@ -49,7 +49,7 @@
         "email": "petraramsey@mail.com",
         "position": "Great Employee",
         "tag": "work",
-        "labels": ['sent', 'important']
+        "labels": ['product', 'content']
       },
       {
         "id": "8955sddf",
@@ -63,7 +63,7 @@
         "position": "Graphical designer",
         "attachment": "design.psd",
         "tag": "work",
-        "labels": ['inbox']
+        "labels": ['shops']
       },
       {
         "id": "8955sdfcc",
@@ -75,7 +75,7 @@
         "email": "barlowshort@mail.com",
         "position": "Graphical designer",
         "tag": "study",
-        "labels": ['inbox']
+        "labels": ['innovation']
       },
       {
         "id": "8955asewf",
@@ -87,7 +87,7 @@
         "email": "barlowshort@mail.com",
         "position": "Graphical designer",
         "tag": "work",
-        "labels": ['inbox', 'important']
+        "labels": ['shops', 'media']
       },
       {
         "id": "2334uudsa",
@@ -104,7 +104,7 @@
         "position": "Technical Chef",
         "attachment": "file.doc",
         "tag": "family",
-        "labels": ['inbox', 'important']
+        "labels": ['hr', 'innovation']
       },
       {
         "id": "2334aefvv",
@@ -120,7 +120,7 @@
         "email": "schwart@mail.com",
         "position": "Technical Chef",
         "tag": "family",
-        "labels": ['inbox', 'important']
+        "labels": ['tech', 'product']
       },
       {
         "id": "2334cvdss",
@@ -135,7 +135,7 @@
         "email": "schwart@mail.com",
         "position": "Technical Chef",
         "tag": "study",
-        "labels": ['trash']
+        "labels": ['product']
       },
       {
         "id": "8223xzxfn",
@@ -148,7 +148,7 @@
         "email": "lakeishaphillips@mail.com",
         "position": "Mobile Developer",
         "tag": 'family',
-        "labels": ['trash']
+        "labels": ['tech']
       },
       {
         "id": "8223sdffn",
@@ -161,7 +161,7 @@
         "email": "lakeishaphillips@mail.com",
         "position": "Mobile Developer",
         "tag": 'family',
-        "labels": ['spam']
+        "labels": ['tech']
       },
       {
         "id": "9391xdsff",
@@ -174,7 +174,7 @@
         "email": "carlsongoodman@mail.com",
         "position": "Fullstack man",
         "tag": "study",
-        "labels": ['draft']
+        "labels": ['tech']
       },
       {
         "id": "8223xsdaa",
@@ -187,10 +187,10 @@
         "email": "lakeishaphillips@mail.com",
         "position": "Mobile Developer",
         "tag": "family",
-        "labels": ['draft']
+        "labels": ['hr']
       },
       {
-        "id": "9391xdsff",
+        "id": "9391xdsfd",
         "name": "Vlad Lugovsky",
         "subject": "What next",
         "date": "2015-03-31T11:52:58",
@@ -200,45 +200,48 @@
         "email": "carlsongoodman@mail.com",
         "position": "Fullstack man",
         "tag": "study",
-        "labels": ['sent']
+        "labels": ['hr']
       }
     ].sort(function (a, b) {
         if (a.date > b.date) return 1;
         if (a.date < b.date) return -1;
       }).reverse();
     var tabs = [{
-      label: 'inbox',
+      label: 'hr',
-      name: 'Inbox',
+      name: 'HR'
-      newMails: 7
     }, {
-      label: 'sent',
+      label: 'tech',
-      name: 'Sent Mail'
+      name: 'Tech'
     }, {
-      label: 'important',
+      label: 'product',
-      name: 'Important'
+      name: 'Product'
     }, {
-      label: 'draft',
+      label: 'finance',
-      name: 'Draft',
+      name: 'Finance'
-      newMails: 2
     }, {
-      label: 'spam',
+      label: 'media',
-      name: 'Spam'
+      name: 'Media'
     }, {
-      label: 'trash',
+      label: 'shops',
-      name: 'Trash'
+      name: 'Shops'
+    }, {
+      label: 'innovation',
+      name: 'Innovation'
     }];
 
     return{
       getTabs : function(){
         return tabs
       },
-      getMessagesByLabel : function(label){
+      getMembersByLabel : function(label){
-        console.log('label',$stateParams.label);
         return messages.filter(function(m){
           return m.labels.indexOf(label) != -1;
         });
       },
-      getMessageById : function(id){
+      getAllMessages : function(){
+        return messages;
+      },
+      getMemberById : function(id){
         return messages.filter(function(m){
           return m.id == id;
         })[0];

src/app/pages/teams/teams.module.js

@@ -17,7 +17,7 @@
           url: '/teams',
           template : '<ui-view  autoscroll="true" autoscroll-body-top></ui-view>',
           abstract: true,
-          title: 'teams',
+          title: 'Teams',
           sidebarMeta: {
             icon: 'ion-gear-a',
             order: 100,

src/sass/app/_email.scss

@@ -247,31 +247,50 @@
   }
 }
 
+.mail-panel .mail-navigation-container .tag {
+  font-size: 20px;
+    font-weight: 300;
+    width: 159px;
+    text-transform: capitalize;
+}
+
 .mail-panel .tag {
   text-transform: lowercase;
   font-size: 11px;
   font-weight: $font-light;
-  width: 45px;
   cursor: pointer;
   display: inline-block;
+  margin-right: 3px;
   &.label {
     padding: .2em .5em;
     border-radius: 2px;
     line-height: 1.1;
   }
-  &.work {
+  &.tech {
     background-color: $primary;
   }
 
-  &.study {
+  &.product {
     background-color: $warning;
   }
 
-  &.family {
+  &.finance {
     background-color: $success;
   }
 
-  &.friend {
+  &.media {
+    background-color: $danger;
+  }
+
+  &.hr {
+    background-color: $danger;
+  }
+
+  &.shops {
+    background-color: $danger;
+  }
+
+  &.innovation {
     background-color: $danger;
   }
 }
@@ -667,7 +686,7 @@
 .compose-footer {
   padding: 2px 4px;
   background-color: $mail-box;
-  .btn-send {
+  .btn-send, .btn-danger {
     background-color: $primary-light;
     color: white;
     padding: 2px 10px;
@@ -682,7 +701,6 @@
 
 .footer-controls {
   float: right;
-  margin: 6px;
 }
 
 .compose-footer-icon {
@@ -741,11 +759,9 @@
 }
 
 .modal .modal-dialog.modal-compose {
-  max-width: 398px;
+  display: inline-block;
-  position: fixed;
+  text-align: left;
-  bottom: 0;
+  vertical-align: middle;
-  right: 0;
-  max-height: 474px;
 
   .form-control, .bootstrap-tagsinput input {
     @include placeholderStyle($dropdown-text, 1);