Move the reset button

diff --git a/dist/flowy.css b/dist/flowy.css
index 88cfec030c73688b8a53b5467dd50fa46d89940e..06989daa175a33a3a70be088e80dd1e271f734d5 100644 (file)
--- 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 f389129cab7b249809151fdefa8a816243ec26f4..42bd5ec1bab331e985b743afc1803f6d9bcf4f9d 100644 (file)
--- 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 4f3edee42b54056dcd721bbc9b3211e63027bada..d3435203eb7ce95c4557d751c01ae1f3737083f1 100644 (file)
--- 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 2d1d4f32137a4dce924438331d89f6b9729381a2..77a4f4334e24222dfebad05735238789d27074e6 100644 (file)
--- 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 88cfec030c73688b8a53b5467dd50fa46d89940e..06989daa175a33a3a70be088e80dd1e271f734d5 100644 (file)
--- 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 2d1d4f32137a4dce924438331d89f6b9729381a2..9d38c0418c32ca8f588efa8aeaac099b05000839 100644 (file)
--- 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 0a6f075afe365ff73c396cba825e4ec42f9b6766..fd37777bf3c13fd983a8f909800e8afba4b16049 100644 (file)
--- 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 9639bf2766f33540135a23e307c6824750b9b479..eac1db0deb2cff313ad281137e54e0fa395847c3 100644 (file)
--- 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();