diff --git a/projects/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.css b/projects/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.css index 59cd06b25..e69de29bb 100644 --- a/projects/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.css +++ b/projects/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.css @@ -1,4 +0,0 @@ -nx-indicator { - position: absolute; - margin-left: 8px; -} \ No newline at end of file diff --git a/projects/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.html b/projects/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.html index a3289f652..9cf798053 100644 --- a/projects/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.html +++ b/projects/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.html @@ -5,7 +5,7 @@ {{action.label}} - {{ getIndicatorText(action.notificationCount) }} diff --git a/projects/ng-aquila/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.css b/projects/ng-aquila/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.css index 107f1e5df..a3523b92d 100644 --- a/projects/ng-aquila/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.css +++ b/projects/ng-aquila/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.css @@ -4,14 +4,3 @@ margin: 0 -8px; width: 100%; } - -nx-indicator { - position: absolute; - left: 50%; - bottom: 50%; -} - -nx-indicator:empty { - left: calc(50% + 2px); - bottom: calc(50% + 2px); -} diff --git a/projects/ng-aquila/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.html b/projects/ng-aquila/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.html index c895c9c25..2505ff7b2 100644 --- a/projects/ng-aquila/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.html +++ b/projects/ng-aquila/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.html @@ -1,14 +1,14 @@ diff --git a/projects/ng-aquila/documentation/examples/context-menu/context-menu-indicator/context-menu-indicator-example.css b/projects/ng-aquila/documentation/examples/context-menu/context-menu-indicator/context-menu-indicator-example.css index fbe0de719..973a315d6 100644 --- a/projects/ng-aquila/documentation/examples/context-menu/context-menu-indicator/context-menu-indicator-example.css +++ b/projects/ng-aquila/documentation/examples/context-menu/context-menu-indicator/context-menu-indicator-example.css @@ -1,12 +1,3 @@ .button-content { position: relative; -} - -nx-indicator { - position: absolute; -} - -nx-indicator:not(:empty) { - top: -4px; - left: calc(100% - 4px); -} \ No newline at end of file +} \ No newline at end of file diff --git a/projects/ng-aquila/documentation/examples/context-menu/context-menu-indicator/context-menu-indicator-example.html b/projects/ng-aquila/documentation/examples/context-menu/context-menu-indicator/context-menu-indicator-example.html index 85cb3a94b..1b3c67218 100644 --- a/projects/ng-aquila/documentation/examples/context-menu/context-menu-indicator/context-menu-indicator-example.html +++ b/projects/ng-aquila/documentation/examples/context-menu/context-menu-indicator/context-menu-indicator-example.html @@ -1,17 +1,17 @@ diff --git a/projects/ng-aquila/documentation/examples/tabs/tabs-nav-bar-with-indicator/tabs-nav-bar-with-indicator-example.css b/projects/ng-aquila/documentation/examples/tabs/tabs-nav-bar-with-indicator/tabs-nav-bar-with-indicator-example.css index 13660053e..4dd740fc6 100644 --- a/projects/ng-aquila/documentation/examples/tabs/tabs-nav-bar-with-indicator/tabs-nav-bar-with-indicator-example.css +++ b/projects/ng-aquila/documentation/examples/tabs/tabs-nav-bar-with-indicator/tabs-nav-bar-with-indicator-example.css @@ -1,13 +1,3 @@ .tab-header-content { position: relative; } - -nx-indicator { - position: absolute; - top: 0; - left: 100%; -} - -nx-indicator:not(:empty) { - top: -4px; -} diff --git a/projects/ng-aquila/documentation/examples/tabs/tabs-nav-bar-with-indicator/tabs-nav-bar-with-indicator-example.html b/projects/ng-aquila/documentation/examples/tabs/tabs-nav-bar-with-indicator/tabs-nav-bar-with-indicator-example.html index 5fb763e67..763613a58 100755 --- a/projects/ng-aquila/documentation/examples/tabs/tabs-nav-bar-with-indicator/tabs-nav-bar-with-indicator-example.html +++ b/projects/ng-aquila/documentation/examples/tabs/tabs-nav-bar-with-indicator/tabs-nav-bar-with-indicator-example.html @@ -5,7 +5,7 @@ [routerLink]="link.path"> {{link.label}} - {{ link.notificationCount }} + {{ link.notificationCount }} diff --git a/projects/ng-aquila/documentation/examples/tabs/tabs-with-indicator/tabs-with-indicator-example.css b/projects/ng-aquila/documentation/examples/tabs/tabs-with-indicator/tabs-with-indicator-example.css index df4b6b681..35fde5d59 100755 --- a/projects/ng-aquila/documentation/examples/tabs/tabs-with-indicator/tabs-with-indicator-example.css +++ b/projects/ng-aquila/documentation/examples/tabs/tabs-with-indicator/tabs-with-indicator-example.css @@ -2,13 +2,3 @@ position: relative; display: inline-block; } - -nx-indicator { - position: absolute; - top: 0; - left: 100%; -} - -nx-indicator:not(:empty) { - top: -4px; -} diff --git a/projects/ng-aquila/documentation/examples/tabs/tabs-with-indicator/tabs-with-indicator-example.html b/projects/ng-aquila/documentation/examples/tabs/tabs-with-indicator/tabs-with-indicator-example.html index 15d03b16c..b989056c1 100755 --- a/projects/ng-aquila/documentation/examples/tabs/tabs-with-indicator/tabs-with-indicator-example.html +++ b/projects/ng-aquila/documentation/examples/tabs/tabs-with-indicator/tabs-with-indicator-example.html @@ -4,7 +4,7 @@ {{ tab.label }} - {{ getIndicatorText(tab.notificationCount) }} + {{ getIndicatorText(tab.notificationCount) }}

