Merge branch 'devel' of github.com:triAGENS/ArangoDB into devel

js/apps/system/aardvark/frontend/css/collectionsItemView.css

@@ -50,7 +50,7 @@
 }
 .span3 .glyphicon-edit {
   margin-top: 4px !important;
-  font-size: 20.5px;
+  font-size: 19.5px;
 }
 
 .span3 .ICON{

js/apps/system/aardvark/frontend/css/collectionsView.css

@@ -63,17 +63,17 @@
 
 .searchInput {
   background-color: #FFFFFF;
-  border: 1px solid #c0c0c0;
+  border: 0 !important;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+  box-shadow: 0 !important;
   color: #555555;
   display: inline-block;
   font-size: 12px;
-  height: 18px;
+  height: 18px !important;
   line-height: 18px;
-  margin-top: 3px;
+  margin-top: 5px;
   padding: 2px;
   vertical-align: middle;
-  width:212px !important;
+  width:214px !important;
   border-radius: 0px 0px 0px 0px !important;
 }
 
@@ -216,8 +216,8 @@ border-top: 0;
   border-radius: 0 !important;
 }
 
-#collectionsDropdown2, #dashboardDropdownOut, #foxxDropdownOut {
+#collectionsDropdown2, #dashboardDropdownOut, #foxxDropdownOut, .dropdownOut {
-  background-color: rgba(0, 0, 0, 0.15);
+  background-color: white;
   position:relative;
   display:none;
   margin-left: 5px;
@@ -225,48 +225,48 @@ border-top: 0;
   width: auto;
 }
 
-#collectionsDropdown, #dashboardDropdown, #foxxDropdown {
+#collectionsDropdown, #dashboardDropdown, #foxxDropdown, .dropdownIn{
   position: relative;
   min-height: 125px;
   width: auto;
-  border-left: 1px solid #686766;
-  border-bottom: 1px solid #686766;
-  border-right: 1px solid #686766;
-  border-top: none;
   box-shadow: 0 !important;
 }
 
-#collectionsDropdown .nav-header, #dashboardDropdown .nav-header, #foxxDropdown .nav-header {
+#collectionsDropdown .nav-header, #dashboardDropdown .nav-header, #foxxDropdown .nav-header, .dropdownOut .nav-header{
   font-size: 13px;
   font-weight: 400;
   color: black;
 }
 
-#collectionsDropdown label, #dashboardDropdown label, #foxxDropdown label{
+#collectionsDropdown label, #dashboardDropdown label, #foxxDropdown label, .dropdownIn label{
   color: black;
   font-weight: 300;
 }
 
-#collectionsDropdown ul, #dashboardDropdown ul, #foxxDropdown ul{
+#collectionsDropdown ul, #dashboardDropdown ul, #foxxDropdown ul, .dropdownIn ul{
-  border-left: 1px solid white;
+  border-left: 1px solid black;
 }
 
+.dropdownOut ul:last-of-type,
 #collectionsDropdown ul:last-of-type,
 #dashboardDropdown ul:last-of-type,
 #foxxDropdown ul:last-of-type {
-  border-left: 1px solid white;
+  border-left: 1px solid black;
 }
 
+.dropdownOut ul:first-of-type,
 #collectionsDropdown ul:first-of-type, 
 #dashboardDropdown ul:first-of-type,
 #foxxDropdown ul:first-of-type {
   border: 0 !important;
 }
 
+.dropdownIn ul,
 #collectionsDropdown ul, #foxxDropdown ul {
   min-height: 105px;
 }
 
+.dropdownIn ul,
 #collectionsDropdown ul, #dashboardDropdown ul, #foxxDropdown ul{
   float: left;
   margin-top: 10px;
@@ -274,6 +274,7 @@ border-top: 0;
   display: inline;
 }
 
+.dropdownIn ul li label,
 #collectionsDropdown ul li label,
 #dashboardDropdown ul li label,
 #foxxDropdown ul li label {

js/apps/system/aardvark/frontend/css/dashboardView.css

