Download as
Browse Code »

Commit af427f2284eda52ed76f01dd785e2711153c9a53

Authored by Michel Felipe
1 parent dd6a4819
Exists in master and in 26 other branches activities_block, btn-new-post, cosmetic_changes_people_and_communities_block, edit-blocks, edit-header-footer, env-tags-block, forgot_password, layout_support, list_articles_on_blog, loading-indicator-component, login_modal, login_modal_improve, person_info_block, profile-article-resolvers, profile-blocks-sass, profile_description_block_component, profile_page_improvements, recent-activities, remove-article-confirmation, skin-small-change, staging, tags-block, theme-skin-yellow, translations, updated_signup_page, users_profile_page

Created SidebarSectionsComponent with a dinamic menu/submenu

Showing 7 changed files with 79 additions and 42 deletions   Show diff stats
src/app/layout/scss/_sidebar.scss
  Diff comments   View file @af427f2
@@ -305,3 +305,7 @@ @@ -305,3 +305,7 @@
305 text-align: center; 305 text-align: center;
306 } 306 }
307 } 307 }
  308 +
  309 +.submenu-count {
  310 + margin-right: 20px !important;
  311 +}
src/app/layout/sidebar/sidebar-sections.component.ts 0 → 100644
  Diff comments   View file @af427f2
@@ -0,0 +1,30 @@ @@ -0,0 +1,30 @@
  1 +import {Component, Inject, Input} from "ng-forward";
  2 +
  3 +@Component({
  4 + selector: 'sidebar-sections',
  5 + templateUrl: 'app/layout/sidebar/sidebar-sections.html'
  6 +})
  7 +
  8 +//@Inject('translateFilter')
  9 +export class SidebarSectionsComponent {
  10 +
  11 + @Input()
  12 + public items: any[] = [
  13 + {
  14 + title: 'Friends',
  15 + count: 0,
  16 + url: '#',
  17 + className: 'active',
  18 + icon: 'fa-users',
  19 + subitems: [
  20 + { title: 'Example' }
  21 + ]
  22 + }
  23 + ];
  24 +
  25 + addItem(item: any): SidebarSectionsComponent {
  26 + this.items.push(item);
  27 + return this;
  28 + }
  29 +
  30 +}
src/app/layout/sidebar/sidebar-sections.html 0 → 100644
  Diff comments   View file @af427f2
@@ -0,0 +1,21 @@ @@ -0,0 +1,21 @@
  1 +<ul class="nav nav-pills nav-stacked">
  2 + <li class="nav-header nav-header-first hidden-sm hidden-xs">
  3 + Navigation
  4 + </li>
  5 +
  6 + <li ng-click="widgetExpanded = !widgetExpanded" ng-repeat="item in ctrl.items" class="{{item.className}}">
  7 + <a href="{{item.url}}" class="dropdown-toggle">
  8 + <i class="fa {{item.icon}}"></i>
  9 + <span>{{item.title}}</span>
  10 + <span class="label label-primary label-circle pull-right" ng-class="{'submenu-count': item.subitems}" ng-show="item.count != undefined">{{item.count}}</span>
  11 + <i class="fa fa-angle-right drop-icon" ng-show="item.subitems"></i>
  12 + </a>
  13 + <ul class="submenu" ng-show="widgetExpanded && item.subitems">
  14 + <li ng-repeat="subitem in item.subitems">
  15 + <a href="{{subitem.url}}">
  16 + {{subitem.title}}
  17 + </a>
  18 + </li>
  19 + </ul>
  20 + </li>
  21 +</ul>
src/app/layout/sidebar/sidebar.component.spec.ts
  Diff comments   View file @af427f2
@@ -2,6 +2,7 @@ import {provide} from &#39;ng-forward&#39;; @@ -2,6 +2,7 @@ import {provide} from &#39;ng-forward&#39;;
2 import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper'; 2 import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
3 import {providers} from 'ng-forward/cjs/testing/providers'; 3 import {providers} from 'ng-forward/cjs/testing/providers';
4 import {SidebarComponent} from './sidebar.component'; 4 import {SidebarComponent} from './sidebar.component';
  5 +import {SidebarSectionsComponent} from './sidebar-sections.component';
5 import * as helpers from '../../../spec/helpers'; 6 import * as helpers from '../../../spec/helpers';
6 7
7 const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>'; 8 const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
@@ -41,6 +42,9 @@ describe(&#39;Sidebar Component&#39;, () =&gt; { @@ -41,6 +42,9 @@ describe(&#39;Sidebar Component&#39;, () =&gt; {
41 }), 42 }),
42 provide('SessionService', { 43 provide('SessionService', {
43 useValue: sessionService 44 useValue: sessionService
  45 + }),
  46 + provide('SidebarSectionsComponent', {
  47 + useValue: SidebarSectionsComponent
44 }) 48 })
45 ]; 49 ];
46 }); 50 });
@@ -73,4 +77,11 @@ describe(&#39;Sidebar Component&#39;, () =&gt; { @@ -73,4 +77,11 @@ describe(&#39;Sidebar Component&#39;, () =&gt; {
73 expect(helper.debugElement.query('div.user-box .name a').text()).toMatch(sessionService.currentUser().person.name); 77 expect(helper.debugElement.query('div.user-box .name a').text()).toMatch(sessionService.currentUser().person.name);
74 }); 78 });
75 79
  80 + it('show sidebar section with a menu itens', () => {
  81 +
  82 + notifyService.setVisibility(true);
  83 + expect(helper.debugElement.query('li.active a span').text()).toMatch('Friends');
  84 + expect(helper.debugElement.query('li.active .submenu li a').text()).toMatch('Example');
  85 + });
  86 +
