From 9d600a9c0f6f72f7367adcc4064b0a04cc2faac4 Mon Sep 17 00:00:00 2001 From: Jerzy Czopek Date: Thu, 28 Jan 2016 22:29:59 +0100 Subject: [PATCH] fix(callout): updated CSS when separator used Adding `ms-Callout-action` class to buttons inside `uif-callout-actions` directive when `uif-action-text` or `uif-separator` used on main `uif-callout` directive. `ms-Callout-actionText` class is also added to `span` elements inside those buttons. Closes #122. Closes #146. --- CHANGELOG.md | 1 + .../callout/calloutDirective.spec.ts | 71 ++++++++++++++++++- src/components/callout/calloutDirective.ts | 37 +++++++++- src/components/callout/demo/index.html | 16 ++--- 4 files changed, 114 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 222db03..609d2c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ #### Fixes - **uif-callout**: fixed regression introduced in Angular 1.4.9 (by @jjczopek; closes [#139](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/139)) +- **uif-callout**: fixed CSS when separator used (by @jjczopek; closes [#122](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/122)) - **uif-contextual-menu**: fixed regression introduced in Angular 1.4.9 (by @s-KaiNet; closes [#139](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/139)) - **uif-toggle**: fixed regression introduced in Angular 1.4.9 (by @rolandoldengarm; closes [#139](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/139)) - **uif-searchbox**: fixed regression introduced in Angular 1.4.9 (by @andrewconnell; closes [#139](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/139)) diff --git a/src/components/callout/calloutDirective.spec.ts b/src/components/callout/calloutDirective.spec.ts index a3718e0..4042d5c 100644 --- a/src/components/callout/calloutDirective.spec.ts +++ b/src/components/callout/calloutDirective.spec.ts @@ -528,7 +528,7 @@ describe('calloutDirectives:', () => { 'Learn more' + ''); - scope = $rootScope; + scope = $rootScope.$new(); $compile(element)(scope); scope.$digest(); @@ -547,6 +547,75 @@ describe('calloutDirectives:', () => { expect(header[0].tagName === 'UIF-CALLOUT-HEADER').toBeTruthy(); }); + it('action buttons get proper CSS when uif-actiontext is used', inject(($compile: ng.ICompileService) => { + element = ng.element('' + + '' + + '' + + '' + + '' + + ''); + + $compile(element)(scope); + scope.$digest(); + + element = jQuery(element[0]); + + let buttons: JQuery = element.find('button.ms-Button'); + expect(buttons.length).toBe(2); + // expect(buttons).toHaveClass('ms-Callout-action'); + + let firstButton: JQuery = buttons.eq(0); + let secondButton: JQuery = buttons.eq(1); + + expect(firstButton).toHaveClass('ms-Callout-action'); + expect(secondButton).toHaveClass('ms-Callout-action'); + + + let firstButtonSpans: JQuery = firstButton.find('span'); + expect(firstButtonSpans.length).toBe(2); + expect(firstButtonSpans).toHaveClass('ms-Callout-actionText'); + + let secondButtonSpans: JQuery = secondButton.find('span'); + expect(secondButtonSpans.length).toBe(2); + expect(secondButtonSpans).toHaveClass('ms-Callout-actionText'); + })); + + it('action links get proper CSS when uif-actiontext is used', inject(($compile: ng.ICompileService) => { + element = ng.element('' + + '' + + '' + + '' + + 'Cancel' + + '' + + '' + + ''); + + $compile(element)(scope); + scope.$digest(); + + element = jQuery(element[0]); + + let actions: JQuery = element.find('a'); + expect(actions.length).toBe(1); + // expect(buttons).toHaveClass('ms-Callout-action'); + + let firstAction: JQuery = actions.eq(0); + + expect(firstAction).toHaveClass('ms-Callout-action'); + + let firstActionSpans: JQuery = firstAction.find('span'); + expect(firstActionSpans.length).toBe(2); + expect(firstActionSpans).toHaveClass('ms-Callout-actionText'); + + })); + + }); }); diff --git a/src/components/callout/calloutDirective.ts b/src/components/callout/calloutDirective.ts index 09a1f65..ab3a4e3 100644 --- a/src/components/callout/calloutDirective.ts +++ b/src/components/callout/calloutDirective.ts @@ -17,8 +17,8 @@ import {CalloutArrow} from './calloutArrowEnum'; * */ export class CalloutController { - public static $inject: string[] = ['$log']; - constructor(public $log: ng.ILogService) { } + public static $inject: string[] = ['$scope', '$log']; + constructor(public $scope: ICalloutScope, public $log: ng.ILogService) { } } /** @@ -115,12 +115,45 @@ export class CalloutActionsDirective implements ng.IDirective { public replace: boolean = false; public scope: boolean = false; public template: string = '
'; + public require: string = '^?uifCallout'; public static factory(): ng.IDirectiveFactory { const directive: ng.IDirectiveFactory = () => new CalloutActionsDirective(); return directive; } + public link(scope: ICalloutScope, instanceElement: ng.IAugmentedJQuery, attrs: any, calloutController: CalloutController): void { + + if (ng.isObject(calloutController)) { + calloutController.$scope.$watch('hasSeparator', (hasSeparator: boolean) => { + let actionChildren: JQuery = instanceElement.children().eq(0).children(); + + for (let buttonIndex: number = 0; buttonIndex < actionChildren.length; buttonIndex++) { + let action: JQuery = actionChildren.eq(buttonIndex); + // handle CSS on button + if (hasSeparator) { + action.addClass('ms-Callout-action'); + } else { + action.removeClass('ms-Callout-action'); + } + + // take care of span inside buttons + let actionSpans: JQuery = action.find('span'); + + for (let spanIndex: number = 0; spanIndex < actionSpans.length; spanIndex++) { + let actionSpan: JQuery = actionSpans.eq(spanIndex); + + if (hasSeparator) { + actionSpan.addClass('ms-Callout-actionText'); + } else { + actionSpan.removeClass('ms-Callout-actionText'); + } + } + } + }); + } + } + } /** diff --git a/src/components/callout/demo/index.html b/src/components/callout/demo/index.html index 82a36a4..922e206 100644 --- a/src/components/callout/demo/index.html +++ b/src/components/callout/demo/index.html @@ -120,13 +120,13 @@

Callout Demo | <uif-callout>

<uif-callout-header>All of your favorite people</uif-callout-header> <uif-callout-content>People automatically puts together all of the people you care most about in one place.</uif-callout-header> <uif-callout-actions> - <button class="ms-Callout-action ms-Button ms-Button--command"> - <span class="ms-Callout-actionText ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span> + <button class="ms-Button ms-Button--command"> + <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span> <span class="ms-Button-label">Save</span> </button> - <button class="ms-Callout-action ms-Button ms-Button--command"> + <button class="ms-Button ms-Button--command"> <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--x"></i></span> - <span class="ms-Callout-actionText ms-Button-label">Cancel</span> + <span class="ms-Button-label">Cancel</span> </button> </uif-callout-actions> </uif-callout> @@ -138,13 +138,13 @@

Callout Demo | <uif-callout>

All of your favorite people People automatically puts together all of the people you care most about in one place. - -