From fa5ece041f191dc074a193c4fb78a87b551efd05 Mon Sep 17 00:00:00 2001
From: hkernbach <heiko@arangodb.com>
Date: Tue, 23 Feb 2016 13:27:07 +0100
Subject: [PATCH] html, scss

---
 .../frontend/js/templates/documentsView.ejs   |  6 +--
 .../APP/frontend/js/templates/indicesView.ejs |  6 ++-
 .../frontend/js/templates/progressBase.ejs    |  2 +-
 .../APP/frontend/js/templates/queryView.ejs   | 16 +++---
 .../APP/frontend/js/templates/tableView.ejs   |  2 +-
 .../aardvark/APP/frontend/scss/_colors.scss   |  1 +
 .../APP/frontend/scss/_headerBar.scss         |  6 +--
 .../aardvark/APP/frontend/scss/_modals.scss   |  5 ++
 .../APP/frontend/scss/_progressView.scss      | 22 +++++---
 .../APP/frontend/scss/_queryView.scss         | 50 ++++++-------------
 .../aardvark/APP/frontend/scss/_resizing.scss |  6 +++
 11 files changed, 60 insertions(+), 62 deletions(-)

diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentsView.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentsView.ejs
index 3ffed82ba2..64f649cbcd 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentsView.ejs
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentsView.ejs
@@ -32,7 +32,7 @@
       </a>
     <li class="enabled">
       <a id="markDocuments" class="headerButton">
-        <span class="icon_arangodb_edit" title="Edit documents"></span>
+        <span title="Edit documents"><i class="fa fa-hand-pointer-o"></i></span>
       </a>
     </li>
     <li class="enabled">
@@ -42,12 +42,12 @@
     </li>
     <li class="enabled">
       <a id="exportCollection" class="headerButton">
-        <span title="Download documents as JSON file"><i class="fa fa-download"></i></span>
+        <span title="Download documents as JSON file"><i class="fa fa-download" style="margin-top: 1px;"></i></span>
       </a>
     </li>
     <li class="enabled" style="margin-right: 15px">
       <a id="filterCollection" class="headerButton">
-        <span class="icon_arangodb_filter" title="Filter collection"></span>
+        <span title="Filter collection"><i class="fa fa-filter"></i></span>
       </a>
     </li>
   </ul>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/indicesView.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/indicesView.ejs
index 87c952e7d7..b08b2446ca 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/indicesView.ejs
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/indicesView.ejs
@@ -235,8 +235,10 @@
           </table>
         </div>
         <div class="index-button-bar index-button-bar2">
-          <button id="createIndex" class="button-success">Save</button>
-          <button id="cancelIndex" class="button-close">Back</button>
+          <button id="createIndex" class="button-success" style="margin-left: 15px;">Create</button>
+          <button id="cancelIndex" class="button-close" style="margin-left: 0;"><i class="fa fa-arrow-left"></i>
+            <span style="margin-left: 5px;">Back</span>
+          </button>
         </div>
     </div>
   </div>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/progressBase.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/progressBase.ejs
index cbb56c82bf..02b8a3fb03 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/progressBase.ejs
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/progressBase.ejs
@@ -1,10 +1,10 @@
 <script id="progressBase.ejs" type="text/template">
   <div class="progress-view">
     <div class="progress-content">
+      <div class="progress-text"></div>
       <div class="pong-spinner"><i /></div>
     </div>
     <div class="progress-message">
-      <div class="progress-text"></div>
       <div class="progress-action"></div>
     </div>
   </div>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/queryView.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/queryView.ejs
index f71dc00849..fe5810115c 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/queryView.ejs
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/queryView.ejs
@@ -13,8 +13,8 @@
     <div class="tab-content" id="tabContentCustoms">
       <div class="tab-pane" id="customs">
         <div id="editorToolbar" class="query-toolbar editor-toolbar">
-          <span class="icon_arangodb" title="Upload your queries." id="import-query"><i class="fa fa-upload"></i></span>
-          <span class="icon_arangodb" title="Download your listed queries." id="export-query"><i class="fa fa-download"></i></span>
+          <span class="queryTooltips" title="Upload your queries." id="import-query"><i class="fa fa-upload"></i></span>
+          <span class="queryTooltips" title="Download your listed queries." id="export-query"><i class="fa fa-download"></i></span>
         </div>
         <div id="customsDiv" class="query-div">
         </div>
