;
+
+ constructor(private _elementRef: ElementRef) { }
+
+ /**
+ * @private
+ */
+ ngAfterContentInit() {
+ this._events.listen(this._mainButton.getNativeElement(), 'click', this.pointerUp.bind(this));
+ }
+
+ /**
+ * @private
+ */
+ pointerUp(ev: any) {
+ if (this.canActivateList(ev)) {
+ this.toggleList();
+ }
+ }
+
+ /**
+ * @private
+ */
+ canActivateList(ev: any): boolean {
+ if (this._fabLists.length > 0 && this._mainButton && ev.target) {
+ let ele = ev.target.closest('ion-fab>button');
+ return (ele && ele === this._mainButton.getNativeElement());
+ }
+ return false;
+ }
+
+ /**
+ * @private
+ */
+ toggleList() {
+ this.setActiveLists(!this._listsActive);
+ }
+
+ setActiveLists(isActive: boolean) {
+ if (isActive === this._listsActive) {
+ return;
+ }
+ let lists = this._fabLists.toArray();
+ for (let list of lists) {
+ list.setVisible(isActive);
+ }
+ this._mainButton.setActiveClose(isActive);
+ this._listsActive = isActive;
+ }
+
+ close() {
+ this.setActiveLists(false);
+ }
+
+ /**
+ * @private
+ */
+ ngOnDestroy() {
+ this._events.unlistenAll();
+ }
+}
diff --git a/src/components/fab/fab.wp.scss b/src/components/fab/fab.wp.scss
new file mode 100755
index 0000000000..2bff374db1
--- /dev/null
+++ b/src/components/fab/fab.wp.scss
@@ -0,0 +1,32 @@
+@import "../../themes/ionic.globals.wp";
+
+// Windows FAB Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the FAB button
+$button-wp-fab-border-radius: 50% !default;
+
+
+.fab-button {
+ border-radius: $button-wp-fab-border-radius;
+}
+
+
+// Generate iOS FAB colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+ $background-color: $color-base;
+ $background-color-activated: color-shade($background-color);
+ $fg-color: $color-contrast;
+
+ .fab-wp-#{$color-name} {
+ color: $fg-color;
+ background-color: $background-color;
+ }
+
+ .fab-wp-#{$color-name}.activated {
+ background-color: $background-color-activated;
+ }
+}
diff --git a/src/components/fab/test/basic/app-module.ts b/src/components/fab/test/basic/app-module.ts
new file mode 100755
index 0000000000..a3d3921d85
--- /dev/null
+++ b/src/components/fab/test/basic/app-module.ts
@@ -0,0 +1,45 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Fab } from '../../../..';
+
+@Component({
+ templateUrl: 'main.html'
+})
+export class E2EPage {
+ array: number[] = [];
+
+ add() {
+ this.array.push(1);
+ }
+
+ clickMainFAB() {
+ console.log('Clicked open social menu');
+ }
+
+ openSocial(network: string, fab: Fab) {
+ console.log('Share in ' + network);
+ fab.close();
+ }
+}
+
+
+@Component({
+ template: ''
+})
+export class E2EApp {
+ root: any = E2EPage;
+}
+
+@NgModule({
+ declarations: [
+ E2EApp,
+ E2EPage
+ ],
+ imports: [
+ IonicModule.forRoot(E2EApp)
+ ],
+ bootstrap: [IonicApp],
+ entryComponents: [
+ E2EPage
+ ]
+})
+export class AppModule {}
diff --git a/src/components/fab/test/basic/main.html b/src/components/fab/test/basic/main.html
new file mode 100755
index 0000000000..4e80f717bb
--- /dev/null
+++ b/src/components/fab/test/basic/main.html
@@ -0,0 +1,73 @@
+
+
+ Floating Action Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/fab/test/fab.spec.ts b/src/components/fab/test/fab.spec.ts
new file mode 100755
index 0000000000..e69de29bb2
diff --git a/src/components/nav/test/basic/app-module.ts b/src/components/nav/test/basic/app-module.ts
index 08f1367751..75fe264b63 100644
--- a/src/components/nav/test/basic/app-module.ts
+++ b/src/components/nav/test/basic/app-module.ts
@@ -290,10 +290,9 @@ export class FullPage {
-
-
-
-
+
+
+
diff --git a/src/directives.ts b/src/directives.ts
index b047ab2085..d94d2d3ede 100644
--- a/src/directives.ts
+++ b/src/directives.ts
@@ -11,6 +11,7 @@ import { Checkbox } from './components/checkbox/checkbox';
import { Chip } from './components/chip/chip';
import { Content } from './components/content/content';
import { DateTime } from './components/datetime/datetime';
+import { Fab, FabButton, FabList } from './components/fab/fab';
import { Fixed } from './components/fixed/fixed';
import { Grid, Row, Col } from './components/grid/grid';
import { Icon } from './components/icon/icon';
@@ -79,6 +80,7 @@ export { Checkbox } from './components/checkbox/checkbox';
export { Chip } from './components/chip/chip';
export { Content } from './components/content/content';
export { DateTime } from './components/datetime/datetime';
+export { Fab, FabButton, FabList } from './components/fab/fab';
export { Fixed } from './components/fixed/fixed';
export { Grid, Row, Col } from './components/grid/grid';
export { Icon } from './components/icon/icon';
@@ -171,6 +173,9 @@ export const IONIC_DIRECTIVES: any[] = [
Col,
Content,
DateTime,
+ Fab,
+ FabButton,
+ FabList,
Fixed,
Footer,
Grid,
diff --git a/src/themes/ionic.components.scss b/src/themes/ionic.components.scss
index e089b4f360..23a9ac8185 100644
--- a/src/themes/ionic.components.scss
+++ b/src/themes/ionic.components.scss
@@ -31,7 +31,6 @@
@import
"../components/button/button",
-"../components/button/button-fab",
"../components/button/button-icon",
"../components/button/button.ios",
"../components/button/button.md",
@@ -66,6 +65,12 @@
"../components/datetime/datetime.md",
"../components/datetime/datetime.wp";
+@import
+"../components/fab/fab",
+"../components/fab/fab.ios",
+"../components/fab/fab.md",
+"../components/fab/fab.wp";
+
@import
"../components/grid/grid";
diff --git a/src/themes/ionic.globals.scss b/src/themes/ionic.globals.scss
index 2d6a2a8aa5..3a2fbbcc01 100644
--- a/src/themes/ionic.globals.scss
+++ b/src/themes/ionic.globals.scss
@@ -32,7 +32,7 @@ $z-index-menu-backdrop: 79;
$z-index-overlay: 1000;
$z-index-click-block: 9999;
-$z-index-fixed-content: 2;
+$z-index-fixed-content: 100;
$z-index-scroll-content: 1;
$z-index-refresher: 0;
diff --git a/src/util/ui-event-manager.ts b/src/util/ui-event-manager.ts
index ac9a80914c..0b8305c856 100644
--- a/src/util/ui-event-manager.ts
+++ b/src/util/ui-event-manager.ts
@@ -4,8 +4,8 @@ export interface PointerEventsConfig {
element?: HTMLElement;
elementRef?: ElementRef;
pointerDown: (ev: any) => boolean;
- pointerMove: (ev: any) => void;
- pointerUp: (ev: any) => void;
+ pointerMove?: (ev: any) => void;
+ pointerUp?: (ev: any) => void;
nativeOptions?: any;
zone?: boolean;
}
@@ -37,7 +37,6 @@ export class PointerEvents {
private zone: boolean,
private option: any
) {
-
this.bindTouchEnd = this.handleTouchEnd.bind(this);
this.bindMouseUp = this.handleMouseUp.bind(this);
@@ -50,7 +49,7 @@ export class PointerEvents {
if (!this.pointerDown(ev)) {
return;
}
- if (!this.rmTouchMove) {
+ if (!this.rmTouchMove && this.pointerMove) {
this.rmTouchMove = listenEvent(this.ele, 'touchmove', this.zone, this.option, this.pointerMove);
}
if (!this.rmTouchEnd) {
@@ -69,7 +68,7 @@ export class PointerEvents {
if (!this.pointerDown(ev)) {
return;
}
- if (!this.rmMouseMove) {
+ if (!this.rmMouseMove && this.pointerMove) {
this.rmMouseMove = listenEvent(document, 'mousemove', this.zone, this.option, this.pointerMove);
}
if (!this.rmMouseUp) {
@@ -79,12 +78,12 @@ export class PointerEvents {
private handleTouchEnd(ev: any) {
this.stopTouch();
- this.pointerUp(ev);
+ this.pointerUp && this.pointerUp(ev);
}
private handleMouseUp(ev: any) {
this.stopMouse();
- this.pointerUp(ev);
+ this.pointerUp && this.pointerUp(ev);
}
private stopTouch() {
@@ -147,7 +146,7 @@ export class UIEventManager {
element = config.elementRef.nativeElement;
}
- if (!element || !config.pointerDown || !config.pointerMove || !config.pointerUp) {
+ if (!element || !config.pointerDown) {
console.error('PointerEvents config is invalid');
return;
}