Improve navbar with contextual actions

Victor Costa
1 parent 395512f0
Showing 6 changed files with 48 additions and 22 deletions Show diff stats
src/app/components/navbar/navbar.html
src/app/components/navbar/navbar.scss
src/app/components/noosfero-blocks/main-block/main-block.html
src/app/content-viewer/navbar-actions.html
src/app/index.route.js
src/app/main/main.html
@@ -40,6 +40,7 @@
           </ul>
         </li>
       </ul>
+      <div ui-view="actions"></div>
     </div>
   </div>
 </nav>
 .navbar {
  
   .container-fluid {
-    padding: 0 12%;
+    padding-right: 12%;
+    padding-left: 12%;
     @media (max-width: 978px) {
-      padding: 0 2%;
+      padding-right: 2%;
+      padding-left: 2%;
     }
  
     .navbar-brand {
-      padding: 9px 15px;
-
       .noosfero-logo img {
         height: 35px;
       }
@@ -26,10 +26,6 @@
           font-size: 1.7em;
         }
       }
-
-      .profile-menu a {
-        padding: 10px 15px;
-      }
     }
   }
 }
-<div ui-view autoscroll></div>
+<div ui-view="mainBlockContent" autoscroll></div>
@@ -0,0 +1,10 @@
+<ul class="nav navbar-nav navbar-right">
+  <li>
+    <a href="#" role="button">
+      <span class="fa-stack">
+        <i class="fa fa-file-o fa-stack-2x"></i>
+        <i class="fa fa-plus fa-stack-1x"></i>
+      </span> New Post
+    </a>
+  </li>
+</ul>
@@ -20,27 +20,46 @@
       })
       .state('main.profile', {
         url: '/:profile',
-        templateUrl: 'app/profile/profile.html',
-        controller: 'ProfileController',
-        controllerAs: 'vm',
-        abstract: true
+        abstract: true,
+        views: {
+          'content': {
+            templateUrl: 'app/profile/profile.html',
+            controller: 'ProfileController',
+            controllerAs: 'vm'
+          }
+        }
       })
       .state('main.profile.home', {
         url: '',
-        controller: 'ProfileHomeController',
-        controllerAs: 'vm'
+        views: {
+          'mainBlockContent': {
+            controller: 'ProfileHomeController',
+            controllerAs: 'vm'
+          }
+        }
       })
       .state('main.profile.info', {
         url: '^/profile/:profile',
-        templateUrl: 'app/profile-info/profile-info.html',
-        controller: 'ProfileInfoController',
-        controllerAs: 'vm'
+        views: {
+          'mainBlockContent': {
+            templateUrl: 'app/profile-info/profile-info.html',
+            controller: 'ProfileInfoController',
+            controllerAs: 'vm'
+          }
+        }
       })
       .state('main.profile.page', {
         url: '/{page:any}',
-        templateUrl: 'app/content-viewer/page.html',
-        controller: 'ContentViewerController',
-        controllerAs: 'vm'
+        views: {
+          'actions@main': {
+            templateUrl: 'app/content-viewer/navbar-actions.html'
+          },
+          'mainBlockContent': {
+            templateUrl: 'app/content-viewer/page.html',
+            controller: 'ContentViewerController',
+            controllerAs: 'vm'
+          }
+        }
       })
       .state('main.profile.settings', {
         url: '^/myprofile/:profile'
 <acme-navbar></acme-navbar>
-<div ui-view></div>
+<div ui-view="content"></div>
...	...	@@ -40,6 +40,7 @@
40	40	</ul>
41	41	</li>
42	42	</ul>
	43	+ <div ui-view="actions"></div>
43	44	</div>
44	45	</div>
45	46	</nav>
...	...
1	1	.navbar {
2	2
3	3	.container-fluid {
4		- padding: 0 12%;
	4	+ padding-right: 12%;
	5	+ padding-left: 12%;
5	6	@media (max-width: 978px) {
6		- padding: 0 2%;
	7	+ padding-right: 2%;
	8	+ padding-left: 2%;
7	9	}
8	10
9	11	.navbar-brand {
10		- padding: 9px 15px;
11		-
12	12	.noosfero-logo img {
13	13	height: 35px;
14	14	}
...	...	@@ -26,10 +26,6 @@
26	26	font-size: 1.7em;
27	27	}
28	28	}
29		-
30		- .profile-menu a {
31		- padding: 10px 15px;
32		- }
33	29	}
34	30	}
35	31	}
...	...
1		-<div ui-view autoscroll></div>
	1	+<div ui-view="mainBlockContent" autoscroll></div>
...	...
...	...	@@ -0,0 +1,10 @@
	1	+<ul class="nav navbar-nav navbar-right">
	2	+ <li>
	3	+ <a href="#" role="button">
	4	+ <span class="fa-stack">
	5	+ <i class="fa fa-file-o fa-stack-2x"></i>
	6	+ <i class="fa fa-plus fa-stack-1x"></i>
	7	+ </span> New Post
	8	+ </a>
	9	+ </li>
	10	+</ul>
...	...
...	...	@@ -20,27 +20,46 @@
20	20	})
21	21	.state('main.profile', {
22	22	url: '/:profile',
23		- templateUrl: 'app/profile/profile.html',
24		- controller: 'ProfileController',
25		- controllerAs: 'vm',
26		- abstract: true
	23	+ abstract: true,
	24	+ views: {
	25	+ 'content': {
	26	+ templateUrl: 'app/profile/profile.html',
	27	+ controller: 'ProfileController',
	28	+ controllerAs: 'vm'
	29	+ }
	30	+ }
27	31	})
28	32	.state('main.profile.home', {
29	33	url: '',
30		- controller: 'ProfileHomeController',
31		- controllerAs: 'vm'
	34	+ views: {
	35	+ 'mainBlockContent': {
	36	+ controller: 'ProfileHomeController',
	37	+ controllerAs: 'vm'
	38	+ }
	39	+ }
32	40	})
33	41	.state('main.profile.info', {
34	42	url: '^/profile/:profile',
35		- templateUrl: 'app/profile-info/profile-info.html',
36		- controller: 'ProfileInfoController',
37		- controllerAs: 'vm'
	43	+ views: {
	44	+ 'mainBlockContent': {
	45	+ templateUrl: 'app/profile-info/profile-info.html',
	46	+ controller: 'ProfileInfoController',
	47	+ controllerAs: 'vm'
	48	+ }
	49	+ }
38	50	})
39	51	.state('main.profile.page', {
40	52	url: '/{page:any}',
41		- templateUrl: 'app/content-viewer/page.html',
42		- controller: 'ContentViewerController',
43		- controllerAs: 'vm'
	53	+ views: {
	54	+ 'actions@main': {
	55	+ templateUrl: 'app/content-viewer/navbar-actions.html'
	56	+ },
	57	+ 'mainBlockContent': {
	58	+ templateUrl: 'app/content-viewer/page.html',
	59	+ controller: 'ContentViewerController',
	60	+ controllerAs: 'vm'
	61	+ }
	62	+ }
44	63	})
45	64	.state('main.profile.settings', {
46	65	url: '^/myprofile/:profile'
...	...
1	1	<acme-navbar></acme-navbar>
2		-<div ui-view></div>
	2	+<div ui-view="content"></div>
...	...