@@ -109,10 +109,11 @@
 }
 
 .statGroups .statChart {
-  margin-left: -55px !important;
-  margin-top: -50px !important;
   float:left;
-  (;margin-top: -37px !important;)
+}
+
+.svgClass .nv-linesWrap {
+  margin-left: -20px !important;
 }
 
 .nv-axislabel {
@@ -129,9 +130,6 @@
 }
 
 .svgClass {
-  margin-top: 23px !important;
-  padding-top: 0 !important;
-  /*height: 140px;*/
   height: 155px;
   width: 300px;
 }
@@ -146,7 +144,7 @@
 
 li:hover  i, li.hover i,
 li:hover h6, li.hover h6 {
-  opacity: 0.7 !important;
+  opacity: 0.8 !important;
   -webkit-transition-property: background color;
   -webkit-transition-duration: 1s;
   -webkit-transition-timing-function: linear;
@@ -170,7 +168,7 @@ li:hover h6, li.hover h6 {
 }
 
 .boxHeader h6 {
-  opacity: 0.25;
+  opacity: 0.8;
   padding-top: 0 !important;
   color: black;
   margin-left: 5px;
@@ -257,6 +255,7 @@ li:hover h6, li.hover h6 {
 }
 
 /*Dashboard Checkbox*/
+.dropdownOut input[type=checkbox].css-checkbox,
 #dashboardDropdownOut input[type=checkbox].css-checkbox,
 #transparentHeader input[type=checkbox].css-checkbox,
 #collectionsDropdown input[type=checkbox].css-checkbox,
@@ -264,6 +263,7 @@ li:hover h6, li.hover h6 {
   display:none;
 }
 
+.dropdownOut input[type=checkbox].css-checkbox + label.css-label,
 #dashboardDropdownOut input[type=checkbox].css-checkbox + label.css-label,
 #transparentHeader input[type=checkbox].css-checkbox + label.css-label, 
 #foxxDropdownOut input[type=checkbox].css-checkbox + label.css-label, 
@@ -279,6 +279,7 @@ li:hover h6, li.hover h6 {
   cursor:pointer;
 }
 
+.dropdownOut input[type=checkbox].css-checkbox:checked + label.css-label,
 #dashboardDropdownOut input[type=checkbox].css-checkbox:checked + label.css-label,
 #transparentHeader input[type=checkbox].css-checkbox:checked + label.css-label,
 #foxxDropdownOut input[type=checkbox].css-checkbox:checked + label.css-label,
@@ -300,17 +301,15 @@ li:hover h6, li.hover h6 {
   margin-left: -21px;
 }
 
-#dashboardDropdownOut input[type="radio"], #transparentHeader input[type="radio"] {
+#dashboardDropdownOut input[type="radio"],
+#transparentHeader input[type="radio"],
+.dropdownOut input[type="radio"] {
   display:none;
 }
 
-#dashboardDropdownOut input[type="radio"] + label, #transparentHeader input[type="radio"] + label {
+#dashboardDropdownOut input[type="radio"] + label span,
-  /*color:#f2f2f2;*/
+#transparentHeader input[type="radio"] + label span,
-  /*font-family:Arial, sans-serif;
+.dropdownOut input[type="radio"] + label span {
-  font-size:14px;*/
-}
-
-#dashboardDropdownOut input[type="radio"] + label span, #transparentHeader input[type="radio"] + label span {
   display:inline-block;
   width:19px;
   height:19px;
@@ -320,7 +319,9 @@ li:hover h6, li.hover h6 {
   cursor:pointer;
 }
 
-#dashboardDropdownOut input[type="radio"]:checked + label span, #transparentHeader input[type="radio"]:checked + label span {
+#dashboardDropdownOut input[type="radio"]:checked + label span,
+.dropdownOut input[type="radio"]:checked + label span,
+#transparentHeader input[type="radio"]:checked + label span {
   background:url(../img/check_radio_sheet.png) -57px top no-repeat;
 }
 
@@ -431,7 +432,6 @@ li:hover h6, li.hover h6 {
   padding-top: 5px;
   width: auto;
   min-height: 150px;
-  margin-bottom: 8px;
   margin-right: 10px;
   margin-top: -1px;
   border-top: 1px solid #888;
@@ -473,7 +473,6 @@ li:hover h6, li.hover h6 {
 }
 
 #shortcutDiv {
-  padding-top: 10px;
   font-size: 12px;
   font-weight: 200;
 }
