Updating breadcrumb popover to contain project and model information.…

… Addresses #575
sandialabs · Feb 11, 2016 · a33d6c5 · a33d6c5
1 parent 160bcce
commit a33d6c5
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/web-server/js/slycat-navbar.js b/web-server/js/slycat-navbar.js
@@ -56,21 +56,7 @@ define("slycat-navbar", ["slycat-server-root", "slycat-web-client", "slycat-chan
           description: project.description,
           creator: project.creator,
           created: project.created,
-          acl: project.acl,
-          popover: ko.pureComputed(function()
-          {
-            var members = [];
-            for(var i = 0; i != project.acl.administrators().length; ++i)
-              members.push(project.acl.administrators()[i].user());
-            for(var i = 0; i != project.acl.writers().length; ++i)
-              members.push(project.acl.writers()[i].user());
-            for(var i = 0; i != project.acl.readers().length; ++i)
-              members.push(project.acl.readers()[i].user());
-            var result = "<p>" + project.description() + "</p>";
-            result += "<p><small>Members: " + members.join(",") + "</small></p>";
-            result += "<p><small><em>Created " + project.created() + " by " + project.creator() + "</em></small></p>";
-            return result;
-          }),
+          acl: project.acl
         };
       });
 
@@ -101,13 +87,36 @@ define("slycat-navbar", ["slycat-server-root", "slycat-web-client", "slycat-chan
         return model._id() == component.model_id();
       });
 
-      component.model_popover = ko.pureComputed(function()
-      {
-        var model = component.model();
-        if(!model.length)
-          return "";
-        model = model[0];
-        return "<p>" + model.description() + "</p><p><small><em>Created " + model.created() + " by " + model.creator() + "</em></small></p>";
+      component.navbar_popover = ko.pureComputed(function(){
+        var projectInfo = "";
+        if(component.project().length)
+        {
+          var project = component.project()[0];
+          projectInfo += "<b>Project: </b> ";
+          projectInfo += "<span>" + project.name() + "</span>";
+          var members = [];
+          for(var i = 0; i != project.acl.administrators().length; ++i)
+            members.push(project.acl.administrators()[i].user());
+          for(var i = 0; i != project.acl.writers().length; ++i)
+            members.push(project.acl.writers()[i].user());
+          for(var i = 0; i != project.acl.readers().length; ++i)
+            members.push(project.acl.readers()[i].user());
+          if(project.description())
+            projectInfo += "<div><small><b>Description:</b> " + project.description() + "</small></div>";
+          projectInfo += "<div><small><b>Members:</b> " + members.join(",") + "</small>";
+          projectInfo += "<br /><small><b>Created:</b> " + project.created() + " by " + project.creator() + "</small></div>";
+        }
+        if(component.model().length)
+        {
+          var model = component.model()[0];
+          projectInfo += "<br /><b>Model: </b> ";
+          projectInfo += "<span>" + model.name() + "<span>";
+          if(model.description())
+            projectInfo += "<div><small><b>Description:</b> " + model.description() + "</small></div>";
+          projectInfo += "<p><small><b>Created:</b> " + model.created() + " by " + model.creator() + "</small></p>";
+        }
+
+        return projectInfo;
       });
 
       component.model_alerts = ko.pureComputed(function()

diff --git a/web-server/templates/slycat-navbar.html b/web-server/templates/slycat-navbar.html
@@ -202,11 +202,11 @@
         <ol class="breadcrumb ellipsis" data-bind="css: {'slycat-no-models': model().length == 0}">
           <!-- ko foreach: project -->
             <li class="project" data-bind="css: {'slycat-unclickable': $parent.model().length == 0}">
-              <a data-bind="text:name,popover:{trigger:'hover',html:true,content:popover()},attr:{href:$parent.server_root + 'projects/' + _id()}"></a>
+              <a data-bind="text:name,attr:{href:$parent.server_root + 'projects/' + _id()},popover:{trigger:'hover',html:true,placement:'bottom',content:$parent.navbar_popover()}"></a>
             </li>
           <!-- /ko -->
           <!-- ko foreach: model -->
-            <li class="slycat-unclickable model"><a data-bind="text:name,popover:{trigger:'hover',html:true,content:$parent.model_popover()}"></a></li>
+            <li class="slycat-unclickable model"><a data-bind="text:name,popover:{trigger:'hover',html:true,placement:'bottom',content:$parent.navbar_popover()}"></a></li>
           <!-- /ko -->
         </ol>