From 62a63ecf9fee810df6559ee5cdde833d8b595036 Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Wed, 24 Dec 2014 09:15:01 -0500
Subject: [PATCH] use bottom-aligned toolbar for selection-related actions.

---
 src/app.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app.jsx b/src/app.jsx
index f1fe56e..06ca15e 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -109,16 +109,32 @@ define(function(require) {
       );
     },
     render: function() {
+      var selectionToolbar = null;
+
+      if (this.state.selectedItem) {
+        selectionToolbar = (
+          <div className="container" style={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0
+          }}>
+            <ul className="list-inline">
+              <li><button className="btn btn-default" onClick={this.handleRemoveSelection}><i className="fa fa-trash"></i></button></li>
+            </ul>
+          </div>
+        );
+      }
+
       return (
         <div>
           <ul className="list-inline">
             <li><button className="btn btn-default" onClick={this.handleAddImage}><i className="fa fa-image"></i> </button></li>
             <li><button className="btn btn-default" onClick={this.handleAddText}><i className="fa fa-font"></i> </button></li>
             <li><button className="btn btn-default" onClick={this.handleExport}><i className="fa fa-download"></i></button></li>
-            <li><button disabled={!this.state.selectedItem} className="btn btn-default" onClick={this.handleRemoveSelection}><i className="fa fa-trash"></i></button></li>
           </ul>
           {this.createItems()}
           <SelectionFrame selection={this.state.selectedItemDOMNode}/>
+          {selectionToolbar}
         </div>
       );
     }