Animations, test Icons, Readme

Author: sitefinitysteve

README.md

@@ -71,6 +71,7 @@ exports.fabTap = function(args) {
 | rippleColor|         X         |      | Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices | None
 | hideOnSwipeOfView|         X         |   X   | Directs the fab to animate itself in and out on scroll | Pass it the name of the view to monitor for a scroll event example: hideOnSwipeOfView="userListView"
 | hideAnimationDuration|         X         |   X   | How many milliseconds it takes for the button to hide. | Default if not set: 300ms
+| swipeAnimation|         X         |   X   | slideDown, slideUp, slideLeft, slideRight, scale | Default is slideDown
 
 ## NativeScript Compatibility
 
@@ -81,6 +82,13 @@ exports.fabTap = function(args) {
 
 ## iOS Notes
 - We're using [MNFloatingActionButton](http://cocoapods.org/pods/MNFloatingActionButton) by [Matt Nydam](https://github.com/mattnydam)
+- Width\Height are requried properties
+- icon is a required property, if left as empty string default will be shown
+
+## Release Notes ##
+### 2.2.0 ###
+* Scale iOS images to 1/2 height
+* swipeAnimation property added to define animations for the FAB
 
 ### Contributors
 

demo/app/App_Resources/iOS/bluetooth.png

@@ -15,12 +15,20 @@ button {
     horizontal-align: center;
 }
 
-.fab-button {
+.fab-button-bottom {
     height: 50;
     width: 50;
     margin: 15;
     horizontal-align: right;
     vertical-align: bottom;
     color: #FFF;
     background-color: #ff4081;
+}
+
+.options{
+    background-color: #f0f0f0;
+}
+
+.options Button{
+    font-size: 14;
 }

demo/app/App_Resources/iOS/[email protected]

@@ -3,6 +3,7 @@ var observable = require("data/observable");
 var observableArrayModule = require("data/observable-array");
 var platformModule = require("platform");
 var color = require("color");
+var fab;
 
 var users = [
     { name: 'Billy Bob' },
@@ -36,9 +37,14 @@ function pageLoaded(args) {
         }
     }
     page.bindingContext = viewModel;
+    fab = page.getViewById("fabButton");
 }
 exports.pageLoaded = pageLoaded;
 
 exports.fabTap = function(args){
     viewModel.users.unshift({ name: "Gary"}); 
+}
+
+exports.onAnimateUp = function(args){
+    fab.swipeAnimation = "slideUp";
 }

demo/app/App_Resources/iOS/[email protected]

@@ -3,19 +3,20 @@
     <Page.actionBar>
         <ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
     </Page.actionBar>
-    <grid-layout rows="auto, *">
-        <list-view id="userList" row="1" items="{{ users }}">
+    <grid-layout rows="*">
+        <list-view id="userList" row="0" items="{{ users }}">
             <list-view.itemTemplate>
                 <label text="{{ name }}" textWrap="true" fontSize="15" margin="20" />
             </list-view.itemTemplate>
         </list-view>
         <FAB:fab
                 id="fabButton"
-                row="1"
+                row="0"
                 icon="res://ic_add_white"
                 tap="fabTap"
                 rippleColor="#ffffff"
-                class="fab-button"
-                hideOnSwipeOfView="userList" />
+                class="fab-button-bottom"
+                hideOnSwipeOfView="userList"
+                swipeAnimation="scale"  /> <!-- slideDown, slideUp, slideRight, slideLeft, scale -->
     </grid-layout>
 </Page>