From 69e3ca746e537768b53964344e7f5b6767eb430c Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@gmx.fr>
Date: Fri, 2 Dec 2016 10:51:27 +0100
Subject: [PATCH] highlight selected save folder, design epuration

---
 css/gpxedit.css          | 20 +++++++++++++----
 js/gpxedit.js            | 27 +++++++++++++++++++++--
 templates/gpxcontent.php | 46 +++++++++-------------------------------
 3 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/css/gpxedit.css b/css/gpxedit.css
index 4cd803d..eae43c3 100644
--- a/css/gpxedit.css
+++ b/css/gpxedit.css
@@ -34,6 +34,12 @@ div.durationcol{
     margin-right: 2px;
 }
 
+div#logofolder{
+    margin-left: auto;
+    margin-right: auto;
+    width: 100px;
+}
+
 div#logo, div#logo img {
     height:80px;
 }
@@ -93,7 +99,7 @@ div#logo {
     max-width:200px;
 }
 
-#titlechoosedirform, #logo, #optioncheckdiv, #computecheckdiv{
+#titlechoosedirform, #optioncheckdiv, #computecheckdiv{
     float:left;
     display:block;
 }
@@ -104,9 +110,6 @@ div#logo {
 #scantypediv{
     float:right;
 }
-#logo {
-    max-width:40%;
-}
 
 #optionbuttonsdiv{
     border-left:solid 1px;
@@ -487,3 +490,12 @@ input[type=checkbox]
     color: blue !important;
     font-weight: bold !important;
 }
+h2#loadtitle, h2#savetitle{
+    text-align:center;
+    cursor: pointer;
+}
+#clearButton{
+    margin-left: auto;
+    margin-right: auto;
+    display:block;
+}
diff --git a/js/gpxedit.js b/js/gpxedit.js
index 369ff34..57bfeae 100644
--- a/js/gpxedit.js
+++ b/js/gpxedit.js
@@ -433,12 +433,13 @@ function checkKey(e){
 
 function showSaveSuccessAnimation(path){
     $('#saved').find('b#content').html('File successfully saved as<br/>'+path);
-    $('#saved').show();
+    //$('#saved').show();
+    $('#saved').fadeIn();
     setTimeout(hideSaveSuccessAnimation, 4000);
 }
 
 function hideSaveSuccessAnimation(){
-    $('#saved').hide();
+    $('#saved').fadeOut();
 }
 
 function loadFile(file){
@@ -538,6 +539,28 @@ $(document).ready(function(){
         data.li.find('>a').removeClass('selectedFolder');
     });
 
+    $('body').on('click','h2#loadtitle', function(e) {
+        if ($('#loaddiv').is(':visible')){
+            $('#loaddiv').slideUp();
+            $('#loadoptiontoggle').html('<i class="fa fa-expand"></i>');
+        }
+        else{
+            $('#loaddiv').slideDown();
+            $('#loadoptiontoggle').html('<i class="fa fa-compress"></i>');
+        }
+    });
+
+    $('body').on('click','h2#savetitle', function(e) {
+        if ($('#savediv').is(':visible')){
+            $('#savediv').slideUp();
+            $('#saveoptiontoggle').html('<i class="fa fa-expand"></i>');
+        }
+        else{
+            $('#savediv').slideDown();
+            $('#saveoptiontoggle').html('<i class="fa fa-compress"></i>');
+        }
+    });
+
 });
 
 })(jQuery, OC);
diff --git a/templates/gpxcontent.php b/templates/gpxcontent.php
index 6ac8fda..6c3d3f2 100644
--- a/templates/gpxcontent.php
+++ b/templates/gpxcontent.php
@@ -19,50 +19,24 @@ p($_['gpxedit_version']);
             </p>
             </div>
         </div>
-        <div id="folderdiv">
-        <label for="subfolderselect"><?php p($l->t('Folder')); ?> :</label>
-            <select name="subfolder" id="subfolderselect">
-            <option style="color:red; font-weight:bold"><?php p($l->t('Choose a folder')); ?></option>
-<?php
-
-// populate select options
-if (count($_['dirs']) > 0){
-    foreach($_['dirs'] as $dir){
-        echo '<option>';
-        p($dir);
-        echo '</option>'."\n";
-    }
-}
-
-?>
-            </select>
-        </div>
-<?php
-
-if (count($_['dirs']) === 0){
-    echo '<p id="nofolder">';
-    p($l->t('No gpx file found'));
-    echo '</p><p id="nofoldertext">';
-    p($l->t('You should have at least one gpx/kml/tcx file in your files'));
-    echo '.</p>';
-}
-
-?>
     </div>
     <div style="clear:both"></div>
     </form>
     <hr/>
-    <h2>Load file :</h2>
-    <div id="loadtree"></div>
+    <h2 id="loadtitle">Load <b id="loadoptiontoggle"><i class="fa fa-expand"></i></b></h2>
+    <div id="loaddiv" style="display:none;">
+        <div id="loadtree"></div>
+    </div>
     <hr/>
-    <h2>Save to :</h2>
-    <div id="savetree"></div>
-    <input id="saveName"></input>
-    <button id="saveButton">Save</button>
+    <h2 id="savetitle">Save <b id="saveoptiontoggle"><i class="fa fa-expand"></i></b></h2>
+    <div id="savediv" style="display:none;">
+        <div id="savetree"></div>
+        <input id="saveName"></input>
+        <button id="saveButton">Save</button>
+    </div>
     <div style="clear:both"></div>
     <hr/>
     <button id="clearButton">Clear map</button>
-    <hr/>
     <div id="saved"><p>
         <i class="fa fa-save fa-spin fa-3x fa-fw"></i>
         <b id="content"><?php p($l->t('File saved')); ?></b></p>