new info box (now card) styling - Partial

added a class to the info card to style different types in css.
also rearranged colors in helpers.js

(alon: changed implementation and broke the edit, will fix in the
morning)

2 files changed, 35 insertions, 27 deletions

diff --git a/src/view/helpers.js b/src/view/helpers.js
index 41d99891..ad11763a 100644
--- a/src/view/helpers.js
+++ b/src/view/helpers.js
@@ -5,35 +5,38 @@ function customColor(type) {
     var color;
     switch (type) {
         case "person":
-            color = '#FCB924';
+            color = '#FCB924'; //blue
             break;
         case "club":
-            color = '#009DDC';
+            color = '#ee3654'; //magenta
             break;
         case "skill":
-            color = '#62BB47';
+            color = '#fad900'; //yellow
             break;
         case "third-internship-proposal":
-            color = '#202020';
+            color = '#33c2e0'; //cyan
             break;
         case "internship":
-            color = '#933E99';
+            color = '#ff8b11'; //orange
             break;
         case "interest":
-            color = '#933E99';
+            color = '#8b3ab0'; //purple
+            break;
+        case "project":
+            color = "#40C200"; //green
             break;
         case "empty":
-            color = "#080808";
+            color = "#919095"; //mid-grey
             break;
         case "chainlink":
-            color = "#fff";
+            color = "#363636"; //dark-grey
             break;
         case "bubble":
-            color = "rgba(0,0,0,0.2)";
+            color = "rgba(255,255,255,0.2)"; // white, 0.2 opaque
             break;
         default:
             console.log('bug: unknown type ' + type);
-            color = '#080808';
+            color = '#d4d4d9'; //mid-light grey
             break;
     }
     return color;
diff --git a/src/view/node_info.js b/src/view/node_info.js
index a3b8f7d4..494b674b 100644
--- a/src/view/node_info.js
+++ b/src/view/node_info.js
@@ -2,34 +2,39 @@ define(['jquery', 'jquery-ui', 'view/helpers', 'view/internal'],
 function($, _unused_jquery_ui,  view_helpers, internal) {
 
 function show(d) {
-    var editURL = '',
-        name_field = 'Name: ' + '<input id="editformname">',
-        html;
-
+    var info = $('.info'), // #TODO - move to tab
+        f = false,
+        t = true,
+        visible = {
+          "third-internship-proposal":  [t, t, t, f, f],
+          "chainlink":                  [f, f, f, f, f],
+          "skill":                      [f, f, f, f, t],
+          "interest":                   [f, f, f, f, t],
+          "_defaults":                  [f, f, f, f, t],
+        },
+        fields = ["status", "startdate", "enddate", "desc", "url"],
+        flags = visible.hasOwnProperty(d.type) ? visible[d.type] : visible._defaults,
+        i;
+    
     internal.edit_tab.show('node');
 
-    if (d.type === "third-internship-proposal") {
-      html = '<br/><form id="editbox"><label>Type:</label><select id="edittype"><option value="person">Person</option><option value="club">Club</option><option value="skill">Skill</option><option value="interest">Interest</option><option value="third-internship-proposal">Third-internship-proposal</option><option value="internship">Internship</option></select><br/><label>Status</label><select id="editstatus"><option value="waiting">Waiting</option><option value="approved">Approved</option><option value="notapproved">Not Approved</option></select><br/><label>Start date:</label><input id="editstartdate"/></br><label>End date:</label><input id="editenddate"/></br><button>Save</button><button id="deletenode">Delete</button></form>';
-    } else if(d.type=== "chainlink"){
-      html = '<br/><form id="editbox"><button>Save</button><button id="deletenode">Delete</button></form>';
-    }else{
-      if (d.type !== 'skill' && d.type !== 'interest') {
-        editURL = '<label>URL:</label><input id="editurl"/>'
-      }
-      html = '<br/><form id="editbox"><label>Type:</label><select id="edittype"><option value="person">Person</option><option value="club">Club</option><option value="skill">Skill</option><option value="interest">Interest</option><option value="third-internship-proposal">Third-internship-proposal</option><option value="internship">Internship</option></select><br/>' + editURL + '<br/><button>Save</button><button id="deletenode">Delete</button></form>';
+    for (i = 0 ; i < flags.length; ++i) {
+        if (flags[i]) {
+            info.find(fields[i]).show();
+        } else {
+            info.find(fields[i]).hide();
+        }
     }
 
-    $('.info').html(name_field + html);
-    $('.info').css("border-color", view_helpers.customColor(d.type));
+    $('.info').attr('class', 'info');
+    $('.info').addClass('type-' + d.type); // Add a class to distinguish types for css
 
     $('.info').find('#editformname').val(d.name);
-
     $("#editenddate").datepicker({
       inline: true,
       showOtherMonths: true,
       dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     });
-
     $("#editstartdate").datepicker({
       inline: true,
       showOtherMonths: true,