Merge pull request #20 from dallonf/master

Latest version of dashboard

dashboard/index.html

@@ -53,7 +53,7 @@
         <h3>Resources</h3>
         <ul id="resource-list" class="component-list" style="display: none;">
         </ul>
-        <div id="resource-list-empty" class="well" style="display: none;">
+        <div id="resource-list-empty" class="component-list-empty well" style="display: none;">
           <h4>Welcome to your Deployd app</h4>
           <p>
             <i class="icon-white icon-arrow-left"></i>&nbsp;
@@ -99,7 +99,7 @@
       <div class="main-area vertical-split">
         <div class="top-panel">
           <div class="split-panel">
-            <div id="property-list-cont" class="well">
+            <div id="property-list-cont" class="panel well">
               <h3>
                 <div>
                   Properties
@@ -124,10 +124,18 @@
                   </li>
                 <% } %>
               </ul>
+              <div id="property-list-empty" class="component-list-empty well">
+                <h4>New collection</h4>
+                <p>
+                  <i class="icon-white icon-arrow-left"></i>&nbsp;
+                  Build your collection with these properties.<br />
+                  <div class="placeholder">Drag one here to get started!</div>
+                </p>  
+              </div>
             </div>
           </div>
           <div class="split-panel">
-            <div id="events-panel" class="well">
+            <div id="events-panel" class="panel well">
 
             </div>
           </div>
@@ -209,8 +217,6 @@
     <span class="code path"><%- resource.path %></span>
   <% } %>
   <div class="pull-right">
-    <a class="edit-btn" href="#">edit</a>
-    &nbsp;
     <a href="#" class="rename-btn">rename</a>
     &nbsp;
     <a href="#" class="delete-btn">delete</a>

dashboard/js/app.js

@@ -481,6 +481,10 @@ Backbone.Utils.toJSONDictionary = function(json, options) {
   return result;
 };
 
+Backbone.Utils.cancelEvent = function(e) {
+  return false;
+};
+
 function isArray(o) {
   return Object.prototype.toString.call(o) === '[object Array]';
 }
@@ -651,9 +655,8 @@ module.exports = function() {
 			$bottom.outerHeight(totalHeight - y - dividerHeight);
 			$divider.css('top', y);
 			
-			
   		// fill panels
-  		$('.main-area .well').height($top.innerHeight() - 44);
+  		$('.main-area .panel').height($top.innerHeight() - 44);
 	}
 		
 
