Skip to content
This repository was archived by the owner on Nov 30, 2022. It is now read-only.

Commit 781f433

Browse files
marcjulianmarcjulian
committed
Merge branch 'develop'
2 parents aefeeaf + f3fe0ce commit 781f433

10 files changed

Lines changed: 61 additions & 52 deletions

File tree

‎projects/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fivethree/core",
3-
"version": "0.5.1",
3+
"version": "0.5.4",
44
"description": "Fivethree Core Components",
55
"keywords": [
66
"fivethree",

‎projects/core/src/lib/app-bar-tab-content/app-bar-tab-content.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<fiv-ripple (fivClick)="onClick()" class="tab" [ngClass]="{'active': active}">
2-
<fiv-icon [name]="icon"></fiv-icon>
2+
<fiv-icon [(indicatorValue)]="badge" [name]="icon"></fiv-icon>
33
<ion-label>{{name}}</ion-label>
44
</fiv-ripple>

‎projects/core/src/lib/app-bar-tab-content/app-bar-tab-content.component.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
fiv-icon {
1818
display: block;
1919
order: -1;
20+
--fiv-dot-top: -6px;
21+
--fiv-dot-right: -6px;
2022
}
2123

2224
ion-label {

‎projects/core/src/lib/app-bar-tab-content/app-bar-tab-content.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export class FivAppBarTabContent implements OnInit {
1919
@Input() titleLayout: AppBarTitleLayout = 'hide';
2020

2121
private selected = false;
22+
@Input() badge = -1;
2223

2324
@HostBinding('class') get classes(): string {
2425
return `label-${this.titleLayout}`;

‎projects/core/src/lib/app-bar-tab/app-bar-tab.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export class FivAppBarTab implements OnInit {
1111
@Input() icon: string;
1212
@Input() tab: string;
1313
@Input() href: string;
14+
@Input() badge = -1;
1415

1516
constructor() { }
1617

‎projects/core/src/lib/app-bar/app-bar.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<div class="appbar-rect left">
33
<div class="tabs">
44
<fiv-app-bar-tab-content (ionTabButtonClick)="ionTabButtonClick($event)" [active]="router.url.endsWith(tab.href)" [tab]="tab.tab" [href]="tab.href" [name]="tab.name"
5-
[icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsLeft"></fiv-app-bar-tab-content>
5+
[icon]="tab.icon" [badge]="tab.badge" [titleLayout]="titleLayout" *ngFor="let tab of tabsLeft"></fiv-app-bar-tab-content>
66
</div>
77
</div>
88
<fiv-loading-fab (fivHidden)="onFabHidden()" [icon]="icon" [visible]="_fabVisible" #fab (click)="fabClick()"></fiv-loading-fab>
99
<div class="rect"></div>
1010
<div class="appbar-rect right">
1111
<div class="tabs">
1212
<fiv-app-bar-tab-content (ionTabButtonClick)="ionTabButtonClick($event)" [active]="router.url.endsWith(tab.href)" [tab]="tab.tab" [href]="tab.href" [name]="tab.name"
13-
[icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsRight"></fiv-app-bar-tab-content>
13+
[icon]="tab.icon" [badge]="tab.badge" [titleLayout]="titleLayout" *ngFor="let tab of tabsRight"></fiv-app-bar-tab-content>
1414
</div>
1515
</div>
1616
</div>

‎projects/core/src/lib/app-bar/app-bar.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { FivAppBarTabContent } from './../app-bar-tab-content/app-bar-tab-content.component';
12
import { FivLoadingFab } from './../loading-fab/loading-fab.component';
23
import {
34
Component,
@@ -8,7 +9,8 @@ import {
89
QueryList,
910
AfterViewInit,
1011
AfterContentInit,
11-
Host
12+
Host,
13+
ViewChildren
1214
} from '@angular/core';
1315
import { FivAppBarTab } from '../app-bar-tab/app-bar-tab.component';
1416
import { Router } from '@angular/router';
@@ -36,6 +38,7 @@ export class FivAppBar implements OnInit, AfterViewInit, AfterContentInit {
3638
@Input() icon = 'md-add';
3739
@Input() titleLayout: AppBarTitleLayout = 'hide';
3840
@Output() fivFabClick = new EventEmitter<FivAppBar>();
41+
@ViewChildren(FivAppBarTabContent) _tabs: QueryList<FivAppBarTabContent>;
3942

4043
@ContentChildren(FivAppBarTab) tabComponents: QueryList<FivAppBarTab>;
4144

‎projects/core/src/lib/icon/icon.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ion-icon [@rotateAnim]="state" (@rotateAnim.done)="rotateAnimDone($event)" [name]="_name" [color]="color"></ion-icon>
22
<span [@scaleAnim]="indicatorState" class="indicator"></span>
3-
<span *ngIf="_indicatorValue > -1" class="indicator-background">
3+
<span *ngIf="_indicatorValue > 0" class="indicator-background">
44
</span>
55
<span [@scaleAnim]="indicatorValueState" (@scaleAnim.done)="incrementDone($event)" class="indicator-value"><span *ngIf="indicatorValue <= 9">{{indicatorValue}}</span><span *ngIf="indicatorValue > 9">9+</span></span>

‎projects/core/src/lib/icon/icon.component.scss‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,57 @@
11
:host {
2-
--fiv-padding-end: 0;
3-
--fiv-padding-start: 0;
4-
--fiv-color-icon: inherit;
2+
--fiv-padding-end: 0;
3+
--fiv-padding-start: 0;
4+
--fiv-dot-right: -6px;
5+
--fiv-dot-top: -2px;
6+
--fiv-color-icon: inherit;
7+
position: relative;
58
}
69

710
ion-icon {
8-
margin: 0;
9-
font-size: 1.8em;
10-
color: var(--fiv-color-icon);
11-
padding-right: var(--fiv-padding-end);
12-
padding-left: var(--fiv-padding-start);
11+
margin: 0;
12+
font-size: 1.8em;
13+
color: var(--fiv-color-icon);
14+
padding-right: var(--fiv-padding-end);
15+
padding-left: var(--fiv-padding-start);
1316
}
1417

1518
.indicator {
16-
position: absolute;
17-
width: var(--fiv-dot-width, 8px);
18-
height: var(--fiv-dot-heigt, 8px);
19-
background-color: var(
20-
--fiv-dot-color,
21-
var(--fiv-color-indicator, --ion-color-primary)
22-
);
23-
top: 4px;
24-
border-radius: 100%;
25-
right: 8px;
26-
z-index: 12;
19+
position: absolute;
20+
width: var(--fiv-dot-width, 8px);
21+
height: var(--fiv-dot-height, 8px);
22+
background-color: var( --fiv-dot-color, var(--fiv-color-indicator, --ion-color-primary));
23+
top: calc(var(--fiv-dot-top, 0px) + 3px);
24+
border-radius: 100%;
25+
right: calc(var(--fiv-dot-right, 4px) + 3px);
26+
z-index: 12;
2727
}
2828

2929
.indicator-value {
30-
position: absolute;
31-
min-width: var(--fiv-dot-width, 14px);
32-
height: var(--fiv-dot-heigt, 14px);
33-
background-color: var(--fiv-dot-color, var(--ion-color-primary));
34-
color: var(--fiv-dot-color-background, var(--ion-color-light));
35-
top: 0px;
36-
border-radius: 14px;
37-
right: 4px;
38-
z-index: 13;
39-
* {
4030
position: absolute;
41-
transform: translateX(-50%) translateY(-50%);
42-
left: 50%;
43-
top: 50%;
44-
font-size: 0.6em;
45-
}
31+
min-width: var(--fiv-dot-width, 14px);
32+
height: var(--fiv-dot-height, 14px);
33+
background-color: var(--fiv-dot-color, var(--ion-color-primary));
34+
color: var(--fiv-dot-color-background, var(--ion-color-light));
35+
top: var(--fiv-dot-top, 0);
36+
border-radius: 14px;
37+
right: var(--fiv-dot-right, 4px);
38+
z-index: 13;
39+
* {
40+
position: absolute;
41+
transform: translateX(-50%) translateY(-50%);
42+
left: 50%;
43+
top: 50%;
44+
font-size: 0.6em;
45+
}
4646
}
4747

4848
.indicator-background {
49-
position: absolute;
50-
width: var(--fiv-dot-width, 10px);
51-
height: var(--fiv-dot-heigt, 10px);
52-
background-color: var(--fiv-dot-color-background, transparent);
53-
top: 3px;
54-
border-radius: 100%;
55-
right: 7px;
56-
z-index: 11;
57-
}
49+
position: absolute;
50+
width: var(--fiv-dot-width, 18px);
51+
height: var(--fiv-dot-height, 18px);
52+
background-color: var(--fiv-dot-color-background, var(--ion-color-light));
53+
top: calc(var(--fiv-dot-top, 0px) - 2px);
54+
border-radius: 100%;
55+
right: calc(var(--fiv-dot-right, 4px) - 2px);
56+
z-index: 11;
57+
}

‎src/app/pages/app-bar/app-bar.page.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,13 @@
3535
<app-example [title]="'App Bar Example'" [subtitle]="'This is a simple example of how to use the app-bar in an ion-tabs layout.'">
3636
<div class="container min">
3737
<ion-tabs #tabs>
38-
<fiv-app-bar (fivFabClick)="presentToast('Floating action button clicked')" slot="bottom"
39-
[titleLayout]="titleLayout" #bar [position]="position" [fabVisible]="fabVisible" [icon]="icon">
38+
<fiv-app-bar (fivFabClick)="presentToast('Floating action button clicked')"
39+
slot="bottom"
40+
[titleLayout]="titleLayout" #bar [position]="position"
41+
[fabVisible]="fabVisible" [icon]="icon">
4042
<fiv-app-bar-tab left tab="tab1" href="/tab1" icon="md-home" name="App Bar">
4143
</fiv-app-bar-tab>
42-
<fiv-app-bar-tab left tab="tab2" href="/tab2" icon="md-resize" name="Expandable">
44+
<fiv-app-bar-tab [badge]="1" left tab="tab2" href="/tab2" icon="md-resize" name="Expandable">
4345
</fiv-app-bar-tab>
4446
<fiv-app-bar-tab right tab="tab3" href="/tab3" icon="md-eye" name="Password">
4547
</fiv-app-bar-tab>

0 commit comments

Comments
 (0)