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 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 @@
  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 @@
  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 2 import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
3 3 import {providers} from 'ng-forward/cjs/testing/providers';
4 4 import {SidebarComponent} from './sidebar.component';
  5 +import {SidebarSectionsComponent} from './sidebar-sections.component';
5 6 import * as helpers from '../../../spec/helpers';
6 7  
7 8 const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
... ... @@ -41,6 +42,9 @@ describe(&#39;Sidebar Component&#39;, () =&gt; {
41 42 }),
42 43 provide('SessionService', {
43 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 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 1 import {Component, Inject, Input} from "ng-forward";
2 2 import {SidebarNotificationService} from "./sidebar.notification.service";
3 3 import {SessionService} from '../../login/session.service';
  4 +import {SidebarSectionsComponent} from './sidebar-sections.component';
4 5  
5 6 @Component({
6 7 selector: 'sidebar',
7   - templateUrl: 'app/layout/sidebar/sidebar.html'
  8 + templateUrl: 'app/layout/sidebar/sidebar.html',
  9 + directives: [SidebarSectionsComponent]
8 10 })
9 11 @Inject(SidebarNotificationService, SessionService)
10 12 export class SidebarComponent {
... ... @@ -12,11 +14,15 @@ export class SidebarComponent {
12 14 @Input()
13 15 private visible: boolean = false;
14 16  
  17 + @Input('showstatus')
  18 + public showStatus: boolean = false;
  19 +
15 20 @Input()
16 21 public user: { name: string } = {
17 22 name: ''
18 23 };
19 24  
  25 +
20 26 constructor(private notificationService: SidebarNotificationService, private session: SessionService) { }
21 27  
22 28 ngOnInit() {
... ...
src/app/layout/sidebar/sidebar.html
  Diff comments   View file @af427f2
... ... @@ -16,50 +16,15 @@
16 16 <li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
17 17 </ul>
18 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 21 </span>
22 22 </div>
23 23 </div>
24 24  
25 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 28 </div>
64 29 </section>
65 30 </div>
... ...
src/spec/helpers.ts
  Diff comments   View file @af427f2
... ... @@ -73,6 +73,7 @@ class AngularServiceHookComponent {
73 73 }
74 74 }
75 75  
  76 +
76 77 /**
77 78 * This helper class allows get angular services to be used in integration tests
78 79 * i.e: '$http', '$q', '$location', etc...
... ... @@ -82,10 +83,9 @@ export class AngularServiceFactory {
82 83 private fixtureComponentHookPoint: ComponentFixture;
83 84  
84 85 constructor() {
85   - this.fixtureComponentHookPoint = (<any>tcb)["create"](ComponentWithOutputCall);
  86 + this.fixtureComponentHookPoint = (<any>tcb)["create"](AngularServiceHookComponent);
86 87 }
87 88  
88   -
89 89 getAngularService<T>(angularService: string) {
90 90 return this.fixtureComponentHookPoint.debugElement.getLocal(angularService);
91 91 }
... ...