Content of {{ tab.label }}

diff --git a/projects/ng-aquila/src/indicator/indicator.component.scss b/projects/ng-aquila/src/indicator/indicator.component.scss index d18801db7..259d005fc 100644 --- a/projects/ng-aquila/src/indicator/indicator.component.scss +++ b/projects/ng-aquila/src/indicator/indicator.component.scss @@ -28,4 +28,74 @@ color: windowText; background-color: window; } + + &.nx-indicator--over-text { + position: absolute; + top: 0; + left: 100%; + + &:not(:empty) { + top: -4px; + } + + [dir="rtl"] & { + left: auto; + right: 100%; + } + } + + &.nx-indicator--with-overlap { + position: absolute; + + &:not(:empty) { + left: calc(100% - 4px); + + [dir="rtl"] & { + left: auto; + right: calc(100% - 4px); + } + } + } + + &.nx-indicator--after-text { + vertical-align: top; + margin-left: 4px; + + [dir="rtl"] & { + margin-left: initial; + margin-right: 4px; + } + } + + &.nx-indicator--over-icon { + position: absolute; + left: 50%; + bottom: 50%; + + &:empty { + left: calc(50% + 2px); + bottom: calc(50% + 2px); + } + + [dir="rtl"] & { + left: auto; + right: 50%; + + &:empty { + left: auto; + right: calc(50% + 2px); + } + } + } + +} + +// Targeting IE11 inline-flex and absolute position troubles +:host-context(_:-ms-fullscreen, :root) { + &.nx-indicator--over-icon, + &.nx-indicator--over-text { + display: block; + padding-top: 1px; + text-align: center; + } } diff --git a/projects/ng-aquila/src/indicator/indicator.component.spec.ts b/projects/ng-aquila/src/indicator/indicator.component.spec.ts new file mode 100644 index 000000000..b1b528069 --- /dev/null +++ b/projects/ng-aquila/src/indicator/indicator.component.spec.ts @@ -0,0 +1,81 @@ + +import { Component, Type, ViewChild, Directive } from '@angular/core'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; + +import {NxIndicatorComponent} from './indicator.component'; +import {NxIndicatorModule} from './indicator.module'; + +// For better readablity here, We can safely ignore some conventions in our specs +// tslint:disable:component-class-suffix + +@Directive() +abstract class IndicatorTest { + @ViewChild(NxIndicatorComponent) indicatorInstance: NxIndicatorComponent; +} + +describe('NxIndicatorComponent', () => { + let fixture: ComponentFixture; + let testInstance: IndicatorTest; + let indicatorInstance: NxIndicatorComponent; + let indicatorNativeElement: HTMLButtonElement; + + function createTestComponent(component: Type) { + fixture = TestBed.createComponent(component); + fixture.detectChanges(); + testInstance = fixture.componentInstance; + indicatorInstance = testInstance.indicatorInstance; + indicatorNativeElement = (fixture.nativeElement.querySelector('nx-indicator') as HTMLButtonElement); + } + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + BasicIndicator + ], + imports: [ + NxIndicatorModule + ] + }).compileComponents(); + })); + + it('creates the component', waitForAsync(() => { + createTestComponent(BasicIndicator); + expect(indicatorInstance).toBeTruthy(); + })); + + describe('basic indicator', () => { + beforeEach(() => { + createTestComponent(BasicIndicator); + }); + + it('has no positioning classes by default', () => { + expect(indicatorNativeElement.classList.contains('nx-indicator')).toBe(true); + expect(indicatorNativeElement.classList.length).toBe(1); + }); + + it('sets positioning class when passed through input', () => { + indicatorInstance.position = 'over-icon'; + fixture.detectChanges(); + + expect(indicatorNativeElement.classList.contains('nx-indicator--over-icon')).toBe(true); + }); + + it('sets multiple positioning classes when passed through input', () => { + indicatorInstance.position = 'over-text with-overlap'; + fixture.detectChanges(); + + expect(indicatorNativeElement.classList.contains('nx-indicator--over-text')).toBe(true); + expect(indicatorNativeElement.classList.contains('nx-indicator--with-overlap')).toBe(true); + }); + }); + +}); + +@Component({ + template: ` + 1 + `, +}) +class BasicIndicator extends IndicatorTest { + position = ''; +} diff --git a/projects/ng-aquila/src/indicator/indicator.component.ts b/projects/ng-aquila/src/indicator/indicator.component.ts index 0a64586d3..81776bc84 100644 --- a/projects/ng-aquila/src/indicator/indicator.component.ts +++ b/projects/ng-aquila/src/indicator/indicator.component.ts @@ -1,10 +1,35 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; +export type NxIndicatorPosition = 'over-text' | 'over-icon' | 'after-text' | 'with-overlap'; @Component({ selector: 'nx-indicator', template: '', changeDetection: ChangeDetectionStrategy.OnPush, - styleUrls: ['./indicator.component.scss'] + styleUrls: ['./indicator.component.scss'], + host: { + '[class.nx-indicator]': 'true', + '[class.nx-indicator--over-text]': 'this._hasPosition("over-text")', + '[class.nx-indicator--over-icon]': 'this._hasPosition("over-icon")', + '[class.nx-indicator--after-text]': 'this._hasPosition("after-text")', + '[class.nx-indicator--with-overlap]': 'this._hasPosition("with-overlap")', + } }) -export class NxIndicatorComponent { } +export class NxIndicatorComponent { + private _position: NxIndicatorPosition[] = []; + + /** Sets the indicator positioning preset. + * Should be one or more of 'over-text', 'over-icon', 'after-text', 'with-overlap' + */ + @Input() + set position(value: string) { + this._position = value.split(' ') as NxIndicatorPosition[]; + } + get position(): string { + return this._position.join(' '); + } + + _hasPosition(position: NxIndicatorPosition) { + return this._position.indexOf(position) > -1; + } +} diff --git a/projects/ng-aquila/src/indicator/indicator.md b/projects/ng-aquila/src/indicator/indicator.md index f37ee96f7..1602a7294 100644 --- a/projects/ng-aquila/src/indicator/indicator.md +++ b/projects/ng-aquila/src/indicator/indicator.md @@ -12,7 +12,9 @@ The indicator is a small badge that can be used to mark an element or page as un ### Usage inside other components -The indicator can be placed inside other components. Here are a few additional examples. +The indicator can be placed inside other components. You are free to position the indicator as needed with css or use `position` input to turn on one of our positioning presets. +Note, that since most of our presets rely on absolute positioning, you might need to add `position: relative` style to the container element of indicator for best results. +Here are a few examples. #### Action