@@ -507,13 +506,9 @@ li:hover h6, li.hover h6 {
   border-bottom: 0 !important;
 }
 
-#dashboardDropdownOut {
-  background-color: transparent !important;
-}
-
 #dashboardDropdown {
-  background-color: rgba(0,0,0,0.1) !important;
   min-height: 260px !important;
+  background-color: white;
 }
 
 #dashboardDropdown ul {
@@ -563,7 +558,7 @@ li:hover h6, li.hover h6 {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-   .svgClass{margin-top: 35px !important;}
+   .svgClass{margin-top: 10px !important;}
    .statSingleClient{margin-top: 10.5px !important;}
    #detailReplication{margin-top: 1.5px !important;}
 }
@@ -586,8 +581,8 @@ li:hover h6, li.hover h6 {
   border-radius: 50%;
   box-shadow:
   margin-top: 1px;
-  0 0 20px #111 inset,
+  0 0 10px #111 inset,
-  0 0 10px lime;
+  0 0 5px lime;
   animation: 13s green infinite;
 }
 
@@ -601,6 +596,18 @@ li:hover h6, li.hover h6 {
   border-radius: 50%;
   animation: 13s red infinite;
   box-shadow:
-    0 0 20px #111 inset,
+    0 0 10px #111 inset,
-    0 0 10px red;
+    0 0 5px red;
+}
+
+#dashboardDropdown > ul > li > a > .radio {
+  padding-left: 0 !important;
+}
+
+#replicationDropdown {
+  min-height: 260px !important;
+}
+
+#replicationDropdown > ul > li > a > .radio {
+  padding-left: 0 !important;
 }

js/apps/system/aardvark/frontend/css/documentSourceView.css

@@ -29,7 +29,7 @@
 #sourceDiv {
   margin-top: 0px;
   padding-left: 5px;
-  padding-top: 10px;
+  padding-top: 13px;
   padding-right: 5px;
   padding-bottom: 5px;
   min-height: 400px;

js/apps/system/aardvark/frontend/css/documentView.css

@@ -38,6 +38,10 @@
 .arangoTab a {
   color: black !important;
   cursor: pointer;
+  padding-left: 15px !important;
+  padding-right: 15px !important;
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
 }
 
 .arangoTab > li {

js/apps/system/aardvark/frontend/css/documentsView.css

@@ -78,21 +78,18 @@ table.dataTable thead th {
 }
 
 .arangoDropdown {
-  background-color: rgba(0, 0, 0, 0.15);
+  background-color: rgba(0,0,0,0.15);
   margin-bottom: -10px;
 }
 
 #filterHeader, #importHeader, .arangoDropdownIn {
-  background-color: rgba(0, 0, 0, 0.15);
+  background-color: white;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 5px;
   margin-left: 5px;
   margin-right: 5px;
-  border-left: 1px solid #686766;
-  border-right: 1px solid #686766;
-  border-bottom: 1px solid #686766;
   position:relative;
 }
 

js/apps/system/aardvark/frontend/css/layout.css

@@ -66,7 +66,7 @@ textarea, .alert {
 	border: none;
 	color:#FFFFFF;
 	margin-left:10px;
-  padding: 8px 16px;
+  padding: 5px 16px;
   font-weight: 300 !important;
   font-size: 14px;
 }

js/apps/system/aardvark/frontend/css/modal.css

@@ -193,8 +193,9 @@
 .modal-body .glyphicon-info-sign {
   color: #736B68;
   font-size: 18px;
-  margin-left: 5px;
+  right: 12px;
-  margin-top: 2px;
+  position: absolute;
+  margin-top: -10px;
 }
 
 .modal-body .glyphicon-info-sign:hover {
@@ -248,3 +249,29 @@
 #add-collection .accordion {
   margin-top: 10px;
 }
