Download as
Browse Code »

Commit 7e4cecee778feb5e4c5b6458cd2dfc2b9d97e91d

Authored by Michel Felipe
1 parent af427f22
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

Added @ngdoc documentation and refactor the SidebarSection component

Showing 8 changed files with 217 additions and 66 deletions   Show diff stats
src/app/layout/services/body-state-classes.service.ts
  Diff comments   View file @7e4cece
@@ -17,6 +17,9 @@ export interface StartParams { @@ -17,6 +17,9 @@ export interface StartParams {
17 * Route States: 17 * Route States:
18 * - noosfero-route-main 18 * - noosfero-route-main
19 * - noosfero-route-main.profile.info 19 * - noosfero-route-main.profile.info
  20 + *
  21 + * Show the all content in full mode:
  22 + * - full-content
20 */ 23 */
21 @Injectable() 24 @Injectable()
22 @Inject("$rootScope", "$document", "$state", AuthService) 25 @Inject("$rootScope", "$document", "$state", AuthService)
src/app/layout/sidebar/sidebar-section.component.ts 0 → 100644
  Diff comments   View file @7e4cece
@@ -0,0 +1,126 @@ @@ -0,0 +1,126 @@
  1 +import {Component, Input} from "ng-forward";
  2 +
  3 +@Component({
  4 + selector: 'sidebar-section',
  5 + templateUrl: 'app/layout/sidebar/sidebar-section.html'
  6 +})
  7 +/**
  8 + * @ngdoc object
  9 + * @name sidebar.SidebarSectionComponent
  10 + * @description
  11 + * This is a widget to render sections to
  12 + * SidebarComponent.
  13 + *
  14 + * <b>Usage example:</b>
  15 + * @example
  16 + * <pre>
  17 + * let section: SidebarSectionComponent = new SidebarSectionComponent('MySection');
  18 + * section.addItem({
  19 + * title: 'Friends',
  20 + * count: 0,
  21 + * url: '#',
  22 + * className: 'active',
  23 + * icon: 'fa-users', //A font-awesome icon class
  24 + * subitems: [
  25 + * { title: 'Example' }
  26 + * ]
  27 + * });
  28 + * </pre>
  29 + */
  30 +export class SidebarSectionComponent {
  31 +
  32 + /**
  33 + * @ngdoc property
  34 + * @name name
  35 + * @propertyOf sidebar.SidebarComponent
  36 + * @description
  37 + * The name of the section
  38 + */
  39 + @Input()
  40 + public name: string;
  41 +
  42 + /**
  43 + * @ngdoc property
  44 + * @name items
  45 + * @propertyOf sidebar.SidebarComponent
  46 + * @description
  47 + * Array of items to render into this sidebar menu
  48 + */
  49 + @Input()
  50 + public items: any[] = [
  51 + {
  52 + title: 'Friends',
  53 + count: 0,
  54 + url: '#',
  55 + className: 'active',
  56 + icon: 'fa-users'
  57 + }
  58 + ];
  59 +
  60 + /**
  61 + * @ngdoc method
  62 + * @name constructor
  63 + * @methodOf sidebar.SidebarSectionComponent
  64 + * @param {string} name The name of the section (optional)
  65 + * @description
  66 + * The constructor for this component. The name of section
  67 + * can be assigned here, optionally
  68 + */
  69 + constructor(name?: string) {
  70 + this.name = name;
  71 + }
  72 +
  73 + /**
  74 + * @ngdoc method
  75 + * @name addItem
  76 + * @methodOf sidebar.SidebarSectionComponent
  77 + * @param {Object} item Literal object with properties to render a menu item
  78 + * @returns {SidebarSectionComponent} This own component type, using the "Fluent Interface" pattern
  79 + * @description
  80 + * Use this method to add new items for a section instance
  81 + *
  82 + * <b>Usage example:</b>
  83 + * @example
  84 + * <pre>
  85 + * section.addItem({
  86 + * title: 'Friends',
  87 + * count: 0,
  88 + * url: '#',
  89 + * className: 'active',
  90 + * icon: 'fa-users', //A font-awesome icon class
  91 + * subitems: [
  92 + * { title: 'Example' } //A subitem literal object
  93 + * ]
  94 + * });
  95 + * </pre>
  96 + */
  97 + addItem(item: any): SidebarSectionComponent {
  98 + this.items.push(item);
  99 + return this;
  100 + }
  101 +
  102 + /**
  103 + * @ngdoc method
  104 + * @name setName
  105 + * @methodOf sidebar.SidebarSectionComponent
  106 + * @param {string} name The name of the section
  107 + * @returns {SidebarSectionComponent} This own component type, using the "Fluent Interface" pattern
  108 + * @description
  109 + * Change the name of the section assigned on constructor
  110 + *
  111 + * <b>Usage example:</b>
  112 + * @example
  113 + * <pre>
  114 + * section.setName('MyAnotherSection')
  115 + * .addItem({
  116 + * //Item here
  117 + * ...
  118 + * });
  119 + * </pre>
  120 + */
  121 + setName(name: string): SidebarSectionComponent {
  122 + this.name = name;
  123 + return this;
  124 + }
  125 +
  126 +}
src/app/layout/sidebar/sidebar-section.html 0 → 100644
  Diff comments   View file @7e4cece
@@ -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 + {{ctrl.name}}
  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-sections.component.ts
View file @af427f2
@@ -1,30 +0,0 @@ @@ -1,30 +0,0 @@
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
View file @af427f2
@@ -1,21 +0,0 @@ @@ -1,21 +0,0 @@
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 @7e4cece
@@ -2,7 +2,7 @@ import {provide} from &#39;ng-forward&#39;; @@ -2,7 +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 {SidebarSectionComponent} from './sidebar-section.component';
6 import * as helpers from '../../../spec/helpers'; 6 import * as helpers from '../../../spec/helpers';
7 7
8 const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>'; 8 const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
@@ -43,8 +43,8 @@ describe(&#39;Sidebar Component&#39;, () =&gt; { @@ -43,8 +43,8 @@ describe(&#39;Sidebar Component&#39;, () =&gt; {
43 provide('SessionService', { 43 provide('SessionService', {
44 useValue: sessionService 44 useValue: sessionService
45 }), 45 }),
46 - provide('SidebarSectionsComponent', {  
47 - useValue: SidebarSectionsComponent 46 + provide('SidebarSectionComponent', {
  47 + useValue: SidebarSectionComponent
48 }) 48 })
49 ]; 49 ];
50 }); 50 });
@@ -81,7 +81,6 @@ describe(&#39;Sidebar Component&#39;, () =&gt; { @@ -81,7 +81,6 @@ describe(&#39;Sidebar Component&#39;, () =&gt; {
81 81
82 notifyService.setVisibility(true); 82 notifyService.setVisibility(true);
83 expect(helper.debugElement.query('li.active a span').text()).toMatch('Friends'); 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 }); 84 });
86 85
87 }); 86 });
src/app/layout/sidebar/sidebar.component.ts
  Diff comments   View file @7e4cece
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 +import {SidebarSectionComponent} from './sidebar-section.component';
5 5
6 @Component({ 6 @Component({
7 selector: 'sidebar', 7 selector: 'sidebar',
8 templateUrl: 'app/layout/sidebar/sidebar.html', 8 templateUrl: 'app/layout/sidebar/sidebar.html',
9 - directives: [SidebarSectionsComponent] 9 + directives: [SidebarSectionComponent]
10 }) 10 })
11 @Inject(SidebarNotificationService, SessionService) 11 @Inject(SidebarNotificationService, SessionService)
  12 +/**
  13 + * @ngdoc object
  14 + * @name sidebar.SidebarComponent
  15 + * @requires [SidebarNotificationService, SessionService]
  16 + * @description
  17 + * This is a widget to a sidebar with visible control.
  18 + * Needs a SidebarSectionComponent to show sections/items/subitems
  19 + * menu
  20 + *
  21 + * <b>Usage example:</b>
  22 + * @example
  23 + * <pre>
  24 + * let sidebar: SidebarComponent = new SidebarComponent(SidebarNotificationService, SessionService);
  25 + * sidebar.visible = true;
  26 + * </pre>
  27 + */
