Merge pull request #422 from gem/IRV-UI-UX-improvements

Irv ui ux improvements
gem · Jun 8, 2015 · 9bac774 · 9bac774
2 parents 16e7fe2 + ed5d24d
commit 9bac774
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 32 deletions.
diff --git a/openquakeplatform/openquakeplatform/static/css/irv_viewer.css b/openquakeplatform/openquakeplatform/static/css/irv_viewer.css
@@ -122,10 +122,6 @@ svg {
   fill: blue;
 }
 
-#map {
-  height: 300px !important;
-}
-
 #licenseName {
   float: left;
   clear: none;
@@ -151,3 +147,5 @@ select#layer-list {
 .ui-dialog {
   z-index: 1000;
 }
+
+
diff --git a/openquakeplatform/openquakeplatform/static/js/irv_viewer.js b/openquakeplatform/openquakeplatform/static/js/irv_viewer.js
@@ -643,8 +643,8 @@ function thematicMap(layerAttributes) {
         locationMode: L.LocationModes.GEOJSON,
         geoJSONField: 'geometry',
         layerOptions: {
-            fillOpacity: 1,
-            opacity: 1,
+            fillOpacity: 0.5,
+            opacity: 0.5,
             weight: 1,
             stroke: true,
             color: '#0000FF'
@@ -748,6 +748,19 @@ function getGeoServerLayers() {
 }
 
 var startApp = function() {
+    // theme tabls behavior
+    $('#themeTabs').resizable({
+        minHeight: 500,
+        minWidth: 640
+    });
+    $('#themeTabs').draggable();
+
+    $('#themeTabs').tabs({
+        collapsible: false,
+        selected: -1,
+        active: false,
+    });
+
     $('#cover').remove();
     $('#projectDef-spinner').hide();
     $('#iri-spinner').hide();
@@ -794,9 +807,10 @@ var startApp = function() {
 
     // TODO check these are all needed
     $('#region-selection-list').hide();
+    $('#svir-project-list').hide();
+
     $('#thematic-map-selection').css({ 'margin-bottom' : 0 });
     $('#svir-project-list').css({ 'margin-bottom' : 0 });
-    $('#svir-project-list').hide();
 
     $('#thematic-map-selection').hide();
 
@@ -808,7 +822,7 @@ var startApp = function() {
     });
 
     $('#loadProjectBtn').click(function() {
-        $("#themeTabs").tabs("option", "active", 0);
+        $('#themeTabs').tabs('option', 'active', 0);
         $('#thematic-map-selection').show();
         $('#projectDef-spinner').text('Loading ...');
         $('#projectDef-spinner').append('<img id="download-button-spinner" src="/static/img/ajax-loader.gif" />');
@@ -954,15 +968,39 @@ var startApp = function() {
         closeOnEscape: true
     });
 
-    $(function() {
-        $( '#themeTabs' ).tabs({
-            collapsible: false,
-            selected: -1,
-            active: false,
-            height: 550
-        });
+    $('#map-tools').css({
+        'padding': '6px',
+        'position': 'absolute',
+        'top': '43px',
+        'left': '39px',
+        'width': '94%',
+        'z-index': 6
+    });
+
+    $('#themeTabs').css({
+        'width': '700px',
+        'height': '600px',
+        'overflow': 'auto',
+        'position': 'fixed',
+        'left': '10px',
+        'top': '110px'
+    });
+
+    $('#loadProjectdialogBtn').css({
+        'position': 'fixed',
+        'left': '50px'
+    });
+
+    $('#base-map-menu').css({
+        'position': 'fixed',
+        'left': '390px'
     });
 
+    $('#thematic-map-selection').css({
+        'position': 'fixed',
+        'left': '160px',
+        'display': 'block'
+    });
 };
 
 app.initialize(startApp);
diff --git a/openquakeplatform/openquakeplatform/static/js/irv_viewer_PCP_primary.js b/openquakeplatform/openquakeplatform/static/js/irv_viewer_PCP_primary.js
@@ -143,7 +143,7 @@ function Primary_PCP_Chart(projectDef, layerAttributes, selectedRegion) {
 
         var svg = d3.select("#primary-chart").append("svg")
             .attr("viewBox", "-30 -20 " +winW+" " + (winH +20))
-            .attr("id", "IRI-svg-element")
+            .attr("id", "primary-svg-element")
             .append("svg:g")
             .attr("transform", "translate(" + m[3] + ",5)");
 

diff --git a/openquakeplatform/openquakeplatform/static/js/irv_viewer_PCP_theme.js b/openquakeplatform/openquakeplatform/static/js/irv_viewer_PCP_theme.js
@@ -85,7 +85,7 @@ function Theme_PCP_Chart(themeData) {
     $('#cat-chart').empty();
 
     var svg = d3.select('#cat-chart').append('svg')
-        .attr("viewBox", "-30 20 " +(winW -130)+" " +winH)
+        .attr("viewBox", "100 20 " +(winW -400)+" " +winH)
         .attr("id", "CI-svg-element")
         .append('g')
         .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

diff --git a/openquakeplatform/openquakeplatform/static/js/irv_viewer_d3_tree.js b/openquakeplatform/openquakeplatform/static/js/irv_viewer_d3_tree.js
@@ -15,7 +15,7 @@
       along with this program.  If not, see <https://www.gnu.org/licenses/agpl.html>.
 */
 
-    var DEFAULT_OPERATOR = "Weighted sum"
+    var DEFAULT_OPERATOR = "Weighted sum";
     var CIRCLE_SCALE = 30;
     var MAX_STROKE_SIZE = 4;
     var MIN_CIRCLE_SIZE = 0.001;
@@ -37,11 +37,22 @@
     //// Project Definition Collapsible Tree ///
     ////////////////////////////////////////////
 
-    function loadPD(selectedPDef, qt_page) {
+    function loadPD(selectedPDef) {
+
+        // default tab window size
+        var winH = 600;
+        var winW = 700;
+
+        // detect tab window resize
+        $('#themeTabs').resize(function(event) {
+            winH = event.clientY;
+            winW = event.clientX;
+        });
+
         var qt_page = typeof qt_page !== 'undefined' ? qt_page : false;
-        var margin = {top: 0, right: 80, bottom: 20, left: 80},
-            width = 960 - margin.right - margin.left,
-            height = 800 - margin.top - margin.bottom;
+        var margin = {top: 0, right: 20, bottom: 20, left: 20},
+            width = winW - margin.right - margin.left,
+            height = winH - margin.top - margin.bottom;
 
         var i = 0,
             duration = 750,
@@ -97,7 +108,6 @@
         $('#saveBtn').click(function() {
             $('#checkboxPD').attr('checked', false);
             $('#saveState-spinner').hide();
-            var pdLicense = sessionProjectDef.license;
             var pdLicenseName = sessionProjectDef.license.substring(0, sessionProjectDef.license.indexOf('('));
             var pdLicenseURL = sessionProjectDef.license.split('(')[1];
             pdLicenseURL = pdLicenseURL.replace(')', '');
@@ -114,7 +124,6 @@
             );
 
             $('#checkboxPD').change(function() {
-                var inputVal = $('#giveNamePD').val();
                 if (this.checked) {
                     $('#submitPD').attr('disabled', false);
                 } else {
@@ -167,7 +176,7 @@
                             // access the last or newest element in the dropdown menu
                             var lastValue = $('#pdSelection option:last-child').val();
                             // select the newest element in the dropdown menu
-                            $("#pdSelection").val(lastValue);
+                            $('#pdSelection').val(lastValue);
                         }).fail(function() {
                             isSubmitting = false;
                             $('#ajaxErrorDialog').empty();
@@ -320,19 +329,17 @@
         // empty any previously drawen chart
         $('#projectDef-tree').empty();
         var svg = d3.select("#projectDef-tree").append("svg")
-            .attr("width", width + margin.right + margin.left)
-            .attr("height", height + margin.top + margin.bottom)
-            .attr("id", "project-definition-svg")
-            .append("g")
-            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+            .attr("viewBox", "-60 50 " + winW +" " + winH)
+            .attr("id", "primary-svg-element")
+            .append("svg:g")
+            .attr("transform", "translate(" + margin.left + ",5)");
 
             data = selectedPDef;
 
             root = data;
             root.x0 = height / 2;
             root.y0 = 0;
 
-            //root.children.forEach(collapse);
             updateD3Tree(root);
 
         $('#project-definition-svg').hide();
@@ -546,7 +553,7 @@
                     qt_page.json_updated(pdData);
                 }
             }
-            $('#projectDefWeight-spinner').hide();
+            $('#projectDefWeight-spinner').remove();
         }
     } //end d3 tree