+
+#add-collection .collectionThSec {
+  width: 380px !important;
+}
+
+#add-collection input {
+  width: 380px !important;
+  margin-left: 45px;
+}
+
+#add-collection select {
+  width: 394px !important;
+  margin-left: 45px;
+}
+
+#add-collection .accordion-toggle {
+  width: 457px !important;
+}
+
+#change-collection input {
+  width: 384px !important;
+}
+
+#change-collection select {
+  width: 398px !important;
+}

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

@@ -1,3 +1,7 @@
+.toolbarUL ul {
+  margin-top: 2px;
+}
+
 .ui-resizable-s {
   bottom: 0;
   height: 10px;
@@ -17,11 +21,11 @@
 #queryOutput .ui-resizable-handle {
   border-left: 0;
   border-bottom: 0;
+  border-top: 0;
 }
 
 #editorToolbar {
-  width: auto;
+  margin-top: 5px;
-  margin-top: 20px !important;
   margin-left: 0px;
   margin-right: 0px;
   border-top: 1px solid #A0A0A0;
@@ -42,17 +46,15 @@
 
 #outputToolbar span, #editorToolbar span {
   position: relative;
-  float:right;
-  height: 10px !important;
   margin-right: 5px;
   margin-left: 5px;
   top: 2px;
+  float:right;
 }
 
 
 #outputToolbar {
   position: relative;
-  margin-top: 5px;
   margin-left: 0;
   margin-right: 0;
   width: auto;
@@ -68,31 +70,23 @@
 }
 
 #editorToolbar i , #outputToolbar i {
-  float: right;
   margin-right: 5px;
   margin-top: 3px;
 }
 
-#editorToolbar select {
-  float: left !important;
-}
-
-#addAQL, #editAQL {
-  float: left !important;
-  margin-left: 5px;
-  margin-right: 0 !important;
-}
-
 #editor {
   min-width: 100px;
 }
 
 #editorLabel, #outputLabel {
-  float: left;
+  width: 100%;
-  background-color: #F0F0F0;
+}
-  width: 150px;
+
-  text-align: center;
+#editorLabel h6, #outputLabel h6 {
-  border-right: 1px solid #C0C0C0;
+  font-family: 'Open Sans', sans-serif;
+  margin-bottom: 5px;
+  font-weight: 400;
+  font-size: 16px;
 }
 
 #aqlEditor .ace_error, #aqlEditor .ace_info, #queryOutput .ace_error, #queryOutput .ace_info {
@@ -102,6 +96,7 @@
 #aqlEditor .ui-resizable-handle {
   border-left: 0 !important;
   border-bottom: 0 !important;
+  border-top: 0 !important;
 }
 
 #aqlEditor {
@@ -112,12 +107,17 @@
   height: 200px;
   min-height: 100px;
   border: 1px solid #A0A0A0;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 }
 
-#submitQueryButton {
+#wideButtonDiv {
+  width: 100%;
+  height: 20px;
+  margin-bottom: 15px;
+}
+
+#submitQueryButton, #clearQueryButton {
   float: right;
-  margin-top: 0px;
 }
 
 .querynavbar {
@@ -138,6 +138,7 @@
   height: 200px;
   margin-right: 0px;
   margin-left: 0px;
+  margin-bottom: 10px;
   min-height: 100px;
   overflow-y: hidden;
   border: 1px solid #c0c0c0;
@@ -150,11 +151,9 @@
 }
 
 #querySelect {
-  height: 20px !important;
   line-height: 20px !important;
   z-index: 9999 !important;
   border-radius: 0 !important;
-  padding: 0 !important;
   margin-bottom: 0;
   border: 0 !important;
 }
@@ -163,18 +162,6 @@
   z-index: 9999 !important;
 }
 
-#querySize {
-  height: 20px !important;
-  line-height: 20px !important;
-  z-index: 9999 !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
-  margin-bottom: 0;
-  border: 0 !important;
-  float: left !important;
-  margin-left: 50px;
-  margin-right: 0 !important;
-}
 
 .queryTH {
   width: 20% !important;
@@ -198,10 +185,10 @@
   resize: vertical !important;
 }
 
-#queryOutput .ace_gutter-cell {
+/*#queryOutput .ace_gutter-cell {
   color: white;
   background-color: #686766 !important;
-}
+}*/
 
 .ace_print-margin {
   visibility: hidden !important;
@@ -215,3 +202,52 @@
 #commentText, #redoText, #undoText, #clearInput, #clearOutput {
   margin-top: 1px;
 }
