Create directive for profile image

Victor Costa
1 parent b67a56f1
Showing 5 changed files with 46 additions and 9 deletions Show diff stats
src/app/components/navbar/navbar.html
src/app/components/navbar/navbar.scss
src/app/components/noosfero-blocks/profile-image/profile-image.html
src/app/components/noosfero/profile-image/profile-image.directive.js
src/app/components/noosfero/profile-image/profile-image.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>
@@ -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 {
 <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'>
@@ -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';
+    }
+  }
+
+})();
@@ -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>
...	...	@@ -23,13 +23,12 @@
23	23
24	24	<li class="dropdown profile-menu" ng-show="vm.currentUser" dropdown>
25	25	<a href="#" class="dropdown-toggle" aria-expanded="false" dropdown-toggle>
26		- <i ng-if="!vm.currentUser.person.image" class="fa fa-user"></i>
27		- <img ng-if="vm.currentUser.person.image" ng-src="{{vm.currentUser.person.image.url}}" class="profile-image">
	26	+ <noosfero-profile-image profile="vm.currentUser.person" class="profile-image"></noosfero-profile-image>
28	27	<span ng-bind="vm.currentUser.person.name"></span> <b class="caret"></b>
29	28	</a>
30	29	<ul class="dropdown-menu" dropdown-menu>
31	30	<li>
32		- <a ng-href="/{{vm.currentUser.person.identifier}}"><i class="fa fa-fw fa-user"></i> Profile</a>
	31	+ <a ui-sref="main.profile.info({profile: vm.currentUser.person.identifier})"><i class="fa fa-fw fa-user"></i> Profile</a>
33	32	</li>
34	33	<li>
35	34	<a target="_self" ng-href="/myprofile/{{vm.currentUser.person.identifier}}"><i class="fa fa-fw fa-gear"></i> Settings</a>
...	...
...	...	@@ -16,9 +16,15 @@
16	16
17	17	.navbar-nav {
18	18	.profile-menu .profile-image {
19		- height: 30px;
20		- width: 30px;
21		- @extend .img-circle;
	19	+ img {
	20	+ height: 30px;
	21	+ width: 30px;
	22	+ display: inline-block;
	23	+ @extend .img-circle;
	24	+ }
	25	+ i {
	26	+ font-size: 1.7em;
	27	+ }
22	28	}
23	29
24	30	.profile-menu a {
...	...
1	1	<div class="center-block text-center">
2	2	<div class="profile-image">
3		- <a ng-href="/{{vm.owner.identifier}}">
4		- <img ng-show="{{vm.owner.image}}" src="{{vm.owner.image.url}}" class="img-responsive">
5		- <i ng-show="{{!vm.owner.image}}" class="fa fa-users fa-5x"></i>
	3	+ <a ui-sref="main.profile.info({profile: vm.owner.identifier})">
	4	+ <noosfero-profile-image profile="vm.owner"></noosfero-profile-image>
6	5	</a>
7	6	</div>
8	7	<div class='admin-link'>
...	...
...	...	@@ -0,0 +1,31 @@
	1	+(function() {
	2	+ 'use strict';
	3	+
	4	+ angular
	5	+ .module('angular')
	6	+ .directive('noosferoProfileImage', noosferoProfileImage);
	7	+
	8	+ /** @ngInject */
	9	+ function noosferoProfileImage() {
	10	+ var directive = {
	11	+ restrict: 'E',
	12	+ templateUrl: 'app/components/noosfero/profile-image/profile-image.html',
	13	+ scope: {
	14	+ profile: '='
	15	+ },
	16	+ controller: ProfileImageController,
	17	+ controllerAs: 'vm',
	18	+ bindToController: true
	19	+ };
	20	+
	21	+ return directive;
	22	+
	23	+ /** @ngInject */
	24	+ function ProfileImageController() {
	25	+ var vm = this;
	26	+ vm.defaultIcon = 'fa-users';
	27	+ if(vm.profile.type==='Person') vm.defaultIcon = 'fa-user';
	28	+ }
	29	+ }
	30	+
	31	+})();
...	...
...	...	@@ -0,0 +1,2 @@
	1	+<img ng-if="vm.profile.image" ng-src="{{vm.profile.image.url}}" class="img-responsive">
	2	+<i ng-if="!vm.profile.image" class="fa {{vm.defaultIcon}} fa-5x"></i>
...	...