From 56c082d7feb18e98bb2441774bd804d17dc0dbc1 Mon Sep 17 00:00:00 2001
From: doomsayer2 <fgrassinger@gmx.at>
Date: Thu, 25 Jan 2018 10:36:31 +0100
Subject: [PATCH] General styling fixes. (refs #19)

---
 package.json                  |  1 +
 src/data_import.ts            | 26 ++++++++++----
 src/sankey_diagram.ts         |  6 ++--
 src/styles/_data_imports.scss | 65 +++++++++++++++++++++++++----------
 src/styles/_sankey.scss       |  2 +-
 5 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 1f29c58..8e98bd2 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "@types/localforage": "0.0.34",
     "@types/papaparse": "^4.1.28",
     "BootSideMenu": "0.0.1",
+    "alertify.js": "^1.0.12",
     "bootbox": "^4.4.0",
     "bootstrap-sass": "3.3.7",
     "bootstrap-slider": "^9.8.0",
diff --git a/src/data_import.ts b/src/data_import.ts
index 4b58308..de75236 100644
--- a/src/data_import.ts
+++ b/src/data_import.ts
@@ -8,6 +8,7 @@ import * as papaparse from 'papaparse';
 import * as $ from 'jquery';
 import * as localforage from 'localforage';
 import * as bootbox from 'bootbox';
+import * as alertify from 'alertify.js';
 import {textTransition} from './utilities';
 import {MAppViews} from './app';
 import {AppConstants} from './app_constants';
@@ -50,15 +51,17 @@ class DataImport implements MAppViews {
 
     if(!dataAvailable) {
       d3.select('.dataVizView').classed('invisibleClass', true);
+      d3.select('#backBtn').classed('invisibleClass', true);
     } else {
       d3.select('.dataVizView').classed('invisibleClass', false);
+      d3.select('#backBtn').classed('invisibleClass', false);
       d3.select('.dataLoadingView').classed('invisibleClass', true);
     }
 
     this.build();
     this.attachListener();
 
-    //Return the promise directly as long there is no dynamical data to update
+    // Return the promise directly as long there is no dynamical data to update
     return Promise.resolve(this);
   }
 
@@ -66,15 +69,22 @@ class DataImport implements MAppViews {
    * Build the basic DOM elements
    */
   private build() {
-    //Add the upload form and whole container
+    // Add the upload form and whole container
     this.$fileContainer = this.$node.html(`
     <div class='fileContainer'>
     <button type='button' id='specialBtn' class='btn btn-primary btn-lg'>Start Visualization</button>
-    <center><h2 id='informationText'>Upload your data here!!</h2></center>
+    <center><h2 id='informationText'>Load your data here!!</h2></center>
       <form class='form-inline well'>
         <div class='form-group'>
-          <label for='files'>Upload a CSV file:</label>
-          <input type='file' id='files' class='form-control' accept='.csv' required />
+          <div class='input-group'>
+              <span class='input-group-btn' style='padding-right: 2px;'>
+                <span class='btn btn-default btn-file'>
+                  Load CSV file... 
+                  <input type='file' id='files' accept='.csv' required />
+                </span>
+              </span>
+            <input readonly='readonly' placeholder='CSV file' class='form-control' id='filename' type='text'>
+          </div>
         </div>
         <div class='form-group'>
           <button type='submit' id='submitFile' class='btn btn-primary'>
@@ -84,7 +94,7 @@ class DataImport implements MAppViews {
         </div>
       </form>`);
 
-    //Add the display conatiner and the logs
+    // Add the display conatiner and the logs
     d3.select('.fileContainer').append('div').classed('additionalInfo', true);
     this.$displayContainer = d3.select('.additionalInfo').html(`
         <div class='logContainer'>
@@ -275,6 +285,10 @@ class DataImport implements MAppViews {
     });
 
     d3.selectAll('a').on('click', (e) => {console.log('testaaaaaaa'); e.preventDefault();});
+
+    $('#files').change(function(){
+      $('#filename').val($(this).val().replace('C:\\fakepath\\', ''));
+    });
   }
 
   /**
diff --git a/src/sankey_diagram.ts b/src/sankey_diagram.ts
index a29382e..1bd84ca 100644
--- a/src/sankey_diagram.ts
+++ b/src/sankey_diagram.ts
@@ -123,7 +123,7 @@ class SankeyDiagram implements MAppViews {
             </div>
             <div class='col-sm-1' style='margin-top: 24px;'>
               <a data-toggle='collapse' href='#collapseContentEntity' aria-expanded='true' class='collapsed'>
-              <i class='fa fa-pencil-square-o pull-right'></i></a>
+              <i class='fa fa-pencil-square-o pull-right specialIcon'></i></a>
             </div>
           </div>
           <div id='collapseContentEntity' class='collapse'>
@@ -156,7 +156,7 @@ class SankeyDiagram implements MAppViews {
           </div>
           <div class='col-sm-1' style='margin-top: 24px;'>
             <a data-toggle='collapse' href='#collapseContentEntity3' aria-expanded='true' class='collapsed'>
-            <i class='fa fa-pencil-square-o pull-right'></i></a>
+            <i class='fa fa-pencil-square-o pull-right specialIcon'></i></a>
           </div>
         </div>
         <div id='collapseContentEntity3' class='collapse' style='width: 67%; margin-left: 21%;'>
@@ -194,7 +194,7 @@ class SankeyDiagram implements MAppViews {
         </div>
         <div class='col-sm-1' style='margin-top: 24px;'>
           <a data-toggle='collapse' href='#collapseContentEntity2' aria-expanded='true' class='collapsed'>
-          <i class='fa fa-pencil-square-o pull-right'></i></a>
+          <i class='fa fa-pencil-square-o pull-right specialIcon'></i></a>
         </div>
       </div>
       <div id='collapseContentEntity2' class='collapse'>
diff --git a/src/styles/_data_imports.scss b/src/styles/_data_imports.scss
index 20b427d..1eef685 100644
--- a/src/styles/_data_imports.scss
+++ b/src/styles/_data_imports.scss
@@ -69,21 +69,21 @@
 }
 
 .demo {
-  width:100%;
-  border:1px dashed #C0C0C0;
-  border-collapse:collapse;
-  padding:5px;
+  width: 100%;
+  border: 1px dashed #C0C0C0;
+  border-collapse: collapse;
+  padding: 5px;
   table-layout: fixed;
 }
 .demo th {
-  border:1px dashed #C0C0C0;
-  padding:5px;
-  background:#CCCCCC;
+  border: 1px dashed #C0C0C0;
+  padding: 5px;
+  background: #CCCCCC;
 }
 .demo td {
-  border:1px dashed #C0C0C0;
-  text-align:left;
-  padding:5px;
+  border: 1px dashed #C0C0C0;
+  text-align: left;
+  padding: 5px;
 }
 
 .leftTD {
@@ -95,20 +95,49 @@
 }
 
 .downloadTable {
-  width:100%;
-  border:1px dotted #C0C0C0;
-  border-collapse:collapse;
-  padding:5px;
+  width: 100%;
+  border: 1px dotted #C0C0C0;
+  border-collapse: collapse;
+  padding: 5px;
 }
 .downloadTable th {
-  border:1px dotted #C0C0C0;
-  padding:5px;
+  border: 1px dotted #C0C0C0;
+  padding: 5px;
 }
 .downloadTable td {
-  border:1px dotted #C0C0C0;
-  padding:5px;
+  border: 1px dotted #C0C0C0;
+  padding: 5px;
 }
 
 #helpInfo {
   margin-top: 40px;
 }
+
+.btn-file {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 999px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  background: red;
+  cursor: inherit;
+  display: block;
+}
+
+input[readonly] {
+  background-color: white !important;
+  cursor: text !important;
+}
+
+#filename {
+  margin-right: 100px;
+}
diff --git a/src/styles/_sankey.scss b/src/styles/_sankey.scss
index 0736d53..3ccae87 100644
--- a/src/styles/_sankey.scss
+++ b/src/styles/_sankey.scss
@@ -233,7 +233,7 @@ svg text.yaxisunit {
 //  transform: rotate(-90deg);
 //}
 
-.row .fa {
+.specialIcon {
   color: #808080;
   font-size: 1.3em;
 }