From 08013629f6ea3c38fa440d126f97d42fbddbbb2b Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Thu, 14 Jan 2016 11:28:06 -0300
Subject: [PATCH] Create directive for profile image

---
 src/app/components/navbar/navbar.html                                |  5 ++---
 src/app/components/navbar/navbar.scss                                | 12 +++++++++---
 src/app/components/noosfero-blocks/profile-image/profile-image.html  |  5 ++---
 src/app/components/noosfero/profile-image/profile-image.directive.js | 31 +++++++++++++++++++++++++++++++
 src/app/components/noosfero/profile-image/profile-image.html         |  2 ++
 5 files changed, 46 insertions(+), 9 deletions(-)
 create mode 100644 src/app/components/noosfero/profile-image/profile-image.directive.js
 create mode 100644 src/app/components/noosfero/profile-image/profile-image.html

diff --git a/src/app/components/navbar/navbar.html b/src/app/components/navbar/navbar.html
index 1b8de4d..62a9161 100644
--- a/src/app/components/navbar/navbar.html
+++ b/src/app/components/navbar/navbar.html
@@ -23,13 +23,12 @@
 
         <li class="dropdown profile-menu" ng-show="vm.currentUser" dropdown>
           <a href="#" class="dropdown-toggle" aria-expanded="false" dropdown-toggle>
-            <i ng-if="!vm.currentUser.person.image" class="fa fa-user"></i>
-            <img ng-if="vm.currentUser.person.image" ng-src="{{vm.currentUser.person.image.url}}" class="profile-image">
+            <noosfero-profile-image profile="vm.currentUser.person" class="profile-image"></noosfero-profile-image>
             <span ng-bind="vm.currentUser.person.name"></span> <b class="caret"></b>
           </a>
           <ul class="dropdown-menu" dropdown-menu>
               <li>
-                  <a ng-href="/{{vm.currentUser.person.identifier}}"><i class="fa fa-fw fa-user"></i> Profile</a>
+                  <a ui-sref="main.profile.info({profile: vm.currentUser.person.identifier})"><i class="fa fa-fw fa-user"></i> Profile</a>
               </li>
               <li>
                   <a target="_self" ng-href="/myprofile/{{vm.currentUser.person.identifier}}"><i class="fa fa-fw fa-gear"></i> Settings</a>
diff --git a/src/app/components/navbar/navbar.scss b/src/app/components/navbar/navbar.scss
index e379209..78d0251 100644
--- a/src/app/components/navbar/navbar.scss
+++ b/src/app/components/navbar/navbar.scss
@@ -16,9 +16,15 @@
 
     .navbar-nav {
       .profile-menu .profile-image {
-        height: 30px;
-        width: 30px;
-        @extend .img-circle;
+        img {
+          height: 30px;
+          width: 30px;
+          display: inline-block;
+          @extend .img-circle;
+        }
+        i {
+          font-size: 1.7em;
+        }
       }
 
       .profile-menu a {
diff --git a/src/app/components/noosfero-blocks/profile-image/profile-image.html b/src/app/components/noosfero-blocks/profile-image/profile-image.html
index 6fe5dff..affcee2 100644
--- a/src/app/components/noosfero-blocks/profile-image/profile-image.html
+++ b/src/app/components/noosfero-blocks/profile-image/profile-image.html
@@ -1,8 +1,7 @@
 <div class="center-block text-center">
   <div class="profile-image">
-    <a ng-href="/{{vm.owner.identifier}}">
-      <img ng-show="{{vm.owner.image}}" src="{{vm.owner.image.url}}" class="img-responsive">
-      <i ng-show="{{!vm.owner.image}}" class="fa fa-users fa-5x"></i>
+    <a ui-sref="main.profile.info({profile: vm.owner.identifier})">
+      <noosfero-profile-image profile="vm.owner"></noosfero-profile-image>
     </a>
   </div>
   <div class='admin-link'>
diff --git a/src/app/components/noosfero/profile-image/profile-image.directive.js b/src/app/components/noosfero/profile-image/profile-image.directive.js
new file mode 100644
index 0000000..cc04133
--- /dev/null
+++ b/src/app/components/noosfero/profile-image/profile-image.directive.js
@@ -0,0 +1,31 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('angular')
+    .directive('noosferoProfileImage', noosferoProfileImage);
+
+  /** @ngInject */
+  function noosferoProfileImage() {
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/noosfero/profile-image/profile-image.html',
+      scope: {
+        profile: '='
+      },
+      controller: ProfileImageController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+    return directive;
+
+    /** @ngInject */
+    function ProfileImageController() {
+      var vm = this;
+      vm.defaultIcon = 'fa-users';
+      if(vm.profile.type==='Person') vm.defaultIcon = 'fa-user';
+    }
+  }
+
+})();
diff --git a/src/app/components/noosfero/profile-image/profile-image.html b/src/app/components/noosfero/profile-image/profile-image.html
new file mode 100644
index 0000000..df143c4
--- /dev/null
+++ b/src/app/components/noosfero/profile-image/profile-image.html
@@ -0,0 +1,2 @@
+<img ng-if="vm.profile.image" ng-src="{{vm.profile.image.url}}" class="img-responsive">
+<i ng-if="!vm.profile.image" class="fa {{vm.defaultIcon}} fa-5x"></i>
--
libgit2 0.21.2