12 export class SidebarComponent { 28 export class SidebarComponent {
13 29
  30 + /**
  31 + * @ngdoc property
  32 + * @name visible
  33 + * @propertyOf sidebar.SidebarComponent
  34 + * @description
  35 + * Controls if this component is show/hide
  36 + */
14 @Input() 37 @Input()
15 private visible: boolean = false; 38 private visible: boolean = false;
16 39
  40 + /**
  41 + * @ngdoc property
  42 + * @name showStatus
  43 + * @propertyOf sidebar.SidebarComponent
  44 + * @description
  45 + * Controls the show/hide state of the circle user status
  46 + */
17 @Input('showstatus') 47 @Input('showstatus')
18 public showStatus: boolean = false; 48 public showStatus: boolean = false;
19 49
  50 + /**
  51 + * @ngdoc property
  52 + * @name user
  53 + * @propertyOf sidebar.SidebarComponent
  54 + * @description
  55 + * The user data to show into sidebar
  56 + */
20 @Input() 57 @Input()
21 public user: { name: string } = { 58 public user: { name: string } = {
22 name: '' 59 name: ''
23 }; 60 };
24 61
25 - 62 + /**
  63 + * @ngdoc method
  64 + * @name constructor
  65 + * @methodOf sidebar.SidebarComponent
  66 + * @param {SidebarNotificationService} notificationService The service that emmits events to show/hide this component
  67 + * @param {SessionService} session The service that loads the user data when user is logged
  68 + * @description
  69 + * The constructor for this component. Loads the dependencies services
  70 + */
26 constructor(private notificationService: SidebarNotificationService, private session: SessionService) { } 71 constructor(private notificationService: SidebarNotificationService, private session: SessionService) { }
27 72
  73 + /**
  74 + * @ngdoc method
  75 + * @name ngOnInit
  76 + * @methodOf sidebar.SidebarComponent
  77 + * @description
  78 + * Check the initial visibility when this component is loaded
  79 + */
28 ngOnInit() { 80 ngOnInit() {
29 81
30 let userData: any = this.session.currentUser(); 82 let userData: any = this.session.currentUser();
@@ -38,6 +90,14 @@ export class SidebarComponent { @@ -38,6 +90,14 @@ export class SidebarComponent {
38 }); 90 });
39 } 91 }
40 92
  93 + /**
  94 + * @ngdoc method
  95 + * @name isVisible
  96 + * @methodOf sidebar.SidebarComponent
  97 + * @returns {boolean} True, whether this component is visible, otherwise returns false
  98 + * @description
  99 + * Verify whether sidebar is visible or not
  100 + */
