changed the look of the import query feature

js/apps/system/aardvark/frontend/js/templates/queryView.ejs

@@ -1,6 +1,25 @@
 <script id="queryView.ejs" type="text/template">
   <div class="headerBar">
     <a class="arangoHeader">AQL Editor</a>
+
+    <div id="queryToolbar" class="headerButtonBar">
+      <ul class="headerButtonList">
+        <li class="enabled">
+          <a id="importQueriesToggle" class="headerButton">
+            <span class="icon_arangodb_import" title="Upload queries from JSON file"></span>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+
+  <div id="importHeader" class="dropdownImport queryImport">
+    <div class="queryline">
+      <input id="importQueries" name="importQueries" type="file"/>
+      <button id="confirmQueryImport" class="button-success" style="float:right">Import</button>
+      <button id="confirmQueryExport" class="button-success" style="float:right">Export</button>
+    </div>
   </div>
 
   <div id="queryContent">
@@ -14,9 +33,6 @@
         <div id="customsDiv" class="query-div">
         </div>
         <div class="queryMethods">
-          <input id="importQueries" name="importQueries" type="file"/>
-          <button id="confirmQueryImport" class="button-success" style="float:right">Import</button>
-          <button id="confirmQueryExport" class="button-success" style="float:right">Export</button>
         </div>
       </div>
     </div>

js/apps/system/aardvark/frontend/js/views/queryView.js

@@ -40,7 +40,13 @@
       'click #arangoQueryTable .table-cell1': 'editCustomQuery',
       'click #arangoQueryTable .table-cell2 a': 'deleteAQL',
       'click #confirmQueryImport': 'importCustomQueries',
-      'click #confirmQueryExport': 'exportCustomQueries'
+      'click #confirmQueryExport': 'exportCustomQueries',
+      'click #importQueriesToggle': 'showImportMenu'
+    },
+
+    showImportMenu: function(e) {
+      $('#importQueriesToggle').toggleClass('activated');
+      $('#importHeader').slideToggle(200);
     },
 
     createCustomQueryModal: function(){
@@ -291,6 +297,7 @@
           this.updateLocalQueries();
           this.renderSelectboxes();
           this.updateTable();
+          $('#customs-switch').click();
           self.allowUpload = false;
         }
       }

js/apps/system/aardvark/frontend/scss/_queryView.scss

@@ -324,3 +324,7 @@
     }
   }
 }
+
+.queryImport {
+  margin-bottom: 10px;
+}

js/apps/system/aardvark/frontend/scss/generated.css

@@ -5167,6 +5167,9 @@ pre.gv-object-view {
       white-space: nowrap !important;
       width: 40px; }
 
+.queryImport {
+  margin-bottom: 10px; }
+
 .display-none {
   display: none; }