From 139f17f3230455f87dee48e10314a82e7ba16ead Mon Sep 17 00:00:00 2001 From: Abner Oliveira Date: Mon, 13 Jun 2016 17:35:43 -0300 Subject: [PATCH] added a toolbar under the navbar to add layout change buttons --- src/app/admin/designMode.service.spec.ts | 31 ------------------------------- src/app/admin/designMode.service.ts | 23 ----------------------- src/app/admin/designModeToggler.component.spec.ts | 59 ----------------------------------------------------------- src/app/admin/designModeToggler.component.ts | 24 ------------------------ src/app/admin/designModeToggler.html | 8 -------- src/app/admin/layout-edit/designMode.service.spec.ts | 31 +++++++++++++++++++++++++++++++ src/app/admin/layout-edit/designMode.service.ts | 23 +++++++++++++++++++++++ src/app/admin/layout-edit/designModeToggler.component.spec.ts | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/admin/layout-edit/designModeToggler.component.ts | 24 ++++++++++++++++++++++++ src/app/admin/layout-edit/designModeToggler.html | 8 ++++++++ src/app/article/content-viewer/content-viewer.component.ts | 7 +++++-- src/app/layout/navbar/navbar.html | 27 ++++++++++++--------------- src/app/layout/navbar/navbar.ts | 2 +- src/app/layout/scss/_layout.scss | 9 +++++++++ src/app/layout/services/body-state-classes.service.spec.ts | 2 +- src/app/layout/services/body-state-classes.service.ts | 2 +- src/app/profile/profile-toolbar.component.ts | 21 +++++++++++++++++++++ src/app/profile/profile.component.ts | 17 ++++++++++++++++- src/app/profile/toolbar.html | 4 ++++ src/app/shared/components/interfaces.ts | 5 +++++ src/app/shared/components/permission/permission.directive.ts | 2 +- src/lib/ng-noosfero-api/http/profile.service.ts | 2 +- src/lib/ng-noosfero-api/interfaces/article.ts | 2 ++ src/lib/ng-noosfero-api/interfaces/modelWithPermissions.ts | 5 +++++ src/lib/ng-noosfero-api/interfaces/profile.ts | 2 ++ 25 files changed, 231 insertions(+), 168 deletions(-) delete mode 100644 src/app/admin/designMode.service.spec.ts delete mode 100644 src/app/admin/designMode.service.ts delete mode 100644 src/app/admin/designModeToggler.component.spec.ts delete mode 100644 src/app/admin/designModeToggler.component.ts delete mode 100644 src/app/admin/designModeToggler.html create mode 100644 src/app/admin/layout-edit/designMode.service.spec.ts create mode 100644 src/app/admin/layout-edit/designMode.service.ts create mode 100644 src/app/admin/layout-edit/designModeToggler.component.spec.ts create mode 100644 src/app/admin/layout-edit/designModeToggler.component.ts create mode 100644 src/app/admin/layout-edit/designModeToggler.html create mode 100644 src/app/profile/profile-toolbar.component.ts create mode 100644 src/app/profile/toolbar.html create mode 100644 src/app/shared/components/interfaces.ts create mode 100644 src/lib/ng-noosfero-api/interfaces/modelWithPermissions.ts diff --git a/src/app/admin/designMode.service.spec.ts b/src/app/admin/designMode.service.spec.ts deleted file mode 100644 index d67fe35..0000000 --- a/src/app/admin/designMode.service.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {DesignModeService} from './designMode.service'; - -describe('DesignMode Service', () => { - let service: DesignModeService; - - beforeEach(() => { - service = new DesignModeService(); - }); - - it('has the designModeOn equals false as default', () => { - expect(service.isInDesignMode()).toBeFalsy(); - }); - - it('allows set the designMode value', () => { - spyOn(service.onToggle, 'next').and.stub(); - service.setInDesignMode(true); - expect(service.isInDesignMode).toBeTruthy(); - }); - - it('emits the onToggle event when changing the designModeOn property', () => { - spyOn(service.onToggle, 'next').and.stub(); - service.setInDesignMode(true); - expect(service.onToggle.next).toHaveBeenCalled(); - }); - - it('does not emit onToggle event when there is no change on designModeOn property', () => { - spyOn(service.onToggle, 'next').and.stub(); - service.setInDesignMode(false); - expect(service.onToggle.next).not.toHaveBeenCalled(); - }); -}); \ No newline at end of file diff --git a/src/app/admin/designMode.service.ts b/src/app/admin/designMode.service.ts deleted file mode 100644 index 6600880..0000000 --- a/src/app/admin/designMode.service.ts +++ /dev/null @@ -1,23 +0,0 @@ -import {Component, Injectable, Output, EventEmitter} from 'ng-forward'; -import {BodyStateClassesService} from './../layout/services/body-state-classes.service'; - -@Injectable() -export class DesignModeService { - @Output() onToggle: EventEmitter = new EventEmitter(); - - private designModeOn: boolean = false; - - isInDesignMode(): boolean { - return this.designModeOn; - } - - setInDesignMode(value: boolean) { - if (this.designModeOn !== value) { - this.designModeOn = value; - this.onToggle.next(this.designModeOn); - } - } - - constructor() { - } -} \ No newline at end of file diff --git a/src/app/admin/designModeToggler.component.spec.ts b/src/app/admin/designModeToggler.component.spec.ts deleted file mode 100644 index e331f00..0000000 --- a/src/app/admin/designModeToggler.component.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -import {ComponentTestHelper, createClass} from './../../spec/component-test-helper'; -import * as helpers from './../../spec/helpers'; -import {DesignModeTogglerComponent} from './designModeToggler.component'; -import {DesignModeService} from './designMode.service'; - -describe('DesignModeToggler Component', () => { - const htmlTemplate: string = ''; - - let helper: ComponentTestHelper; - beforeEach(() => { - angular.mock.module('templates'); - angular.mock.module('ngSanitize'); - angular.mock.module('toggle-switch'); - }); - - let designModeService: DesignModeService; - beforeEach((done) => { - designModeService = new DesignModeService(); - let cls = createClass({ - template: htmlTemplate, - directives: [DesignModeTogglerComponent], - providers: [ - helpers.createProviderToValue('DesignModeService', designModeService) - ] - }); - helper = new ComponentTestHelper(cls, done); - }); - - it('changes css classes representing the switch is on or off', () => { - expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy(); - expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy(); - helper.component.inDesignMode = true; - helper.detectChanges(); - expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy(); - expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy(); - }); - - it('emits event with value "true" when changing inDesignMode to On', (done) => { - designModeService.onToggle.subscribe((designModeOn: boolean) => { - expect(designModeOn).toBeTruthy(); - done(); - }); - helper.component.inDesignMode = true; - helper.detectChanges(); - }); - - it('emits events with value "false" when changing inDesignMode to Off', (done) => { - helper.component.inDesignMode = true; - helper.detectChanges(); - - designModeService.onToggle.subscribe((designModeOn: boolean) => { - expect(designModeOn).toBeFalsy(); - done(); - }); - - helper.component.inDesignMode = false; - helper.detectChanges(); - }); -}); \ No newline at end of file diff --git a/src/app/admin/designModeToggler.component.ts b/src/app/admin/designModeToggler.component.ts deleted file mode 100644 index 160564c..0000000 --- a/src/app/admin/designModeToggler.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {Component, Inject} from 'ng-forward'; -import {DesignModeService} from './designMode.service'; -@Component({ - selector: 'noosfero-design-toggler', - templateUrl: 'app/admin/designModeToggler.html' -}) -@Inject(DesignModeService) -export class DesignModeTogglerComponent { - - icon: string = "  "; - - constructor(private designModeService: DesignModeService) { - } - - private _inDesignMode: boolean = false; - - get inDesignMode(): boolean { - return this.designModeService.isInDesignMode(); - }; - - set inDesignMode(value: boolean) { - this.designModeService.setInDesignMode(value); - }; -} \ No newline at end of file diff --git a/src/app/admin/designModeToggler.html b/src/app/admin/designModeToggler.html deleted file mode 100644 index 085482e..0000000 --- a/src/app/admin/designModeToggler.html +++ /dev/null @@ -1,8 +0,0 @@ - - \ No newline at end of file diff --git a/src/app/admin/layout-edit/designMode.service.spec.ts b/src/app/admin/layout-edit/designMode.service.spec.ts new file mode 100644 index 0000000..d67fe35 --- /dev/null +++ b/src/app/admin/layout-edit/designMode.service.spec.ts @@ -0,0 +1,31 @@ +import {DesignModeService} from './designMode.service'; + +describe('DesignMode Service', () => { + let service: DesignModeService; + + beforeEach(() => { + service = new DesignModeService(); + }); + + it('has the designModeOn equals false as default', () => { + expect(service.isInDesignMode()).toBeFalsy(); + }); + + it('allows set the designMode value', () => { + spyOn(service.onToggle, 'next').and.stub(); + service.setInDesignMode(true); + expect(service.isInDesignMode).toBeTruthy(); + }); + + it('emits the onToggle event when changing the designModeOn property', () => { + spyOn(service.onToggle, 'next').and.stub(); + service.setInDesignMode(true); + expect(service.onToggle.next).toHaveBeenCalled(); + }); + + it('does not emit onToggle event when there is no change on designModeOn property', () => { + spyOn(service.onToggle, 'next').and.stub(); + service.setInDesignMode(false); + expect(service.onToggle.next).not.toHaveBeenCalled(); + }); +}); \ No newline at end of file diff --git a/src/app/admin/layout-edit/designMode.service.ts b/src/app/admin/layout-edit/designMode.service.ts new file mode 100644 index 0000000..b548a59 --- /dev/null +++ b/src/app/admin/layout-edit/designMode.service.ts @@ -0,0 +1,23 @@ +import {Component, Injectable, Output, EventEmitter} from 'ng-forward'; +import {BodyStateClassesService} from '../../layout/services/body-state-classes.service'; + +@Injectable() +export class DesignModeService { + @Output() onToggle: EventEmitter = new EventEmitter(); + + private designModeOn: boolean = false; + + isInDesignMode(): boolean { + return this.designModeOn; + } + + setInDesignMode(value: boolean) { + if (this.designModeOn !== value) { + this.designModeOn = value; + this.onToggle.next(this.designModeOn); + } + } + + constructor() { + } +} \ No newline at end of file diff --git a/src/app/admin/layout-edit/designModeToggler.component.spec.ts b/src/app/admin/layout-edit/designModeToggler.component.spec.ts new file mode 100644 index 0000000..592357f --- /dev/null +++ b/src/app/admin/layout-edit/designModeToggler.component.spec.ts @@ -0,0 +1,59 @@ +import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper'; +import * as helpers from '../../../spec/helpers'; +import {DesignModeTogglerComponent} from './designModeToggler.component'; +import {DesignModeService} from './designMode.service'; + +describe('DesignModeToggler Component', () => { + const htmlTemplate: string = ''; + + let helper: ComponentTestHelper; + beforeEach(() => { + angular.mock.module('templates'); + angular.mock.module('ngSanitize'); + angular.mock.module('toggle-switch'); + }); + + let designModeService: DesignModeService; + beforeEach((done) => { + designModeService = new DesignModeService(); + let cls = createClass({ + template: htmlTemplate, + directives: [DesignModeTogglerComponent], + providers: [ + helpers.createProviderToValue('DesignModeService', designModeService) + ] + }); + helper = new ComponentTestHelper(cls, done); + }); + + it('changes css classes representing the switch is on or off', () => { + expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy(); + expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy(); + helper.component.inDesignMode = true; + helper.detectChanges(); + expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy(); + expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy(); + }); + + it('emits event with value "true" when changing inDesignMode to On', (done) => { + designModeService.onToggle.subscribe((designModeOn: boolean) => { + expect(designModeOn).toBeTruthy(); + done(); + }); + helper.component.inDesignMode = true; + helper.detectChanges(); + }); + + it('emits events with value "false" when changing inDesignMode to Off', (done) => { + helper.component.inDesignMode = true; + helper.detectChanges(); + + designModeService.onToggle.subscribe((designModeOn: boolean) => { + expect(designModeOn).toBeFalsy(); + done(); + }); + + helper.component.inDesignMode = false; + helper.detectChanges(); + }); +}); \ No newline at end of file diff --git a/src/app/admin/layout-edit/designModeToggler.component.ts b/src/app/admin/layout-edit/designModeToggler.component.ts new file mode 100644 index 0000000..aefde58 --- /dev/null +++ b/src/app/admin/layout-edit/designModeToggler.component.ts @@ -0,0 +1,24 @@ +import {Component, Inject} from 'ng-forward'; +import {DesignModeService} from './designMode.service'; +@Component({ + selector: 'noosfero-design-toggler', + templateUrl: 'app/admin/layout-edit/designModeToggler.html' +}) +@Inject(DesignModeService) +export class DesignModeTogglerComponent { + + icon: string = "  "; + + constructor(private designModeService: DesignModeService) { + } + + private _inDesignMode: boolean = false; + + get inDesignMode(): boolean { + return this.designModeService.isInDesignMode(); + }; + + set inDesignMode(value: boolean) { + this.designModeService.setInDesignMode(value); + }; +} \ No newline at end of file diff --git a/src/app/admin/layout-edit/designModeToggler.html b/src/app/admin/layout-edit/designModeToggler.html new file mode 100644 index 0000000..085482e --- /dev/null +++ b/src/app/admin/layout-edit/designModeToggler.html @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/src/app/article/content-viewer/content-viewer.component.ts b/src/app/article/content-viewer/content-viewer.component.ts index 233bfd5..4e4c18f 100644 --- a/src/app/article/content-viewer/content-viewer.component.ts +++ b/src/app/article/content-viewer/content-viewer.component.ts @@ -14,7 +14,7 @@ import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service" provide('profileService', { useClass: ProfileService }) ] }) -@Inject(ArticleService, ProfileService, "$log", "$stateParams") +@Inject(ArticleService, ProfileService, "$stateParams") export class ContentViewerComponent { @Input() @@ -23,7 +23,10 @@ export class ContentViewerComponent { @Input() profile: noosfero.Profile = null; - constructor(private articleService: ArticleService, private profileService: ProfileService, private $log: ng.ILogService, private $stateParams: angular.ui.IStateParamsService) { + constructor( + private articleService: ArticleService, + private profileService: ProfileService, + private $stateParams: angular.ui.IStateParamsService) { this.activate(); } diff --git a/src/app/layout/navbar/navbar.html b/src/app/layout/navbar/navbar.html index 8dcb32c..8d33274 100644 --- a/src/app/layout/navbar/navbar.html +++ b/src/app/layout/navbar/navbar.html @@ -26,16 +26,16 @@ @@ -43,12 +43,9 @@
-
    -
  • - -
    • -
