From 162375f7de7d6d268248baa6bb72031994874dd6 Mon Sep 17 00:00:00 2001
From: Zachary Vance <vanceza@gmail.com>
Date: Fri, 22 May 2015 15:27:54 -0700
Subject: [PATCH] Move the reset button

---
 dist/flowy.css          | 31 +++++++++++++++++++++++--------
 dist/flowy.js           | 14 +++++++++-----
 dist/flowy.unwrapped.js | 14 +++++++++-----
 dist/index.html         |  4 +---
 src/css/flowy.css       | 31 +++++++++++++++++++++++--------
 src/index.html          |  6 ++----
 src/library/shortcut.js | 12 ++++++++----
 src/views/app.js        |  2 +-
 8 files changed, 76 insertions(+), 38 deletions(-)

diff --git a/dist/flowy.css b/dist/flowy.css
index 88cfec0..06989da 100644
--- a/dist/flowy.css
+++ b/dist/flowy.css
@@ -37,26 +37,27 @@ body {
     background: #ffffff;
 }
 
-#shortcuts {
+#shortcuts-wrapper {
     position: fixed;
-    height: 100%;
-    top: -2px;
+    bottom: -2px;
     left: 10px;
     width: 200px;
     background: #ffffff;
+}
+
+.shortcuts {
     border-collapse: collapse;
-    border-spacing: 0;
-    border: 0;
-    padding: 0;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.6);
+    display: block;
 }
 