@@ -990,7 +993,6 @@ var ResourceListView = module.exports = Backbone.View.extend({
 
       receive: _.bind(function() {
         if ($(this.el).is(':visible')) {
-          console.log('receive');
           var $newItem = $($(this.el).data().sortable.currentItem);
           var index = $(this.el).children(':not(.placeholder)').index($newItem);
           this.onReceiveComponent($newItem, index);
@@ -1139,13 +1141,11 @@ var ResourceView = module.exports = Backbone.View.extend({
   
   events: {
     'click .delete-btn': 'delete',
-    'click .edit-btn': 'gotoDetail',
-    'dblclick .header': 'gotoDetail',
-    'dblclick .path': 'activate',
+    'click .header': 'onClickHeader',
+    'click .path': 'activate',
     'click .rename-btn': 'activate',
     'click .cancel-btn': 'deactivate',
     'click .save-btn': 'save',
-    'click input[name="path"]': 'onFocus',
     'keypress input[name="path"]': 'onKeypress',
     'keyup input[name="path"]': 'onKeyup'
   },
@@ -1222,8 +1222,22 @@ var ResourceView = module.exports = Backbone.View.extend({
     return false;
   },
 
+  onClickHeader: function(e) {
+    console.log($(e.target));
+    if ($(e.target).hasClass('header')) {
+      if (this.model.get('c_active')) {
+        this.deactivate();
+      } else {
+        this.gotoDetail();
+      }
+      return false;
+    } else {
+      this.onFocus(e);
+    }
+  },
+
   onFocus: function(e) {
-    $(e.currentTarget).focus();
+    $(e.target).focus();
   },
 
   onKeypress: function(e) {
@@ -1479,6 +1493,7 @@ var PropertyView = require('./property-view');
 
 var PropertyListView = module.exports = Backbone.View.extend({
   el: '#property-list',
+  emptyEl: '#property-list-empty',
 
   initialize: function() {
     this.parentView = this.options.parentView;
@@ -1498,9 +1513,26 @@ var PropertyListView = module.exports = Backbone.View.extend({
       items: '> li:not(.locked)',
       distance: 10,
 
-      receive: _.bind(this.onReceiveItem, this),
+      receive: _.bind(function() {
+        if ($(this.el).is(':visible')) {
+          var $newItem = $($(this.el).data().sortable.currentItem);
+          var index = $(this.el).children(':not(.placeholder, .locked)').index($newItem); 
+          this.onReceiveItem($newItem, index);
+        }
+      }, this),
       update: _.bind(this.updateOrder, this)
     });
+
+    $('.placeholder', this.emptyEl).droppable({
+      hoverClass: 'highlight',
+
+      drop: _.bind(function(event, ui) {
+        if (this.collection.length === 0) {
+          var $newItem = $(ui.helper);
+          this.onReceiveItem($newItem);
+        }
+      }, this)
+    });
   },
 
   addItem: function(type, index) {
@@ -1536,21 +1568,28 @@ var PropertyListView = module.exports = Backbone.View.extend({
       subView.destroy();
     });
     $(self.el).children(':not(.locked)').remove();
-    self.subViews = self.collection.map(function(property) {
-      var view = new PropertyView({model: property, parentView: self});
-      $(self.el).append(view.el);
-      view.render();
-      return view;
-    });    
 
-    if ($focus) {
-      self.$('input[name="name"][value="' + focusName + '"]').focus();
+    if (self.collection.length) {
+      $(self.el).show();
+      $(self.emptyEl).hide();
+      self.subViews = self.collection.map(function(property) {
+        var view = new PropertyView({model: property, parentView: self});
+        $(self.el).append(view.el);
+        view.render();
+        return view;
+      });    
+
+      if ($focus) {
+        self.$('input[name="name"][value="' + focusName + '"]').focus();
+      }
+    } else {
+      $(self.el).hide();
+      $(self.emptyEl).show();
     }
   },
 
-  onReceiveItem: function() {
-    var $newItem = $($(this.el).data().sortable.currentItem);
-    var index = $(this.el).children(':not(.placeholder, .locked)').index($newItem);  
+  onReceiveItem: function($newItem, index) {
+    index = 0 || index;
     var typeCid = $newItem.attr('data-cid');
     var type = this.parentView.propertyTypes.getByCid(typeCid);
 

dashboard/stylesheets/style.css

@@ -654,7 +654,7 @@ p a{text-decoration:underline;}
 .ide-container .component-type-sidebar .component-type-list{margin:0;list-style:none;}.ide-container .component-type-sidebar .component-type-list li.component-type-item{width:auto;background:#200200;}.ide-container .component-type-sidebar .component-type-list li.component-type-item:hover{background:#060000;}
 li.component-type-item{list-style:none;padding:10px;height:19px;width:180px;background:#060000;margin-bottom:4px;border-radius:3px;cursor:move;}
 .header-offset{padding-bottom:38px;}
-#resource-list-empty{margin:60px;}
+.component-list-empty{margin:60px;}
 .ide-container .main-area{position:absolute;right:0;top:0;left:260px;bottom:0;}.ide-container .main-area.mid{right:260px;}
 .ide-container .main-area.vertical-split .top-panel,.ide-container .main-area.vertical-split .bottom-panel{position:absolute;overflow-y:auto;left:0;right:0;}
 .ide-container .main-area.vertical-split .top-panel{top:0;overflow-y:hidden;}