highlight selected save folder, design epuration

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;
+}

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);

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>
+    <h2 id="loadtitle">Load <b id="loadoptiontoggle"><i class="fa fa-expand"></i></b></h2>
-    <div id="loadtree"></div>
+    <div id="loaddiv" style="display:none;">
+        <div id="loadtree"></div>
+    </div>
     <hr/>
-    <h2>Save to :</h2>
+    <h2 id="savetitle">Save <b id="saveoptiontoggle"><i class="fa fa-expand"></i></b></h2>
-    <div id="savetree"></div>
+    <div id="savediv" style="display:none;">
-    <input id="saveName"></input>
+        <div id="savetree"></div>
-    <button id="saveButton">Save</button>
+        <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>