modal design + redrawing view after collection load/unload

frontend/css/modal.css

@@ -6,6 +6,7 @@
 .modal-body .icon-info-sign {
   padding-bottom: 5px;
   margin-bottom: 10px;
+  margin-left: 10px;
   opacity: 0.7;
 }
 

frontend/js/collections/arangoCollections.js

@@ -214,6 +214,11 @@ window.arangoCollections = Backbone.Collection.extend({
           url: "/_api/collection/" + id + "/load",
           success: function () {
             arangoHelper.arangoNotification('Collection loaded');
+            window.arangoCollectionsStore.fetch({
+              success: function () {
+                window.collectionsView.render();
+              }
+            });
           },
           error: function (data) {
             var temp = JSON.parse(data.responseText);
@@ -228,6 +233,11 @@ window.arangoCollections = Backbone.Collection.extend({
           url: "/_api/collection/" + id + "/unload",
           success: function () {
             arangoHelper.arangoNotification('Collection unloaded');
+            window.arangoCollectionsStore.fetch({
+              success: function () {
+                window.collectionsView.render();
+              }
+            });
           },
           error: function () {
             var temp = JSON.parse(data.responseText);

frontend/js/routers/router.js

@@ -20,6 +20,10 @@ $(document).ready(function() {
       window.arangoDocumentsStore = new window.arangoDocuments();
       window.arangoDocumentStore = new window.arangoDocument();
 
+      window.collectionView = new window.collectionView({
+        model: arangoCollection
+      });
+
       window.dashboardView = new window.dashboardView({
         collection: window.arangoCollectionsStore
       });
@@ -55,26 +59,22 @@ $(document).ready(function() {
 
       window.arangoCollectionsStore.fetch({
         success: function () {
-          var collectionsView = new window.collectionsView({
+          window.collectionsView = new window.collectionsView({
             collection: window.arangoCollectionsStore
           });
-          collectionsView.render();
+          window.collectionsView.render();
           naviView.selectMenuItem('collections-menu');
         }
       });
     },
     collection: function(colid) {
       //TODO: if-statement for every view !
-      if (!this.collectionView) {
+      if (!window.collectionView) {
-        this.collectionView = new window.collectionView({
-          colId: colid,
-          model: arangoCollection
-        });
       }
       else {
-        this.collectionView.options.colId = colid;
       }
-      this.collectionView.render();
+      window.collectionView.options.colId = colid;
+      window.collectionView.render();
     },
     newCollection: function() {
       if (!this.newCollectionView) {

frontend/js/templates/collectionView.ejs

@@ -40,7 +40,7 @@
       </tr>
 
       <tr>
-        <th class="collectionTh">Status:</th> 
+        <th class="collectionTh">Status:</th>
         <th class="collectionTh">
           <div id="change-collection-status" class="modal-text"/>
         </th>
@@ -49,7 +49,7 @@
     </table>
   </div>
   <div id="colFooter" class="modal-footer">
-    <button id="delete-modified-collection" class="btn btn-danger" style="float:right">Delete</button>
+    <button id="delete-modified-collection" class="btn btn-danger pull-right" style="margin-right:8px">Delete</button>
-    <button id="save-modified-collection" class="btn btn-success">Save</button>
+    <button id="save-modified-collection" class="btn btn-success pull-left">Save</button>
   </div>
 </div>

frontend/js/templates/newCollectionView.ejs

@@ -60,6 +60,6 @@
 
   </div>
   <div class="modal-footer">
-    <button id="save-new-collection" class="btn btn-success">Create Collection</button>
+    <button id="save-new-collection" class="btn btn-success pull-left">Create Collection</button>
   </div>
 </div>

frontend/js/views/collectionView.js

@@ -35,12 +35,12 @@ var collectionView = Backbone.View.extend({
     $('#change-collection-status').text(this.myCollection.status);
 
     if (this.myCollection.status == 'unloaded') {
-      $('#colFooter').append('<button id="load-modified-collection" class="btn">Load</button>');
+      $('#colFooter').append('<button id="load-modified-collection" class="btn" style="margin-right: 10px">Load</button>');
       $('#collectionSizeBox').hide();
       $('#collectionSyncBox').hide();
     }
     else if (this.myCollection.status == 'loaded') {
-      $('#colFooter').append('<button id="unload-modified-collection" class="btn">Unload</button>');
+      $('#colFooter').append('<button id="unload-modified-collection" class="btn" style="margin-right: 10px">Unload</button>');
       var data = window.arangoCollectionsStore.getProperties(this.options.colId, true);
       this.fillLoadedModal(data);
     }