NIHVIVO-3419: Improved UX for adding individuals in a first time VITRO installation

webapp/web/css/admin.css

@@ -43,3 +43,15 @@
 #alertIcon {
     vertical-align:middle
 }
+/* BUBBLE ALERT FOR ADDING INDIVIDUAL CLASSES -----> */
+#addClassBubble p{
+    width: 258px;
+    height: 64px;
+    font-size: 13px;
+    line-height: 1.3em;
+    padding: 25px 5px 5px 13px;
+    background: #fff url('../images/siteAdmin/addClassBubble.png') 0 0 no-repeat; 
+    color: #797979;
+    padding-bottom: 0;
+    margin-bottom: 0;
+}

webapp/web/js/siteAdmin/siteAdminUtils.js

@@ -0,0 +1,27 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+  
+/*Display bubble message letting the user knows that it is necessary to create class groups and associate classes with class groups when there is no individual classes to select in Data Input section and 
+hide it when there are classes*/
+    
+$(document).ready(function(){
+    
+     var classesInSelectList = $('#addIndividualClass option').length;
+     
+     if (classesInSelectList == 0) {
+         $('#addIndividualClass input[type="submit"]').css('opacity','.4').click(function(event){
+             event.preventDefault();
+             $('#addClassBubble').effect( "shake", {times:2, direction:"up", distance:5}, 50 );
+          });
+          
+         $('#VClassURI').css('width','150px');
+         
+         $('#addClassBubble').show();
+         
+     }else{
+         $('#addIndividualClass input[type="submit"]').removeClass('opacity');
+         
+         $('#VClassURI').removeClass('width');
+         
+         $('#addClassBubble').hide();
+     }
+});

webapp/web/templates/freemarker/body/siteAdmin/siteAdmin-dataInput.ftl

@@ -8,12 +8,21 @@
     <section class="pageBodyGroup" role="region">
         <h3>Data Input</h3>
 
-        <form action="${dataInput.formAction}" method="get">
+        <form id="addIndividualClass" action="${dataInput.formAction}" method="get">
             <select id="VClassURI" name="typeOfNew" class="form-item" role="select">
                 <@form.optionGroups groups=dataInput.groupedClassOptions />
             </select>
             <input type="hidden" name="editForm" value="edu.cornell.mannlib.vitro.webapp.edit.n3editing.configuration.generators.NewIndividualFormGenerator" role="input" />
             <input type="submit" id="submit" value="Add individual of this class" role="button" />
         </form>
+        
+        <section id="addClassBubble" role="region">
+            <p>Please create a <a title="Create a class gorup" href="${urls.base}/editForm?controller=Classgroup">class group</a> and associate classes with the group created.</p>
+        </section>
     </section>
 </#if>
+
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
+
+${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/siteAdmin/siteAdminUtils.js"></script>')}