Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(badge): Eva theme #1407

Merged
merged 13 commits into from
Apr 22, 2019
Merged

feat(badge): Eva theme #1407

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
eac5273
refactor(badge): use common status
yggg Apr 20, 2019
e96c9e1
refactor(badge): extract position into type
yggg Apr 20, 2019
1eb461d
refactor(badge): move status class to host element
yggg Apr 20, 2019
1e82445
refactor(badge): position calculation
yggg Apr 20, 2019
49ee39d
feat(badge): update theme
yggg Apr 20, 2019
65080b2
refactor(badge): rename getters to correspond associated position
yggg Apr 21, 2019
c7a529f
docs(badge): update theme properties list
yggg Apr 21, 2019
a44bf53
test(badge): add spec
yggg Apr 21, 2019
e55bdd2
Merge branch 'next' into feat/eva-badge
yggg Apr 21, 2019
aa09d62
fix(badge): prevent position from being unset
yggg Apr 21, 2019
b57fc58
Merge remote-tracking branch 'origin/feat/eva-badge' into feat/not-so…
yggg Apr 21, 2019
8f59312
Merge branch 'next' into feat/eva-badge
yggg Apr 22, 2019
db4bf03
fix(badge): update component status and position type in dependent co…
yggg Apr 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor(badge): extract position into type 
BREAKING CHANGE:

NbBadgeComponent position static fields replaced with NbBadgePosition type.
Removed properties: TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
TOP_START, TOP_END, BOTTOM_START, BOTTOM_END.
  • Loading branch information
@yggg
yggg committed Apr 20, 2019
commit e96c9e14dff1c50ade7ef29fffbec6506fd1f610
3 changes: 1 addition & 2 deletions e2e/actions.e2e-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

import { browser } from 'protractor';
import { NbBadgeComponent } from '../src/framework/theme/components/badge/badge.component';
import badgeTests from './badge.e2e-spec';

