From 3c5df69a2bc271b51aeae09ffcd7d109f5e6537d Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Tue, 3 Mar 2015 14:05:02 -0800
Subject: [PATCH] Implement a floating action button in fn

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/975913002
---
 .../fn/widgets/floating_action_button.dart    | 22 +++++++++++++++++++
 examples/fn/widgets/style_component.dart      | 17 ++++++++++++++
 examples/fn/widgets/toolbar.dart              |  2 +-
 examples/fn/widgets/widgets.dart              |  2 ++
 examples/stocks-fn/stocksapp.dart             | 14 ++++++++++--
 5 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 examples/fn/widgets/floating_action_button.dart
 create mode 100644 examples/fn/widgets/style_component.dart

diff --git a/examples/fn/widgets/floating_action_button.dart b/examples/fn/widgets/floating_action_button.dart
new file mode 100644
index 0000000000..d40e74cf31
--- /dev/null
+++ b/examples/fn/widgets/floating_action_button.dart
@@ -0,0 +1,22 @@
+part of widgets;
+
+class FloatingActionButton extends StyleComponent {
+  static final Style _style = new Style('''
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 16px;
+    right: 16px;
+    width: 56px;
+    height: 56px;
+    background-color: #F44336;
+    color: white;
+    border-radius: 28px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);'''
+  );
+
+  Style get style => _style;
+
+  FloatingActionButton({ Object key, Node content }) : super(key: key, content: content);
+}
diff --git a/examples/fn/widgets/style_component.dart b/examples/fn/widgets/style_component.dart
new file mode 100644
index 0000000000..fb18c52e86
--- /dev/null
+++ b/examples/fn/widgets/style_component.dart
@@ -0,0 +1,17 @@
+part of widgets;
+
+abstract class StyleComponent extends Component {
+  Node content;
+
+  // Subclasses should implement this getter to provide their style information.
+  Style get style => null;
+
+  StyleComponent({ Object key, this.content }) : super(key: key);
+
+  Node render() {
+    return new Container(
+      style: style,
+      children: content == null ? [] : [content]
+    );
+  }
+}
diff --git a/examples/fn/widgets/toolbar.dart b/examples/fn/widgets/toolbar.dart
index d57a101a50..cc73040151 100644
--- a/examples/fn/widgets/toolbar.dart
+++ b/examples/fn/widgets/toolbar.dart
@@ -4,7 +4,7 @@ class Toolbar extends Component {
 
   List<Node> children;
 
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     display: flex;
     align-items: center;
     height: 84px;
diff --git a/examples/fn/widgets/widgets.dart b/examples/fn/widgets/widgets.dart
index 834c9da1d6..a345efc649 100644
--- a/examples/fn/widgets/widgets.dart
+++ b/examples/fn/widgets/widgets.dart
@@ -20,5 +20,7 @@ part 'menudivider.dart';
 part 'menuitem.dart';
 part 'radio.dart';
 part 'toolbar.dart';
+part 'floating_action_button.dart';
+part 'style_component.dart';
 
 typedef void ValueChanged(value);
diff --git a/examples/stocks-fn/stocksapp.dart b/examples/stocks-fn/stocksapp.dart
index c9ec0359ab..501383c5de 100644
--- a/examples/stocks-fn/stocksapp.dart
+++ b/examples/stocks-fn/stocksapp.dart
@@ -92,10 +92,20 @@ class StocksApp extends App {
       ]
     );
 
+    var fab = new FloatingActionButton(content: new Icon(
+      type: 'content/add_white', size: 24));
+
     return new Container(
       key: 'StocksApp',
-      style: _style,
-      children: [drawer, toolbar, new Stocklist(stocks: oracle.stocks)]
+      children: [
+        new Container(
+          key: 'Content',
+          style: _style,
+          children: [toolbar, new Stocklist(stocks: oracle.stocks)]
+        ),
+        fab,
+        drawer,
+      ]
     );
   }
 }