added ion-fixed

ekhmoi · Oct 2, 2016 · 74dd33e · 74dd33e
1 parent aad7d26
commit 74dd33e
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 124 deletions.
diff --git a/dist/fab-toolbar/fab-toolbar.scss b/dist/fab-toolbar/fab-toolbar.scss
@@ -1,19 +1,49 @@
+fab-toolbar.right {
+ right: 0;
+ button[ion-fab] {
+ margin-right: 5px;
+ transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+ float: right;
+ ion-icon {
+ transition: all 100ms linear;
+ }
+ }
 
-ekhmoi-fab-toolbar {
- position: fixed;
+}
+
+fab-toolbar.left {
  left: 0;
+ button[ion-fab] {
+ margin-left: 5px;
+ transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+ float: left;
+ ion-icon {
+ transition: all 100ms linear;
+ }
+ }
+
+}
+
+
+
+fab-toolbar {
+ position: absolute;
+ bottom: 0px;
  width: 68px;
  height: 68px;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
- .ekhmoi-fab-toolbar {
+ z-index: 100;
+ .fab-toolbar {
  height: 100%;
  width: 100%;
  overflow: hidden;
+ position: absolute;
  ion-row {
- position: fixed;
+ position: absolute;
  display: none;
  ion-col {
  button {
+ vertical-align: middle;
  ion-icon {
  transition: all 100ms linear;
  }
@@ -29,11 +59,12 @@ ekhmoi-fab-toolbar {
  }
 }
 
-ekhmoi-fab-toolbar:not(.activated) {
+fab-toolbar:not(.activated) {
  width: 68px;
 }
-ekhmoi-fab-toolbar.activated {
+fab-toolbar.activated {
  width: 100%;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  button[ion-fab] {
  transition-delay: 100ms;
  ion-icon {
@@ -55,7 +86,7 @@ ekhmoi-fab-toolbar.activated {
  }
 }
 
-ekhmoi-fab-toolbar.opened {
+fab-toolbar.opened {
  button[ion-fab] {
  transition-delay: 100ms;
  ion-icon {
@@ -64,10 +95,10 @@ ekhmoi-fab-toolbar.opened {
  }
  ion-row {
  width: 100%;
- position: fixed;
+ position: absolute;
  height: 68px;
  z-index: 1;
- line-height: 100%;
+ line-height: 68px;
  opacity: 1;
  ion-col {
  padding: 0px;
@@ -84,7 +115,7 @@ ekhmoi-fab-toolbar.opened {
  }
  }
 }
-ekhmoi-fab-toolbar:not(.activated).opened {
+fab-toolbar:not(.activated).opened {
  ion-row {
  display: -webkit-flex;
  display: -ms-flexbox;
@@ -100,25 +131,25 @@ ekhmoi-fab-toolbar:not(.activated).opened {
  }
  }
 }
-ekhmoi-fab-toolbar:not(.activated).closed {
+fab-toolbar:not(.activated).closed {
  width: 68px;
 }
-ekhmoi-fab-toolbar.closed {
+fab-toolbar.closed {
  ion-row {
  width: 100%;
- position: fixed;
+ position: absolute;
  height: 68px;
  z-index: 1;
- line-height: 100%;
+ line-height: 68px;
  ion-col {
  padding: 0px;
  button {
  line-height: 68px;
- height: 100%;
+ height: 68px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  }
  }
  }
-}
+}
diff --git a/dist/fab-toolbar/fab-toolbar.ts b/dist/fab-toolbar/fab-toolbar.ts
@@ -10,7 +10,7 @@ import { Component, ElementRef, Input, Renderer, HostListener } from '@angular/c
  *
  * @usage
  * ```html - simply add below tag and bind options property
- * <ekhmoi-fab-toolbar [options]="options"></ekhmoi-fab-toolbar>
+ * <fab-toolbar [options]="options"></fab-toolbar>
  * ```
  * 
  * ```javascript - starting from Ionic 2 RC0.0 (AoT) you should provide all components inside app.module.ts 
@@ -28,36 +28,42 @@ import { Component, ElementRef, Input, Renderer, HostListener } from '@angular/c
  */
 
 @Component({ 
- host: {
- '(document:click)': 'onClick($event)',
- },
- selector: 'ekhmoi-fab-toolbar',
+ selector: 'fab-toolbar',
  template: `
- <div class="ekhmoi-fab-toolbar">
- <ion-row [style.transform]="">
- <ion-col width-20 *ngFor="let b of options.buttons">
+ <div class="fab-toolbar">
+ <ion-row>
+ <ion-col *ngFor="let b of buttons">
  <button (click)="onClick($event, b)" ion-button clear color="light" icon-only><ion-icon name="{{b.icon}}"></ion-icon></button>
  </ion-col>
  </ion-row>
- <button [style.transform]="active ? width: 'scale(1)' "ion-fab color="{{options.color}}"><ion-icon name="{{options.icon}}"></ion-icon></button>
+ <button [style.transform]="active ? width: 'scale(1)' "ion-fab color="{{color}}"><ion-icon name="{{icon}}"></ion-icon></button>
  </div>
  `
 })
 
 export class EkhmoiFabToolbar {
 
  public active: boolean = false;
- constructor(public el: ElementRef, public renderer: Renderer) {}
+ constructor(public el: ElementRef, public renderer: Renderer) {
 
- @Input() options = {
- color: 'secondary',
- icon: 'more',
- cssClass: '',
- buttons: [],
- enableBackdropDismiss: true
- };
+ document.addEventListener('click', (event) => {
+ console.log('clicked');
+ this.onClick(event, false);
+ });
+ }
+
+ @Input() position: string = 'left';
+ @Input() color: string = 'secondary';
+ @Input() icon: string = 'more';
+ @Input() cssClass: string = '';
+ @Input() enableBackdropDismiss: boolean = true;
+ @Input() buttons: Array<any> = [];
 
- public onClick(event, button: any): void {
+ ngOnInit() {
+ this.renderer.setElementClass(this.el.nativeElement, this.position, true)
+ }
+
+ onClick(event, button: any) {
  // We are listening to click event on document in order to be able to close button on backdrop click
  // Therefore we need to check if user clicked on our component or outside
  if (this.el.nativeElement.contains(event.target)) {
@@ -78,12 +84,14 @@ export class EkhmoiFabToolbar {
  }, 10);
  }
  } else {
- if(!this.active) this.openButton();
+ if(!this.active) {
+ this.openButton();
+ }
  }
  } else {
  // User has clicked outside our component.
  // Check if `enableBackdropDismiss` is true and if component is opened.
- if(this.options.enableBackdropDismiss === true && this.active) {
+ if(this.enableBackdropDismiss === true && this.active) {
  this.closeButton();
  }
  }

diff --git a/src/pages/fab-toolbar/fab-toolbar.scss b/src/pages/fab-toolbar/fab-toolbar.scss
@@ -1,19 +1,49 @@
+fab-toolbar.right {
+ right: 0;
+ button[ion-fab] {
+ margin-right: 5px;
+ transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+ float: right;
+ ion-icon {
+ transition: all 100ms linear;
+ }
+ }
 
-ekhmoi-fab-toolbar {
- position: fixed;
+}
+
+fab-toolbar.left {
  left: 0;
+ button[ion-fab] {
+ margin-left: 5px;
+ transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+ float: left;
+ ion-icon {
+ transition: all 100ms linear;
+ }
+ }
+
+}
+
+
+
+fab-toolbar {
+ position: absolute;
+ bottom: 0px;
  width: 68px;
  height: 68px;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
- .ekhmoi-fab-toolbar {
+ z-index: 100;
+ .fab-toolbar {
  height: 100%;
  width: 100%;
  overflow: hidden;
+ position: absolute;
  ion-row {
- position: fixed;
+ position: absolute;
  display: none;
  ion-col {
  button {
+ vertical-align: middle;
  ion-icon {
  transition: all 100ms linear;
  }
@@ -29,11 +59,12 @@ ekhmoi-fab-toolbar {
  }
 }
 
-ekhmoi-fab-toolbar:not(.activated) {
+fab-toolbar:not(.activated) {
  width: 68px;
 }
-ekhmoi-fab-toolbar.activated {
+fab-toolbar.activated {
  width: 100%;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  button[ion-fab] {
  transition-delay: 100ms;
  ion-icon {
@@ -55,7 +86,7 @@ ekhmoi-fab-toolbar.activated {
  }
 }
 
-ekhmoi-fab-toolbar.opened {
+fab-toolbar.opened {
  button[ion-fab] {
  transition-delay: 100ms;
  ion-icon {
@@ -64,10 +95,10 @@ ekhmoi-fab-toolbar.opened {
  }
  ion-row {
  width: 100%;
- position: fixed;
+ position: absolute;
  height: 68px;
  z-index: 1;
- line-height: 100%;
+ line-height: 68px;
  opacity: 1;
  ion-col {
  padding: 0px;
@@ -84,7 +115,7 @@ ekhmoi-fab-toolbar.opened {
  }
  }
 }
-ekhmoi-fab-toolbar:not(.activated).opened {
+fab-toolbar:not(.activated).opened {
  ion-row {
  display: -webkit-flex;
  display: -ms-flexbox;
@@ -100,25 +131,25 @@ ekhmoi-fab-toolbar:not(.activated).opened {
  }
  }
 }
-ekhmoi-fab-toolbar:not(.activated).closed {
+fab-toolbar:not(.activated).closed {
  width: 68px;
 }
-ekhmoi-fab-toolbar.closed {
+fab-toolbar.closed {
  ion-row {
  width: 100%;
- position: fixed;
+ position: absolute;
  height: 68px;
  z-index: 1;
- line-height: 100%;
+ line-height: 68px;
  ion-col {
  padding: 0px;
  button {
  line-height: 68px;
- height: 100%;
+ height: 68px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  }
  }
  }
-}
+}