From a2bf43e2b18e44c954ce3ba9b636a1ea7c7e512d Mon Sep 17 00:00:00 2001
From: Heiko Kernbach <heiko@arangodb.com>
Date: Fri, 1 Mar 2013 12:31:46 +0100
Subject: [PATCH] modal design + redrawing view after collection load/unload

---
 frontend/css/modal.css                       |  1 +
 frontend/js/collections/arangoCollections.js | 10 ++++++++++
 frontend/js/routers/router.js                | 18 +++++++++---------
 frontend/js/templates/collectionView.ejs     |  6 +++---
 frontend/js/templates/newCollectionView.ejs  |  2 +-
 frontend/js/views/collectionView.js          |  4 ++--
 6 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/frontend/css/modal.css b/frontend/css/modal.css
index fb1e19ea32..5ee04d8458 100644
--- a/frontend/css/modal.css
+++ b/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;
 }
 
diff --git a/frontend/js/collections/arangoCollections.js b/frontend/js/collections/arangoCollections.js
index 9872f4bd09..7a5d24d645 100644
--- a/frontend/js/collections/arangoCollections.js
+++ b/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);
diff --git a/frontend/js/routers/router.js b/frontend/js/routers/router.js
index c110922417..4b69810efe 100644
--- a/frontend/js/routers/router.js
+++ b/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) {
-        this.collectionView = new window.collectionView({
-          colId: colid,
-          model: arangoCollection
-        });
+      if (!window.collectionView) {
       }
       else {
-        this.collectionView.options.colId = colid;
       }
-      this.collectionView.render();
+      window.collectionView.options.colId = colid;
+      window.collectionView.render();
     },
     newCollection: function() {
       if (!this.newCollectionView) {
diff --git a/frontend/js/templates/collectionView.ejs b/frontend/js/templates/collectionView.ejs
index 0fc543283b..dd19c844ab 100644
--- a/frontend/js/templates/collectionView.ejs
+++ b/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="save-modified-collection" class="btn btn-success">Save</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 pull-left">Save</button>
   </div>
 </div>
diff --git a/frontend/js/templates/newCollectionView.ejs b/frontend/js/templates/newCollectionView.ejs
index 92206df546..59e6528797 100644
--- a/frontend/js/templates/newCollectionView.ejs
+++ b/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>
diff --git a/frontend/js/views/collectionView.js b/frontend/js/views/collectionView.js
index 366aa6de4c..44408e9f29 100644
--- a/frontend/js/views/collectionView.js
+++ b/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);
     }