Changeset 2072

Timestamp:

27-10-11 15:19:56 (2 years ago)

Author:

tjeerd@…

Message:

VIS-50, added study-codes, made the study-select wider and added visual cue to the different steps

Location:

trunk

Files:

• grails-app/views/visualize/index.gsp (modified) (5 diffs)
• web-app/css/visualization.css (modified) (3 diffs)
• web-app/js/visualization.js (modified) (1 diff)

trunk/grails-app/views/visualize/index.gsp

@@ -51 +51 @@
                     <div class="topmenu_item_info">no study selected</div>
                     <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
-                    <div class="formulier">
+                    <div class="formulier" style="display: block">
+                        <div class="menu_item_label_count">1</div><div class="menu_item_label">Study</div>
                         <p class="info">Select a study from the list below.</p>
                         <p style="margin-bottom: 0px;">
-                            <g:select from="${studies}" size="10" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/>
+                            <g:select from="${studies}" size="6" optionKey="id" name="study" onChange="changeStudy();"/>
                             <div class="block_search">
                                 <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>:
@@ -138 +139 @@
                 <div id="menu_container">
                     <div class="menu_item" id="menu_column">
-                        <div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
+                        <div class="menu_item_label_count"><span>2</span></div><div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
                         <p class="info">Select a field for the X-Axis from the list below. This field will be visible as columns in the table visualization.</p>
                         <p>
@@ -150 +151 @@
                     </div>
                     <div class="menu_item" id="menu_row">
-                        <div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
+                        <div class="menu_item_label_count">3</div><div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
                         <p class="info">Select a field for the Y-Axis from the list below. This field will be visible as rows in the table visualization.</p>
                         <p>
@@ -162 +163 @@
                     </div>
                     <div class="menu_item" id="menu_vis">
-                        <div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
+                        <div class="menu_item_label_count">4</div><div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
                         <p class="info">Select visualization type.</p>
                         <p>
@@ -176 +177 @@
                 
                 <div id="visualization_container">
-                    <div id="visualization"><div style="padding: 30px">Select a study to start.</div>
+                    <div id="visualization"><div style="padding: 30px">Click on the study menu and select a study to start.</div>
                     </div>
                 </div>

trunk/web-app/css/visualization.css

@@ -122 +122 @@
 
 .menu_item_label {
+    display: inline-block;
+    font-size: 20px;
+    color: #006DBA;
+    vertical-align: bottom;
+}
+
+.menu_item_label_count {
+    display: inline-block;
+    height: 22px;
+    width: 25px;
+    margin-right: 5px;
     font-size: 16px;
-    color: #006DBA;
+    font-weight: bold;
+    background-color: #006DBA;
+    color: white;
+    text-align: center;
+    padding-top: 3px;
 }
 
@@ -142 +157 @@
     height: 120px;
     font-size: 12px;
+}
+
+.menu_item select#types {
+    height: 60px;
 }
 
@@ -208 +227 @@
 }
 
+#menu_study .formulier {
+    width: 600px;
+}
+
 .formulier select {
     width: 100%;
+    height: 120px;
     font-size: 12px;
 }

trunk/web-app/js/visualization.js

@@ -11 +11 @@
 
 $(document).ready(function() {
+
+    openForm = $("#menu_study");
 
     $(".topmenu_item").click(