Better helper bar with float and more room for options

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;

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