Display profile information in navbar

Victor Costa
1 parent f9f35297
Showing 3 changed files with 41 additions and 3 deletions Show diff stats
gulp/server.js
src/app/components/navbar/navbar.html
src/app/components/navbar/navbar.scss
@@ -29,6 +29,7 @@ function browserSyncInit(baseDir, browser) {
   server.middleware = [proxyMiddleware('http://localhost:3000/api', {changeOrigin:true}),
                        proxyMiddleware('http://localhost:3000/myprofile', {changeOrigin:true}),
                        proxyMiddleware('http://localhost:3000/designs', {changeOrigin:true}),
+                       proxyMiddleware('http://localhost:3000/image_uploads', {changeOrigin:true}),
                        proxyMiddleware('http://localhost:3000/images', {changeOrigin:true})];
                       //  proxyMiddleware('http://localhost:3000/assets', {changeOrigin:true})];
  
@@ -12,7 +12,29 @@
       </ul>
  
       <ul class="nav navbar-nav navbar-right">
-        <li><a ng-href="#" ng-show="!vm.currentUser" ng-click="vm.openLogin()">Login</a></li>
+        <li ng-show="!vm.currentUser">
+          <a ng-href="#" ng-click="vm.openLogin()">Login</a>
+        </li>
+
+        <li class="dropdown profile-menu" ng-show="vm.currentUser" dropdown>
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" 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">
+            <span ng-bind="vm.currentUser.person.name"></span> <b class="caret"></b>
+          </a>
+          <ul class="dropdown-menu" dropdown-menu>
+              <li>
+                  <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
+              </li>
+              <li>
+                  <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
+              </li>
+              <li class="divider"></li>
+              <li>
+                  <a href="#" ng-click="vm.logout()"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
+              </li>
+          </ul>
+        </li>
       </ul>
     </div>
   </div>
-.noosfero-logo img {
-  height: 35px;
+.navbar {
+
+  .noosfero-logo img {
+    height: 35px;
+  }
+
+  .navbar-nav {
+    .profile-menu .profile-image {
+      height: 30px;
+      width: 30px;
+      @extend .img-circle;
+    }
+
+    .profile-menu a {
+      padding: 10px 15px;
+    }
+  }
 }
...	...	@@ -29,6 +29,7 @@ function browserSyncInit(baseDir, browser) {
29	29	server.middleware = [proxyMiddleware('http://localhost:3000/api', {changeOrigin:true}),
30	30	proxyMiddleware('http://localhost:3000/myprofile', {changeOrigin:true}),
31	31	proxyMiddleware('http://localhost:3000/designs', {changeOrigin:true}),
	32	+ proxyMiddleware('http://localhost:3000/image_uploads', {changeOrigin:true}),
32	33	proxyMiddleware('http://localhost:3000/images', {changeOrigin:true})];
33	34	// proxyMiddleware('http://localhost:3000/assets', {changeOrigin:true})];
34	35
...	...
...	...	@@ -12,7 +12,29 @@
12	12	</ul>
13	13
14	14	<ul class="nav navbar-nav navbar-right">
15		- <li><a ng-href="#" ng-show="!vm.currentUser" ng-click="vm.openLogin()">Login</a></li>
	15	+ <li ng-show="!vm.currentUser">
	16	+ <a ng-href="#" ng-click="vm.openLogin()">Login</a>
	17	+ </li>
	18	+
	19	+ <li class="dropdown profile-menu" ng-show="vm.currentUser" dropdown>
	20	+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" dropdown-toggle>
	21	+ <i ng-if="!vm.currentUser.person.image" class="fa fa-user"></i>
	22	+ <img ng-if="vm.currentUser.person.image" ng-src="{{vm.currentUser.person.image.url}}" class="profile-image">
	23	+ <span ng-bind="vm.currentUser.person.name"></span> <b class="caret"></b>
	24	+ </a>
	25	+ <ul class="dropdown-menu" dropdown-menu>
	26	+ <li>
	27	+ <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
	28	+ </li>
	29	+ <li>
	30	+ <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
	31	+ </li>
	32	+ <li class="divider"></li>
	33	+ <li>
	34	+ <a href="#" ng-click="vm.logout()"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
	35	+ </li>
	36	+ </ul>
	37	+ </li>
16	38	</ul>
17	39	</div>
18	40	</div>
...	...
1		-.noosfero-logo img {
2		- height: 35px;
	1	+.navbar {
	2	+
	3	+ .noosfero-logo img {
	4	+ height: 35px;
	5	+ }
	6	+
	7	+ .navbar-nav {
	8	+ .profile-menu .profile-image {
	9	+ height: 30px;
	10	+ width: 30px;
	11	+ @extend .img-circle;
	12	+ }
	13	+
	14	+ .profile-menu a {
	15	+ padding: 10px 15px;
	16	+ }
	17	+ }
3	18	}
...	...