@@ -24,11 +24,11 @@
       <div class="tab-pane active" id="query">
         <div id="queryDiv" class="query-div">
           <div id="editorToolbar" class="query-toolbar editor-toolbar">
-            <span class="icon_arangodb icon_arangodb_trash queryTooltips tooltip-margin" title="Clear" id="clearInput"/>
-            <span class="icon_arangodb icon_arangodb_adddoc queryTooltips" title="Save current query" id="addAQL"/>
-            <span class="queryTooltips tooltip-margin" title="Comment" id="commentText"><i class="fa fa-comment"></i></span>
-            <span class="icon_arangodb icon_arangodb_arrow6 queryTooltips tooltip-margin" title="Redo" id="redoText"/>
-            <span class="icon_arangodb icon_arangodb_arrow5 queryTooltips tooltip-margin" title="Undo" id="undoText"/>
+            <span class="queryTooltips" title="Clear" id="clearInput"><i class="fa fa-trash-o"></i></span>
+            <span class="queryTooltips" title="Save current query" id="addAQL"><i class="fa fa-save"></i></span>
+            <span class="queryTooltips" title="Comment" id="commentText"><i class="fa fa-comment"></i></span>
+            <span class="queryTooltips" title="Redo" id="redoText"><i class="fa fa-undo fa-flip-horizontal"></i></span>
+            <span class="queryTooltips" title="Undo" id="undoText"><i class="fa fa-undo"></i></span>
           </div>
 
           <div id="aqlEditor" class='aql-editor'></div>
@@ -81,7 +81,7 @@
       <div class="tab-pane" id="result">
         <div id="outputToolbar" class="query-toolbar output-toolbar">
           <!--
-          <span class="icon_arangodb icon_arangodb_trash queryTooltips tooltip-margin" title="Clear" id="clearOutput"></span>
+          <span class="icon_arangodb icon_arangodb_trash queryTooltips " title="Clear" id="clearOutput"></span>
           <span class="icon_arangodb icon_arangodb_arrow1 queryTooltips" title="Unfold" id="bigOutput"></span>
           -->
         </div>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/tableView.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/tableView.ejs