76 }); 87 });
src/app/layout/sidebar/sidebar.component.ts
  Diff comments   View file @af427f2
1 import {Component, Inject, Input} from "ng-forward"; 1 import {Component, Inject, Input} from "ng-forward";
2 import {SidebarNotificationService} from "./sidebar.notification.service"; 2 import {SidebarNotificationService} from "./sidebar.notification.service";
3 import {SessionService} from '../../login/session.service'; 3 import {SessionService} from '../../login/session.service';
  4 +import {SidebarSectionsComponent} from './sidebar-sections.component';
4 5
5 @Component({ 6 @Component({
6 selector: 'sidebar', 7 selector: 'sidebar',
7 - templateUrl: 'app/layout/sidebar/sidebar.html' 8 + templateUrl: 'app/layout/sidebar/sidebar.html',
  9 + directives: [SidebarSectionsComponent]
8 }) 10 })
9 @Inject(SidebarNotificationService, SessionService) 11 @Inject(SidebarNotificationService, SessionService)
10 export class SidebarComponent { 12 export class SidebarComponent {
@@ -12,11 +14,15 @@ export class SidebarComponent { @@ -12,11 +14,15 @@ export class SidebarComponent {
12 @Input() 14 @Input()
13 private visible: boolean = false; 15 private visible: boolean = false;
14 16
  17 + @Input('showstatus')
  18 + public showStatus: boolean = false;
  19 +
15 @Input() 20 @Input()
16 public user: { name: string } = { 21 public user: { name: string } = {
17 name: '' 22 name: ''
18 }; 23 };
19 24
  25 +
20 constructor(private notificationService: SidebarNotificationService, private session: SessionService) { } 26 constructor(private notificationService: SidebarNotificationService, private session: SessionService) { }
21 27
22 ngOnInit() { 28 ngOnInit() {
src/app/layout/sidebar/sidebar.html
  Diff comments   View file @af427f2
@@ -16,50 +16,15 @@ @@ -16,50 +16,15 @@
16 <li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li> 16 <li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
17 </ul> 17 </ul>
18 </span> 18 </span>
19 - <span class="status">  
20 - <i class="fa fa-circle"></i> Online 19 + <span class="status" ng-show="ctrl.showStatus">
  20 + <i class="fa fa-circle"></i> {{ctrl.user.status}}
21 </span> 21 </span>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav"> 25 <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
26 - <ul class="nav nav-pills nav-stacked">  
27 - <li class="nav-header nav-header-first hidden-sm hidden-xs">  
28 - Navigation  
29 - </li>  
30 - <li class="active">  
31 - <a href="index.html">  
32 - <i class="fa fa-dashboard"></i>  
33 - <span>Dashboard</span>  
34 - <span class="label label-primary label-circle pull-right">28</span>  
35 - </a>  
36 - </li>  
37 - <li ng-click="widgetExpanded = !widgetExpanded">  
38 - <a href="#" class="dropdown-toggle">  
39 - <i class="fa fa-table"></i>  
40 - <span>Tables</span>  
41 - <i class="fa fa-angle-right drop-icon"></i>  
42 - </a>  
43 - <ul class="submenu" ng-show="widgetExpanded">  
44 - <li>  
45 - <a href="tables.html">  
46 - Simple  
47 - </a>  
48 - </li>  
49 - <li>  
50 - <a href="tables-advanced.html">  
51 - Advanced  
52 - </a>  
53 - </li>  
54 - <li>  
55 - <a href="users.html">  
56 - Users  
57 - </a>  
58 - </li>  
59 - </ul>  
60 - </li>  
61 - </ul>  
62 - </div> 26 + <sidebar-sections></sidebar-sections>
  27 + </div>
63 </div> 28 </div>
64 </section> 29 </section>
65 </div> 30 </div>
src/spec/helpers.ts
  Diff comments   View file @af427f2
@@ -73,6 +73,7 @@ class AngularServiceHookComponent { @@ -73,6 +73,7 @@ class AngularServiceHookComponent {
73 } 73 }
74 } 74 }
75 75
  76 +
76 /** 77 /**
77 * This helper class allows get angular services to be used in integration tests 78 * This helper class allows get angular services to be used in integration tests
78 * i.e: '$http', '$q', '$location', etc... 79 * i.e: '$http', '$q', '$location', etc...
@@ -82,10 +83,9 @@ export class AngularServiceFactory { @@ -82,10 +83,9 @@ export class AngularServiceFactory {
82 private fixtureComponentHookPoint: ComponentFixture; 83 private fixtureComponentHookPoint: ComponentFixture;
83 84
84 constructor() { 85 constructor() {
85 - this.fixtureComponentHookPoint = (<any>tcb)["create"](ComponentWithOutputCall); 86 + this.fixtureComponentHookPoint = (<any>tcb)["create"](AngularServiceHookComponent);
86 } 87 }
87 88
88 -  
89 getAngularService<T>(angularService: string) { 89 getAngularService<T>(angularService: string) {
90 return this.fixtureComponentHookPoint.debugElement.getLocal(angularService); 90 return this.fixtureComponentHookPoint.debugElement.getLocal(angularService);
91 } 91 }