-.shortcut-description {
+.shortcuts .description {
     background-color: #efefef;
     max-width: 80px;
     padding: 0 0 0 7px;
 }
 
-.shortcut-keybinding {
+.shortcuts .keybinding {
     padding: 0 0 0 7px;
 }
 
@@ -64,3 +65,17 @@ body {
     border-top: 0;
     border-bottom: 1px solid #aaa;
 }
+
+#shortcuts-wrapper .title {
+    padding: 10px;
+    font-size: 100%;
+    border-bottom: 1px solid #979797
+    font-weight: bold;
+    background: -webkit-gradient( linear, left bottom, left top, color-stop(1, rgb(237,237,237)), color-stop(0, rgb(196,196,196)) );
+}
+
+#reset-button {
+    position: fixed;
+    bottom: 3px;
+    right: 3px;
+}
diff --git a/dist/flowy.js b/dist/flowy.js
index f389129..42bd5ec 100644
--- a/dist/flowy.js
+++ b/dist/flowy.js
@@ -265,6 +265,7 @@ var Shortcut = (function(document, _) {
             });
         },
         bindShortcutsDisplay: function(element, options) {
+            options = _.extend(options, { includeElement: false });
             element.innerHTML = this.displayShortcuts(options);
             var self = this;
             this.onRebindShortcut(function() {
@@ -281,17 +282,20 @@ var Shortcut = (function(document, _) {
                 allowRebind: false, // Insert javascript to allow rebinding shortcuts
                 highlightRepeats: true, // Warn about shortcuts which are bound to multiple actions (if user can remap shortcuts) // TODO
                 shortcuts: _.sortBy(this.shortcuts, 'description'),
+                includeElement: true,
             });
             if (options.objectGrouping === "default") {
-                var multipleObjectTypes = _.chain(shortcuts).pluck('object').unique().size().value() > 1;
+                var multipleObjectTypes = _.chain(options.shortcuts).pluck('object').unique().size().value() > 1;
                 options.objectGrouping = multipleObjectTypes;
             }
-            return '<table class="shortcuts">' + _.map(options.shortcuts, function(shortcut) {
-                return _.template('<tr><td class="shortcut-description"><%= description %></td><td class="shortcut-keybinding"><%= keybindingHtml %></td></tr>')({
+            var inside = '<div class="title">Shortcuts</div><table class="shortcuts"><tbody>' + _.map(options.shortcuts, function(shortcut) {
+                return _.template('<tr><td class="description"><%= description %></td><td class="keybinding"><%= keybindingHtml %></td></tr>')({
                     description: shortcut.description,
                     keybindingHtml: this._displayKeybinding(shortcut, options)
                 });
-            }, this).join("") + "</table>";
+            }, this).join("") + '</tbody></table>';
+            if (options.includeElement) return '<div id="shortcuts">' + inside + '</div>';
+            else return inside;
         },
         _displayKeybinding: function(shortcut, options) {
             options = _.defaults({}, options, { displayMultiple: true, allowRebind: false });
@@ -802,7 +806,7 @@ var AppView = Backbone.View.extend({
                 e.save();
             });
         });
-        Shortcut.bindShortcutsDisplay(this.$("#shortcuts")[0], {allowRebind: true});
+        Shortcut.bindShortcutsDisplay(this.$("#shortcuts-wrapper")[0], {allowRebind: true});
         this.views = {}; // A list of views for each element in the collection
         this.list.fetch();
         this.render();
diff --git a/dist/flowy.unwrapped.js b/dist/flowy.unwrapped.js
index 4f3edee..d343520 100644
--- a/dist/flowy.unwrapped.js
+++ b/dist/flowy.unwrapped.js
@@ -264,6 +264,7 @@ var Shortcut = (function(document, _) {
             });
         },
         bindShortcutsDisplay: function(element, options) {
+            options = _.extend(options, { includeElement: false });
             element.innerHTML = this.displayShortcuts(options);
             var self = this;
             this.onRebindShortcut(function() {
@@ -280,17 +281,20 @@ var Shortcut = (function(document, _) {
                 allowRebind: false, // Insert javascript to allow rebinding shortcuts
                 highlightRepeats: true, // Warn about shortcuts which are bound to multiple actions (if user can remap shortcuts) // TODO
                 shortcuts: _.sortBy(this.shortcuts, 'description'),
+                includeElement: true,
             });
             if (options.objectGrouping === "default") {
-                var multipleObjectTypes = _.chain(shortcuts).pluck('object').unique().size().value() > 1;
+                var multipleObjectTypes = _.chain(options.shortcuts).pluck('object').unique().size().value() > 1;
                 options.objectGrouping = multipleObjectTypes;
             }
-            return '<table class="shortcuts">' + _.map(options.shortcuts, function(shortcut) {
-                return _.template('<tr><td class="shortcut-description"><%= description %></td><td class="shortcut-keybinding"><%= keybindingHtml %></td></tr>')({
+            var inside = '<div class="title">Shortcuts</div><table class="shortcuts"><tbody>' + _.map(options.shortcuts, function(shortcut) {
+                return _.template('<tr><td class="description"><%= description %></td><td class="keybinding"><%= keybindingHtml %></td></tr>')({
                     description: shortcut.description,
                     keybindingHtml: this._displayKeybinding(shortcut, options)
                 });
-            }, this).join("") + "</table>";
+            }, this).join("") + '</tbody></table>';
+            if (options.includeElement) return '<div id="shortcuts">' + inside + '</div>';
+            else return inside;
         },
         _displayKeybinding: function(shortcut, options) {
             options = _.defaults({}, options, { displayMultiple: true, allowRebind: false });
@@ -801,7 +805,7 @@ var AppView = Backbone.View.extend({
                 e.save();
             });
         });
-        Shortcut.bindShortcutsDisplay(this.$("#shortcuts")[0], {allowRebind: true});
+        Shortcut.bindShortcutsDisplay(this.$("#shortcuts-wrapper")[0], {allowRebind: true});
         this.views = {}; // A list of views for each element in the collection
         this.list.fetch();
         this.render();
diff --git a/dist/index.html b/dist/index.html
index 2d1d4f3..77a4f43 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,13 +6,11 @@
 </head>
 <body>
 <div id="todo-app">
-    A todo list:
     <div id="todo-list">
 
     </div>
     <button id="reset-button">Everyone heard me say "reset button", right?</button>
-    <div id="shortcuts">
-        default shortcut text (should not see)
+    <div id="shortcuts-wrapper">
     </div>
 </div>
 </body>
diff --git a/src/css/flowy.css b/src/css/flowy.css
index 88cfec0..06989da 100644
--- a/src/css/flowy.css
+++ b/src/css/flowy.css
@@ -37,26 +37,27 @@ body {
     background: #ffffff;
 }
 
-#shortcuts {
+#shortcuts-wrapper {
     position: fixed;
-    height: 100%;
-    top: -2px;
+    bottom: -2px;
     left: 10px;
     width: 200px;
     background: #ffffff;
+}
+
+.shortcuts {
     border-collapse: collapse;
-    border-spacing: 0;
-    border: 0;
-    padding: 0;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.6);
+    display: block;
 }
 
-.shortcut-description {
+.shortcuts .description {
     background-color: #efefef;
     max-width: 80px;
     padding: 0 0 0 7px;
 }
 
-.shortcut-keybinding {
+.shortcuts .keybinding {
     padding: 0 0 0 7px;
 }
 
@@ -64,3 +65,17 @@ body {
     border-top: 0;
     border-bottom: 1px solid #aaa;
 }
+
+#shortcuts-wrapper .title {
+    padding: 10px;
+    font-size: 100%;
+    border-bottom: 1px solid #979797
+    font-weight: bold;
+    background: -webkit-gradient( linear, left bottom, left top, color-stop(1, rgb(237,237,237)), color-stop(0, rgb(196,196,196)) );
+}
+
+#reset-button {
+    position: fixed;
+    bottom: 3px;
+    right: 3px;
+}
diff --git a/src/index.html b/src/index.html
index 2d1d4f3..9d38c04 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,13 +6,11 @@
 </head>
 <body>
 <div id="todo-app">
-    A todo list:
     <div id="todo-list">
 
     </div>
-    <button id="reset-button">Everyone heard me say "reset button", right?</button>
-    <div id="shortcuts">
-        default shortcut text (should not see)
+    <button id="reset-button">Initial setup / Reset</button>
+    <div id="shortcuts-wrapper">
     </div>
 </div>
 </body>
diff --git a/src/library/shortcut.js b/src/library/shortcut.js
index 0a6f075..fd37777 100644
--- a/src/library/shortcut.js
+++ b/src/library/shortcut.js
@@ -203,6 +203,7 @@ var Shortcut = (function(document, _) {
             });
         },
         bindShortcutsDisplay: function(element, options) {
+            options = _.extend(options, { includeElement: false });
             element.innerHTML = this.displayShortcuts(options);
             var self = this;
             this.onRebindShortcut(function() {
@@ -219,17 +220,20 @@ var Shortcut = (function(document, _) {
                 allowRebind: false, // Insert javascript to allow rebinding shortcuts
                 highlightRepeats: true, // Warn about shortcuts which are bound to multiple actions (if user can remap shortcuts) // TODO
                 shortcuts: _.sortBy(this.shortcuts, 'description'),
+                includeElement: true,
             });
             if (options.objectGrouping === "default") {
-                var multipleObjectTypes = _.chain(shortcuts).pluck('object').unique().size().value() > 1;
+                var multipleObjectTypes = _.chain(options.shortcuts).pluck('object').unique().size().value() > 1;
                 options.objectGrouping = multipleObjectTypes;
             }
-            return '<table class="shortcuts">' + _.map(options.shortcuts, function(shortcut) {
-                return _.template('<tr><td class="shortcut-description"><%= description %></td><td class="shortcut-keybinding"><%= keybindingHtml %></td></tr>')({
+            var inside = '<div class="title">Shortcuts</div><table class="shortcuts"><tbody>' + _.map(options.shortcuts, function(shortcut) {
+                return _.template('<tr><td class="description"><%= description %></td><td class="keybinding"><%= keybindingHtml %></td></tr>')({
                     description: shortcut.description,
                     keybindingHtml: this._displayKeybinding(shortcut, options)
                 });
-            }, this).join("") + "</table>";
+            }, this).join("") + '</tbody></table>';
+            if (options.includeElement) return '<div id="shortcuts">' + inside + '</div>';
+            else return inside;
         },
         _displayKeybinding: function(shortcut, options) {
             options = _.defaults({}, options, { displayMultiple: true, allowRebind: false });
diff --git a/src/views/app.js b/src/views/app.js
index 9639bf2..eac1db0 100644
--- a/src/views/app.js
+++ b/src/views/app.js
@@ -79,7 +79,7 @@ var AppView = Backbone.View.extend({
                 e.save();
             });
         });
-        Shortcut.bindShortcutsDisplay(this.$("#shortcuts")[0], {allowRebind: true});
+        Shortcut.bindShortcutsDisplay(this.$("#shortcuts-wrapper")[0], {allowRebind: true});
         this.views = {}; // A list of views for each element in the collection
         this.list.fetch();
         this.render();
-- 
2.47.3