From 17fda94aff22e7ed7bc04c65a83412a88a553ee3 Mon Sep 17 00:00:00 2001
From: Peter Cottle <pcottle@fb.com>
Date: Mon, 30 Dec 2013 10:23:58 -0800
Subject: [PATCH] Better helper bar with float and more room for options

---
 src/js/git/commands.js  |  2 +-
 src/js/graph/index.js   | 10 +++++++---
 src/js/views/index.js   | 20 ++++++++++++++++++++
 src/style/main.css      | 16 ++++++++++++++++
 src/template.index.html |  6 +++---
 todo.txt                |  4 ++--
 6 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/js/git/commands.js b/src/js/git/commands.js
index 7823bf3c..77ef2b01 100644
--- a/src/js/git/commands.js
+++ b/src/js/git/commands.js
@@ -1,7 +1,7 @@
 var _ = require('underscore');
 var intl = require('../intl');
 
-var Graph = require('../graph'); 
+var Graph = require('../graph');
 var Errors = require('../util/errors');
 var CommandProcessError = Errors.CommandProcessError;
 var GitError = Errors.GitError;
diff --git a/src/js/graph/index.js b/src/js/graph/index.js
index 5d11d185..49285de0 100644
--- a/src/js/graph/index.js
+++ b/src/js/graph/index.js
@@ -14,6 +14,13 @@ var Graph = {
     objID,
     gitVisuals
   ) {
+    // circular dependency, should move these base models OUT of
+    // the git class to resolve this
+    var Git = require('../git');
+    var Commit = Git.Commit;
+    var Ref = Git.Ref;
+    var Branch = Git.Branch;
+    var Tag = Git.Tag;
     if (createdSoFar[objID]) {
       // base case
       return createdSoFar[objID];
@@ -82,7 +89,6 @@ var Graph = {
         parentObjs.push(this.getOrMakeRecursive(tree, createdSoFar, parentID));
       }, this);
 
-      var Commit = require('../git').Commit;
       var commit = new Commit(_.extend(
         commitJSON,
         {
@@ -121,8 +127,6 @@ var Graph = {
   },
 
   getUpstreamSet: function(engine, ancestor) {
-    invariant(typeof ancestor === 'string', 'pass in string');
-
     var commit = engine.getCommitFromRef(ancestor);
     var ancestorID = commit.get('id');
     var queue = [commit];
diff --git a/src/js/views/index.js b/src/js/views/index.js
index 252ddd7a..790089ca 100644
--- a/src/js/views/index.js
+++ b/src/js/views/index.js
@@ -596,6 +596,10 @@ var LevelToolbar = BaseView.extend({
 });
 
 var HelperBar = BaseView.extend({
+  getClassName: function() {
+    return 'BaseHelperBar';
+  },
+
   tagName: 'div',
   className: 'helperBar transitionAll',
   template: _.template($('#helper-bar-template').html()),
@@ -655,6 +659,7 @@ var HelperBar = BaseView.extend({
       items: this.getItems()
     };
     this.render();
+    this.$el.addClass(this.getClassName());
     this.setupChildren();
 
     if (!options.wait) {
@@ -664,6 +669,10 @@ var HelperBar = BaseView.extend({
 });
 
 var IntlHelperBar = HelperBar.extend({
+  getClassName: function() {
+    return 'IntlHelperBar';
+  },
+
   getItems: function() {
     return [{
       text: 'Git Branching',
@@ -726,10 +735,17 @@ var IntlHelperBar = HelperBar.extend({
 });
 
 var CommandsHelperBar = HelperBar.extend({
+  getClassName: function() {
+    return 'CommandsHelperBar';
+  },
+
   getItems: function() {
     return [{
       text: 'Levels',
       id: 'levels'
+    }, {
+      text: 'Solution',
+      id: 'solution'
     }, {
       text: 'Reset',
       id: 'reset'
@@ -753,6 +769,10 @@ var CommandsHelperBar = HelperBar.extend({
     HelperBar.prototype.fireCommand.apply(this, arguments);
   },
 
+  onSolutionClick: function() {
+    this.fireCommand('show solution');
+  },
+
   onObjectiveClick: function() {
     this.fireCommand('objective');
   },
diff --git a/src/style/main.css b/src/style/main.css
index e9c76bf4..c385a2ea 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -568,6 +568,8 @@ li.rebaseEntry,
   border-right: 0;
   box-shadow: -1px -1px 5px rgba(0,0,0,0.3);
   font-weight: bold;
+  max-width: 500px;
+  clear: both;
 }
 
 .helperBar i {
@@ -581,6 +583,10 @@ li.rebaseEntry,
   font-style: italic;
 }
 
+.helperBar a.exit {
+  float: right
+}
+
 .helperBar a:after {
   content: ' \b7';
   font-style: normal;
@@ -590,10 +596,15 @@ li.rebaseEntry,
   padding-right: 10px;
 }
 
+.helperBar a:nth-last-child(2):after,
 .helperBar a:last-child:after {
   content: '';
 }
 
+.helperBar.BaseHelperBar a:nth-last-child(2):after {
+  content: ' \b7';
+}
+
 div.helperBar {
   -webkit-transform: translate3d(150%,0,0);
   -moz-transform: translate3d(150%,0,0);
@@ -608,6 +619,11 @@ div.helperBar.show {
   -o-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
+  height: 45px;
+}
+
+div.helperBar.show.BaseHelperBar {
+  height: auto;
 }
 
 #commandLineBar,
diff --git a/src/template.index.html b/src/template.index.html
index 4f1c4e09..0605eb03 100644
--- a/src/template.index.html
+++ b/src/template.index.html
@@ -121,14 +121,14 @@
   <script type="text/html" id="helper-bar-template">
     <% for(var i = 0; i < items.length; i++) { %>
       <% if (items[i].text) { %>
-        <a data-id="<%= items[i].id %>"><%= items[i].text %></a>
+        <a data-id="<%= items[i].id %>" class="<%=items[i].id%>"><%= items[i].text %></a>
       <% } else if (items[i].newPageLink) { %>
         <a data-id="<%= items[i].id %>" 
-          target="_blank" href="<%= items[i].href %>">
+          target="_blank" href="<%= items[i].href %>"class="<%=items[i].id%>">
           <i data-id="<%= items[i].id %>" class="icon-<%= items[i].icon %>"></i>
         </a>
       <% } else { %>
-        <a data-id="<%= items[i].id %>">
+        <a data-id="<%= items[i].id %>" class="<%=items[i].id%>">
           <i data-id="<%= items[i].id %>" class="icon-<%= items[i].icon %>"></i>
         </a>
       <% } %>
diff --git a/todo.txt b/todo.txt
index 68607966..8e9450a0 100644
--- a/todo.txt
+++ b/todo.txt
@@ -10,8 +10,6 @@ Medium things:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [ ] figure out what to do with instant commands (and parse waterfall and the like)
 [ ] disable git commands on hg levels (and vice versa)
-[ ] make helper bar clickable with goal vis floating
-[ ] make show solution easier
 
 Small things to implement:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -28,6 +26,8 @@ Ideas for cleaning
 Done things:
 (I only started this on Dec 17th 2012 to get a better sense of what was done)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[x] make show solution easier
+[x] make helper bar clickable with goal vis floating
 [x] huge update to level you wrote. that you said is true for
     git fetch and git push (basically) but pull is not the same. basically
     its going to ignore where you are during the fetch