+
+
\ No newline at end of file diff --git a/src/app/layout/navbar/navbar.ts b/src/app/layout/navbar/navbar.ts index fa9f57c..ef338ee 100644 --- a/src/app/layout/navbar/navbar.ts +++ b/src/app/layout/navbar/navbar.ts @@ -4,7 +4,7 @@ import {SessionService, AuthService, AuthController, AuthEvents} from "./../../l import {EnvironmentService} from "./../../../lib/ng-noosfero-api/http/environment.service"; import {SidebarNotificationService} from "../sidebar/sidebar.notification.service"; import {BodyStateClassesService} from '../services/body-state-classes.service'; -import {DesignModeTogglerComponent} from './../../admin/designModeToggler.component'; +import {DesignModeTogglerComponent} from './../../admin/layout-edit/designModeToggler.component'; import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from './../../shared/components/bootstrap-switcher/bootstrap-switcher.component'; @Component({ diff --git a/src/app/layout/scss/_layout.scss b/src/app/layout/scss/_layout.scss index 6f199b8..58e6438 100644 --- a/src/app/layout/scss/_layout.scss +++ b/src/app/layout/scss/_layout.scss @@ -47,4 +47,13 @@ body.noosfero-design-on { ul.nav > li.toggler-container { position: relative; padding-top: 12px; +} + +.noosfero-main-toolbar { + padding: 5px; + @include make-row(); + margin-left: 0px; + margin-right: 0px; + background-color: #eeeeee; + background: linear-gradient(top, #eeeeee 0%, #c9d4e4 100%); } \ No newline at end of file diff --git a/src/app/layout/services/body-state-classes.service.spec.ts b/src/app/layout/services/body-state-classes.service.spec.ts index ecd5343..a781af7 100644 --- a/src/app/layout/services/body-state-classes.service.spec.ts +++ b/src/app/layout/services/body-state-classes.service.spec.ts @@ -4,7 +4,7 @@ import {AuthService} from "./../../login/auth.service"; import {AuthEvents} from "./../../login/auth-events"; import {EventEmitter} from 'ng-forward'; -import {DesignModeService} from './../../admin/designMode.service'; +import {DesignModeService} from './../../admin/layout-edit/designMode.service'; describe("BodyStateClasses Service", () => { diff --git a/src/app/layout/services/body-state-classes.service.ts b/src/app/layout/services/body-state-classes.service.ts index 1d34d5f..f2be2a9 100644 --- a/src/app/layout/services/body-state-classes.service.ts +++ b/src/app/layout/services/body-state-classes.service.ts @@ -3,7 +3,7 @@ import {AuthEvents} from "../../login/auth-events"; import {AuthService} from "./../../login/auth.service"; import {HtmlUtils} from "../html-utils"; import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions'; -import {DesignModeService} from './../../admin/designMode.service'; +import {DesignModeService} from './../../admin/layout-edit/designMode.service'; export interface StartParams { skin?: string; diff --git a/src/app/profile/profile-toolbar.component.ts b/src/app/profile/profile-toolbar.component.ts new file mode 100644 index 0000000..fc0f334 --- /dev/null +++ b/src/app/profile/profile-toolbar.component.ts @@ -0,0 +1,21 @@ +import {Component, Inject, provide} from "ng-forward"; +import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service"; + +@Component({ + selector: "profile-toolbar", + templateUrl: "app/profile/toolbar.html", + providers: [ + provide('profileService', { useClass: ProfileService }) + ] +}) +@Inject(ProfileService) +export class ProfileToolbarComponent { + profile: noosfero.Profile; + parentId: number; + + constructor(profileService: ProfileService) { + profileService.getCurrentProfile().then((profile: noosfero.Profile) => { + this.profile = profile; + }); + } +} diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts index ffabfb0..a3bc9ab 100644 --- a/src/app/profile/profile.component.ts +++ b/src/app/profile/profile.component.ts @@ -10,7 +10,7 @@ import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service"; import {NotificationService} from "../shared/services/notification.service"; import {MyProfileComponent} from "./myprofile.component"; import {ProfileActionsComponent} from "./profile-actions.component"; - +import {ProfileToolbarComponent} from "./profile-toolbar.component"; /** * @ngdoc controller * @name profile.Profile @@ -42,6 +42,11 @@ import {ProfileActionsComponent} from "./profile-actions.component"; templateUrl: "app/profile/navbar-actions.html", controller: ProfileActionsComponent, controllerAs: "vm" + }, + "toolbar@main": { + templateUrl: "app/profile/toolbar.html", + controller: ProfileToolbarComponent, + controllerAs: "vm" } } }, @@ -54,6 +59,11 @@ import {ProfileActionsComponent} from "./profile-actions.component"; templateUrl: "app/profile/navbar-actions.html", controller: ProfileActionsComponent, controllerAs: "vm" + }, + "toolbar@main": { + templateUrl: "app/profile/toolbar.html", + controller: ProfileToolbarComponent, + controllerAs: "vm" } } }, @@ -106,6 +116,11 @@ import {ProfileActionsComponent} from "./profile-actions.component"; templateUrl: "app/article/content-viewer/navbar-actions.html", controller: ContentViewerActionsComponent, controllerAs: "vm" + }, + "toolbar@main": { + templateUrl: "app/profile/toolbar.html", + controller: ProfileToolbarComponent, + controllerAs: "vm" } } } diff --git a/src/app/profile/toolbar.html b/src/app/profile/toolbar.html new file mode 100644 index 0000000..367573d --- /dev/null +++ b/src/app/profile/toolbar.html @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/src/app/shared/components/interfaces.ts b/src/app/shared/components/interfaces.ts new file mode 100644 index 0000000..bcce69c --- /dev/null +++ b/src/app/shared/components/interfaces.ts @@ -0,0 +1,5 @@ + + +export interface IComponentWithPermissions { + permissions: () => string[]; +} \ No newline at end of file diff --git a/src/app/shared/components/permission/permission.directive.ts b/src/app/shared/components/permission/permission.directive.ts index 2917212..3eeee20 100644 --- a/src/app/shared/components/permission/permission.directive.ts +++ b/src/app/shared/components/permission/permission.directive.ts @@ -6,7 +6,7 @@ import {Directive, Inject, Input} from "ng-forward"; @Inject('$attrs', '$scope', '$element') export class PermissionDirective { - constructor($attrs: ng.IAttributes, $scope: ng.IScope, $element: any) { + constructor($attrs: ng.IAttributes, $scope: ng.IScope, $element: ng.IAugmentedJQuery) { $scope.$watch($attrs['permission'], () => { let permissions = $scope.$eval($attrs['permission']); let permissionAction = $attrs['permissionAction']; diff --git a/src/lib/ng-noosfero-api/http/profile.service.ts b/src/lib/ng-noosfero-api/http/profile.service.ts index 4e9bd64..cd19c18 100644 --- a/src/lib/ng-noosfero-api/http/profile.service.ts +++ b/src/lib/ng-noosfero-api/http/profile.service.ts @@ -22,7 +22,7 @@ export class ProfileService { this._currentProfilePromise.resolve(profile); } - setCurrentProfileByIdentifier(identifier: string) { + setCurrentProfileByIdentifier(identifier: string): ng.IPromise { this.resetCurrentProfile(); return this.getByIdentifier(identifier).then((profile: noosfero.Profile) => { this.setCurrentProfile(profile); diff --git a/src/lib/ng-noosfero-api/interfaces/article.ts b/src/lib/ng-noosfero-api/interfaces/article.ts index 7c318ea..81c4b89 100644 --- a/src/lib/ng-noosfero-api/interfaces/article.ts +++ b/src/lib/ng-noosfero-api/interfaces/article.ts @@ -14,5 +14,7 @@ namespace noosfero { start_date: string; end_date: string; accept_comments: boolean; + + permissions: string[]; } } diff --git a/src/lib/ng-noosfero-api/interfaces/modelWithPermissions.ts b/src/lib/ng-noosfero-api/interfaces/modelWithPermissions.ts new file mode 100644 index 0000000..b5a91b5 --- /dev/null +++ b/src/lib/ng-noosfero-api/interfaces/modelWithPermissions.ts @@ -0,0 +1,5 @@ +namespace noosfero { + export interface ModelWithPermissions { + permissions: string[]; + } +} \ No newline at end of file diff --git a/src/lib/ng-noosfero-api/interfaces/profile.ts b/src/lib/ng-noosfero-api/interfaces/profile.ts index 84a4649..7a317c8 100644 --- a/src/lib/ng-noosfero-api/interfaces/profile.ts +++ b/src/lib/ng-noosfero-api/interfaces/profile.ts @@ -78,5 +78,7 @@ namespace noosfero { * @returns {string} The Profile footer */ custom_footer: string; + + permissions: string[]; } } -- libgit2 0.21.2