+
+#shortcutDiv {
+  float: left;
+  width: auto;
+  margin-top: -5px;
+}
+
+#queryDiv > * {
+  border: 0 !important;
+}
+
+.styled-select select {
+  background: white;
+  width: 268px;
+  padding: 5px;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1;
+  border: 0;
+  border-radius: 0;
+  height: 30px;
+  -webkit-appearance: none;
+  padding-left: 5px !important;
+  padding-top: 3px !important;
+}
+
+.styled-select {
+  float: right;
+  width: 240px;
+  height: 30px;
+  overflow: hidden;
+}
+
+.querySizeDiv {
+  margin-right: 10px;
+  height: 30px !important;
+  width: 95px !important;
+}
+
+.querySizeDiv select {
+  height: 30px !important;
+}
+
+#querySize {
+  width: 115px !important;
+  line-height: 20px !important;
+  z-index: 9999 !important;
+  border-radius: 0 !important;
+}

js/apps/system/aardvark/frontend/js/collections/arangoDocuments.js

@@ -67,14 +67,34 @@ window.arangoDocuments = Backbone.Collection.extend({
 
         this.offset = (this.currentPage - 1) * this.documentsPerPage;
 
+        var myQueryVal;
+        var sortParameter = '_key';
+        var sortCount = 10000;
+
+        if (this.documentsCount <= sortCount) {
+          //sorted
+          myQueryVal = "FOR x in @@collection SORT x._key LIMIT @offset, @count RETURN x";
+        }
+        else {
+          //not sorted
+          myQueryVal = "FOR x in @@collection LIMIT @offset, @count RETURN x";
+        }
+
+        var myQuery = {
+          query: myQueryVal,
+          bindVars: {
+            "@collection": this.collectionID,
+            "offset": this.offset,
+            "count": this.documentsPerPage
+          }
+        };
+
         $.ajax({
           cache: false,
-          type: 'PUT',
+          type: 'POST',
           async: false,
-          url: '/_api/simple/all/',
+          url: '/_api/cursor',
-          data:
+          data: JSON.stringify(myQuery),
-            '{"collection":"' + this.collectionID + '","skip":'+
-            this.offset + ',"limit":' + String(this.documentsPerPage) + '}',
           contentType: "application/json",
           success: function(data) {
             self.clearDocuments();

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

@@ -23,6 +23,21 @@
       </ul>
     </div>
   </div>
+  
+  <div id="replicationDropdownOut" class="dropdownOut">
+    <div id="replicationDropdown" class="dropdownIn">
+      <ul id="intervalUL">
+        <li class="nav-header">Update every:</li>
+        <li><a><label class="radio"><input type="radio" name="updateIntervalRepl" id="every5seconds" value="5"><label><span></span>5 seconds</label></label></a></li>
+        <li><a><label class="radio"><input type="radio" name="updateIntervalRepl" id="every10seconds" value="10"><label><span></span>10 seconds</label></label></a></li>
+        <li><a><label class="radio"><input type="radio" name="updateIntervalRepl" id="every15seconds" value="15"><label><span></span>15 seconds</label></label></a></li>
+        <li><a><label class="radio"><input type="radio" name="updateIntervalRepl" id="every30seconds" value="30"><label><span></span>30 seconds</label></label></a></li>
+        <li><a><label class="radio"><input type="radio" name="updateIntervalRepl" id="every60seconds" value="60"><label><span></span>60 seconds</label></label></a></li>
+        <li><a><label class="radio"><input type="radio" name="updateIntervalRepl" id="every90seconds" value="90"><label><span></span>90 seconds</label></label></a></li>
+        <li><a><label class="radio"><input type="radio" name="updateIntervalRepl" id="every120seconds" value="120"><label><span></span>120 seconds</label></label></a></li>
+      </ul>
+    </div>
+  </div>
 
   <!--<div id="clearDashboard" class="containerdivNewLine"></div>--!>
 </ul>

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

@@ -9,11 +9,11 @@
     <table>
       <tr>
         <th class="collectionTh">Name:</th>
-        <th><input type="text" id="new-collection-name" name="name" value=""/></th>
+        <th class="collectionThSec"><input type="text" id="new-collection-name" name="name" value=""/></th>
       </tr>
       <tr>
         <th class="collectionTh">Type:</th>
-        <th class="secondTh">
+        <th class="collectionThSec">
           <select id="new-collection-type">
             <option value="2">Document</option>
             <option value="3">Edge</option>
@@ -37,12 +37,12 @@
             <table>
               <tr>
                 <th class="collectionTh">Journal size:</th>
-                <th><input type="text" id="new-collection-size" name="size" value=""/></th>
+                <th class="collectionThSec"><input type="text" id="new-collection-size" name="size" value=""/></th>
                 <th><a class="modalTooltips" title="The maximal size of a journal or datafile (in MB). Must be at least 1."><span class="glyphicon glyphicon-info-sign" style="color:black"></span></a></th>
               </tr>
               <tr>
                 <th class="collectionTh">Sync:</th>
-                <th>
+                <th class="collectionThSec">
                   <select id="new-collection-sync">
                     <option value="false">No</option>
                     <option value="true">Yes</option>

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

@@ -1,34 +1,46 @@
 <ul class="thumbnails2">
   <div id="transparentHeader">
+    <div class="pagination pagination-small pagination-right toolbarUL">
+      <ul><li class="enabled"><a id="editAQL" class="arangoHeaderA"><span class="glyphicon glyphicon-th-list" title="Edit custom Queries"></span></a></li></ul>
+      <ul><li class="enabled"><a id="aqlToggle" class="arangoHeaderA"><span class="glyphicon glyphicon-cog" title="Settings"></span></a></li></ul>
+    </div>
+
     <a class="arangoHeader">AQL Editor</a>
   </div>
 </ul>
-
+  
 <div id="queryDiv" class="form-actions" style="display:none">
-  <div id="outputToolbar">
+  <div id="editorLabel"><h6>Query</h6></div>
-    <div id="outputLabel">Result</div>
-      <span class="arangoicon arango-icon-remove queryTooltips" title="Clear" id="clearOutput"></span>
-      <span class="glyphicon glyphicon-resize-full queryTooltips" title="Unfold" id="bigOutput"></span>
-      <span class="glyphicon glyphicon-resize-small queryTooltips" title="Fold" id="smallOutput"></span>
-  </div>
-  <div id="queryOutput" class="thumbnail">
-  </div>
-
   <div id="editorToolbar">
-    <div id="editorLabel">Query</div>
-    <select id="querySelect"/>
-    <span class="glyphicon glyphicon-cog queryTooltips" title="Edit custom queries" id="editAQL"/>
     <span class="arangoicon arango-icon-disk queryTooltips" title="Save current query" id="addAQL"/>
     <span class="arangoicon arango-icon-remove queryTooltips" title="Clear" id="clearInput"/>
-    <select id="querySize"/>
     <span class="arangoicon arango-icon-comment queryTooltips" title="Comment" id="commentText"/>
     <span class="arangoicon arango-icon-redo queryTooltips" title="Redo" id="redoText"/>
     <span class="arangoicon arango-icon-undo queryTooltips" title="Undo" id="undoText"/>
   </div>
   <div id="aqlEditor"></div>
-  <button id="submitQueryButton" class="btn btn-success">Submit</button>
+  <div id="wideButtonDiv">
-  <div id="shortcutDiv"><b>Submit:</b> CTRL/CMD + Return ; <b>Undo:</b> CTRL/CMD + Z ; <b>Redo:</b> CTRL/CMD + SHIFT + Z ;
+    <div id="shortcutDiv">
-   <b>Toggle Comments:</b> CTRL/CMD + SHIFT + C </div>
+      <b>Submit:</b> CTRL/CMD + Return ; <b>Undo:</b> CTRL/CMD + Z ; <b>Redo:</b> CTRL/CMD + SHIFT + Z ;
+      <b>Toggle Comments:</b> CTRL/CMD + SHIFT + C
+    </div>
+    <button id="submitQueryButton" class="btn btn-success">Submit</button>
+    <button id="clearQueryButton" class="btn">Clear</button>
+    <div class="styled-select">
+      <select id="querySelect"/>
+    </div>
+    <div class="styled-select querySizeDiv">
+      <select id="querySize"/>
+    </div>
+  </div>
+  <div id="editorLabel"><h6>Result</h6></div>
+  <div id="outputToolbar">
+      <span class="arangoicon arango-icon-remove queryTooltips" title="Clear" id="clearOutput"></span>
+      <span class="glyphicon glyphicon-resize-full queryTooltips" title="Unfold" id="bigOutput"></span>
+  </div>
+  <div id="queryOutput" class="thumbnail">
+  </div>
+
 </div>
 
 <div id="new-aql-query" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">

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

@@ -76,7 +76,12 @@ var dashboardView = Backbone.View.extend({
   template: new EJS({url: 'js/templates/dashboardView.ejs'}),
 
   toggleEvent: function () {
-    $('#dashboardDropdownOut').slideToggle(220);
+    if ($('#detailReplication').is(':visible')) {
+      $('#replicationDropdownOut').slideToggle(220);
+    }
+    else {
+      $('#dashboardDropdownOut').slideToggle(220);
+    }
   },
 
   getReplicationStatus: function () {
@@ -281,7 +286,7 @@ var dashboardView = Backbone.View.extend({
       });
     }
 
-    this.options.description.models[0].attributes.figures.push(figure);
+    this.options.description.models[0].attributes.figures.unshift(figure);
   },
 
   checkInterval: function (a) {
@@ -382,6 +387,12 @@ var dashboardView = Backbone.View.extend({
       $('#detailGraph').show();
       $('.statGroups').show();
     }
+
+    if ($('#dashboardDropdownOut').is(':visible') || $('#replicationDropdownOut').is(':visible')) {
+      console.log("togled");
+      $('#replicationDropdownOut').toggle();
+      $('#dashboardDropdownOut').toggle();
+    }
   },
 
   showGroup: function (a) {
@@ -480,7 +491,6 @@ var dashboardView = Backbone.View.extend({
       }
 
       //disable ticks/label for small charts
-
       d3.select("#" + identifier + "Chart svg")
       .call(chart)
       .datum([ { values: self.seriesData[identifier].values, key: identifier, color: "#8AA051" } ])
@@ -491,6 +501,8 @@ var dashboardView = Backbone.View.extend({
 
     //fix position for last x-value label in detailgraph
     $('.nv-x.nv-axis .nvd3.nv-wrap.nv-axis:last-child text').attr('x','-5');
+    //fix position of small graphs
+    $('.svgClass .nv-lineChart').attr('transform','translate(5,5)');
   },
 
   calculateSeries: function (flush) {
@@ -619,9 +631,10 @@ var dashboardView = Backbone.View.extend({
       '<label class="css-label"/>' +
       figure.name + '</label></a></li>'
     );
+    //tooltips small charts
     $('.db-info').tooltip({
       placement: "top",
-      delay: {show: 3000, hide: 100}
+      delay: {show: 100, hide: 100}
     });
   }
 

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

@@ -184,7 +184,6 @@ var queryView = Backbone.View.extend({
         $('#queryOutput').height(windowHeight / 3);
         $('#aqlEditor').height(windowHeight / 2);
 
-        outputEditor.setTheme("ace/theme/merbivore_soft");
         inputEditor.resize();
         outputEditor.resize();
 
@@ -193,7 +192,7 @@ var queryView = Backbone.View.extend({
         this.deselect(inputEditor);
 
         $('#queryDiv').show();
-        outputEditor.setTheme("ace/theme/merbivore_soft");
+        //outputEditor.setTheme("ace/theme/merbivore_soft");
 
         return this;
     },
@@ -386,7 +385,7 @@ var queryView = Backbone.View.extend({
         else {
             selector = '#querySelect';
             $(selector).empty();
-            $(selector).append('<option id="emptyquery">(please select)</option>');
+            $(selector).append('<option id="emptyquery">Insert Query</option>');
 
             $(selector).append('<optgroup label="Example queries">');
             $.each(this.queries, function (k, v) {