41 isVisible(): boolean { 101 isVisible(): boolean {
42 return <boolean>this.visible; 102 return <boolean>this.visible;
43 } 103 }
src/app/layout/sidebar/sidebar.html
  Diff comments   View file @7e4cece
@@ -7,14 +7,7 @@ @@ -7,14 +7,7 @@
7 <span class="name"> 7 <span class="name">
8 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 8 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
9 {{ctrl.user.name}} 9 {{ctrl.user.name}}
10 - <i class="fa fa-angle-down"></i>  
11 </a> 10 </a>
12 - <ul class="dropdown-menu">  
13 - <li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li>  
14 - <li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>  
15 - <li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>  
16 - <li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>  
17 - </ul>  
18 </span> 11 </span>
19 <span class="status" ng-show="ctrl.showStatus"> 12 <span class="status" ng-show="ctrl.showStatus">
20 <i class="fa fa-circle"></i> {{ctrl.user.status}} 13 <i class="fa fa-circle"></i> {{ctrl.user.status}}
@@ -23,7 +16,7 @@ @@ -23,7 +16,7 @@
23 </div> 16 </div>
24 17
25 <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav"> 18 <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
26 - <sidebar-sections></sidebar-sections> 19 + <sidebar-section [name]='Navigation'></sidebar-section>
27 </div> 20 </div>
28 </div> 21 </div>
29 </section> 22 </section>