index 0a0c9bbfb8..5248b73629 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/tableView.ejs
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/tableView.ejs
@@ -17,7 +17,7 @@ var cutByResolution = function (str) {
     <th class="sorting_disabled docsFirstCol" role="columnheader" rowspan="1" colspan="1">Content</th>
     <th class="sorting_disabled docsSecCol" role="columnheader" rowspan="1" colspan="1">_key</th>
     <th class="sorting_disabled docsThirdCol" role="columnheader" rowspan="1" colspan="1">
-      <a id="addDocumentButton" class="pull-right addButton"><span class="arangoicon icon_arangodb_roundplus" title="Add a document"></span></a>
+      <a id="addDocumentButton" class="pull-right addButton"><span title="Add a document"><i class="fa fa-plus-circle"></i></span></a>
     </th>
   </tr>
 </thead>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_colors.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_colors.scss
index 9fa9ca2c6c..b688a62f74 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_colors.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_colors.scss
@@ -6,6 +6,7 @@ $c-lightgreen-2-bg: #f5f8f0;
 $c-lightgreen-transp-bg: #f5f8f0;
 $c-lightgreen-2-transp-bg: rgba(245, 248, 240, .95);
 
+$c-pong-green: rgb(140, 219, 139);
 
 $c-positive: #8aa051;
 $c-positive-hover: #788f3d;
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_headerBar.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_headerBar.scss
index 3317e3926e..5b8078a49a 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_headerBar.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_headerBar.scss
@@ -151,7 +151,7 @@ div.headerBar {
 
 .headerBar a.arangoHeader {
   color: $c-black;
-  font-size: 13pt;
+  font-size: 11.5pt;
   font-weight: 100;
   left: 0;
   position: relative;
@@ -177,7 +177,7 @@ div.headerBar {
   .disabledBread {
     color: $c-darker-grey;
     float: left;
-    font-size: 13pt;
+    font-size: 11.5pt;
     font-weight: 100;
     padding-right: 5px;
     position: relative;
@@ -192,7 +192,7 @@ div.headerBar {
   .activeBread {
     color: $c-positive;
     float: left;
-    font-size: 13pt;
+    font-size: 11.5pt;
     font-weight: 100;
   }
 
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_modals.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_modals.scss
index d0a7facd8c..e9f458a91a 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_modals.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_modals.scss
@@ -377,6 +377,11 @@
 .modal-footer {
   border-top: 0 !important;
   padding-right: 17px;
+
+  .button-close {
+    margin-left: 20px;
+    margin-right: 10px;
+  }
 }
 
 .modal-header {
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_progressView.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_progressView.scss
index 558cd52580..47936d9c8e 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_progressView.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_progressView.scss
@@ -14,19 +14,18 @@
   color: $c-nav-bg;
   height: 188px;
   left: 50%;
-  margin: -100px 0 0 -150px;
+  margin: -150px 0 0 -125px;
   position: absolute;
-  top: 50%;
-  width: 300px;
+  top: 38%;
+  width: 250px;
 
   .progress-content {
-
     border: 5px solid $c-white;
-    
+    border-radius: 3px;
+
     .fa-spinner {
       font-size: 100pt;
     }
-
   }
 
   .progress-message {
@@ -41,10 +40,17 @@
   }
 
   .progress-text {
+    background: $c-white;
     color: $c-black;
     float: left;
+    font-weight: 100;
+    height: 25px;
+    left: -5px;
     margin-left: 5px;
     margin-top: 10px;
+    position: relative;
+    top: -10px;
+    width: 100%;
   }
 
   .progress-action {
@@ -73,7 +79,7 @@
 
   i {
     animation: ball 2s infinite linear;
-    background: $c-white;
+    background: $c-pong-green;
     border-radius: 10px;
     height: 10px;
     position: absolute;
@@ -84,7 +90,7 @@
 .pong-spinner:before,
 .pong-spinner:after {
   animation: left-player 2s infinite linear;
-  background: $c-white;
+  background: $c-pong-green;
   content: '';
   height: 30px;
   position: absolute;
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView.scss
index f4353e67ce..20ce88445f 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView.scss
@@ -264,10 +264,6 @@ toolbar {
   padding-right: 5px;
 }
 
-.tooltip-margin {
-  margin-top: 1px;
-}
-
 .query-dropdown-in {
   background-color: $c-white;
   padding: 10px;
@@ -301,6 +297,7 @@ toolbar {
   margin-top: 18px;
 
   .arango-tab {
+    margin-bottom: 5px;
 
     a {
       border-bottom-color: $c-tab-bottom-border;
@@ -395,20 +392,16 @@ toolbar {
 .editor-toolbar {
   border-color: $c-editor-toolbar;
   height: 33px;
-  margin-top: 5px;
+  padding-right: 5px;
 
   span {
     border-radius: 3px;
     float: right;
     height: 18px;
-    margin-left: 3px;
-    padding-bottom: 6px;
-    padding-left: 5px;
-    padding-right: 0;
-    padding-top: 3px;
+    padding: 3px 0 6px 10px;
     position: relative;
     top: 0;
-    width: 25px;
+    width: 22px;
   }
 
   span:hover,
@@ -417,44 +410,29 @@ toolbar {
     color: $c-white;
   }
 
-  i {
-    margin-right: 5px;
-    margin-top: 3px;
+  a:hover,
+  span:hover {
+    cursor: pointer;
 
+    i {color: $c-white;}
+  }
+
+  i {
     &:hover {
+      color: $c-white;
       cursor: pointer;
     }
   }
 
   .fa {
     color: $c-darker-grey;
-    margin-left: 1px;
-    margin-top: 2px;
-
-    &.fa-upload {
-      margin-top: 1px;
-    }
-  }
-
-  .icon_arangodb {
-    color: $c-darker-grey;
-    font-size: 14pt;
-
-    &:first-child {
-      margin-right: 10px;
-    }
+    font-size: 15px;
   }
 
   .fa-comment,
   .fa-comment-o {
-    font-size: 15px;
     position: relative;
-    right: -2px;
-    top: -2px;
-  }
-
-  .arango-icon-disk {
-    margin-top: 1px;
+    top: -1px;
   }
 
 }
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_resizing.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_resizing.scss
index 3f3f69b0ae..66e3841f08 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_resizing.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_resizing.scss
@@ -39,6 +39,12 @@
       display: none;
     }
   }
+
+  .navmenu {
+    padding-left: 20px;
+    padding-top: 0;
+    position: absolute;
+  }
 }