describe('nb-action', () => {
Expand All @@ -19,7 +18,7 @@ describe('nb-action', () => {
const badgesConf = {
selector: (i) => `nb-card:nth-child(4) nb-actions nb-action:nth-child(${i + 1}) nb-badge > span`,
badges: [
{ position: NbBadgeComponent.BOTTOM_LEFT, status: NbBadgeComponent.STATUS_SUCCESS, text: badgeText },
{ position: 'bottom left', status: 'success', text: badgeText },
],
};
badgeTests(badgesConf);
Expand Down
3 changes: 1 addition & 2 deletions e2e/user.e2e-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

import { browser, element, by } from 'protractor';
import { NbBadgeComponent } from '../src/framework/theme/components/badge/badge.component';
import badgeTests from './badge.e2e-spec';

describe('nb-user', () => {
Expand All @@ -20,7 +19,7 @@ describe('nb-user', () => {
const badgesConf = {
selector: (i) => `.test-row:nth-child(${elementsOffset + i + 1}) nb-badge > span`,
badges: [
{ position: NbBadgeComponent.TOP_RIGHT, status: NbBadgeComponent.STATUS_PRIMARY, text: badgeText },
{ position: 'top right', status: 'primary', text: badgeText },
],
};
badgeTests(badgesConf);
Expand Down
18 changes: 4 additions & 14 deletions src/framework/theme/components/badge/badge.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import { Component, Input } from '@angular/core';
import { NbLayoutDirectionService } from '../../services/direction.service';
import { NbComponentStatus } from '../component-status';

export type NbBadgePhysicalPosition = 'top left' | 'top right' | 'bottom left' | 'bottom right';
export type NbBadgeLogicalPosition = 'top start' | 'top end' | 'bottom start' | 'bottom end';
export type NbBadgePosition = NbBadgePhysicalPosition | NbBadgeLogicalPosition;


/**
Expand Down Expand Up @@ -67,15 +70,6 @@ import { NbComponentStatus } from '../component-status';
`,
})
export class NbBadgeComponent {
static readonly TOP_LEFT = 'top left';
static readonly TOP_RIGHT = 'top right';
static readonly BOTTOM_LEFT = 'bottom left';
static readonly BOTTOM_RIGHT = 'bottom right';

static readonly TOP_START = 'top start';
static readonly TOP_END = 'top end';
static readonly BOTTOM_START = 'bottom start';
static readonly BOTTOM_END = 'bottom end';

/**
* Text to display
Expand All @@ -91,7 +85,7 @@ export class NbBadgeComponent {
* 'top start', 'top end', 'bottom start', 'bottom end'
* @type string
*/
@Input() position: string;
@Input() position: NbBadgePosition = 'top right';

/**
* Badge status (adds specific styles):
Expand All @@ -100,10 +94,6 @@ export class NbBadgeComponent {
@Input() status: NbComponentStatus = 'primary';

get positionClass() {
if (!this.position) {
return NbBadgeComponent.TOP_RIGHT;
}

const isLtr = this.layoutDirectionService.isLtr();
const startValue = isLtr ? 'left' : 'right';
const endValue = isLtr ? 'right' : 'left';
Expand Down
27 changes: 12 additions & 15 deletions src/playground/with-layout/action/action-test.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

import { Component } from '@angular/core';
import { NbBadgeComponent } from '@nebular/theme';

@Component({
selector: 'nb-action-test',
Expand Down Expand Up @@ -87,38 +86,38 @@ import { NbBadgeComponent } from '@nebular/theme';
<nb-actions size="large">
<nb-action
badgeText="29"
[badgeStatus]="badge.STATUS_SUCCESS"
[badgePosition]="badge.BOTTOM_LEFT">
badgeStatus="success"
badgePosition="bottom left">
<nb-user></nb-user>
</nb-action>
<nb-action
badgeText="29"
[badgeStatus]="badge.STATUS_DANGER"
[badgePosition]="badge.TOP_LEFT"
badgeStatus="danger"
badgePosition="top left"
icon="search-outline">
</nb-action>
<nb-action
badgeText="29"
[badgeStatus]="badge.STATUS_WARNING"
[badgePosition]="badge.BOTTOM_RIGHT"
badgeStatus="warning"
badgePosition="bottom right"
icon="search-outline">
</nb-action>
<nb-action
badgeText="29"
[badgeStatus]="badge.STATUS_SUCCESS"
[badgePosition]="badge.BOTTOM_LEFT"
badgeStatus="success"
badgePosition="bottom left"
icon="search-outline">
</nb-action>
<nb-action
badgeText="29"
[badgeStatus]="badge.STATUS_INFO"
[badgePosition]="badge.TOP_RIGHT"
badgeStatus="info"
badgePosition="top right"
icon="search-outline">
</nb-action>
<nb-action
badgeText="29"
[badgeStatus]="badge.STATUS_INFO"
[badgePosition]="badge.TOP_RIGHT"
badgeStatus="info"
badgePosition="top right"
icon="search-outline"
disabled>
</nb-action>
Expand All @@ -132,8 +131,6 @@ import { NbBadgeComponent } from '@nebular/theme';
})
export class ActionTestComponent {

badge = NbBadgeComponent;

actionOnClick(event: any) {
console.info(event);
}
Expand Down
35 changes: 16 additions & 19 deletions src/playground/with-layout/tabset/tabset-test.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { NbBadgeComponent } from '@nebular/theme';

@Component({
selector: 'nb-tabset-test',
Expand Down Expand Up @@ -79,26 +78,26 @@ import { NbBadgeComponent } from '@nebular/theme';
</nb-tab>
<nb-tab tabTitle="Tab #2"
badgeText="29"
[badgeStatus]="badge.STATUS_INFO"
[badgePosition]="badge.TOP_LEFT">
badgeStatus="info"
badgePosition="top left">
<span>Content #2</span>
</nb-tab>
<nb-tab tabTitle="Tab #3"
badgeText="29"
[badgeStatus]="badge.STATUS_SUCCESS"
[badgePosition]="badge.BOTTOM_RIGHT">
badgeStatus="success"
badgePosition="bottom right">
<span>Content #3</span>
</nb-tab>
<nb-tab tabTitle="Tab #4"
badgeText="29"
[badgeStatus]="badge.STATUS_DANGER"
[badgePosition]="badge.BOTTOM_LEFT">
badgeStatus="danger"
badgePosition="bottom left">
<span>Content #4</span>
</nb-tab>
<nb-tab tabTitle="Tab #5"
badgeText="29"
[badgeStatus]="badge.STATUS_WARNING"
[badgePosition]="badge.BOTTOM_RIGHT">
badgeStatus="warning"
badgePosition="bottom right">
<span>Content #5</span>
</nb-tab>
</nb-tabset>
Expand All @@ -108,26 +107,26 @@ import { NbBadgeComponent } from '@nebular/theme';
</nb-tab>
<nb-tab tabTitle="Tab #2"
badgeText="29"
[badgeStatus]="badge.STATUS_INFO"
[badgePosition]="badge.BOTTOM_RIGHT">
badgeStatus="info"
badgePosition="bottom right">
<span>Content #2</span>
</nb-tab>
<nb-tab tabTitle="Tab #3"
badgeText="29"
[badgeStatus]="badge.STATUS_SUCCESS"
[badgePosition]="badge.TOP_LEFT">
badgeStatus="success"
badgePosition="top left">
<span>Content #3</span>
</nb-tab>
<nb-tab tabTitle="Tab #4"
badgeText="29"
[badgeStatus]="badge.STATUS_DANGER"
[badgePosition]="badge.BOTTOM_LEFT">
badgeStatus="danger"
badgePosition="bottom left">
<span>Content #4</span>
</nb-tab>
<nb-tab tabTitle="Tab #5"
badgeText="29"
[badgeStatus]="badge.STATUS_WARNING"
[badgePosition]="badge.BOTTOM_RIGHT">
badgeStatus="warning"
badgePosition="bottom right">
<span>Content #5</span>
</nb-tab>
</nb-tabset>
Expand All @@ -149,8 +148,6 @@ import { NbBadgeComponent } from '@nebular/theme';
})
export class TabsetTestComponent {

badge = NbBadgeComponent;

constructor(private router: Router) {
}

Expand Down
25 changes: 11 additions & 14 deletions src/playground/without-layout/user/user-test.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

import { Component } from '@angular/core';
import { NbBadgeComponent } from '@nebular/theme';

@Component({
selector: 'nb-user-test',
Expand Down Expand Up @@ -64,8 +63,8 @@ import { NbBadgeComponent } from '@nebular/theme';
name="Dmitry Nehaychik"
title="Worker"
badgeText="29"
[badgeStatus]="badge.STATUS_INFO"
[badgePosition]="badge.TOP_LEFT">
badgeStatus="info"
badgePosition="top left">
</nb-user>
</div>
<div class="test-row">
Expand All @@ -75,8 +74,8 @@ import { NbBadgeComponent } from '@nebular/theme';
title="Worker"
showTitle="false"
badgeText="29"
[badgeStatus]="badge.STATUS_SUCCESS"
[badgePosition]="badge.BOTTOM_RIGHT">
badgeStatus="success"
badgePosition="bottom right">
</nb-user>
</div>
<div class="test-row">
Expand All @@ -86,8 +85,8 @@ import { NbBadgeComponent } from '@nebular/theme';
name="Dmitry Nehaychik"
title="Worker"
badgeText="29"
[badgeStatus]="badge.STATUS_WARNING"
[badgePosition]="badge.BOTTOM_LEFT">
badgeStatus="warning"
badgePosition="bottom left">
</nb-user>
</div>
<div class="test-row">
Expand All @@ -97,30 +96,28 @@ import { NbBadgeComponent } from '@nebular/theme';
name="Dmitry Nehaychik"
title="Worker"
badgeText="29"
[badgeStatus]="badge.STATUS_DANGER"
[badgePosition]="badge.TOP_LEFT">
badgeStatus="danger"
badgePosition="top left">
</nb-user>
</div>
<div class="test-row" id="base64-image">
<nb-user
[picture]="'data:image/png;base64,aaa'"></nb-user>
</div>
<div class="test-row">
<nb-user inverse
<nb-user
size="large"
picture="http://lorempixel.com/400/200/animals/"
name="Dmitry Nehaychik"
title="Worker"
badgeText="29"
[badgeStatus]="badge.STATUS_DANGER"
[badgePosition]="badge.TOP_START">
badgeStatus="danger"
badgePosition="top start">
</nb-user>
</div>
</nb-layout-column>
</nb-layout>
`,
})
export class UserTestComponent {

badge = NbBadgeComponent;
}