Better helper bar with float and more room for options

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];

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');
   },

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,

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>
       <% } %>

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